Skip to content
Functions for creating a UI in Phaser. Rows, columns, viewports, scrollbars, stuff like that.
JavaScript HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
dist Ensure game objects are added, fix context in phaser3 drag Jun 22, 2019
docs Add Phaser 3 vscrollbar example Oct 13, 2019
src Phaser3 Group: Add children attribute as alias for list Oct 14, 2019
tests Start phaser 3 unit tests Oct 6, 2019
.babelrc Friendship ended with Grunt. Now Webpack is my best friend. (#37) Jun 12, 2019
.eslintignore Friendship ended with Grunt. Now Webpack is my best friend. (#37) Jun 12, 2019
.eslintrc.js Update project dependencies (#48) Sep 14, 2019
.gitignore Add gitignore May 25, 2017
.travis.yml Friendship ended with Grunt. Now Webpack is my best friend. (#37) Jun 12, 2019
LICENSE
README.md Sort examples directory (#49) Oct 6, 2019
package-lock.json Update project dependencies (#48) Sep 14, 2019
package.json Start phaser 3 unit tests Oct 6, 2019
webpack.config.js Friendship ended with Grunt. Now Webpack is my best friend. (#37) Jun 12, 2019

README.md

Phaser UI Tools

Codacy Badge Greenkeeper badge Build Status

I really wanted a viewport with a scrollbar. Things escalated.

scrollbar

Documentation

https://jsfehler.github.io/phaser-ui-tools/

Getting Started

Get phaser-ui-tools.js or phaser-ui-tools.min.js from the releases and add it to your project's index.html. It should look something like:

<script src="lib/phaser-ui-tools.min.js"></script>

All the tools can be dropped into a game like any other Phaser Object.

The Tools

TextSprite

A sprite with text on top.

var textSprite = new uiWidgets.textSprite(
    game,
    image,
    label,
    style,
    x,
    y
);

TextButton

A button with text on top.

var textButton = new uiWidgets.textButton(
    game,
    image,
    label,
    style,
    x,
    y
);

Containers

Column

Columns are Phaser Groups where each child added to the group is placed directly under the previous child. If an object can be a child of a Group, it can likewise be in a Column.

column

var column = new uiWidgets.Column(game, 8, 8);
column.addNode(sprite_a, 8, 8);
column.addNode(sprite_b, 8, 8);
column.addNode(sprite_c, 8, 8);
Row

Rows are Phaser Groups where each child added to the group is placed directly next to the previous child. If an object can be a child of a Group, it can likewise be in a Row.

row

var row = new uiWidgets.Row(game, 8, 8);
row.addNode(sprite_a, 8, 8);
row.addNode(sprite_b, 8, 8);
row.addNode(sprite_c, 8, 8);
Viewport

Viewports are Phaser Groups where the children in the group are only visible if they're within the viewport's area. If an object can be a child of a Group, it can likewise be in a Viewport.

Viewports can be combined with a Scrollbar to create a scrollable display.

Placing a Column or Row inside a Viewport is a simple way to align content.

var viewport = new uiWidgets.Viewport(game, 75, 75, 600, 260);
viewport.addNode(column);

Bars

Scrollbar

Scrollbars are used to move the objects in a Viewport. They must be used with a Viewport. A tweening duration and easing can be specified. This will be triggered when moving the bar.

Examples:

Vertical Scrollbar

Horizontal Scrollbar

var scrollbar = new uiWidgets.Scrollbar(
    game,
    viewport,
    true,
    true,
    true,
    trackImage,
    barImage,
    {'duration': 300, 'ease': Phaser.Easing.Quadratic.Out}
);
ValueBar

Valuebars are like Scrollbars, but instead of moving content, they increase/decrease a number. Valuebars always have a minimum number of 0, but the starting and maximum number can be set. A tweening duration and easing can be specified. This will be triggered when moving the bar.

valuebar

Examples:

ValueBar

Multiple ValueBar inside a Column, with background image and keyboard events

var valuebar = new uiWidgets.ValueBar(
    game,
    {'x': 50, 'y': 10},
    {'step': 1, 'startValue': 0, 'maxValue': 100},
    true,
    false,
    true,
    trackImage,
    barImage,
    {'duration': 100, 'ease': Phaser.Easing.Quadratic.Out}
);
QuantityBar

QuantityBars do not adjust a value, they get adjusted by a value. The bar grows and shrinks based on a value. They can be used for health bars, stamina bars, etc. A tweening duration and easing can be specified. This will be triggered when moving the bar.

quantitybar

Examples:

QuantityBar

var quantitybar = new uiWidgets.QuantityBar(
    game,
    {'x': 50, 'y': 10},
    {'startValue': 50, 'maxValue': 100},
    false,
    false,
    trackImage,
    barImage,
    {'duration': 400, 'ease': Phaser.Easing.Quadratic.Out}
);

Wheel3D

A collection of sprites that are arranged around a three dimensional wheel. The wheel can be adjusted and rotated along the x, y, or z axis.

wheel3D

Examples:

Wheel3D

var wheel = new uiWidgets.Wheel3D(
    game,
    {"x": game.world.centerX - 100, "y": game.world.centerY},
    [sprite1, sprite2, sprite3, sprite4],
    0,
    90,
    "y",
    {"x":0, "y": 0, "z": 0}
);

References

Scrollbar math: http://csdgn.org/article/scrollbar

You can’t perform that action at this time.