In this tutorial we will cover how to use HUD widgets in Kiwi.js. Using this HUD class you can create/add and remove HUDDisplays from this game, change the HUDDisplay that is currently being display (also known as the currentHUD) and show/hide the currentHUD. Each HUDManager also has at least one HUDDisplay which is called the ‘defaultHUD’. You cannot remove this, however you can reassign the defaultHUD to a different HUDDisplay if you want.

Use the 1, 2, and 3 keys to change weapon and mouse click to shoot. The ‘A’ and ‘D’ keys control the characters movement and the ‘R’ key reloads your weapons. The game also has an audio toggle button, this is to mute and unmute the sound from the game.

Download or view the code for this tutorial in the Kiwi.js example repo here inside of the /tutorials/website_examlpes folder.

Creating a HUD Widget

You create a HUD widget just like any other object in Kiwi.js. For example, our example game uses an IconBar which displays the character’s remaining ammo. To create an IconBar we need to pass through the game, the texture for the icon’s image, a starting number, maximum number and a x,y coordinate.

 Adding a Widget to the State

Widgets are slightly different to objects in that they exist in a separate DIV to the game. All of the elements of the game are added to a DOM Container which contains two things: the game canvas  and a main display. The main display contains all of the HUD objects as separate DIV elements; in this game we only have the default display. Inside the default HUD display are all of the separate widgets which we have created. Each of these widgets are contained in their own DIV elements.

 

 

Changing the appearance of HUD widgets

HUD Widgets are contained inside their own DIV element, therefore, to style them, we have to edit the CSS of the Widget. This can be done in kiwi easily. Simply use the style property of a widget to access any normal CSS property to edit.

Adding HUD Widgets to the State

Adding HUD Widgets to the state is slightly different to adding other objects since they have their own unique DIV element. To add a Widget you must add it to the HUD display you want it to be displayed in. In this game we are only using the default game.huds property.

Editing Widgets Values

Editing values is as simple as editing the property which the value is contained in. The characters health in this game is reduced when he is hit by a bomb. To do this all we need to do is reduce the current value of the characters health by 10.