# Create Shape

# Prerequisites

  1. You must have created a map and added in your game
  2. Have RPGJS version >=3.beta.3

# Why ?

A shape is an invisible zone on the map (it can be made visible, but not too interesting), which allows to trigger actions if you enter or leave this zone. The shape can be fixed or it can move on the map. It is also possible to attach an area to a player/event. For example, create a vision system

# Fixed Shape

  1. Open a map with Tiled Map Editor and go to the Object layer:

layers

  1. Click on Insert Rectangle and place the shape on the map

add-shape

TIP

Set the collision property to true to put a collision on the shape. View Define collision

  1. Go to the file: src/modules/main/server/player.ts
import { RpgPlayer, RpgShape } from '@rpgjs/server'

export const player: RpgPlayerHooks = {
    onInShape(player: RpgPlayer, shape: RpgShape) {
        console.log('in', player.name, shape.name)
    },
    onOutShape(player: RpgPlayer, shape: RpgShape) {
        console.log('out', player.name, shape.name)
    }
}

This way, you can know who is entering or leaving the shape

# Create Dynamic Shape in map

import { RpgPlayer, RpgMap, RpgPlayerHooks, RpgShape } from '@rpgjs/server'

export const player: RpgPlayerHooks = {
    onJoinMap(player: RpgPlayer, map: RpgMap) {
        const shape: RpgShape = map.createShape({ 
            x: 10,
            y: 10,
            width: 100,
            height: 100,
            properties: {
                color: '0xDE3249'
            }
        })
    },
    onInShape(player: RpgPlayer, shape: RpgShape) {
        console.log('in', player.name, shape.name)
    },
    onOutShape(player: RpgPlayer, shape: RpgShape) {
        console.log('out', player.name, shape.name)
    }
}

Use the createShape method on the map. Here the shape is shared with the client. So, we can set a colour to see it on the client side

# Attaching a shape to a player (e.g. creating a vision)

We want to create a form that remains attached to the player. This shape is centred. We can know who enters or leaves the shape

attach

The red square is invisible in your project. We have displayed it here to show the purpose

In src/modules/main/server/player.ts

import { RpgPlayer, RpgMap, RpgPlayerHooks, RpgShape, ShapePositioning } from '@rpgjs/server'
import { EmotionBubble } from '@rpgjs/plugin-emotion-bubbles'

export const player: RpgPlayerHooks = {
    onJoinMap(player: RpgPlayer, map: RpgMap) {
        player.attachShape({
            height: 100,
            width: 100,
            positioning: ShapePositioning.Center
        })
    },
    onInShape(player: RpgPlayer, shape: RpgShape) {
        console.log('in', player.name, shape.name)
    },
    onOutShape(player: RpgPlayer, shape: RpgShape) {
        console.log('out', player.name, shape.name)
    }
}

Here we position a shape of 100px width and height on the player