RPGJS v4 Documentation

Appearance

On this page

Summary

hooks ​

WARNING

Stability: 1 - Experimental This feature is subject to change, and is gated by a command line flag. It may change or be removed in future versions.

  • Since: 4.0.0
  • Property: hooks
  • Type: { player: string[], engine: string[] }
  • Optional: true
  • Example:
ts
import { RpgClient, RpgModule } from '@rpgjs/client'

@RpgModule<RpgClient>({
    hooks: {
       player: ['onAuth']
   }
})
class RpgClientEngine { }

Emit the hook:

ts
client.module.emit('client.player.onAuth', sprite)

And listen to the hook:

ts
import { type RpgClientEngineHooks, RpgSprite } from '@rpgjs/client'

const sprite: RpgSpriteHooks = {
   onAuth(player: RpgSprite) {
      console.log('player is authenticated') 
  }
}
  • Usage:

Add hooks to the player or engine. All modules can listen to the hook

imports ​

  • Property: imports
  • Type: { client: null | Function, server: null | Function }[]
  • Optional: true
  • Usage:

Adding sub-modules

engine ​

Object containing the hooks concerning the engine

ts
import { RpgClientEngine, RpgClientEngineHooks, RpgModule, RpgClient } from '@rpgjs/client'

const engine: RpgClientEngineHooks = {
     onConnected(engine: RpgClientEngine) {
         console.log('client is connected')
     }
}

@RpgModule<RpgClient>({
     engine
})
class RpgClientModule {}

spritesheets ​

  • Property: spritesheets
  • Type: Array
  • Optional: true
  • Usage:

Array containing the list of spritesheets An element contains a class with the @Spritesheet decorator

ts
import { Spritesheet, Animation, Direction, RpgClient, RpgModule } from '@rpgjs/client'

@Spritesheet({
     id: 'chest',
     image: require('./assets/chest.png'),
     // other options
})
class Chest  { }

@RpgModule<RpgClient>({
     spritesheets: [
         Chest
     ]
})
class RpgClientEngine {}

Guide: Create Sprite

gui ​

  • Property: gui
  • Type: Array
  • Optional: true
  • Usage:

Array containing the list of VueJS components

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

const component = {
     name: 'my-gui',
     template: `
         <div>
             Component
         </div>
     `
}

@RpgModule<RpgClient>({
     gui: [
         component
     ]
})
class RpgClientEngine {}

Guide: Create GUI

sounds ​

  • Property: sounds
  • Type: Array
  • Optional: true
  • Usage:

Array containing the list of sounds An element contains a class with the @Sound decorator

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

@Sound({
     sounds: {
         town: require('./assets/Town_Theme.ogg')
     }
})
class Sounds {}

@RpgModule<RpgClient>({
     sounds: [ Sounds ]
})
class RpgClientEngine {}

sprite ​

  • Property: sprite
  • Type: RpgSpriteHooks
  • Optional: true
  • Usage:

Give the RpgSprite class. A Sprite represents a player or an event

ts
import { RpgSprite, RpgSpriteHooks, RpgClient, RpgModule } from '@rpgjs/client'

export const sprite: RpgSpriteHooks = {
   onInit(sprite: RpgSprite) {}
}

@RpgModule<RpgClient>({
     sprite
})
class RpgClientEngine {}

scenes ​

  • Property: scenes
  • Type: [sceneName: string]: RpgSceneMapHooks
  • Optional: true
  • Usage:

Reference the scenes of the game. Here you can put your own class that inherits RpgSceneMap

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

export const sceneMap: RpgSceneMapHooks = {
    
}

@RpgModule<RpgClient>({
     scenes: {
         // If you put the RpgSceneMap scene, Thhe key is called mandatory `map`
         map: sceneMap
     }
})
class RpgClientEngine {}