# AI ChangeLog

# Version 3.3.0

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

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'
})

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')

Example:

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:

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,
})

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

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:

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

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

@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

Recovers all the colliding tiles of the current player

Recovers all the colliding tiles of the current player

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

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
 }

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

@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)
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)