RPGJS v4 Documentation

Appearance

On this page

AI ChangeLog ​

Version v4.1.0 ​

Version 4.0.0 ​

  • Remove : Deletes the event from the map (in shared or scenario mode)
  • hooks: Add hooks to the player or engine. All modules can listen to the hook
  • events: Array of all events. Each element is an RpgEvent class Events can be used by placing a shape with the name of the event on Tiled Map Editor
  • Get maps: Returns an array of RpgClassMap objects that represent maps with static properties.
  • Update map: Update the map with new data. Data can be a string (TMX content) or an object (parsed TMX content) New Map data will be sent to all players on the map
  • Update tileset: Update tileset with new data. Data can be a string (TSX content) or an object (TiledTileset) Cache will be removed for this tileset New tileset data will be sent to all players on the map Warning: tileset is not updated for all maps, only for the current map
  • Remove map: Remove the map from the server. If there are still players on the map, an error will be thrown Not delete the map file, only in memory
  • new Timeline(options?): Creates a new instance of the Timeline class, which allows for complex animations and control over keyframes.
  • hooks: Add hooks to the player or engine. All modules can listen to the hook
  • Game Type: Finds the game mode from the environment variables sent by the compiler. Can be used in menus to display options according to type
  • Game is dev mode: Find out if the game is in production or not, from the environment variables sent by the compiler.
  • Server URL: Get the server url. This is the url for the websocket

To customize the URL, use the matchMakerService configuration

  • Wait a moment: - onAuthSuccess: This method is called at the end of authentication, when everything has worked.
  • canAuth: this method provides an additional check before loading the data
  • onAuthFailed: This method is called when authentication fails for the player.

Version 3.3.0 ​

Example:

ts
import { Components } from '@rpgjs/server'
Components.bar('hp', 'param.maxHp', {
   bgColor: '#ab0606'
})

For text, you can use the following variables:

  • {$current} current value
  • {$max} maximum value
  • {$percent} percentage

Example:

ts
import { Components } from '@rpgjs/server'
Components.bar('hp', 'param.maxHp', {
  bgColor: '#ab0606'
}, 'HP: {$current}/{$max}')

and you can also use the variables of player:

ts
import { Components } from '@rpgjs/server'
Components.bar('hp', 'param.maxHp', {
 bgColor: '#ab0606'
}, 'HP: {$current}/{$max} - {name}') // HP: 100/100 - John

Example:

ts
import { Components } from '@rpgjs/server'
Components.text('Hello World')

Example with variable:

ts
import { Components } from '@rpgjs/server'
Components.text('{name}')

Other example with position:

ts
import { Components } from '@rpgjs/server'
Components.text('X: {position.x} Y: {position.y}')

With style:

ts
import { Components } from '@rpgjs/server'
Components.text('Hello World', {
     fill: '#ffffff',
     fontSize: 20,
     fontFamily: 'Arial',
     stroke: '#000000',
     fontStyle: 'italic',
     fontWeight: 'bold'
})

Example:

ts
import { Components } from '@rpgjs/server'
Components.shape({
     fill: '#ffffff',
     type: 'circle',
     radius: 10
})

You can use parameters:

ts
import { Components } from '@rpgjs/server'
Components.shape({
     fill: '#ffffff',
     type: 'circle',
     radius: 'hp'
})

Here, the radius will be the same as the hp value

  • Image Component: Put the link to an image or the identifier of an image (if the spritesheet exists)

Example:

ts
import { Components } from '@rpgjs/server'
Components.image('mygraphic.png')

Example:

ts
import { Components } from '@rpgjs/server'
Components.tile(3)

For use layout and options, see setComponentsTop

View setComponentsTop for more information

Be careful, because if you assign, it deletes the graphics and if the lines are superimposed (unlike the other locations)

  • Set Components Top: Add components to the top of the graphic. e.g. text, life bar etc. The block will be centred The first array corresponds to the rows, and the nested table to the array in the row

Example:

ts
import { Components } from '@rpgjs/server'

player.setComponentsTop([
     [Components.text('Hello World')],
     [Components.hpBar()]
]) // 2 lines with 1 component each

or

ts
import { Components } from '@rpgjs/server'

player.setComponentsTop([
     [Components.text('Hello World'), Components.hpBar()]
]) // 1 line with 2 components

You can be faster if you only have lines

ts
player.setComponentsTop([
     Components.text('Hello World'),
     Components.hpBar()
]) // 2 lines with 1 component each

or one component:

ts
player.setComponentsTop(Components.text('Hello World')) // 1 line with 1 component

You can add options to manage the style

