Corona SDK and other Game Development Tutorials
@gamebuilding

Adding Drop Shadow to Text Objects

With Corona’s latest daily build (2013.1202) including support for text alignment in text objects, I thought this was an appropriate tutorial – adding a drop shadow to text objects. A drop shadow is a visual effect that gives the illusion of a raised object and is commonly used on windows, menu items or text objects. Although there are tons of applications for drop shadows, today’s Corona SDK tutorial will focus on text objects.

By adding a drop shadow to a text object, you can make your text objects easily distinguishable from any colored background it’s in front of. This may seem like a minor addition to your game or business app, but I believe that small additions like these make your product look more polished.

In our tutorial, we will use white text on an orange background. So, we’ll get started by creating a new rectangle that’s orange.

local background = display.newRect(0,0,display.contentWidth,display.contentHeight)
 background:setFillColor(255,127,0)

Since every good programmer is a lazy one, we’ll create a function called createTextWithShadow that will accept the following parameters:

  • mytext = This is the text to be used in our text object.
  • x = The x location of the text object.
  • y = The y location of the text object.
  • fontType = The font you want to use.
  • fontSize = How big you want the font to be.
  • shadowOffset = How far away you want the shadow to be.

Within the function, we’ll use these parameters to create two text objects – one for the shadow and one for just the text object.

function createTextWithShadow(mytext, x, y, fontType, fontSize, shadowOffset)
   local textobjectshadow = display.newText(mytext,x+shadowOffset,y+shadowOffset,fontType,fontSize)
   textobjectshadow:setTextColor(0,0,0,128)

   local textobject = display.newText(mytext,x, y, fontType, fontSize)
end

Finally, we will call the function we just wrote with the parameters that we specified.

createTextWithShadow("Thats So Panda",35,100, native.systemFont,74,8)

And that’s it to creating a text object with a shadow! I strongly suggest adjusting the offset to make the text object look correct in your application. Also, if you are using Storyboard, you will have to insert the objects into self.view (or the group variable if you are using Corona’s Storyboard template). If you have questions for me, please let me know in the comments below!

Also, here’s the full code below for creating a drop shadow with Corona SDK.

local background = display.newRect(0,0,display.contentWidth,display.contentHeight)
 background:setFillColor(255,127,0)
function createTextWithShadow(mytext, x, y, fontType, fontSize, shadowOffset)
 local textobjectshadow = display.newText(mytext,x+shadowOffset,y+shadowOffset,fontType,fontSize)
 textobjectshadow:setTextColor(0,0,0,128)
local textobject = display.newText(mytext,x, y, fontType, fontSize)
 end
createTextWithShadow("Thats So Panda",35,100, native.systemFont,74,8)
1 Comment
  1. great tutorial and so easy to implement, I never thought about it

    Regards
    Hector

Leave a Reply