Category: Corona

Corona – Groups

At some point you will want to work with groups of display objects. Corona provides a special type of Group display object.

Try out groups for yourself. Start by making a new Corona project.

  1. Create a folder to work in
  2. Create a new text file, save it to your folder named main.lua
  3. Add a few small images to your folder

First create three images.

local square = display.newImage("square.png")
local circle = display.newImage("circle.png")
local hexagon = display.newImage("hexagon.png")

 

Next create a group.

local group = display.newGroup()

Now add the objects to group

group:insert( square )
group:insert( circle )
group:insert( hexagon )

 

Now we’ll off set the images a little. Here placed circle near the upper right corner of square and hexagon near the lower left corner of square.

square.x = 0
square.y = 0
circle.x = 50
circle.y = -50
hexagon.x = -50
hexagon.y = 50

Now try transforming the group. Notice all of the images transform as a group. Placing the group in the center of the screen moves all of the images there. Rotating the group rotates all of the images. All of the transformations are based on the group’s reference point.

group.x = 160
group.y = 240
group.rotation = 5
group.alpha = .5

You can also animate the group. Try the following.

transition.to( group, {time=3000, rotation=360, transition=easing.inOutExpo})

A group acts as a display object in every way, with the difference that Groups can contain other display objects including other groups.

 

 

 

Corona – Stacking Objects

Once you’ve created more than one object the order in which they stack will be come important. What I mean by “stacking order” is which object is in front and which is behind, imagine layers in Photoshop.

Corona stacks or layers objects in the order that they are created. In other words the first object created would be on the bottom. While each newer object created would stack on top of the previous.

Try this out for yourself. Create a new Corona project.

  1. Make a new Folder to work in.
  2. Make a new text file, save it to the folder as main.lua.
  3. Add three small images to your folder.

Create three images in your Corona project. Use the following to load your images. In my example the images were named square.png, circle.png and hexagon.png.

local square = display.newImage("square.png")
local circle = display.newImage("circle.png")
local hexagon = display.newImage("hexagon.png")

Notice the square is behind the other images. The circle “stacks” or looks like it’s on a layer between the other two. And, the hexagon is on top of the others.

Note: If any of the upper are larger than the images below, the images may not be visible.

The stacking order is determined by the order the images were created. With newer images being placed on top of images that were created earlier.

Corona provides a few methods that allow you to manipulate the stacking order. To move an object to the front use object:toFron(). For example, the following would move the circle to the front.

circle:toFront()

Use the object:toBack() method to move an object to the back. For example, the following moves the hexagon to the back.

hexagon:toBack()

 

 

 

 

 

 

 

Corona – transition

Corona provides a simple solution to making things move. The best way to learn is try it for yourself.

Start by creating a folder for your new project. Create a new text file and save it your folder as main.lua. Add an image to your folder. make this image something small, about 100 px by 100 px.

In main.lua add the following code to get the image to show up on the screen.

local square = display.newImage("square.png")

Test your project at this point to make sure your image shows. The image should appear in the upper left of the screen.

Transition

Now add a transition. Add the following code below the code from above.

transition.to( square, {time=3000, x=160, y=240} )

Test your project. The image should move to the center of the screen over 3 seconds. Note, the motion has a constant speed. The object neither speeds up or slows down from the beginning to the end of the motion.

The transition “to” method takes two parameters. The first is the reference to the object that will be animated. In my case I used the variable square. Second is a “table” containing properties that describe the motion.

Note: Lua uses “tables” which are similar to Arrays and Objects in other languages. Though, the syntax is different!

The table I created above {time=3000, x=160, y=240} contains three properties: time, x and y. Notice the table is defined with the {}. Each property and value pair is separated by a comma. Each property and value has an = between the two.

The time property sets the length of the motion. This is set in milliseconds. There 1000 milliseconds in every second. The motion above would last 3 seconds.

The x and y properties animate the x and y properties of the display object, square. You can animate any properties using transition.to. Try animating the rotation property.

transition.to( square, {time=3000, x=160, y=240, rotation=360} )

Test again, this time the image rotates a full 360 degrees while moves to the center of the screen.

Preset properties

Imagine you wanted the box to move on to the stage from outside the edge of the stage. In this case you’d want to set the position of the object to it’s starting location before calling transtion.to().Try adding the following line before transition.to()

square.x = -100
square.y = -100