ts
player.setComponentsTop([
     Components.text('Hello World'),
     Components.hpBar()
], {
     width: 100,
     height: 20,
     marginTop: 10,
})

View setComponentsTop for more information

View setComponentsTop for more information

View setComponentsTop for more information

Version 3.2.0 ​

  • Move To: Move the event to another event, a player, a shape or a specific position. The event will avoid obstacles, but you can tell if it is stuck or has completed its path
  • Get Collision of shapes: Recovers all the colliding shapes of the current player
  • Get Collision of shapes: Recovers all the colliding shapes of the current player
  • Stop Move To: Stops the movement of the player who moves towards his target
  • Create a temporary and moving hitbox: Allows to create a temporary hitbox on the map that can have a movement For example, you can use it to explode a bomb and find all the affected players, or during a sword strike, you can create a moving hitbox and find the affected players again- spriteRealSize: Defines the actual size of the sprite that is inside a larger rectangle. For example, if the texture rectangle is 192x192 while the character, which is in the center, is only 64x64 then set spriteRealSize: 64. This way the character will be well positioned in relation to the animations that have a different rectangle

You can also put spriteRealSize: { width: 64, height: 64 } but be aware that the width is not concerned because it will always be centered while the height depends on the hitbox

Version 3.1.0 ​

  • Camera Follow: Sends the client which event or player the camera should follow. You can set options to perform a motion animation
  • lowMemory: Decreases the RAM of the map. In this case, some instructions will be different.

map.getTileByIndex() will not return all tiles of an index but only the tile of the highest layer

You can also use the low-memory property in Tiled maps

Version 3.0.2 ​

  • maxFps: The maximum number of fps for the rendering
  • serverFps: Put the number of FPS that the server processes. It allows to synchronize the client rendering with the server. The default value is 60

Version 3.0.0-beta.9 ​

  • props: Set custom properties on the player. Several interests:
  1. The property is shared with the client
  2. If you save with player.save(), the property will be saved to be reloaded later
  3. If you use horizontal scaling, the property will be kept in memory if the player changes the map and this map is on another server

Example:

ts
import { RpgPlayerHooks } from '@rpgjs/server'

declare module '@rpgjs/server' {
 export interface RpgPlayer {
     nbWood: number
 }
}

export const player: RpgPlayerHooks = {
 props: {
     nbWood: Number
 }
}

This is a simple example. Let's say that the player can have a number of harvested woods, then

  1. you must specify the type for Typescript
  2. Add the property in props

You can also set up with this object:

{
            $default: <any> (undefined by default), 
            $syncWithClient: <boolean> (true by default),
            $permanent: <boolean> (true by default)
        }
        ```

- Indicate if the property should be shared with the client

Example:

```ts
export const player: RpgPlayerHooks = {
 props: {
     secretProp: {
         $syncWithClient: false
     }
 }
}
  • Indicate if the property should be registered in a database. If the data is just temporary to use on the current map:
ts
export const player: RpgPlayerHooks = {
 props: {
     tmpProp: {
         $permanent: false
     }
 }
}

Version 3.0.0-beta.8 ​

Maximum maps in world: 500

Note, that if the map already exists (i.e. you have already defined an RpgMap), the world will retrieve the already existing map. Otherwise it will create a new map

Note, that if the map already exists (i.e. you have already defined an RpgMap), the world will retrieve the already existing map. Otherwise it will create a new map

Version 3.0.0-beta.7 ​

Version 3.0.0-beta.5 ​

If you don't specify the players as parameters, it will display the GUI of the instance But you can specify which GUIs to display by specifying the players as the first parameter

Version 3.0.0-beta.4 ​

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

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
  }
  • Get Tile: 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
  }

Since version 3.0.0-beta.8, you can just pass the path to the file. The identifier will then be the name of the file

  • Remove Event: Removes an event from the map. Returns false if the event is not found

Deletion of an event forced to be performed at the end of several aynschronous notions

ts
@EventData({
 name: 'EV-1'
})
class MyEvent extends RpgEvent {
 onAction() {
     console.log('ok')
 }
} 

map.createDynamicEvent({
     x: 100,
     y: 100,
     event: MyEvent
})

You can also put an array of objects to create several events at once

Version 3.0.0-beta.3 ​

  • Attach Shape: 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
})

Object:

  • (number) x: Position X
  • (number) y: Position Y
  • (number) width: Width
  • (number) height: Height
  • (object) properties (optionnal):
    • (number) z: Position Z
    • (hexadecimal) color: Color (shared with client)
    • (boolean) collision
    • You can your own properties
  • Add Spritesheet: Adds Spritesheet classes
  • Add Sound: Adds Sound classes

Version 3.0.0-alpha.9 ​

  • Play Sound: 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)