Server side
If you want to add a shield on the server side, you must create the item:
import { Armor } from '@rpgjs/database'
@Armor({
name: 'Shield',
description: 'Gives a little defense',
price: 4000
})
export class Shield {}
Then, depending on the story of the game (a chest for example), you must
- Add the item to the player's inventory
- Equip the item on the player
player.addItem(Shield)
player.equip(Shield)
Client side
In /src/modules/main/client/sprite.ts
import { RpgSprite, RpgSpriteHooks } from '@rpgjs/client'
let equipments = {}
export const sprite: RpgSpriteHooks = {
onChanges(sprite: RpgSprite, data: any) {
// data.equipments is an object.
if (data.equipments) {
for (let index in data.equipments) {
const item = data.equipments[index]
if (item == null && equipments[index]) {
// Here, the equipment has been removed
delete equipments[index] // we delete from the memory
// Here, we can think of using PIXI to do other manipulations
}
else if (item.id == 'shield') {
const shieldSprite = new PIXI.Sprite()
sprite.addChild(shieldSprite)
equipments[index] = shieldSprite // We keep in memory the sprite
}
}
}
}
}
In the following code, we see if there is a change in the data concerning the sprite
In fact, I get the player's new equipment. I look for the item with the ID "shield".
Note that the ID was generated according to the server-side class name (but we can even give a different name)
If the object has been found, you have to play with PIXI.js. Indeed, the sprite parameter of type RpgSprite inherits from PIXI.Sprite. So, we can create graphics on it. I leave it to you to do what you want.