Corona – Display objects properties practice

Here’s a few ideas if you want to practice your programming skills.

Let’s talk about display objects. All of the display objects act the same way and support the same properties. This includes, images, shapes, like the rectangle and circle, text objects. These properties also apply to the group. Think of a group as an empty display container that you can add other objects. It’s like a layer in Illustrator.

Display objects have the properties that determine how they are displayed. Properties are always accessed with the dot (.), and you set their value with the equal sign. For example:

obj.property = value

Here’s a list of properties.

x – horizontal position

y – Vertical position

xScale – horizontal scale

yScale – vertical scale

anchorX – horizontal position of the object’s anchor point

anchorY – vertical position of the object’s anchor point

Here’s a few things to try with this. Create a new project with the default settings. In main.lua add the following at the top.

local box = display.newRect( 0, 0, 40, 40 )

This should create a rectangle in the upper left corner. The first two parameters (0,0) set the x and y initially. The center of the object is located at the upper left corner.

Set the position of the box to the center of the screen. Since the default size is 320 by 480 the center is 160, 240.
 box.x = 160
 box.y = 240

Set some other properties.

box.rotation = 33 -- this degrees
 box.xScale = 0.5 -- should be 50% scale on the horizontal
 box.yScale = 2 -- should be 200% on the vertical
 box.alpha = 0.5 -- Should be 50% transparent

Try changing these values to see what happens. You could have done all of this with any other type of display object like text, or images.

Generate a random number with math.random(). This can be used in two ways. Either to generate a random number from 0 to 1, for example 0.826727384. Or generate an integer value between any two numbers. For example 1 to 6. Here’s what this would look like in code form:

math.random() -- something like 0.826727384
math.random( 1, 6 ) -- a random from 1 to 6.

You can test these in the terminal with

print( math.random() )
print( math.random(1,6) )

Apply this to the box:

box.x = math.random( 40, 280 ) -- Moves the anywhere from x 40 to x 280.

You can make this interactive with:

local function move_box( event )
box.x = math.random(40, 280)
end
box:addEventListener( "tap", move_box )

Tap the box and it moves to a random position. Randomize the y property of box on your own.

This would be more interesting with some motion. Modify the function above to look like this:

local function move_box( event )
transition.to( box, {x=math.random(40, 240), time=1000} )
end
box:addEventListener( "tap", move_box )

Animate the y on your own.

Let’s make this more challenging. Make 10 boxes. Use a loop. The basic loop syntax looks like this:

for i = 1, 10 do
-- repeat this code 10 times
end

so to make 10 boxes. Use the following.

for i = 1, 10 do
local box = display.newRect( 0, 0, 30, 30 )
box.x = math.random( 40, 280 )
box.y = math.random( 40, 440 )
end

You should have 10 boxes all over the screen. Here’s where things get interesting. Since you have declared box as local within the loop this variable is local to that code block it isn’t accessible outside the loop.

Try this, remove all of the other code except for the code below.

for i = 1, 10 do
local box = display.newRect( 0, 0, 30, 30 )
box.x = math.random( 40, 280 )
box.y = math.random( 40, 440 )
end
box.x = 100 -- error on this line!

You should get an error message pointing to the last line. Read the error message closely, it should include the line number for the last line: box.x = 100. We can’t access box, since it’s local to the loop!

Beside this which box would be accessing? We’d like to get to tap on any of the boxes and have them move and spin to a new location.

Add this function above the loop.

local function move_box( event )
 local new_x = math.random( 40, 280 )
 local new_y = math.random( 40, 440 )
 local new_rotation = math.random( 0, 360 )
 transition.to( box, {x=new_x, y=new_y, rotation=new_rotation, time=1000} )
 end
for i = 1, 10 do
local box = display.newRect( 0, 0, 30, 30 )
box.x = math.random( 40, 280 )
box.y = math.random( 40, 440 )
box:addEventListener( "tap", move_box )
end

Add the text in red to the loop. This still won’t work. Box is not accessible remember? We’re talking about this line in move box:

transition.to( box, {x=new_x, y=new_y, rotation=new_rotation, time=1000} )

The event object has a reference to the box that generates the event. Each box has been assigned an event listener. When tapping a box, that box will generate the event. In this way move_box will know which box to move. Edit the line above:

transition.to( event.target, {x=new_x, y=new_y, rotation=new_rotation, time=1000} )

The event variable is a table containing properties describing the event that just occurred. One of those properties, target, contains a reference to the object that generated the event. Try it now.

Leave a Reply

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