Monday, October 10, 2016

Gui elements: The Progress bar

Creating a graphical user interface in Gimp

Part 8: The Progress Bar

This tutorial will cover the implementation of an interpolated hp, or loading bar in Construct 2.

Step 1:

I'll be using the parts we exported from the last tut on making radio buttons.
Import them as 9patch objects in C2, and set the corners to 15 pixels for both images.
This will be two take separate objects obviously.

Step 2:

Set the xy of the second 9patch to the same as the first.
Make sure its z is above the first one.


Step 3:

Set the width of the first object to 128 pixels.

Step 4:

For this demo add a button object to use to increase our bars value.


Step 5:

Add a initial value "ihp" to the green 9patch.
Note that its the same as the width of the first object.
Then add another instance variable "chp".
This will be the value that changes, or current hp.

Step 6:

Go to the event sheet and add an every tick condition.

Step 7:

Add an action to set the green 9patch's width.


Step 8:

We'll use the lerp expression to change the width, every tick.
lerp(self.Width,(9patch2.chp/9patch2.ihp)*9patch.Width,2*dt)
Its current hp/initial hp times the total hp possible

Step 9:

Next we add another event to increase our hp using the button.
We want it to be a single trigger, so use on clicked.

Step 10:

For the action subtract from the chp green instance value.


Step 11:

For this demo we'll just subtract 1 pixel from the hp, or width with each click.
I've created a capx that shows how to handle diferent values.

The events should look like so:

And the preview: