RpgScene ​

RpgScene Hooks ​

Put the created class in the RpgClient decorator

Example:

import { RpgSceneMapHooks, RpgSceneMap } from '@rpgjs/client'

const sceneMap: RpgSceneMapHooks = {
    onAfterLoading(scene: RpgSceneMap) {

    }
}

onAddSprite ​

• Property: onAddSprite
• Type: (scene: RpgScene, sprite: RpgComponent) => any
• Optional: true
• Usage:

a sprite has been added on the scene

onRemoveSprite ​

• Property: onRemoveSprite
• Type: (scene: RpgScene, sprite: RpgSprite) => any
• Optional: true
• Usage:

a sprite has been removed on the scene

onBeforeLoading ​

• Property: onBeforeLoading
• Type: (scene: RpgScene) => any
• Optional: true
• Usage:

Before the scene is loaded

onAfterLoading ​

• Property: onAfterLoading
• Type: (scene: RpgScene) => any
• Optional: true
• Usage:

When the scene is loaded (Image of the loaded tileset, drawing completed and viewport assigned)

onChanges ​

• Property: onChanges
• Type: (scene: RpgScene, obj: { data: any, partial: any }) => any
• Optional: true
• Usage:

When server data changes on the map (events, players, or other)

onDraw ​

• Property: onDraw
• Type: (scene: RpgScene, t: number) => any
• Optional: true
• Usage:

the scene is drawn

onMapLoading ​

• Property: onMapLoading
• Type: (scene: RpgSceneMap, loader: PIXI.Loader) => any
• Optional: true
• Usage:

The map and resources are being loaded

RpgScene ​

objectsMoving ​

• Since: v4.1.0
• Property: objectsMoving
• Type: Observable<{ [key: string]: object }>
• Optional: true
• Read Only
• Usage:

Listen to the movement of objects on stage

valuesChange ​

• Property: valuesChange
• Type: Observable<{ data: object, partial: object }>
• Optional: true
• Read Only
• Usage:

Listen to all the synchronized values of the scene with the server

import { RpgClient, RpgModule, RpgSceneMap } from '@rpgjs/client'

 @RpgModule<RpgClient>({ 
            scenes: {
                map: {
                    onAfterLoading(scene: RpgSceneMap) {
                      scene.valuesChange.subscribe((obj) => {
                         console.log(obj.data, obj.partial)
                      })
                    }
                }
            }
        })
        export default class RpgClientModuleEngine {}

• data represents all the current data of the scene (users, events and others)
• partial represents only the data that has changed on the scene

In the class, you can also use the onChanges hook

Show Animation ​

• Method: scene.showAnimation(object)
• Arguments:
  • {object} object. (Optional: false)
• Return: Animation
• Usage:

Display an animation on the scene

The object is the following:

• graphic: Spritesheet id
• animationName: The name of the animation
• attachTo: Define a sprite. The animation will follow this sprite (optional)
• x: Position X (0 by default)
• y: Position Y (0 by default)
• loop: Display the animation in a loop (false by default)

import { RpgClient, RpgModule, RpgSceneMap } from '@rpgjs/client'


@RpgModule<RpgClient>({ 
            scenes: {
                map: {
                    onAfterLoading(scene: RpgSceneMap) {
                        const animation = scene.showAnimation({
                            graphic: 'my-spritesheet',
                            animationName: 'my-anim'
                        })
                    }
                }
            }
        })
        export default class RpgClientModuleEngine {}

The return is an animation containing two methods:

• play(): Play the animation (Already the case when calling the method)
• stop(): Stop the animation

They have a hook:

onFinish: Triggered when the animation is finished

animation.onFinish = () => {
     console.log('finish !')
}

Get Sprite ​

• Method: scene.getSprite(id)
• Arguments:
  • {string} id. (Optional: false)
• Return: RpgSprite | undefined
• Usage:

Retrieve a sprite according to its identifier

Get Current Player ​

• Method: scene.getCurrentPlayer()
• Return: RpgSprite | undefined
• Usage:

Retrieve a sprite that the player controls

RpgSceneMap ​

Layers of map ​

• Property: layers
• Type: object[]
• Optional: true
• Read Only
• Usage:

Get Shapes ​

• Method: map.getShapes()
• Return: RpgShape[]
• Usage:

Return all shapes on the map

Get Shape by name ​

• Method: map.getShape(name)
• Arguments:
  • {string} name. Name of shape (Optional: false)
• Return: RpgShape[] | undefined
• Usage:

Returns a shape by its name. Returns undefined is nothing is found

tilemap ​

• Property: tilemap
• Type: PIXI.Container
• Optional: true
• Usage:

Get the tilemap

viewport ​

• Property: viewport
• Type: PIXI.Viewport
• Optional: false
• Usage:

The viewport of the map

It automatically follows the sprite representing the player but you can attach it to something else

Do not change the size of the viewport

Listen mouse event ​

• Since: 3.0.0-beta.4
• Method: on(eventName,callback)
• Arguments:
  • {string} eventName. Name of the event (see PIXI documentation). Name often used in the codes
• click
• mousedown
• mouseup
• mousemove
• pointerdown
• pointermove
• pointerup
• (etc...) (Optional: false)
  • {(position: { x: number, y: number }, ev?: PIXI.InteractionEvent ) => any} callback. (Optional: false)
• Return: void
• Example:

sceneMap.on('pointerdown', (position) => {
     console.log(position)
})

• Usage:

Listen to the events of the smile on the stage

Data of map ​

• Property: data
• Type: object
• Optional: true
• Read Only
• Usage:

Width of the map in pixels ​

• Property: widthPx
• Type: number
• Optional: true
• Read Only
• Usage:

Height of the map in pixels ​

• Property: heightPx
• Type: number
• Optional: true
• Read Only
• Usage:

The depth of the map in pixels (this is the height of a tile 😉) ​

• Property: map.zTileHeight
• Type: number
• Optional: false
• Read Only
• Usage:

Get Layer by name ​

• Method: map.getLayerByName(name)
• Arguments:
  • {string} name. layer name (Optional: false)
• Return: LayerInfo | undefined
• Example:

const tiles = map.getLayerByName(0, 0)

• Usage:

Find a layer by name. Returns undefined is the layer is not found

Get index of tile ​

• Method: map.getTileIndex(x,y)
• Arguments:
  • {number} x. Position X (Optional: false)
  • {number} x. Position Y (Optional: false)
• Return: number
• Usage:

Get the tile index on the tileset

Get origin position of tile ​

• Method: map.getTileOriginPosition(x,y)
• Arguments:
  • {number} x. Position X (Optional: false)
  • {number} x. Position Y (Optional: false)
• Return: {x: number, y: number }
• Example:

// If the size of a tile is 32x32px
const position = map.getTileOriginPosition(35, 12)
console.log(position) // { x: 32, y: 0 }

• Usage:

Find the point of origin (top left) of a tile. Of course, its position depends on the size of the tile

Get tile by position ​

• Method: map.getTileByPosition(x,y)
• Arguments:
  • {number} x. Position X (Optional: false)
  • {number} x. Position Y (Optional: false)
• Return: TileInfo
• Example:

const tiles = map.getTileByPosition(0, 0)

• Usage:

Recover tiles according to a position

Get tile by index ​

• Method: map.getTileByIndex(tileIndex)
• Arguments:
  • {number} tileIndex. tile index (Optional: false)
• Return: TileInfo
• Example:

const index = map.getTileIndex(0, 0)
const tiles = map.getTileByIndex(index)

• Usage:

Retrieves tiles according to its index