How to create a HUD?

If you are a new Irrlicht Engine user, and have a newbie-question, this is the forum for you. You may also post general programming questions here.
Post Reply
at35z
Posts: 7
Joined: Sat Apr 12, 2014 12:12 pm
Location: HU

How to create a HUD?

Post by at35z »

Hello everyone,

I've started the "big project of my life", and I want to create a HUD for it first, because I'm good at these graphics, and I've done something like this before, but not for an irrlicht game. The reason I want to create the HUD first is that I don't want to get disappointed on the first days of the development, as far as I know myself, I will often get scared of the long codes and files I will have to control, so I just want to start with the "easy" one.

I've already tried out things in the example files, but I think I've misunderstood something in the codes, since this is my first "meeting" with irrlicht and the game developer-world. I'm fine with C++, I've just never used a game engine with it before.

I would like to create something like this (it's just a sketch):

Image

The "splats" are just placeholders for the final icons, of course. On the top will be the "shield" and "energy" values, with icons next to them. The green square will be the announcer's portrait, I want it to be shown only when they are actually speaking. On the bottom of the screen would be the "ability" icons, and a portrait of the character will replace the red splat next to the white abilities.

So what would you recommend? How should I start it? Which tutorials or code snippets should I take a look at? Or do you have any special comments that you would like to tell me, any experience about the HUD?
CuteAlien
Admin
Posts: 9734
Joined: Mon Mar 06, 2006 2:25 pm
Location: Tübingen, Germany
Contact:

Re: How to create a HUD?

Post by CuteAlien »

This is all about GUI so probably best to start with the GUI tutorial (example 05). Text-output (scores) can be done with IGUIStaticText. Images with IGUIImage. Energy bars are a little more tricky because Irrlicht 1.8 had not support yet for that - in Irrlicht 1.9 (you can use svn trunk for that) IGUIImage has support to do stuff like energy bars.
IRC: #irrlicht on irc.libera.chat
Code snippet repository: https://github.com/mzeilfelder/irr-playground-micha
Free racer made with Irrlicht: http://www.irrgheist.com/hcraftsource.htm
at35z
Posts: 7
Joined: Sat Apr 12, 2014 12:12 pm
Location: HU

Re: How to create a HUD?

Post by at35z »

CuteAlien wrote:This is all about GUI so probably best to start with the GUI tutorial (example 05). Text-output (scores) can be done with IGUIStaticText. Images with IGUIImage. Energy bars are a little more tricky because Irrlicht 1.8 had not support yet for that - in Irrlicht 1.9 (you can use svn trunk for that) IGUIImage has support to do stuff like energy bars.
Thanks! I'm so glad, it's working! However, I couldn't manage to wirte out the "shield" vaules for example. How would you do it? What could I miss?
at35z
Posts: 7
Joined: Sat Apr 12, 2014 12:12 pm
Location: HU

Re: How to create a HUD?

Post by at35z »

I have weird pixel-errors:

Image

This ought to be something like this:

Image

What shoud I do to make it "beautiful"?
randomMesh
Posts: 1186
Joined: Fri Dec 29, 2006 12:04 am

Re: How to create a HUD?

Post by randomMesh »

You have to use textures which are a power of two in width and height.
"Whoops..."
CuteAlien
Admin
Posts: 9734
Joined: Mon Mar 06, 2006 2:25 pm
Location: Tübingen, Germany
Contact:

Re: How to create a HUD?

Post by CuteAlien »

Write values into IGUIStaticText elements.
IRC: #irrlicht on irc.libera.chat
Code snippet repository: https://github.com/mzeilfelder/irr-playground-micha
Free racer made with Irrlicht: http://www.irrgheist.com/hcraftsource.htm
hendu
Posts: 2600
Joined: Sat Dec 18, 2010 12:53 pm

Re: How to create a HUD?

Post by hendu »

It seems you scaled the image? Usually GUI elements would be pixel-perfect.

If you absolutely need scaling, you'd enable bilinear filtering in the 2d override material.
at35z
Posts: 7
Joined: Sat Apr 12, 2014 12:12 pm
Location: HU

Re: How to create a HUD?

Post by at35z »

hendu wrote:It seems you scaled the image? Usually GUI elements would be pixel-perfect.

If you absolutely need scaling, you'd enable bilinear filtering in the 2d override material.
No, I didn't scale anything. :?
at35z
Posts: 7
Joined: Sat Apr 12, 2014 12:12 pm
Location: HU

Re: How to create a HUD?

Post by at35z »

randomMesh wrote:You have to use textures which are a power of two in width and height.
It didn't help unfortunately. :(

Image
hybrid
Admin
Posts: 14143
Joined: Wed Apr 19, 2006 9:20 pm
Location: Oldenburg(Oldb), Germany
Contact:

Re: How to create a HUD?

Post by hybrid »

Well, this image is still 51x42 px, so not even near some power-of-two. What size is the original one you use?
at35z
Posts: 7
Joined: Sat Apr 12, 2014 12:12 pm
Location: HU

Re: How to create a HUD?

Post by at35z »

hybrid wrote:Well, this image is still 51x42 px, so not even near some power-of-two. What size is the original one you use?
The original picture (which I use in the HUD) is 32x32px. This is just a cropped screeshot from the result.
hendu
Posts: 2600
Joined: Sat Dec 18, 2010 12:53 pm

Re: How to create a HUD?

Post by hendu »

OK, it's not scaled, it merely needs alpha blending.
Post Reply