Set Graphic ​

• Method: player.setGraphic(graphic)
• Arguments:
  • {string | number | (string | number)[]} graphic. (Optional: false)
• Return: void
• Usage:

Give the spritesheet identifier

Since version 3.0.0-rc, you can define several graphic elements. If you put a number, it represents the tile ID in the tileset

Example 1:

player.setGraphic(['body', 'shield'])

Example 2:

player.setGraphic(3) // Use tile #3

You must, on the client side, create the spritesheet in question. Guide: Create Sprite

Remove Components ​

• Since: 3.3.0
• Arguments:
  • {string} position. Position of the components. Can be: top, center, bottom, left, right (Optional: false)
• Usage:

Delete components

Merge Components ​

• Since: 3.3.0
• Arguments:
  • {string} position. Position of the components. Can be: top, center, bottom, left, right (Optional: false)
  • {Object} layout. (Optional: false)
  • {Object} options. (Optional: false)
• Usage:

Merges components with existing components

For use layout and options, see setComponentsTop

Set Components Center ​

• Since: 3.3.0
• Method: player.setComponentsCenter(layout,options)
• Arguments:
  • {Object} layout. (Optional: false)
  • {Object} options. (Optional: false)
• Usage:

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 ​

• Since: 3.3.0
• Method: player.setComponentsTop(layout,options)
• Arguments:
  • {ComponentObject[][] | ComponentObject[] | ComponentObject} layout. Components (Optional: false)
  • {Object} options. Options (Optional: true)
  • {number} options.width. Width of the block (Optional: true)
  • {number} options.height. Height of the block (Optional: true)
  • {number} options.marginTop. Margin top (Optional: true)
  • {number} options.marginBottom. Margin bottom (Optional: true)
  • {number} options.marginLeft. Margin left (Optional: true)
  • {number} options.marginRight. Margin right (Optional: true)
• Usage:

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 ​

• Since: 3.3.0
• Method: player.setComponentsBottom(layout,options)
• Arguments:
  • {Object} layout. (Optional: false)
  • {Object} options. (Optional: false)
• Usage:

Add components to the bottom of the graphic.

View setComponentsTop for more information

Set Components Left ​

• Since: 3.3.0
• Method: player.setComponentsLeft(layout,options)
• Arguments:
  • {Object} layout. (Optional: false)
  • {Object} options. (Optional: false)
• Usage:

Add components to the left of the graphic.

View setComponentsTop for more information

Set Components Right ​

• Since: 3.3.0
• Method: player.setComponentsRight(layout,options)
• Arguments:
  • {Object} layout. (Optional: false)
  • {Object} options. (Optional: false)
• Usage:

Add components to the right of the graphic.

View setComponentsTop for more information