Orx Learning

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== How to create a Progress Bar in orxScroll ======

Having a progress bar to represent health meters, damage or fuel reserves is a common element in games. The object oriented orxScroll wrapper for Orx is the perfect tool for making components like these for your game.

{{page>snippets:init_new_orx_scroll_project&nofooter&noeditbutton}}

===== Class for the Progress Bar =====

Create a new ProgressBar.cpp class file and ProgressBar.h header:

<code c>
#ifndef __PROGRESSBAR_H__
#define __PROGRESSBAR_H__
#include "mygame.h"

class ProgressBar : public ScrollObject
{
public:
protected:

    void            OnCreate();
    void            OnDelete();
    void            Update(const orxCLOCK_INFO &_rstInfo);

private:
    orxFLOAT        progressPercent;
    orxBOOL         isPaused;
    void            ColourTheme(orxVECTOR backgroundColour, orxVECTOR levelColour);
};

#endif // __PROGRESSBAR_H__
</code>

<code c>
#include "ProgressBar.h"

void ProgressBar::OnCreate()
{
    orxConfig_SetBool("IsObject", orxTRUE);
}

void ProgressBar::OnDelete()
{
}

void ProgressBar::Update(const orxCLOCK_INFO &_rstInfo)
{
}
</code>

In your main code file, which I'll call mygame.cpp, add the binding for your ProgressBar class to your ''BindObjects'' function:

<code c>

void myGame::BindObjects()
{
    ScrollBindObject<ProgressBar>("ProgressBar");
}

</code>

And include the file at the top of ''mygame.cpp'' so that your code knows about your new class:

<code c>
#include "ProgressBar.h"
</code>

===== The Data Config =====

You should be able to compile now, but we still need to define our ProgressBar object in our config. Let's do that now:

<code ini>
[ProgressBar] 
ChildList   = ProgressBarBackground # ProgressBarLevel
Pivot       = center

[ProgressBarBackground]
Graphic     = @
Texture     = pixel
Size        = (600, 25)
Color       = cornflowerblue
Pivot       = center

[ProgressBarLevel]
Graphic     = @
Texture     = pixel
Size        = (592, 18)
Scale       = (0.5, 1)
Position    = (-296, 0, -0.1)
Color       = white
Pivot       = left
</code>

The ''ProgressBarBackground'' object is a simple solid rectangle of dark blue pixels which provides a border for the inner bar that grows or shrinks.

''ProgressBarLevel'' is the inner rectangular pixel bar that changes it's size over time:

To create the progress bar in the game, remove the scene creator in the ''Init'' function:

<code c>
CreateObject("Scene");
</code>

And replace with:

<code c>
progressBar = CreateObject("ProgressBar");
</code>

And declare the progressBar ScrollObject pointer at the top of the the mygame.cpp file:

<code c>
#include "ProgressBar.h"
ScrollObject *progressBar;
</code>

Now compile up and you should see the progress bar in the centre of the screen.

{{ :tutorials:orxscroll:progressbar.png?nolink |}}

Because we have a ScrollObject that represents our ProgressBar, we can use the ''Update'' inside our ProgressBar class and change the bar over time. Add a private variable to the ProgressBar.h header to track what percent the bar should grow to:

<code c>
private:
    orxFLOAT        progressPercent = 75;
</code>


Add the following code to the ''Update'' function in ProgressBar.cpp to make the size change over time:

<code>
void ProgressBar::Update(const orxCLOCK_INFO &_rstInfo)
{
	//cheat a little to get the ProgressBarLevel
	ScrollObject *object = this->GetOwnedChild(); 
	if (orxString_Compare(object->GetModelName(), "ProgressBarBackground") == 0) { 
		//want ProgressBarLevel instead
		object = object->GetOwnedSibling();
	}
	
	progressPercent -= 0.1;
	if (progressPercent < 0)
		progressPercent = 100;
	
	orxFLOAT fractionOfProgress = progressPercent/100;
	
	orxVECTOR sv = {fractionOfProgress, 1};
	object->SetScale(sv, orxFALSE);
}
</code>

(I used a cheap routine to get to the right child object - however, [[en:examples:orx_scroll:get_child_under_scrollobject_by_name|this is a better function to use]]).

That's pretty good! The bar shrinks over time like a health bar. However, because the ProgressBar is a ScrollObject and therefore has it's own class, we can add our own functions to add more functionality.

This is what makes working with the orxScroll wrapper much easier than working in plain orx: everything is object orientated, and is therefore easy to scale and extend, neat and tidy. Less chance of getting messed up and confused.

Let's add a function to set the function at any time with a key press.

===== Extending our class for more features =====

First, let's add a public function to the ProgressBar.h header file:

<code c>
public:
    void SetProgressPercent(orxFLOAT percent);
</code>

And add the function to the ProgressBar.cpp class:

<code c>
void ProgressBar::SetProgressPercent(orxFLOAT percent){
    progressPercent = percent;
}
</code>

We need a key to press to change the percent to something like 90% every time it is pressed. In the config, set to spacebar for this:

<code ini>
[Input]
KEY_ESCAPE      = Quit
KEY_SPACE	= SetPercentPressed
</code>

Then, in the ''Update'' function of ''mygame.cpp'' where the quit key is being tested, let's add our key there:

<code c>
void myGame::Update(const orxCLOCK_INFO &_rstInfo)
{
	if (orxInput_HasBeenActivated("SetPercentPressed")){
		progressBar->SetProgressPercent(90);
	}
...
...
</code>

Oops a problem right? Either your IDE's intellisense has picked up that there is no such function there, or the compiler has complained.

This is because our progressBar is of a type of ''ScrollObject'', and we need to cast it to a type of ''ProgressBar'' to successfully use it.

This is easy to do. First, change the type of object at the top of the ''mygame.cpp'' file:

<code c>
#include "ProgressBar.h"
ProgressBar *progressBar;
</code>

And change the code that creates the ProgressBar object in the ''Init'' function to be:

<code c>
progressBar = CreateObject<ProgressBar>("ProgressBar");
</code>

Compile again and press the space key. Your new function on the ProgressBar class is being called and you are affecting changes in your progress bar from your game code.

And that's it. You have all the tools you need now to make rich and intelligent game components or characters, with clean code that is easy to follow and modify.

{{ :tutorials:orxscroll:progressbar.png?nolink |}}
Orx Learning

User Tools

Site Tools

Page Tools
