@pixelburp/phaser3-health-bar
v0.1.6
Published
Phaser3 Mouse health bar
Downloads
4
Readme
Phaser 3 Heath Bar Plugin
How to install:
Add it to your project as a normal dependency:
yarn add @pixelburp/phaser3-health-bar
How to use:
This operates as a global plugin in your Phaser Game, then loading it into your main gameplay scene. First you must define the new global plugin in your game's global config:
import HealthBarPlugin from '../js/health-bar-plugin';
// ... any other imports for your project...
const config = {
...
plugins: {
global: [
global: [{ key: 'HealthBarPlugin', plugin: HealthBarPlugin }],
]
},
...
Then, in the create()
function / method of your main gameplay Scene
(ie, the scene containing all the GameObject
s you wish to be selectable), you set up the Plugin like so:
create() {
this.healthBarPlugin = this.plugins.start('HealthBarPlugin', 'healthBarPlugin');
this.healthBarPlugin.setup(
{
camera: this.cameras.main,
offsetY: 10,
scene: this,
childSelector: (child) => {
// Function that controls what Objects within the scene can have a health-bar
// If this function isn't specified, by default the plugin assumes any Phaser.GameObject.Sprite
},
visibleOnSelector: child => {
// Function to control how and when the health-bar should appear for this child `GameObject`
// If not specified, by default it shows above any Object with input.enabled === true
},
},
[
{
barHeight: 15,
backgroundColor: 0x0000ff,
outlineColor: 0xffffff,
camera: this.cameras.main,
outlineWidth: 2,
currentValueColor: 0x00ff00,
propsToWatch: {
current: 'health',
max: 'maxHealth',
min: 'minHealth',
},
},
// You can create multiple health-bars that'll stack above the Sprite / GameObject
]
);
}
Setup Configuration
In the setup()
method of the plugin, we pass in a global configuration object, and Array of desired Health Bars.
Global configuration:
These are the 'global' values that are used across the plugin
camera
What is the main "Gameplay" camera being used in this scene?
childSelector
(default: Function
)
Function to calculate what Objects in the scene can accept Health Bars
offsetX
(default: 0
)
Optional X offset to position the HealthBars
offsetY
(default: 15
)
Optional Y offset to position the HealthBars
scene
(required)
Required param of the target
Phaser.Scene
where we're drawing the target Game Objects to have assigned health-bars
visibleOnSelector
(default: Function
)
Function calculate how and when a healthbar is displayed above the target Object. Function should return
true|false
depending on conditions you wish to use (eg, display onactivePointer
hover)
Health Bar configuration:
You can assigned as many health-bars as you wish, which is useful in cases where you might have (for example), a health bar, but also shields, mana, stamina, that sort of thing. The array takes a sequence of objects, whose properties are
backgroundColor
(default: 0x000000
)
The backdrop to use for this health-bar. Note you can also supply an Array of tints (as seen with
Sprite.setTint()
)
barHeight
(default: 15
)
The height for this particular health-bar
currentValueColor
(default: 0x33ff33
)
The color to use for the current value of the health-bar. Note you can also supply an Array of tints (as seen with
Sprite.setTint()
)
propsToWatch
(default: Object
)
What properties should we watch on the target Object? Note, that if the values are within child objects, you can specify using dot notation (eg,
current: 'shields.value'
) The default properties are:
{
current: 'health',
max: 'maxHealth',
min: 'minHealth',
}
Functions
setup(globalConfig, config)
Kind: global function
| Param | Type | Description | | ------------ | ------------------- | ------------------------------------------------ | | globalConfig | Object | Global configuration for the plugin | | config | Array | Configuration array of the health-bars to create |
isEnabled() ⇒ Boolean
Returns the current "enabled" status of the Plugin's "interface" scene
Kind: global function
disable()
If enabled, disable the plugin
Kind: global function
enable()
If not already enabled, enable the plugin
Kind: global function