Outline of TextFields

Stoffe · November 2011

Would it be possible to support having an outline of the letters in a textfield?

Often the text may be on different backgrounds and it may be hard to see it, an outline solves this to some extent - and looks nice.

Tried to do it myself by adding another slightly larger textfield behind, but seems it needs to be done with double textfields for each letter, otherwise the outline will be off except for the center letter. Unless I'm doing something wrong.

atilim · November 2011

It will be hard to render outlined letters with TextField.

Instead, I would create a outlined bitmap font with http://www.angelcode.com/products/bmfont/ (free, windows) or http://glyphdesigner.71squared.com/ (commercial, mac os) and then display each character with TextureRegion http://www.giderosmobile.com/documentation/reference_manual_2011.9.html#TextureRegion

On the other hand, this requires loading the parameters of character glyphs from a text file.

Stoffe · November 2011

That's what I thought. Please take it as a low-priority suggestion to add this functionality to textfields sometime later, if it is possible. I'm gonna work around it for now, so no biggie.

atilim · November 2011

In fact, I want to implement a bmfont example for a long time

I can post the first results here in a couple of days.

atilim · November 2011

Also there is Hiero (java, multiplatform, free) for bitmap font creation: http://slick.cokeandcode.com/demos/hiero.jnlp

atilim · November 2011

Hi Stoffe,

I've created a minimalist example of using BMFonts inside Gideros: http://github.com/gideros/BMFont/

Currently, it doesn't support kerning and unicode characters but I'm planning to add these features too.

Stoffe · November 2011

Ok, really nice! Played with it a little and figured out that if I make a font using gray scales, I can use setColorTransform to make for instance a blinking red font from the same imagefile. In my game, I have a timer in gray until the time starts to run out, when it starts to blink red and it's nice to not have to have multiple textures only for that.

I'm probably going to use this, thanks!

Btw, you have the name of the text file hardcoded in BMFont:init(), should be:

file = io.open(fontfile, "rt")

atilim · November 2011

great

I've fixed this bug, thank you.

Tom2012 · September 2012

Does automatic scaling work with the BMFont class?

Thanks

atilim · September 2012

Unfortunately no. Once a user asked me this question and here is my answer:

Here I think best way is to handle automatic image resolution by yourself. I'm attaching a sample code. Here are the steps I've done:

1. I've created two fonts with sizes 100 and 50 and named them as font-hi and font-lo.
2. In main.lua I get the logical scale and test if it's greater than 1.5.
a. If yes, I'm loading font-hi and scale the BMTextField with inverse of logical scale.
b. If no, I'm loading font-lo and don't scale the BMTextField.

I've another solution but it's a little bit complicated because it requires modifying the file that contains the font glyph data. If this method doesn't suit you, I can also describe the other method.

Hope this helps,

cheers,

Supporting BMFonts natively (so that automatic image resolution works) is in the roadmap.

Tom2012 · December 2012

@Atilim

Good post, thanks.

Can you (or anyone) please explain what the:

text:setScale(scalex, scaley)

part does please?

atilim · December 2012

here we're loading low and high res images without using automatic image scaling. therefore we need to scale it by ourselves.

OZApps · December 2012

@Tom, setScale just instructs how the object referenced to by text should be scaled. You can pass it a single parameter if both the x and y scaling is the same or individual settings. To understand this better, try this
1. Create a new project
2. Add an image to the project, let's say it's called image.png
3. now add a blank file called main.lua
4. now type the following code

 local _bmp = Bitmap.new(Texture.new("image.png"))
 stage:addChild(_bmp)
 _bmp:setPosition(100,100)

you will see the image.png at co-ordinates 100,100

Now add another line in the code towards the end

 _bmp:setScale(1,0.5)

and run it

then try

 _bmp:setScale(0.5,1)

and

 _bmp:setScale(0.5)

and

 _bmp:setScale(2)

as you change the values and run the code, you will see exactly what this line does.

In the sample above where you asked the question, text is an object that refers to the textField where as in this sample we are using _bmp which is an object of type bitmap/sprite. The fundamentals are the same, hope this helped you get an understanding of what setScale does.

OZApps · December 2012

..plus what Atilim said in specific reference to the example.

OZApps · December 2012

@Atilim, with the BeerSDK, displaying text on a retina device usually involved creating text at souble the fontSize and then scaling it down to take advantage of anti-aliasing to get sharp retina text. I believe that with Gideros that is not how things work, the quality of the text at 1x or 0.5x is the same which is both good and not so good. Would we have some form of anti-aliasing in the near future or is there something that we might be missing.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Outline of TextFields

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Outline of TextFields

Comments