Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat
Dynamic font magic - Gideros Forum

Dynamic font magic

totebototebo Member
edited May 20 in General questions
Calling all legendary game makers!

With all the cool new stuff that's been added to Gideros, what's the easiest way to achieve this:

1. Multicoloured text; ie. a line of text where you dynamically can set the colour of each word/letter.
2. Text outlines, ideally with the ability to offset it for the effect seen below:

image

I plan to translate my game into many languages, so ideally there would be a truly magic way of doing this in code, rather than manually by using bitmap fonts.

Cheers,

Niclas

My Gideros games: www.totebo.com
gideroslove.png
655 x 108 - 21K

Comments

  • antixantix Member
    edited May 20
    Right off the top of my head I would say use two TTF fonts, one the size of the fill, and one the size of the outline. Create two TextFields (one for the outline and one for the fill) and render them to a RenderTarget (changing the fill color as required) (shadow first, fill second) which you then turn into a Bitmap or possibly a Pixel (I'd go with trusty old Bitmap personally).

    You would need code to split the text and do the layout but that's not entirely difficult, except for multiple languages which might prove mildly braintwisting :)
  • totebototebo Member
    Thanks @antix. I think I'd struggle to find a font that has a version with the outline, especially with different languages. Maybe I'll clscrap the outline for now.

    Isn't there an easy way to colour in text nowadays? Didn't you have a neat library for that?
    My Gideros games: www.totebo.com
  • antixantix Member
    edited May 20
    @totebo, okay so you just use the same font.. so myfont 20 for the shadow and myfont 16 for the fill, that should work.

    My LogWindow class has code for splitting text and stuff I think. It's on the forums somewhere :)
  • antixantix Member
    Actually I don't think my idea would work with using the same font but with different sizes. Different sized fonts will space the characters differently so the larger font would be wider than it should be.. ie.. the characters would not line up with the smaller font.

    Gideros provided no facility to set the character spacing in fonts (I think) so I think my idea is a flop :(
  • totebototebo Member
    Nah mate, using a different size font won't work for two reasons:

    1. The spacing would be off
    2. Just increasing the size won't work with "holes", like the inside of the "o" for example.

    It's tricky!

    Likes: antix

    My Gideros games: www.totebo.com
    +1 -1 (+1 / -0 ) Share on Facebook
  • olegoleg Member
    function text(x,y,txt,color,size)
     
     
     
                    local myText = TextField.new(TTFont.new("kBkzxLTx.ttf", size, txt))
     
                    myText:setTextColor(color) 
                    myText:setText(txt)
     
                    myText:setPosition(x-myText:getWidth()/2,y)
     
                    return myText
     
     
    end
    function rgb(r, g, b) return ((r*256)+g)*256+b end
    self:addChild(text(84,25,"приклад напису","0x000000",20))
     
    stage:addChild(text(150,100,"приклад напису",rgb(64,0,0),35))
    stage:addChild(text(152,102,"приклад напису",rgb(255,128,0),35))


    image.png
    299 x 174 - 37K
  • olegoleg Member
    edited May 20
    antix said:

    Actually I don't think my idea would work with using the same font but with different sizes. Different sized fonts will space the characters differently so the larger font would be wider than it should be.. ie.. the characters would not line up with the smaller font.

    Gideros provided no facility to set the character spacing in fonts (I think) so I think my idea is a flop :(

    щоб зробити контур треба міняти не розмір а створити 4 однакових написи тіні і здвинути право, ліво верх низ і 1 напис кольору по центру
  • totebototebo Member
    @antix, you can control the spacing for fonts with Gideros, but even so it's tricky because it's difficult to know exactly what values to use. I also noticed you commented on your own comment before me and said pretty much the same thing! :)

    @oleg two things; 1) thanks for the code, although it doesn't do what I want, rather just add a dropshadow. But still cool. And 2) Best to stick to English to keep the forum usable for the majority. ;)
    My Gideros games: www.totebo.com
  • olegoleg Member
    edited May 20
    @totebo -
    1. contour
     stage:addChild(text(150+2,100+2,"приклад напису",rgb(64,0,0),35))
     stage:addChild(text(150-2,100-2,"приклад напису",rgb(64,0,0),35))
     stage:addChild(text(150+2,100-2,"приклад напису",rgb(64,0,0),35))
     stage:addChild(text(150-2,100+2,"приклад напису",rgb(64,0,0),35))
    stage:addChild(text(150,100,"приклад напису",rgb(255,128,0),35))
    2 "forum usable for the majority. " -Let's write in Chinese so that the forum is accessible to most?
  • totebototebo Member
    Thanks @oleg, that may work!

    In regards to the language, this forum uses English, so until that changes its best to stick to that particular language I think. If I started writing in Swedish, @hgy29 in French, @SinisterSoft in Northern, who knows where we'd end up?! :)

    Likes: hgy29, antix, talis

    My Gideros games: www.totebo.com
    +1 -1 (+3 / -0 ) Share on Facebook
  • olegoleg Member
    you are wrong, this forum uses Turkish but not English, write in Turkish.!

    chauvinism is bad!


    Likes: antix

    Dislikes: hgy29, talis

    +1 -1 (+1 / -2 ) Share on Facebook
  • simwhisimwhi Member
    We are using bitmap fonts for our English language learning games. We only include characters that are used for each language. This reduces the the filesize dramatically.

    Likes: totebo

    +1 -1 (+1 / -0 ) Share on Facebook
  • totebototebo Member
    Thanks simwhi, that may be the best option actually. Then you have pixel-perfect control.
    My Gideros games: www.totebo.com
  • hgy29hgy29 Maintainer
    In case someone read this in the future, what the OP is trying to achieve can be done in Gideros 2018.6 with font outlines
    +1 -1 (+5 / -0 ) Share on Facebook
Sign In or Register to comment.