Hey all Im wondering how on earth i would stroke a font in corona sdk.
I used text.strokeWidth but that only strokes the left side of the font!
all help welcome
Thank You
James
Our text isn’t really something that can be stroked. We generate an image of the text and then that image is what gets returned so OpenGL can operate on it.
That’s why you’re getting weird behavior. The best way is to create a second text a couple of point sizes bigger in your stroke color and draw them on top of each other. It’s not perfect, but its what’s possible.
Rob
Yeah it just looks really shoddy and terrible when I try that… thanks anyway!
Our text isn’t really something that can be stroked. We generate an image of the text and then that image is what gets returned so OpenGL can operate on it.
That’s why you’re getting weird behavior. The best way is to create a second text a couple of point sizes bigger in your stroke color and draw them on top of each other. It’s not perfect, but its what’s possible.
Rob
Yeah it just looks really shoddy and terrible when I try that… thanks anyway!
Are there any plans for supporting stroke on text? It would be really useful 
I have not heard of any plans. The official recommendation is that if you need stylized text to use bitmap text. In the mean time, please feel free to go to http://feedback.coronalabs.com and put in a request for this if there isn’t one already.
Rob
Okay I voted for it on the feedback site. Unfortunately bitmap text won’t work for what I want to do because I want the user to be able to adjust the stroke width on demand (i.e. stylize the text to their liking). All bitmap text comes prerendered so it doesn’t fit the bill.
It looks like both android and iOS support stroking text, so it seems possible for Corona to implement a strokeWidth parameter in the display.newText() api? 
Are there any plans for supporting stroke on text? It would be really useful
I have not heard of any plans. The official recommendation is that if you need stylized text to use bitmap text. In the mean time, please feel free to go to http://feedback.coronalabs.com and put in a request for this if there isn’t one already.
Rob
Okay I voted for it on the feedback site. Unfortunately bitmap text won’t work for what I want to do because I want the user to be able to adjust the stroke width on demand (i.e. stylize the text to their liking). All bitmap text comes prerendered so it doesn’t fit the bill.
It looks like both android and iOS support stroking text, so it seems possible for Corona to implement a strokeWidth parameter in the display.newText() api?
Using text + off-color versions of the text adjusted slightly (3px) in 8 directions, I get a similar effect.
Transitions don’t play nice with this, but the rest of the my code does.
For transitions, I end up having to make 9 transitions if I want moving stroked text.
This may or may not be helpful to people.
_textColor is a fill color tuple ex: {r=1,b=1,g=1}
_borderColor is a fill color tuple ex: {r=0,b=0,g=0}
_options is what you would pass to a display.newText(…)
--[[Usage: local mockTextObject = prettytext( {r=255/255,b=204/255,g=27/255}, -- textColor 0, -- borderColor shortcut for {r=0,b=0,g=0} { -- display.newText options parent=\_b.boostGroup, text=value, x=bar\_x, y=txtY, font="Continuum Bold", fontSize=24 } )]]-- prettytext = function (\_textColor, \_borderColor, \_options) local Z = 3 -- the new instance local self = { -- public fields go in the instance table --public\_field = 0 textColor = {r=1,b=1,g=1}, borderColor = {r=0,b=0,g=0}, options = \_options, shadow1 = nil, shadow2 = nil, shadow3 = nil, shadow4 = nil, shadow5 = nil, shadow6 = nil, shadow7 = nil, shadow8 = nil, text1 = nil, } if \_textColor ~= 1 then self.textColor = \_textColor end if \_borderColor ~= 0 then self.borderColor = \_borderColor end local originalX = \_options.x local originalY = \_options.y \_options.x = originalX-Z \_options.y = originalY-Z self.shadow1 = display.newText(\_options) self.shadow1:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX+Z \_options.y = originalY-Z self.shadow2 = display.newText(\_options) self.shadow2:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX+Z \_options.y = originalY+Z self.shadow3 = display.newText(\_options) self.shadow3:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX-Z \_options.y = originalY+Z self.shadow4 = display.newText(\_options) self.shadow4:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX \_options.y = originalY+Z self.shadow5 = display.newText(\_options) self.shadow5:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX \_options.y = originalY-Z self.shadow6 = display.newText(\_options) self.shadow6:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX-Z \_options.y = originalY self.shadow7 = display.newText(\_options) self.shadow7:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX+Z \_options.y = originalY self.shadow8 = display.newText(\_options) self.shadow8:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX \_options.y = originalY self.text1 = display.newText(\_options) self.text1:setFillColor( self.textColor.r, self.textColor.b, self.textColor.g ) function self:removeSelf() self.shadow1:removeSelf() self.shadow1 = nil self.shadow2:removeSelf() self.shadow2 = nil self.shadow3:removeSelf() self.shadow3 = nil self.shadow4:removeSelf() self.shadow4 = nil self.shadow5:removeSelf() self.shadow5 = nil self.shadow6:removeSelf() self.shadow6 = nil self.shadow7:removeSelf() self.shadow7 = nil self.shadow8:removeSelf() self.shadow8 = nil self.text1:removeSelf() self.text1 = nil end function self:setFillColor(r,b,g) self.text1:setFillColor(r,b,g) end function self.setX(\_X) self.shadow1.x = \_X-Z self.shadow2.x = \_X+Z self.shadow3.x = \_X+Z self.shadow4.x = \_X-Z self.shadow5.x = \_X self.shadow6.x = \_X self.shadow7.x = \_X-Z self.shadow8.x = \_X+Z self.text1.x = \_X end function self:setY(\_Y) self.shadow1.y = \_Y-Z self.shadow2.y = \_Y-Z self.shadow3.y = \_Y+Z self.shadow4.y = \_Y+Z self.shadow5.y = \_Y+Z self.shadow6.y = \_Y-Z self.shadow7.y = \_Y self.shadow8.y = \_Y self.text1.y = \_Y end function self.setText(txt) self.text1.text = txt self.shadow1.text = txt self.shadow2.text = txt self.shadow3.text = txt self.shadow4.text = txt self.shadow5.text = txt self.shadow6.text = txt self.shadow7.text = txt self.shadow8.text = txt end -- return the instance return self endUsing text + off-color versions of the text adjusted slightly (3px) in 8 directions, I get a similar effect.
Transitions don’t play nice with this, but the rest of the my code does.
For transitions, I end up having to make 9 transitions if I want moving stroked text.
This may or may not be helpful to people.
_textColor is a fill color tuple ex: {r=1,b=1,g=1}
_borderColor is a fill color tuple ex: {r=0,b=0,g=0}
_options is what you would pass to a display.newText(…)
--[[Usage: local mockTextObject = prettytext( {r=255/255,b=204/255,g=27/255}, -- textColor 0, -- borderColor shortcut for {r=0,b=0,g=0} { -- display.newText options parent=\_b.boostGroup, text=value, x=bar\_x, y=txtY, font="Continuum Bold", fontSize=24 } )]]-- prettytext = function (\_textColor, \_borderColor, \_options) local Z = 3 -- the new instance local self = { -- public fields go in the instance table --public\_field = 0 textColor = {r=1,b=1,g=1}, borderColor = {r=0,b=0,g=0}, options = \_options, shadow1 = nil, shadow2 = nil, shadow3 = nil, shadow4 = nil, shadow5 = nil, shadow6 = nil, shadow7 = nil, shadow8 = nil, text1 = nil, } if \_textColor ~= 1 then self.textColor = \_textColor end if \_borderColor ~= 0 then self.borderColor = \_borderColor end local originalX = \_options.x local originalY = \_options.y \_options.x = originalX-Z \_options.y = originalY-Z self.shadow1 = display.newText(\_options) self.shadow1:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX+Z \_options.y = originalY-Z self.shadow2 = display.newText(\_options) self.shadow2:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX+Z \_options.y = originalY+Z self.shadow3 = display.newText(\_options) self.shadow3:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX-Z \_options.y = originalY+Z self.shadow4 = display.newText(\_options) self.shadow4:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX \_options.y = originalY+Z self.shadow5 = display.newText(\_options) self.shadow5:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX \_options.y = originalY-Z self.shadow6 = display.newText(\_options) self.shadow6:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX-Z \_options.y = originalY self.shadow7 = display.newText(\_options) self.shadow7:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX+Z \_options.y = originalY self.shadow8 = display.newText(\_options) self.shadow8:setFillColor( self.borderColor.r, self.borderColor.b, self.borderColor.g ) \_options.x = originalX \_options.y = originalY self.text1 = display.newText(\_options) self.text1:setFillColor( self.textColor.r, self.textColor.b, self.textColor.g ) function self:removeSelf() self.shadow1:removeSelf() self.shadow1 = nil self.shadow2:removeSelf() self.shadow2 = nil self.shadow3:removeSelf() self.shadow3 = nil self.shadow4:removeSelf() self.shadow4 = nil self.shadow5:removeSelf() self.shadow5 = nil self.shadow6:removeSelf() self.shadow6 = nil self.shadow7:removeSelf() self.shadow7 = nil self.shadow8:removeSelf() self.shadow8 = nil self.text1:removeSelf() self.text1 = nil end function self:setFillColor(r,b,g) self.text1:setFillColor(r,b,g) end function self.setX(\_X) self.shadow1.x = \_X-Z self.shadow2.x = \_X+Z self.shadow3.x = \_X+Z self.shadow4.x = \_X-Z self.shadow5.x = \_X self.shadow6.x = \_X self.shadow7.x = \_X-Z self.shadow8.x = \_X+Z self.text1.x = \_X end function self:setY(\_Y) self.shadow1.y = \_Y-Z self.shadow2.y = \_Y-Z self.shadow3.y = \_Y+Z self.shadow4.y = \_Y+Z self.shadow5.y = \_Y+Z self.shadow6.y = \_Y-Z self.shadow7.y = \_Y self.shadow8.y = \_Y self.text1.y = \_Y end function self.setText(txt) self.text1.text = txt self.shadow1.text = txt self.shadow2.text = txt self.shadow3.text = txt self.shadow4.text = txt self.shadow5.text = txt self.shadow6.text = txt self.shadow7.text = txt self.shadow8.text = txt end -- return the instance return self end