# 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()
})
- Use
entryPoint
to create an instance ofRpgClientEngine
. - 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
# @RpgClient decorator
# 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 {}
# 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 {}
# 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 {}