Appearance
Common Commands
Summary
- Server Instance
- Read/Give a name
- Change Map
- Create Dynamic Event
- Teleport on the map
- Load progress
- Save progress
- Run Sync Changes
- Get Current Map
- Show Animation
- Camera Follow
- Emit to client
- Listen to data from the client
- Listen one-time to data from the client
- Removes all listeners of the client
- Play Sound
- Get/Set position
- Get Collision of shapes
- Get Collision of tiles
- Get Collision of other players/events
- Set Sizes
- Set Hitbox
- Get Tile
- Attach Shape
- Get Shapes
- Get In-Shapes
- Get Direction
- Change direction
Server Instance
- Property:
player.server
- Type:
RpgServerEngine
- Optional:
false
- Usage:
ts
retreive the server instance
Read/Give a name
- Property:
player.name
- Type:
string
- Optional:
false
- Usage:
ts
player.name = 'Link'
Change Map
- Method:
player.changeMap(mapId,positions)
- Arguments:
- {
string
}mapId
. (Optional:false
) - {
{x: number, y: number, z?: number} | string
}positions
. (Optional:true
)
- {
- Return:
Promise< RpgMap | null>
if map not exists - Usage:
Change your map. Indicate the positions to put the player at a place on the map
The map must be added to RpgServer beforehand. Guide: Create Map
You don't have to give positions but you can put a starting position in the TMX file. Guide: Start Position
Create Dynamic Event
- Since: 3.0.0-beta.4
- Method:
player.createDynamicEvent(eventObj
- Arguments:
- {
{ x: number, y: number, z?: number, event: eventClass }
}eventsList
. (Optional:true
)
- {
- Return:
{ [eventId: string]: RpgEvent }
- Usage:
Dynamically create an event in Scenario mode on the current map
ts
@EventData({
name: 'EV-1'
})
class MyEvent extends RpgEvent {
onAction() {
console.log('ok')
}
}
player.createDynamicEvent({
x: 100,
y: 100,
event: MyEvent
})
You can also put an array of objects to create several events at once
Teleport on the map
- Method:
player.teleport(positions)
- Arguments:
- {
{x: number, y: number, z?: number} | string
}positions
. (Optional:true
)
- {
- Return:
Promise<{ {x: number, y: number, z: number} }>
- Usage:
Allows to change the positions of the player on the current map. You can put the X and Y positions or the name of the created shape on Tiled Map Editor. If you have several shapes with the same name, one position will be chosen randomly.
ts
player.teleport({ x: 100, y: 500 })
or
ts
player.teleport('my-shape-name')
If no parameter:
ts
player.teleport() // { x: 0, y: 0, z: 0 }
Load progress
- Method:
player.load(json)
- Arguments:
- {
string
}json
. The JSON sent by the method save() (Optional:false
)
- {
- Return:
Promise
RpgMap | null> - Usage:
Load the saved data with the method save() If the player was on a map, it repositions the player on the map.
ts
const json = player.save()
player.load(json)
Save progress
- Method:
player.save()
- Return:
string
- Usage:
Returns a JSON with all the data to keep in memory. Then use the load()
method to load the data
You can also use the JSON.stringify
ts
const json = player.save() // or JSON.stringify(player)
player.load(json)
Run Sync Changes
- Method:
player.syncChanges()
- Return:
void
- Usage:
Run the change detection cycle. Normally, as soon as a hook is called in a class, the cycle is started. But you can start it manually The method calls the onChanges
method on events and synchronizes all map data with the client.
Get Current Map
- Method:
player.getCurrentMap()
- Return:
RpgMap | null
- Usage:
Retrieves data from the current map
returns null if the player is not assigned to a map
Show Animation
- Method:
player.showAnimation(graphic,animationName,replaceGraphic=false)
- Arguments:
- {
string | string[]
}graphic
. spritesheet identifier (Optional:false
) - {
string
}animationName
. Name of the animation in the spritesheet (Optional:false
) - {
boolean
}replaceGraphic
. Replace the event graphic with the animation. After the end of the animation, the original graphic is reapplied (Optional:true
)
- {
- Return:
void
- Usage:
Calls the showAnimation() method on the client side to display an animation on the player You must remember to create the spritesheet beforehand
For this type of spritesheet:
ts
@Spritesheet({
id: 'fire',
image: require('')
textures: {
default: {
animations: [
]
}
}
})
export class FireAnimation {}
Here is the call of the method:
ts
player.showAnimation('fire', 'default')
If you don't want to put an animation on top of the event but replace the event graphic with another one, set true as last parameter. This is useful, if for example, you want to make an animated character (sword stroke when pressing a key) When the animation is finished, the original graphic is displayed again
ts
player.showAnimation('sword_stroke', 'default', true)
Since version 3.0.0-rc, you can define several graphic elements. This allows you to animate them all at once
ts
player.showAnimation(['body', 'sword_stroke'], 'default', true)
TIP
For this to work, the animations must have been previously defined in setGraphic
.
Camera Follow
- Since: 3.1.0
- Method:
player.cameraFollow(otherPlayer,options)
- Arguments:
- {
RpgPlayer | RpgEvent
}otherPlayer
. (Optional:false
) - {
options
}options
. (Optional:false
) - {
object | boolean
}options.smoothMove
. - animate. Set a boolean to use default parameters (Optional:true
) - {
number
}options.smoothMove.time
. - time to animate (Optional:true
) - {
string
}options.smoothMove.ease
. - easing to use. Go to https://easings.net to get function name (Optional:true
)
- {
- Return:
void
- Usage:
Sends the client which event or player the camera should follow. You can set options to perform a motion animation
Emit to client
- Method:
player.emit(key,value)
- Arguments:
- {
string
}key
. (Optional:false
) - {
any
}value
. (Optional:false
)
- {
- Return:
void
- Usage:
Emit data to clients with socket
Listen to data from the client
- Method:
player.on(key,cb)
- Arguments:
- {
string
}key
. (Optional:false
) - {
function
}cb
. (Optional:false
)
- {
- Return:
void
- Usage:
Listen to the data (socket) sent by the client
Listen one-time to data from the client
- Since: 3.0.0-beta.5
- Method:
player.once(key,cb)
- Arguments:
- {
string
}key
. (Optional:false
) - {
function
}cb
. (Optional:false
)
- {
- Return:
void
- Usage:
Adds a one-time listener function for the event named eventName
Removes all listeners of the client
- Since: 3.0.0-beta.5
- Method:
player.off(key)
- Arguments:
- {
string
}key
. (Optional:false
)
- {
- Return:
void
- Usage:
Removes all listeners of the specified eventName.
Play Sound
- Since: 3.0.0-alpha.9
- Method:
player.playSound(soundId,allMap=false)
- Arguments:
- {
string
}soundId
. Sound identifier, defined on the client side (Optional:false
) - {
boolean
}forEveryone
. Indicate if the sound is heard by the players on the map (Optional:true
)
- {
- Return:
void
- Usage:
Allows to play a sound, heard only by the player or by the players of the map
Here is a sound, client side:
ts
import { Sound } from '@rpgjs/client'
@Sound({
id: 'town-music',
sound: require('./sound/town.ogg')
})
export class TownMusic {}
Here is the call of the method, server side:
ts
player.playSound('town-music')
If you want everyone to listen to the sound on the map:
ts
player.playSound('town-music', true)
Get/Set position
- Property:
position
- Type:
{ x: number, y: number, z: number }
- Optional:
false
- Usage:
Get/Set position x, y and z of player
z is the depth layer. By default, its value is 0. Collisions and overlays will be performed with other objects on the same z-position.
Get Collision of shapes
- Since: 3.2.0
- Property:
shapes
- Type:
RpgShape[]
- Optional:
false
- Read Only
- Usage:
Recovers all the colliding shapes of the current player
Get Collision of tiles
- Since: 3.0.0-beta.4
- Property:
tiles
- Type:
TileInfo[]
- Optional:
false
- Read Only
- Usage:
Recovers all the colliding tiles of the current player
Get Collision of other players/events
- Since: 3.0.0-beta.4
- Property:
otherPlayersCollision
- Type:
RpgPlayer | RpgEvent)[]
- Optional:
false
- Read Only
- Usage:
Recovers all other players and events colliding with the current player's hitbox
Set Sizes
- Method:
player.setSizes(key,value)
- Arguments:
- {
{ width: number, height: number, hitbox?: { width: number, height: number } }
}obj
. (Optional:false
)
- {
- Return:
void
- Usage:
Define the size of the player. You can set the hitbox for collisions
ts
player.setSizes({
width: 32,
height: 32
})
and with hitbox:
ts
player.setSizes({
width: 32,
height: 32,
hitbox: {
width: 20,
height: 20
}
})
Set Hitbox
- Method:
player.setHitbox(width,height)
- Arguments:
- {
number
}width
. (Optional:false
) - {
number
}height
. (Optional:false
)
- {
- Return:
void
- Usage:
Define the hitbox of the player.
ts
player.setHitbox(20, 20)
Get Tile
- Since: 3.0.0-beta.4
- Method:
player.getTile(x,y,z?)
- Arguments:
- {
number
}x
. (Optional:false
) - {
number
}y
. (Optional:false
) - {
number
}z
. (Optional:true
)
- {
- Return:
object
- Usage:
Retrieves a tile and checks if the player has a collision
ts
const tileInfo = player.getTile(20, 30)
console.log(tileInfo)
Example of returns:
ts
{
tiles: [
{
id: 0,
terrain: [],
probability: null,
properties: [Object],
animations: [],
objectGroups: [],
image: null,
gid: 1
}
],
hasCollision: false,
isOverlay: undefined,
objectGroups: [],
isClimbable: undefined,
tileIndex: 93
}
Attach Shape
- Since: 3.0.0-beta.3
- Method:
player.attachShape(parameters)
- Arguments:
- {
{ width: number, height: number, positioning?, name?, properties?: object }
}obj
.
- {
- positioning: Indicate where the shape is placed.
- properties: An object in order to retrieve information when interacting with the shape
- name: The name of the shape (Optional:
false
) - Return:
RpgShape
- Usage:
Attach a shape to the player (and allow interaction with it)
ts
import { ShapePositioning } from '@rpgjs/server'
player.attachShape({
width: 100,
height: 100,
positioning: ShapePositioning.Center
})
Get Shapes
- Since: 3.0.0-beta.3
- Method:
player.getShapes()
- Return:
RpgShape[]
- Usage:
Returns all shapes assigned to this player
Get In-Shapes
- Since: 3.0.0-beta.3
- Method:
player.getInShapes()
- Return:
RpgShape[]
- Usage:
Retrieves all shapes where the player is located
Get Direction
- Method:
player.getDirection()
- Return:
Direction | number
- Usage:
Get the current direction.
ts
player.getDirection()
Change direction
- Enum:
string
Tag | Description |
---|---|
Direction.Left | left |
Direction.Right | right |
Direction.Up | up |
Direction.Down | down |
- Method:
player.changeDirection(direction)
- Arguments:
- {
Direction
}direction
. (Optional:false
)
- {
- Return:
boolean
direction has changed - Usage:
Changes the player's direction
ts
import { Direction } from '@rpgjs/server'
player.changeDirection(Direction.Left)