1. Instead of subtracting the scroll speed, we will add it.
2. We changed the if-then statement to > 1040
3. We changed the translate location to -960.

Here’s the code to get a vertical scrolling background with Corona SDK.

Since we have a vertically scrolling background, I’ve changed the default and supported orientation to portrait instead of landscape.

Build.settings

settings =
{
orientation =
{
default = "portrait",

supported =
{
"portrait",
},

},
}

Everything in config.lua stays the same.

Config.lua

-- config.lua
application =
{
content =
{
width = 320,
height = 480,
scale = "zoomEven",
},
}

In main.lua, I’ve made a few more changes. Each image object is now 320 pixels wide and 480 pixels tall. This is so each background fills the entire screen. Then, I set the starting point for bg1 on the screen, bg2 480 pixels below bg1, and bg3 480 pixels below bg2. This is more of a primer to our scrolling background effect. Finally, I changed the if-then statements to listen for the y property of the backgrounds. When the background gets to 0, I move them off screen so the backgrounds never stop scrolling.

main.lua

--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
scrollSpeed = 2; -- Set Scroll Speed of background

-- Add First Background
local bg1 = display.newImageRect("images/bg1.png", 320, 480)
bg1:setReferencePoint(display.CenterLeftReferencePoint)
bg1.x = 0; bg1.y = _H/2;

-- Add Second Background
local bg2 = display.newImageRect("images/bg1.png", 320, 480)
bg2:setReferencePoint(display.CenterLeftReferencePoint)
bg2.x = 0; bg2.y = bg1.y+480;

-- Add Third Background
local bg3 = display.newImageRect("images/bg1.png", 320, 480)
bg3:setReferencePoint(display.CenterLeftReferencePoint)
bg3.x = 0; bg3.y = bg2.y+480;

local function move(event)

-- move backgrounds to the left by scrollSpeed, default is 8
bg1.y = bg1.y + scrollSpeed
bg2.y = bg2.y + scrollSpeed
bg3.y = bg3.y + scrollSpeed

-- Set up listeners so when backgrounds hits a certain point off the screen,
-- move the background to the right off screen
if (bg1.y + bg1.contentWidth) > 1040 then
bg1:translate( 0, -960 )
end
if (bg2.y + bg2.contentWidth) > 1040 then
bg2:translate( 0, -960 )
end
if (bg3.y + bg3.contentWidth) > 1040 then
bg3:translate( 0, -960 )
end
end

-- Create a runtime event to move backgrounds
Runtime:addEventListener( "enterFrame", move )

The only thing you’ll need to make this work is a background graphic that’s 320 by 480.

Again, this post was to just show the changes from the horizontal scrolling background to the vertical scrolling background. If you would like to see more Corona SDK tutorials, please leave a comment below!

I was recently asked to expand on my scrolling background tutorial to change the direction from left and right to down to up. Well, here it is!

In today’s post, we are going to learn how to make a vertically scrolling background with Corona SDK. The background will scroll from the bottom of the screen to the top of the screen. The code to make this change isn’t much, so I’ll just point out the differences from my other post at Creating a Horizontal Scrolling Background in Corona SDK.

Since we have a vertically scrolling background, I’ve changed the default and supported orientation to portrait instead of landscape.

Build.settings

settings =
{
orientation =
{
default = "portrait",

supported =
{
"portrait",
},

},
}

Everything in config.lua stays the same.

Config.lua

-- config.lua
application =
{
content =
{
width = 320,
height = 480,
scale = "zoomEven",
},
}

In main.lua, I’ve made a few more changes. Each image object is now 320 pixels wide and 480 pixels tall. This is so each background fills the entire screen. Then, I set the starting point for bg1 on the screen, bg2 480 pixels below bg1, and bg3 480 pixels below bg2. This is more of a primer to our scrolling background effect. Finally, I changed the if-then statements to listen for the y property of the backgrounds. When the background gets to 0, I move them off screen so the backgrounds never stop scrolling.

main.lua

--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
scrollSpeed = 2; -- Set Scroll Speed of background

-- Add First Background
local bg1 = display.newImageRect("images/bg1.png", 320, 480)
bg1:setReferencePoint(display.CenterLeftReferencePoint)
bg1.x = 0; bg1.y = _H/2;

-- Add Second Background
local bg2 = display.newImageRect("images/bg1.png", 320, 480)
bg2:setReferencePoint(display.CenterLeftReferencePoint)
bg2.x = 0; bg2.y = bg1.y+480;

-- Add Third Background
local bg3 = display.newImageRect("images/bg1.png", 320, 480)
bg3:setReferencePoint(display.CenterLeftReferencePoint)
bg3.x = 0; bg3.y = bg2.y+480;

local function move(event)

-- move backgrounds to the left by scrollSpeed, default is 8
bg1.y = bg1.y - scrollSpeed
bg2.y = bg2.y - scrollSpeed
bg3.y = bg3.y - scrollSpeed

-- Set up listeners so when backgrounds hits a certain point off the screen,
-- move the background to the right off screen
if (bg1.y + bg1.contentWidth) < 0 then
bg1:translate( 0, 480*3 )
end
if (bg2.y + bg2.contentWidth) < 0 then
bg2:translate( 0, 480*3 )
end
if (bg3.y + bg3.contentWidth) < 0 then
bg3:translate( 0, 480*3 )
end
end

-- Create a runtime event to move backgrounds
Runtime:addEventListener( "enterFrame", move )

The only thing you’ll need to make this work is a background graphic that’s 320 by 480.

Again, this post was to just show the changes from the horizontal scrolling background to the vertical scrolling background. If you would like to see more tutorials, please leave a comment below!

