# 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


# 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, RpgSprite } from '@rpgjs/client'

 @RpgModule<RpgClient>({ 
     scenes: {
         map: {
             onAfterLoading(scene: RpgSceneMap, sprite: RpgSprite) {
               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, RpgSprite } from '@rpgjs/client'


@RpgModule<RpgClient>({ 
     scenes: {
         map: {
             onAfterLoading(scene: RpgSceneMap, sprite: RpgSprite) {
               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

Get the tilemap


# viewport

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