Using Gradients with Corona SDK

Screen Shot 2013-03-21 at 9.17.38 PM

One of the lesser known features about Corona SDK may be the ability to use gradients on display objects within your app. With gradients, you can add a certain level of shine or luster to your display objects. You can also set the direction of the gradient with Corona SDK. Currently, the gradient feature is only available to the circle or rectangle display objects that are created with newRect() or newCircle().

Let’s take a look at how to use gradients by creating 3 rectangles that will change the gradient color and direction every half a second.

Our first step is to hide the status bar and set up two global variables that will capture the content width and content height.

--Hide status bar from the beginning
display.setStatusBar( display.HiddenStatusBar ) 

-- Set Variables
_W = display.contentWidth; -- Get the width of the screen
_H = display.contentHeight; -- Get the height of the screen

Next, we are going to create two tables that will hold the squares and the available directions of the gradients.

squares = {}
direction = {"up","left","right","down"}

Then, we are going to add the squares to the screen by using Corona’s display.newRect().

squares[1] = display.newRect( 0, 0, 100, 100 )
squares[1].x = _W * .8
squares[1].y = _H/2

squares[2] = display.newRect( 0, 0, 100, 100 )
squares[2].x = _W/2
squares[2].y = _H/2

squares[3] = display.newRect( 0, 0, 100, 100 )
squares[3].x = _W * .2
squares[3].y = _H/2

Once we have set up our squares, we will then set up a function that will change the gradient color and direction of our squares. We accomplish this by create a function named gradient and we’ll make it accept 4 arguments. The four arguments are red, green, blue, and the direction of the gradient. With the arguments, we create a new gradient and return the gradient value. The returned value will be the new gradient used in our shape.

local function gradient( r, g, b, dir )
    local color = graphics.newGradient(
        { r, g, b },
        { r * math.random(0,1), g * math.random(0,1), b * math.random(0,1) },
        dir )
    return color

Our last function will be to actually change the gradient. This function will cycle through the squares table and create a random value for r, g, b, and dir (red, green, blue, and direction). These values are then passed to function gradient to change the color of the square.

local function changeGradient()    
    for i=1,#squares do
        r = math.random(1,255)
        g = math.random(1,255)
        b = math.random(1,255)
        dir = math.random(1,4)

        squares[i]:setFillColor( gradient( r, g, b, direction[dir]))

Finally, we will set up a timer that will call the function changeGradient every half a second.

timer.performWithDelay(500, changeGradient, 0)

And that’s it! With less than 50 lines of code, you have created 3 squares that change color with a gradient. If you have questions or comments, please leave them below! Thanks for reading at!

  1. Super cool, thanks for this tutorial!

Leave a Reply