Dynamic font magic

totebo · May 2018

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:

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

antix · 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

totebo · May 2018

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?

antix · 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

antix · May 2018

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

totebo · May 2018

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!

oleg · May 2018

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))

oleg · 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 напис кольору по центру

totebo · May 2018

@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.

oleg · 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?

totebo · May 2018

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?!

oleg · May 2018

you are wrong, this forum uses Turkish but not English, write in Turkish.!

chauvinism is bad!

simwhi · May 2018

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.

totebo · May 2018

Thanks simwhi, that may be the best option actually. Then you have pixel-perfect control.

hgy29 · June 2018

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

oleg · July 2018

can an example?

totebo · July 2018

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

oleg · July 2018

can not set color and transparency?

hgy29 · July 2018

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)

oleg · July 2018

and if the text is translucent? colors are mixed ..

SinisterSoft · July 2018

In that case you would have to render it to a texture, then render the texture to the screen - the texture being translucent.

oleg · July 2018

Eureka!!!
convert text to viewport

totebo · July 2018

You love your Viewport @oleg !

oleg · July 2018

not mine

http://docs.giderosmobile.com/reference/gideros/Viewport#Viewport

SinisterSoft · July 2018

Does that work? You make the viewport translucent and the text within it doesn't mess up and mix the colours?

oleg · July 2018

~~so everything works, the colors do not merge~~

SinisterSoft · July 2018

I wonder how that works - that's really odd.

@hgy29 does this make sense?

oleg · July 2018

I made a mistake, with transparency the colors are mixed
I have an overlay of setBlendMode overlays so I did not see mixing

SinisterSoft · July 2018

I though it was odd. I couldn't figure out how that was done.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Dynamic font magic

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Dynamic font magic

Comments