Best Approach at HUD and Fonts

Game Play & Game Design
#1

Hello,

After a few attempts at tackling HUD, effects, and fonts - I desperately need some opinions on the best approach for achieving these things. Before I begin, I am using LibGDX with the freetype extension. (Yes, I know how to use it, I’ve looked at the documentation).

Lets start with the HUD. Whenever creating my initial orthographic camera, I set the ortho to a width of 15f, and height of 9f.


//Example
cam.setToOrtho(false, 15f, 9f);

Well, when attempting to do a HUD, it of course is scaled up as well. This leads me to believe I will need a second camera that is not upscaled.


//Example
cam.setToOrtho(false, 800, 480);

Is this safe, or will it cause more harm than good?

As for effects, I am wanting specifically to achieve an effect using fonts. Essentially, when a player picks up a coin, I would like to have the amount appear above the item and slowly fade away. “+5”. This is common in most games at this point. I know how to handle the updating, movement, and fade of the effect, but not the font display. I do not know what the best approach would be. Should I use the free type extension and just load a normal font file, then display it using that? Or should I just use an image with numbers 0 - 9 and handle it that way? (I’ve been told that this is bad practice)

I apologize if this is written a bit sloppy. I have a lot on my mind regarding the issue and do not know how to spill it all out. If you have any questions or need more information, please let me know. & Before I get thrown under a bus about this - Yes, I’ve googled all I can about this. I’ve attempted it on my own several different times. I’ve read the documentation.

Thank you!
-A

#2

I’m a bit bleh with libGDX cameras (I made my own camera and translated all my blocks and entities by the camera position in my game :slight_smile: so I can’t really help with that.

Regarding your effects, don’t re-invent the wheel. Render a string as your effect, colour it, apply alpha, do whatever fancy thing you want. Unless you want a specific “font” for the effect, I highly advise using the default font service that comes with libGDX.

Good luck!

#3

WARNING: what I’m about to say could be horribly horribly wrong because I suck with using the camera

I looked at the documentation for the orthographic camera (here) and it appears that Sprites have a setSize method that’s supplied in camera world units. Therefore if you have a sprite that has a size of 100x100, and your camera has a viewport size of 50x50, you would only be able to see 50x50 of the sprite at one time. Or so I think.
I tested changing my camera’s unit size from pixels to some random small number and it didn’t affect anything because everything I draw is with a Texture and not a Sprite.

Please, please please correct me if I’m wrong because I’d love to learn about how to use the camera properly.

#4

What do you mean by not reinvent the wheel? I wouldn’t necessarily be doing anything outside of LibGDX, as it supplies the freetype extension. This extension allows me to load up ttf files and use them. I really just don’t know if I should use the separate HUD camera for my font-related effects.

#5

I just create an HUD class that has its own SpriteBatch, and just never set the projection matrix to the camera. This way I have a Sprite Batch for my in-game world that can move around, and the HUD one which stays with the camera at all times.

#6

I meant this in context with making your own sprites (0, 1, 2, 3, …, 9, etc.) for the floating text effect.

#7

@chrislo27 - Oh I see.

Here is the free type extension:

I have used this before and figured I may as well use it again for this project. However, now that I am wanting to achieve this floating text effect, I’m not sure I should use it. Do to scaling, I would imagine a separate sprite batch or camera would be required. The only thing that I do not know how to do from there would be positioning. I imagine that due to the scaling, the coordinate system may be a bit different.

I am actually quite surprised that there aren’t many tutorials on this effect, as its the most commonly used effect I’ve seen.

#8

Render text to a texture and display that texture like you would any other sprite.

#9

Also for the record you should have a camera for the UI on its own.