Today’s post is a quick one, but I’ve seen some developers ask how to create a blinking effect with Corona SDK. Creating a blink effect is as simple as modifying the alpha attribute on a display object (text, image or otherwise). Let’s take a look at the source code on how to make our text blink.

The first step is to hide the display bar and set some global variables.

--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 will add a text display object to the screen. We will be making this object blink in our example, but you can use an image here as well.

local txt_taptobegin = display.newText("This is Blinking Text", 100, 100, "Arial", 22)
    txt_taptobegin.x = _W/2
    txt_taptobegin.y = _H/2

Then, we will create the blink function. In this function, we are running a simple if-then-else statement. If the alpha (transparency) of the object is below 1, then set the transition to alpha 1. Otherwise, set the transition to alpha 0.1.

function blink()
    if(txt_taptobegin.alpha < 1) then
        transition.to( txt_taptobegin, {time=490, alpha=1})
    else 
        transition.to( txt_taptobegin, {time=490, alpha=0.1})
    end
end

After the function, we will create a timer that will be called every 500ms. The key part to making the blink effect work is the timing. In the transition.to, I’ve set the time to 490ms and the timer has been set to 500ms. The transition.to must be completed before the timer. Otherwise, you setting your app up for some weird effects.

txt_blink = timer.performWithDelay(500, blink, 0)

And that’s it to make a display object ‘blink’! Thank you for reading another post by That’s So Panda!

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
end

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

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 ThatsSoPanda.com!

If you don’t already use Dropbox or another file sharing service, I strongly suggest that you do. Dropbox has a built in file version feature that can help you control your game builds. Dropbox also backs up your files which is never a bad thing!

Late one night, instead of sleeping, I created a clock with Corona SDK. Creating a clock was a easier than I initially thought and I felt I should share the code on www.thatssopanda.com. So, here’s how I created a working clock with Corona SDK.

First, I created a new file called main.lua and added the following code. This allows me to hide the status bar and get the width and height of my screen.

--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’ll add some display objects to our screen so we can see the clock outline, the hour hand, the minute hand, and the second hand. I used Corona’s built-in functions to create one circle and three lines. Each line has a different color and length so we can keep them separated.

clockBorder = display.newCircle(_W/2,_H/2,125)
clockBorder:setFillColor(0,0,0)
clockBorder.strokeWidth = 5
clockBorder:setStrokeColor(255,255,255)

hourHand = display.newLine(_W/2,_H/2,_W/2,80)
hourHand.width = 5
hourHand:setColor(0,255,0)

minuteHand = display.newLine(_W/2,_H/2,_W/2,47)
minuteHand.width = 3
minuteHand:setColor(0,50,255)

secondHand = display.newLine(_W/2,_H/2,_W/2,37)
secondHand.width = 2
secondHand:setColor(255,0,0)

After the display objects, we create a function that will update our clock based on the current time. We can accomplish this by using os.date() and storing this as the current time. Based on the current time, we will rotate each hand to the appropriate location.

local function updateCLock(e)  
    local currentTime = os.date("*t")
    secondHand.rotation = currentTime.sec * 6  
    minuteHand.rotation = currentTime.min * 6  
    hourHand.rotation = currentTime.hour * 30 + (currentTime.min * 0.5)      
end

Then, we call the function so each clock hand shows in the right location.

updateCLock()

Finally, we call the function using a timer that goes off every second. By using the timer, we can make sure that the clock is being updated forever.

timer.performWithDelay(1000, updateCLock, 0)

That’s it! Corona SDK allows me to rapidly produce prototypes and although a clock by itself may not be very useful, you can clocks inside your game to provide a timer visual or in an app that needs timed events. I’ve provided the full source code to the clock below. The code is broken up into main.lua, config.lua, and build.settings.

Main.lua

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

clockBorder = display.newCircle(_W/2,_H/2,125)
clockBorder:setFillColor(0,0,0)
clockBorder.strokeWidth = 5
clockBorder:setStrokeColor(255,255,255)

hourHand = display.newLine(_W/2,_H/2,_W/2,80)
hourHand.width = 5
hourHand:setColor(0,255,0)

minuteHand = display.newLine(_W/2,_H/2,_W/2,47)
minuteHand.width = 3
minuteHand:setColor(0,50,255)

secondHand = display.newLine(_W/2,_H/2,_W/2,37)
secondHand.width = 2
secondHand:setColor(255,0,0)

local function updateCLock(e)  
    local currentTime = os.date("*t")
    secondHand.rotation = currentTime.sec * 6  
    minuteHand.rotation = currentTime.min * 6  
    hourHand.rotation = currentTime.hour * 30 + (currentTime.min * 0.5)      
end 

updateCLock()
timer.performWithDelay(1000, updateCLock, 0)

Config.lua

-- config.lua
application =
{
	content =
	{
		width = 320,
		height = 480,
		scale = "zoomEven",
	},
}

Build.settings

settings = 
{
	orientation = 
	{
		default = "landscape",

		supported = 
		{
		"landscape",
		},

	},
}

If you have any more questions or comments, please let me know through the comments below. Thank you for reading another post from That’s So Panda!

local function shuffle(t)
  local n = #t
  while n > 2 do
    local k = math.random(n)
    t[n], t[k] = t[k], t[n]
    n = n - 1
 end
 return t
end

This function accepts one argument, a table, and then proceeds to randomize the elements of the table. It randomizes the elements of the table by making use of the math.random tool.

Now, I can’t claim credit for creating this shuffle function, but I wanted to post it for other developers use. If you know who the original developer is who created this function, please let me know and I will give due credit.

Visit www.talonpropertyinspections.com