Test your project again. This time object moves into view from the upper left. Since x of 0 is the left edge of the stage and y of 0 is the top edge of the stage, negative x values place the object off the edge of the stage to the left. While negative y values would place the object off the top edge of the stage.

Other properties

Try experimenting with these properties.

  • alpha – Sets the transparency of the object. Use a range of 0 (transparent) to 1 (opaque).
  • xScale – Sets the horizontal scale. A value of 2 would make the object twice it’s original size.
  • yScale – Sets the vertical scale.

Easing

Obviously the default linear easing is not very exciting. Corona provides a few easing methods.

Use these in conjunction with the transition property in the table when calling transition.to(). For example:

transition.to(square, {time=3000, x=160, y=240, rotation=360, transition=easing.outExpo} )

This time the image starts of fast and slows to a stop at the end of it’s motion.

 

 

 

 

 

 

Corona – Images

Creating an image and adding it to the stage with Corona is very easy. To get started create a folder where you will be working. Create an image to use for the example. Something small since we’ll be testing in the iPhone simulator. For the example assume the stage will be 320px by 480px. Save your image into the folder where you will be working. My image was named square.png.

Next we need to create our Corona project. Create a plain text file and save it into your folder. Name this file main.lua.

Create an image on the screen

Add the following to the top of main.lua

local square = display.newImage("square.png")

Open main.lua with Corona. The simulator should appear and your image appears in the upper left corner.

Position an image with x and y

Try positioning your image on the stage. The display object holding the image is saved in the variable “square”. Set the x and  y property of your image.

square.x = 160
square.y = 240

This should place the image in the center of the simulator. Assuming the width to 320 and height to be 480. The center would half of these numbers 160 and 240.

Notice the image appears in the exact center. This would mean that Corona considers registration point, or point of transformation, for the image to be in the center of the image.

Rotate an image with rotation

Test that out by rotating the image. Add the following line

square.rotation = 45

The square is still center and is rotated around it’s center.

Note! That means that the original position was not x = 0 and y = 0. Remember when the image was first placed it’s upper left corner was aligned with the upper left corner of the stage. If the x and y were 0, then the center of the image should have aligned with the upper left corner. Test it for yourself.

square.x = 0
square.y = 0

Test your work. Notice the center of the image is now in the upper left corner.

So, Corona positions objects initially setting their x and y to half the image height and width, to place the upper left corner of the image in the upper left of the stage.

Reference Point

The center of transformations for an object is called the reference point in Corona. You can position the reference point of an object using the xReference and yReference properties. Changing these values does not change the position of an object, instead it changes the center of transformation.

Think of the reference point as a pin holding your object to the stage. When you set the x and y it’s the pin that is placed at the new x and y coordinates. When the object rotates it rotates around the pin. By default the reference point is placed in the center. Imagine a pin stuck through the center of the object.

The reference point can be manipulated by changing the xReference and yReference. This is useful, since in some cases it will be more convenient to position or transform an object from the upper left corner or location other than the center.

Try it for yourself. Move the reference point to the upper left corner. In my example the image I used was 100px by 100px. By default xReference and yReference are 0 and 0. To move the reference point to the upper I’ll need to set the xReference and yReference to negative half the width and negative half the height, -50 and -50.

square.xReference = -50
square.yReference = -50

Change the x, y and rotation properties a few times each and test your project with each change. You’ll notice the image is transforming around a point in the upper left.

Alternately you can use the following method to set the reference point to the upper left corner of an object. Chnage object to the name of your object, square in my example.

object:setReferencePoint( display.TopLeftReferencePoint )

Removing images

It is important to remove objects when they are not in use. Bit map images take up large chunks of memory. Which, on mobile devices is a scarce resource.

To properly remove an object you need to remove it explicitly from it’s parent. This can be done in one of two ways.

image.parent:remove( image )
-- or --
image:removeSelf()

Sometimes this is not enough to free up memory used by the object. You also need to remove any references to the objects. These references are stored in variables. In the example above the variable square is assigned and holds a reference to a display object after this line:

local square = display.newImage("square.png")

After this line, square can be used reference the display object containing the image “square.png”. This variable also ensures that the memory used by the image”square.png” is not released.

To ensure that an object is released from memory when you are done with it you need to set the value of any variables referencing it to nil. The value nil is an empty, value think of it as no value. To remove square from the display and make sure it’s memory is freed you would want to do the following.

square.parent:removeSelf()
square = nil