RPGJS v3 Documentation

# 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.

Summary

# 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

Summary

# imports

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

Adding sub-modules

# engine

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

← RpgClientEngine →