Using stylised text

sunnyguy · July 2012

Is there any way to use stylised text in Gideros app? I need a text with an outline and a gradient fill for my game.
And of course I mean dynamic text because one can just use a picture for a static one

Teranth · July 2012

Absolutely, you can use a Bitmap Font to basically style the font however you would like.

basically you export a font set as a bitmap--like a sprite-sheet, and then you have Gideros Load it up. Once it's a bitmap you can do any kind of graphical changes you want before loading it up.

One post about it: http://www.giderosmobile.com/forum/discussion/comment/735#Comment_735

Hope it helps, some of the guys on the form have been doing a bunch with bitmap fonts so they may have a better answer, but it is possible.

Eli

sunnyguy · July 2012

Oh, thanks, that's exactly what I need

Teranth · July 2012

Anytime, glad I could help

Scouser · July 2012

Exactly what @Teranth said: I created this font for my game

techdojo · July 2012

@Scouser - it'd have been a more useful post if you'd included the accompanying text file with the texture coords as well

Scouser · July 2012

Doh!!!

Teranth · July 2012

@Scouser nice font I bet it looks great in your game

techdojo · July 2012

It does actually - it suits the style very well, in fact he might actually finish this one!

Scouser · July 2012

Now now @techdojo that was a bit below the belt. The thing is with all of these part complete projects, it shouldn't take too long to finish them off & I'm learning the techniques required to do just that with each new project I start

Anyway as requested, here is the txt file that goes with the font texture. I have also included the font file, I think I got it from here but can't remember

Install the font from the zip file onto your system.

Download BMFont and install it onto your system, and run it.

In Options > Font Settings, change the face to Bubblegum (if you haven't installed the font then you will need to do so first) and select your size in pix.
In Options > Export Options, change Bit Depth to 32 and Textures to PNG

Then use Options > Save bitmap font as.

A larger font allows for more manipulation.

I then load the font texture into Photoshop and apply a 2 pixel stroke inside. This keeps the font the same size as defined in the fnt file.

Now you can apply any extra graphic touches you require (although with gradients, you have to do each character individually or in groups of same height characters otherwise it doesn't work properly).

[brainfade]
Doh!!!!
I forgot I changed the name of the files but didn't edit the txt file to reflect this. You will need to edit the txt file and replace file="bubblegum_34_0.png" with file="grad-font.png"
[/brainfade]

Scouser · July 2012

One more thing. I also keep the original font so I can apply different effects without having to change the one I just created. This is a lesson learned from past mistakes of changing something, overwriting the original and then needing to recreate the original to fix a problem. This goes for code or graphics as only recently in my paying job I had to modify a project that "will never be used again so don't worry about it". I have projects that haven't been touched for 5 or more years and have been asked to update them because a customer orders a small quantity.

techdojo · July 2012

I thought it was like 10 years on that one project last year!
Besides I was actually making a compliment about your latest project - as for learning the techniques, I think "re-learning" is probably a better phrase as I'm sure you and your compatriots actually invented most of them in the first place!

Scouser · July 2012

I think "re-learning" is probably a better phrase as I'm sure you and your compatriots actually invented most of them in the first place!

You're probably right there

Let's not get into that retro old skool stuff again, I won't be able to stop reminiscing about the good old days otherwise

)

sunnyguy · July 2012

There is one more thing I want to ask, what is the best way to use different sized bmfonts with different screen resolutions?

Scouser · July 2012

@sunnyguy: I currently use a 34 point and a 50 point font on a 480 x 800 screen and that seems to scale up well on a 600 x 1024 tablet. It also works well scaling down to a 320 x 480 screen so in that respect I think I have found a sweet spot (at least for my purposes). I also made a modification to BMFont to allow me to pass a TextureRegion and offset within a larger texture which helps with speed as the different fonts don't require texture changes when you change font size.

Hope this answers your question.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Using stylised text

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Using stylised text

Comments