Tag: display

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.

Corona – Display Objects

Display Objects

Anything you can see on the screen is considered a display objects. Display objects can be images, text, shapes or almost anything you can think of.

Corona provides a few display object types. You can divide these into three broad categories:

  • shapes
  • text
  • images

An object in programming terms is defined as a collection of properties and methods. properties are variables that belong to the object and methods are functions that belong to the object.

For example a shape object might have properties of x and y. The x and y properties might set the location of the object on the x and y axis.

Many of the properties and methods of display objects are common to all display objects. While other properties and methods are specific to certain display objects. For example the x and y property exists for all display objects. The text property only applies to text objects.

The best way to get an idea of how to work with display objects is make a few.

Create a new Corona project and add the following code the main.lua file.

local box = display.newRect( 0, 0, 50, 100 )

This creates a new rectangle with it’s left edge at 0, top edge 0 and a width of 50 and height 100 pixels.

display.newRect( left, top, width, height )

This method creates a new rectangular shape. The shape has a solid color fill.

I have declared a new local variable box to hold a reference to the new box that was created. Through this variable you can access all of the properties and method of new object. Here are a few examples:

local box = display.newRect( 0, 0, 50, 100 )

-- Set the x and y to position the
-- box in the center of the screen
box.x = display.contentCenterX
box.y = display.contentCenterY

-- Set the fill color of the box
box:setFillColor( 33, 111, 255 )

-- Add a stroke
box.strokeWidth = 3

-- Set the stroke color
box:setStrokeColor(255, 222, 123 )

In general all display objects act the same way. Different types of display objects will have properties or methods that specific to them. For example the setTextColor() method only applies to text objects.