npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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 GameObjects 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 on activePointer 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