Add a Quick Drop Shadow in Corona SDK

Corona has come a long way in the options that it offers developers for text manipulation. They offer the ability to align text, font sizes, font colors, and more. However, they are missing the option to add drop shadows. In this tutorial, we’ll learn how to create a function that can be used to add drop shadows to text objects.

For those of you that are unfamiliar with a drop shadow, a drop shadow is a visual effect that makes an object look raised and is commonly used on windows, menu items, or in this case, text objects. There are a ton of applications for this effect.

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)

Next, we will create a function called createTextWithShadow so we can use the function in our other apps. When you can, it’s makes sense to keep a list of these functions in a separate file so you can add them to other apps even easier. The parameters for our function is as follows:

  • 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("Game Building Tools",35,100, native.systemFont,74,8)

Anytime you call this function, you’ll have a text object with a drop shadow. You can change the color of the drop shadow by changing the numbers in setTextColor(). Additionally, you may want to adjust the offset depending on the size of your object. If you have a larger object, you may need to increase the offset to see the drop shadow.

Below is the code in one snippet in case you want to copy and paste this code into your project. If you have questions for me, please let me know in the comments below!

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

Leave a Reply

Your email address will not be published. Required fields are marked *