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:

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

TIP

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

TIP

You can put rectangles, circles and polygons. You should know that

• circles do not use height. The radius is the width divided by 2
• polygons use performance for collisions, don't overuse it

3. Go to the file: src/modules/main/server/player.ts

import { RpgPlayer, RpgShape, RpgPlayerHooks } 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

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'

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