I am very pleased to announce the release of version 3.3.0
This version adds a very interesting feature: display components around the character: text, life bar, shape, etc.
This is done with the method setComponentsTop:
import { RpgPlayer, RpgPlayerHooks, Components } from '@rpgjs/server'
export const player: RpgPlayerHooks = {
onConnected(player: RpgPlayer) {
player.setComponentsTop(
Components.hpBar(), {
width: 42
})
}
}
This method is rather powerful because it allows you to display several components (in a row, and in columns), to centre the content according to the character.
The server has the authority to render, so the display is synchronised with the clients. This way, all players can see the content. The bandwidth has been optimized at all times, because if the HP changes, only this property is sent back to the client without sending back the whole layout.
Other example
import { RpgPlayer, RpgPlayerHooks, Components } from '@rpgjs/server'
export const player: RpgPlayerHooks = {
onConnected(player: RpgPlayer) {
player.hitbox(16, 16)
player.setGraphic('hero')
player.name = 'Sam'
player.setComponentsTop(Components.text('{name}'))
}
}
To help you use this feature, a guide is available: https://docs.rpgjs.dev/guide/component.html