├── README.md ├── index.d.ts ├── index.js └── package.json /README.md: -------------------------------------------------------------------------------- 1 | ## What 2 | This is part of the [Phaser Component Library](https://github.com/SaFrMo/phaser-component-library). 3 | 4 | A percentage bar is a self-contained, self-updating bar with solid foreground and background colors. It can be attached to a sprite or created in a static location on the camera. 5 | 6 | ## How 7 | `npm install phaser-percent-bar` 8 | 9 | Then, in your Phaser source code 10 | 11 | ```js 12 | import HealthBar from 'phaser-percent-bar' 13 | 14 | // Sprite to track 15 | const sprite = this.game.add.sprite(0, 0, 'your-key') 16 | 17 | // Set health and max-health values 18 | sprite.health = 100 19 | sprite.maxHealth = 100 20 | 21 | // Create percentage bar as health bar 22 | const healthBar = this.game.add.existing(new HealthBar({ 23 | game: this.game, 24 | host: sprite 25 | })) 26 | ``` 27 | 28 | This will create a functioning, auto-updating health bar and attach it to the given sprite. When the sprite's health changes, the bar will update to reflect that. 29 | 30 | ## API 31 | 32 | ### `new PercentBar( { options } )` 33 | 34 | #### options 35 | 36 | ##### `bgSprite` 37 | 38 | Type: `string` 39 | 40 | Key to the desired sprite for the percent-bar background. Use `sprite` for setting this and `fgSprite` to the same sprite. 41 | 42 | ##### `bgTint` 43 | 44 | Type: `hex`
45 | Default: `0x00cc00` 46 | 47 | Hex value of the tint of the percentage bar's foreground (the bar itself). 48 | 49 | ##### `fgSprite` 50 | 51 | Type: `string` 52 | 53 | Key to the desired sprite for the percent bar itself. Use `sprite` for setting this and `bgSprite` to the same sprite. 54 | 55 | 56 | ##### `fgTint` 57 | 58 | Type: `hex`
59 | Default: `0x333333` 60 | Hex value of the tint of the percentage bar's background. 61 | 62 | ##### `game` 63 | 64 | Required
65 | Type: `Phaser.Game` 66 | 67 | Host game for the percent-bar. 68 | 69 | ##### `height` 70 | 71 | Type: `number`
72 | Default: `10` 73 | 74 | The height, in pixels, of the percentage bar. 75 | 76 | ##### `host` 77 | 78 | Required
79 | Type: `Phaser.Sprite` 80 | 81 | The parent sprite for this percentage bar. 82 | 83 | ##### `resize` 84 | 85 | Type: `boolean`
86 | Default: `false` 87 | 88 | If `false`, the bar will crop rather than growing or shrinking. If `true`, the bar will grow and shrink rather than cropping. 89 | 90 | ##### `sprite` 91 | 92 | Type: `string` 93 | 94 | Shortcut to setting both `bgSprite` and `fgSprite`. Key of the sprite to use as the percentage bar. 95 | 96 | ##### `watch` 97 | 98 | Type: `Object` 99 | 100 | The values that the percentage bar will represent. Accepts the following properties: 101 | 102 | * `host` - Object containing the value to watch (optional - default top-level `host`) 103 | * `value` - String with the name of the property to watch (optional - default `'health'`) 104 | * `max` - Number indicating the maximum value of the progress bar (optional - default `host.maxHealth`) 105 | 106 | Example implementation: 107 | 108 | ```js 109 | new PercentBar({ 110 | // ... 111 | watch: { 112 | host: hostSprite, 113 | value: 'health', 114 | max: 100 115 | } 116 | // ... 117 | }) 118 | ``` 119 | 120 | ##### `width` 121 | 122 | Type: `number`
123 | Default: `width` of `host` 124 | 125 | The width, in pixels, of the percentage bar. 126 | 127 | ##### `xOffset` 128 | 129 | Type: `number`
130 | Default: `0` 131 | 132 | Number of pixels to offset from the host sprite horizontally. 133 | 134 | ##### `yOffset` 135 | 136 | Type: `number`
137 | Default: `-25` 138 | 139 | Number of pixels to offset from the host sprite vertically. 140 | 141 | #### Methods 142 | 143 | ##### `hide()` 144 | 145 | Parameters: none 146 | 147 | Shortcut for `setAlpha(0)`. 148 | 149 | ##### `setAlpha( newAlpha )` 150 | 151 | Parameters: 152 | * `newAlpha` (number) - new alpha value for percent bar components 153 | 154 | Set health bar components to a given opacity. 155 | 156 | ##### `show()` 157 | 158 | Parameters: none 159 | 160 | Shortcut for `setAlpha(1)`. 161 | 162 | ## Versions 163 | 164 | * `1.1.5` - TypeScript definitions, tint bugfix (thanks @sohan) 165 | * `1.1.4` - Added show, hide, and setAlpha functions 166 | * `1.1.31` - Added defaults for `watch` and updated readme 167 | * `1.1.2` - Added xOffset 168 | * `1.1.0` - Automatically centers bar to host on X axis. Added custom sprite support. 169 | * `1.0.0` - First release 170 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'phaser-percent-bar' { 2 | export default class HealthBar { 3 | constructor (opts: { 4 | game: Phaser.Game, 5 | host: Phaser.Sprite, 6 | bgSprite?: string, 7 | bgTint?: number, 8 | fgSprite?: string, 9 | fgTint?: number, 10 | frame?: any, 11 | height?: number, 12 | key?: string, 13 | resize?: boolean, 14 | sprite?: Phaser.Sprite, 15 | watch?: { host: Phaser.Sprite, value: string, max: number }, 16 | width?: number, 17 | x?: number, 18 | xOffset?: number, 19 | y?: number, 20 | yOffset?: number, 21 | }); 22 | 23 | hide(): void; 24 | 25 | setAlpha(newAlpha: number): void; 26 | 27 | show(): void; 28 | } 29 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import Phaser from 'phaser' 2 | 3 | export default class extends Phaser.Sprite { 4 | constructor (opts) { 5 | super(opts.game, opts.x || 0, opts.y || 0, opts.key || '', opts.frame || '') 6 | 7 | // add 1x1 white pixel to cache if necessary 8 | if (!opts.game.cache.checkImageKey('white1x1pixel')) { 9 | // loads 1x1 white gif from data URI 10 | opts.game.load.image('white1x1pixel', 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=') 11 | opts.game.load.onLoadComplete.add(() => this.runCreation(opts)) 12 | opts.game.load.start() 13 | } else { 14 | this.runCreation(opts) 15 | } 16 | } 17 | 18 | // this has to be in a separate function so that the white1x1pixel sprite can load asynchronously 19 | runCreation (opts) { 20 | // set sprites, if applicable 21 | if (!opts.bgSprite && opts.sprite) { 22 | opts.bgSprite = opts.sprite 23 | opts.fgSprite = opts.sprite 24 | } 25 | 26 | // Prep watch, if unset 27 | if (!opts.watch) { 28 | opts.watch = {} 29 | } 30 | 31 | // Save watch.host, if unset 32 | if (opts.watch && !opts.watch.host) { 33 | opts.watch.host = opts.host 34 | } 35 | 36 | // Save width 37 | let width = 0 38 | if (opts.bgSprite) { 39 | // Look for the background sprite's width first 40 | width = this.game.cache.getImage(opts.bgSprite).width 41 | // Let the user override with the `width` option 42 | width = opts.width || width 43 | } else { 44 | width = opts.width || opts.host.width 45 | } 46 | 47 | // Save height 48 | let height = 0 49 | if (opts.bgSprite) { 50 | // Look for the background sprite's height first 51 | height = this.game.cache.getImage(opts.bgSprite).height 52 | // Let the user override with the `width` option 53 | height = opts.height || height 54 | } else { 55 | height = opts.height || 10 56 | } 57 | 58 | // Background to progress bar 59 | const x = (opts.host.width / 2 - width / 2) + (opts.xOffset || 0) 60 | this.bg = opts.host.addChild(this.game.make.sprite(x, opts.hasOwnProperty('yOffset') ? opts.yOffset : -25, opts.bgSprite || 'white1x1pixel')) 61 | this.bg.width = width 62 | this.bg.height = height 63 | this.bg.tint = opts.hasOwnProperty('bgTint') ? opts.bgTint : 0x333333 64 | 65 | // Foreground 66 | let fgSprite = opts.fgSprite || 'white1x1pixel' 67 | this.bar = opts.host.addChild(this.game.make.sprite(x, opts.hasOwnProperty('yOffset') ? opts.yOffset : -25, fgSprite)) 68 | this.bar.width = width 69 | this.bar.height = height 70 | this.bar.tint = opts.hasOwnProperty('fgTint') ? opts.fgTint : 0x00cc00 71 | 72 | // Crop 73 | this.cropRect = new Phaser.Rectangle(0, 0, width, height) 74 | 75 | // Save options 76 | this.opts = opts 77 | } 78 | 79 | show(){ 80 | this.setAlpha(1) 81 | } 82 | 83 | hide(){ 84 | this.setAlpha(0) 85 | } 86 | 87 | setAlpha(newAlpha){ 88 | this.bg.alpha = this.bar.alpha = newAlpha 89 | } 90 | 91 | update () { 92 | super.update() 93 | if (this.opts && this.opts.watch) { 94 | const newWidth = this.bg.width * (this.opts.watch.host[this.opts.watch.value || 'health'] / (this.opts.watch.max || this.opts.watch.host.maxHealth)) 95 | 96 | if (this.opts.resize || (!this.opts.bgSprite && !this.opts.fgSprite)) { 97 | this.bar.width = newWidth 98 | } else { 99 | this.cropRect.width = newWidth 100 | this.bar.crop(this.cropRect) 101 | } 102 | } 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser-percent-bar", 3 | "version": "1.1.5", 4 | "description": "This is part of the [Phaser Component Library](https://github.com/SaFrMo/phaser-component-library).", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/safrmo/phaser-percent-bar.git" 12 | }, 13 | "keywords": ["phaser", "component"], 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/safrmo/phaser-percent-bar/issues" 18 | }, 19 | "homepage": "https://github.com/safrmo/phaser-percent-bar#readme" 20 | } 21 | --------------------------------------------------------------------------------