AI ChangeLog

Version 3.3.0

• Bar Component: Displays a bar

Example:

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:

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

and you can also use the variables of player:

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

• HP Bar Component: Displays a life bar
• SP Bar Component: Displays a SP bar
• Text Component: Put on the text. You can read the content of a variable with {} format (see example below)

Example:

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

Example with variable:

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

Other example with position:

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

With style:

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

• Shape Component: Add a shape

Example:

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

You can use parameters:

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:

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

• Tile Component: Indicates the tile ID

Example:

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

• Remove Components: Delete components
• Merge Components: Merges components with existing components

For use layout and options, see setComponentsTop

• Set Components Center: Add components to the center of the graphic.

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:

import { Components } from '@rpgjs/server'

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

or

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

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

or one component:

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

You can add options to manage the style

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

• Set Components Bottom: Add components to the bottom of the graphic.

View setComponentsTop for more information

• Set Components Left: Add components to the left of the graphic.

View setComponentsTop for more information

• Set Components Right: Add components to the right of the graphic.

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

• Add Other Client In Map: Create another client, add it to the map and send the information to the first client

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:

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:

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:

export const player: RpgPlayerHooks = {
 props: {
     tmpProp: {
         $permanent: false
     }
 }
}

Version 3.0.0-beta.8

• World X Position:
  Retrieves the X position of the map in the world (0 if no world assigned)
• World Y Position:
  Retrieves the Y position of the map in the world (0 if no world assigned)
• Assign the map to a world: Assign the map to a world
• Remove this map from the world: Remove this map from the world- Get attached World: Recover the world attached to this map (undefined if no world attached)
• Add Map in world: Adding information from the map to the world

Maximum maps in world: 500

• Remove map of the world: Remove map of the world- Retrieve information from the world: Retrieve information from the world
• Retrieves neighboring maps: Retrieves neighboring maps according to positions or direction
• canChangeMap: Allow or not the player to switch maps. nexMap parameter is the retrieved RpgMap class and not the instance
• worldMaps: Loads the content of a .world file from Tiled Map Editor into the map scene

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

• Create worlds dynamically: Loads the content of a .world file from Tiled Map Editor into the map scene

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

• Recover a world: Recover a world
• Delete a world: Delete a world

Version 3.0.0-beta.7

• Get Event: Get Event in current map

Version 3.0.0-beta.5

• View to GUI attached:
  Display the GUI attached to the players

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

• Hide to GUI attached:
  Hide the GUI attached to the players
• Listen one-time to data from the client: Adds a one-time listener function for the event named eventName
• Removes all listeners of the client: Removes all listeners of the specified eventName.
• guiDisplay:
  Display/Hide the GUI attached to this sprite
• width : Get/Set width- height : Get/Set height- tick:
  Listen to each frame
• Next Frame: Display the next frame. Useful for unit tests

Version 3.0.0-beta.4

• Create Dynamic Event: Dynamically create an event in Scenario mode on the current map

@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

• Remove Event: Removes an event from the map (Scenario Mode). Returns false if the event is not found- Get Collision of tiles:

Recovers all the colliding tiles of the current player

• Get Collision of tiles:

Recovers all the colliding tiles of the current player

• Get Collision of other players/events:

Recovers all other players and events colliding with the current player's hitbox

• Get Collision of other players/events:

Recovers all other players and events colliding with the current player's hitbox

• Get Tile: Retrieves a tile and checks if the player has a collision

const tileInfo = player.getTile(20, 30)
console.log(tileInfo)

Example of returns:

 {
     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

const tileInfo = player.getTile(20, 30)
console.log(tileInfo)

Example of returns:

 {
     tiles: [
         {
             id: 0,
             terrain: [],
             probability: null,
             properties: [Object],
             animations: [],
             objectGroups: [],
             image: null,
             gid: 1
         }
     ],
     hasCollision: false,
     isOverlay: undefined,
     objectGroups: [],
     isClimbable: undefined,
     tileIndex: 93
 }

• onMove: When the x, y positions change
• Add in database: Adds data to the server's database (in RAM) for later use
• sceneMap: Return the scene that manages the maps of the game- Create a dynamic map: Create a dynamic map

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

• Change Tile in map: Edit a tile on the map. All players on the map will see the modified tile

• Create Dynamic Event: Dynamically create an event in Shared mode

@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

• Remove Event: Removes an event from the map. Returns false if the event is not found- Listen mouse event: Listen to the events of the smile on the stage
• onWindowResize: Called when window is resized
• onMove: When the x, y positions change

Version 3.0.0-beta.3

• Attach Shape: Attach a shape to the player (and allow interaction with it)

import { ShapePositioning } from '@rpgjs/server'

player.attachShape({
     width: 100,
     height: 100,
     positioning: ShapePositioning.Center
})

• Get Shapes: Returns all shapes assigned to this player
• Get Shapes: Returns all shapes assigned to this player
• Get In-Shapes: Retrieves all shapes where the player is located
• Create Shape: Create a shape dynamically on the map

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:

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:

player.playSound('town-music')

If you want everyone to listen to the sound on the map:

player.playSound('town-music', true)