RpgClient ​

RpgClient Entry Point ​

You need to create a class that inherits RpgClientEngine

import { entryPoint } from '@rpgjs/client'
import modules from './to/path/modules'
import io from 'socket.io-client'

document.addEventListener('DOMContentLoaded', () => { 
    entryPoint(modules, { io }).start()
})

1. Use entryPoint to create an instance of RpgClientEngine.
2. Be sure to start the client part when the DOM is loaded.

io ​

• Property: io
• Type: SocketIO or other
• Optional: false
• Usage:

Represents socket io client but you can put something else (which is the same schema as socket io)

canvas ​

• Property: canvas
• Type: object
• Optional: true
• Usage:

Canvas Options

• {boolean} [options.transparent=false] - If the render view is transparent, default false
• {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for resolutions other than 1
• {boolean} [options.antialias=false] - sets antialias
• {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The resolution of the renderer retina would be 2.
• {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context.
• {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or not before the new render pass.
• {number} [options.backgroundColor=0x000000] - The background color of the rendered area (shown if not transparent).

selector ​

• Property: selector
• Type: string
• Optional: true
• Usage:

The element selector that will display the canvas. By default, #rpg

selectorGui ​

• Property: selectorGui
• Type: string
• Optional: true
• Usage:

The selector that corresponds to the GUIs. By default, #gui If you didn't put a GUI element in the div, an element will be automatically created.

selectorCanvas ​

• Property: selectorCanvas
• Type: string
• Optional: true
• Usage:

The selector that corresponds to the element contains canvas. By default, #canvas If you didn't put element in the main div, an element will be automatically created.

globalConfig ​

• Property: globalConfig
• Type: object
• Optional: true
• Usage:

The general configurations of the game. For example, default keyboard keys, cursor noise. This is information that external modules can reuse

maxFps ​

• Since: 3.0.2
• Property: maxFps
• Type: object
• Optional: true
• Usage:

The maximum number of fps for the rendering

serverFps ​

• Since: 3.0.2
• Property: serverFps
• Type: object
• Optional: true
• Usage:

Put the number of FPS that the server processes. It allows to synchronize the client rendering with the server. The default value is 60

@RpgClient decorator ​

hooks ​

• Since: 4.0.0
• Property: hooks
• Type: { player: string[], engine: string[] }
• Optional: true
• Example:

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

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

Emit the hook:

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

And listen to the hook:

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 ​

• Property: engine
• Type: RpgClientEngineHooks
• Optional: true
• Usage:

Object containing the hooks concerning the engine

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

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

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

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

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

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 {}