Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Outline of TextFields — Gideros Forum

Outline of TextFields

StoffeStoffe Member
edited November 2011 in Roadmap
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. :)

Comments

  • atilimatilim Maintainer
    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.
  • 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. :)
  • atilimatilim Maintainer
    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.
  • atilimatilim Maintainer
    Also there is Hiero (java, multiplatform, free) for bitmap font creation: http://slick.cokeandcode.com/demos/hiero.jnlp
  • atilimatilim Maintainer
    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.

    :)
  • 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")

  • atilimatilim Maintainer
    great :) I've fixed this bug, thank you.
  • Does automatic scaling work with the BMFont class?

    Thanks
  • atilimatilim Maintainer
    edited 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.
    zip
    zip
    bmfont-test.zip
    575K
  • @Atilim

    Good post, thanks.

    Can you (or anyone) please explain what the:

    text:setScale(scalex, scaley)

    part does please?
  • atilimatilim Maintainer
    here we're loading low and high res images without using automatic image scaling. therefore we need to scale it by ourselves.
  • @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.
    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • ..plus what Atilim said in specific reference to the example.
    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • @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.
    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
Sign In or Register to comment.