Bar Component ​

• Since: 3.3.0
• Arguments:
  • {string} current. Parameter that corresponds to the current value (Optional: false)
  • {string} max. Parameter that corresponds to the maximum value (Optional: false)
  • {object} style. style (Optional: true)
  • {string} style.bgColor. background color. Hexadecimal format. (Optional: true)
  • {string} style.fillColor. fill color. Hexadecimal format. (Optional: true)
  • {string} style.borderColor. border color. Hexadecimal format. (Optional: true)
  • {number} style.borderWidth. border width (Optional: true)
  • {number} style.height. height (Optional: true)
  • {number} style.width. width (Optional: true)
  • {number} style.borderRadius. border radius (Optional: true)
  • {number} style.opacity. opacity (Optional: true)
  • {string | null} text. text above bar. if null, no text will be displayed. You can use the variables (Optional: true)
• Return: BarComponentObject
• Usage:

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 ​

• Since: 3.3.0
• Arguments:
  • {object} style. style. See bar style (Components.bar()) (Optional: true)
  • {string | null} text. test above bar (Components.bar()) (Optional: true)
• Return: BarComponentObject
• Usage:

Displays a life bar

SP Bar Component ​

• Since: 3.3.0
• Arguments:
  • {object} style. style. See bar style (Components.bar()) (Optional: true)
  • {string | null} text. test above bar (Components.bar()) (Optional: true)
• Return: BarComponentObject
• Usage:

Displays a SP bar

Text Component ​

• Since: 3.3.0
• Arguments:
  • {string} value. source (Optional: false)
  • {object} style. style (Optional: true)
  • {string} style.fill. color. Hexadecimal format. (Optional: true)
  • {number} style.fontSize. font size (Optional: true)
  • {string} style.fontFamily. font family (Optional: true)
  • {string} style.stroke. stroke color. Hexadecimal format. (Optional: true)
  • {<Type type=''normal' | 'italic' | 'oblique'' />} style.fontStyle. font style (Optional: true)
  • {<Type type=''normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'' />} style.fontWeight. font weight (Optional: true)
  • {number} style.opacity. opacity. Between 0 and 1 (Optional: true)
  • {boolean} style.wordWrap. word wrap (Optional: true)
  • {<Type type=''left' | 'center' | 'right' | 'justify'' />} style.align. align (Optional: true)
• Return: TextComponentObject
• Usage:

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 ​

• Since: 3.3.0
• Arguments:
  • {object} value. (Optional: false)
  • {string} value.fill. color. Hexadecimal format. (Optional: false)
  • {number | string} value.opacity. opacity. Between 0 and 1 (Optional: true)
  • {string} value.type. type of shape. Can be 'circle' or 'rectangle', 'ellipse' or 'polygon', 'line' or 'rounded-rectangle' (Optional: false)
  • {number | string} value.radius. if type is circle, radius of the circle (Optional: true)
  • {number | string} value.width. if type is rectangle or ellipse, width of the rectangle (Optional: true)
  • {number | string} value.height. if type is rectangle or ellipse, height of the rectangle (Optional: true)
  • {number | string} value.x1. if type is line, x1 position of the line (Optional: true)
  • {number | string} value.y1. if type is line, y1 position of the line (Optional: true)
  • {number | string} value.x2. if type is line, x2 position of the line (Optional: true)
  • {number | string} value.y2. if type is line, y2 position of the line (Optional: true)
  • {number[]} value.points. if type is polygon, points of the polygon (Optional: true)
  • {object} value.line. border style (Optional: true)
  • {string} value.line.color. border color. Hexadecimal format. (Optional: true)
  • {number} value.line.width. border width (Optional: true)
  • {number} value.line.alpha. border opacity. Between 0 and 1 (Optional: true)
• Return: ShapeComponentObject
• Usage:

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 ​

• Since: 3.3.0
• Arguments:
  • {string} value. source (Optional: false)
• Return: ImageComponentObject
• Usage:

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 ​

• Since: 3.3.0
• Arguments:
  • {number} value. tile ID (Optional: false)
• Return: TileComponentObject
• Usage:

Indicates the tile ID

Example:

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