Phaser UI Tools

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

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.

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.

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.

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.

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.

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