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

Dynamic font magic

totebototebo Member
edited May 2018 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

Comments

  • antixantix Member
    edited May 2018
    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 2018
    @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
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • olegoleg Member
    edited May 2018
    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 напис кольору по центру
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • 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 2018
    @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?
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • 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

    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
    +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.

    Likes: luyimoon

    My Gideros games: www.totebo.com
    +1 -1 (+1 / -0 )Share on Facebook
  • 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 (+6 / -0 )Share on Facebook
  • olegoleg Member
    can an example?
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • totebototebo Member
    Description in the link below. It's really quite nice, I've started playing with it in my game. For some reason getBounds() doesn't seem to be accurate on an outlined textfield. So to achieve the effect I'm after I offset by the font outline size instead.

    http://docs.giderosmobile.com/reference/gideros/TTFont/new

    Likes: oleg

    My Gideros games: www.totebo.com
    +1 -1 (+1 / -0 )Share on Facebook
  • olegoleg Member
    edited July 2018
    can not set color and transparency?
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • hgy29hgy29 Maintainer
    Basically you overlay two textfields on top of each other: the outlined version and the regular one. Sample code:
    application: setBackgroundColor(0x90c3ff)
    local txt="CAN YOU FEEL THE GIDEROS LOVE?" --OUTLINE TEXT
    local txtc="CAN YOU FEEL THE \e[color=#8FD700]GIDEROS\e[color] LOVE?" --FRONT TEXT
    --[[local txt="GOOGLE"
    local txtc="\e[color=#4285f4]G\e[color=#ea4335]O\e[color=#fbbc05]O\e[color=#4285f4]G\e[color=#34a853]L\e[color=#ea4335]E"
    ]]
    local s=Sprite.new()
    local f=TTFont.new("BORN.TTF",24,"",true,3) -- Create an outlined font
    local f1=TTFont.new("BORN.TTF",24,"",true) -- Regular font
     
    local t=TextField.new(f,txt,{ letterSpacing=3 })
    s:addChild(t) 
    local t1=TextField.new(f1,txtc,{ letterSpacing=3 })
    t1:setTextColor(0xFFFFFF) t1:setPosition(1,1)
    s:addChild(t1)
    s:setPosition(10,100)
     
    stage:addChild(s)

    Likes: oleg

    +1 -1 (+1 / -0 )Share on Facebook
  • olegoleg Member
    and if the text is translucent? colors are mixed ..
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • SinisterSoftSinisterSoft Maintainer
    In that case you would have to render it to a texture, then render the texture to the screen - the texture being translucent.
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • olegoleg Member
    Eureka!!!
    convert text to viewport B)

    Likes: SinisterSoft

    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
    +1 -1 (+1 / -0 )Share on Facebook
  • totebototebo Member
    You love your Viewport @oleg ! :)
    My Gideros games: www.totebo.com
  • SinisterSoftSinisterSoft Maintainer
    Does that work? You make the viewport translucent and the text within it doesn't mess up and mix the colours?
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • olegoleg Member
    edited July 2018
    so everything works, the colors do not merge =)
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
    +1 -1 (+2 / -0 )Share on Facebook
  • SinisterSoftSinisterSoft Maintainer
    I wonder how that works - that's really odd.

    @hgy29 does this make sense?
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • olegoleg Member
    I made a mistake, with transparency the colors are mixed
    I have an overlay of setBlendMode overlays so I did not see mixing

    Likes: SinisterSoft

    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
    +1 -1 (+1 / -0 )Share on Facebook
  • SinisterSoftSinisterSoft Maintainer
    I though it was odd. I couldn't figure out how that was done. :)

    Likes: oleg

    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.