How to create a HUD?
How to create a HUD?
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):
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?
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):
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?
Re: How to create a HUD?
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
Code snippet repository: https://github.com/mzeilfelder/irr-playground-micha
Free racer made with Irrlicht: http://www.irrgheist.com/hcraftsource.htm
Re: How to create a HUD?
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?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.
Re: How to create a HUD?
I have weird pixel-errors:
This ought to be something like this:
What shoud I do to make it "beautiful"?
This ought to be something like this:
What shoud I do to make it "beautiful"?
-
- Posts: 1186
- Joined: Fri Dec 29, 2006 12:04 am
Re: How to create a HUD?
You have to use textures which are a power of two in width and height.
"Whoops..."
Re: How to create a HUD?
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
Code snippet repository: https://github.com/mzeilfelder/irr-playground-micha
Free racer made with Irrlicht: http://www.irrgheist.com/hcraftsource.htm
Re: How to create a HUD?
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.
If you absolutely need scaling, you'd enable bilinear filtering in the 2d override material.
Re: How to create a HUD?
No, I didn't scale anything.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.
Re: How to create a HUD?
It didn't help unfortunately.randomMesh wrote:You have to use textures which are a power of two in width and height.
-
- Admin
- Posts: 14143
- Joined: Wed Apr 19, 2006 9:20 pm
- Location: Oldenburg(Oldb), Germany
- Contact:
Re: How to create a HUD?
Well, this image is still 51x42 px, so not even near some power-of-two. What size is the original one you use?
Re: How to create a HUD?
The original picture (which I use in the HUD) is 32x32px. This is just a cropped screeshot from the result.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?
Re: How to create a HUD?
OK, it's not scaled, it merely needs alpha blending.