Arrays and Objects
It’s very common to create a number of similar objects. An easy approach is to use a for loop to create the objects and an array to store references to the objects created.
Here’s a quick example with squares. The first few examples will create static object and arrange them a few patterns.
Random arrangement
The example will arrange the objects at random positions on the screen.
-- Define an Array to hold the objects
local square_array = {}
-- A loop to create a number of objects
for i = 1, 10, 1 do
-- Make a new shape object
local square = display.newRect( 0, 0, 30, 30 )
-- Position the object at a random x and y
square.x = math.random( 30, display.contentWidth - 30 )
square.y = math.random( 30, display.contentHeight - 30 )
-- Add the reference to the object in the Array
table.insert( square_array, square )
end
The example defines an array, then executes a loop creating 10 objects and adding them all to the array.
Random numbers
The math.random( min, max ) method generates a random number between min and max. In the example above I created squares 30 pixels in size. I positioned them from 30 at the minimum to a maximum of 30 pixels less than the width and height of the screen.
Arranged in a row
Within the loop you can use the variable holding the count to help you arrange your objects. Here we’ll arrange the objects in a row.
-- Define an Array to hold the objects
local square_array = {}
-- A loop to create a number of objects
for i = 1, 10, 1 do
-- Make a new shape object
local square = display.newRect( 0, 0, 30, 30 )
-- Position the object in a row
square.x = ( 31 * i ) - 10
square.y = display.contentCenterY
-- Add the reference to the object in the Array
table.insert( square_array, square )
end
Position and offset
Examine the line that sets the x.
square.x = ( 31 * i ) - 10
Here each box is placed at i times 31.
- Our count starts with i = 1, x for the first box is 1 * 31 – 10 = 21
- The end count is i = 10, x for the last box is 10 * 31 – 10 = 300
- The size of each box is 30, using 31 times the count gives us a margin 1 pixel between each box.
The value 10 acts as an offset here. A positive value moves the whole row to the right, a negative value moves the whole row to the left.
Exercise – Modify the code above to arrange the objects in a vertical row.
Arranged in a grid
-- Define an Array to hold the objects
local square_array = {}
-- A loop to create a number of objects
for i = 0, 15, 1 do
-- Make a new shape object
local square = display.newRect( 0, 0, 30, 30 )
-- Position the objects in a grid
square.x = ( 31 * ( i % 4 ) ) + 110
square.y = ( 31 * math.floor( i / 4 ) ) + 124
-- Add the reference to the object in the Array
table.insert( square_array, square )
end
To create the grid we’ll use % (mod) to get the row multiplier. To get the column multiplier we’ll divide by rows and round down.
Mod is an operator that returns the whole number remainder. For example 11%4=3 (11-(4+4)= 3). In other words 4 goes into 11 twice and leaves 3. For any number mod will count from 0 to one less than that number. For example n%4 would give the numbers 0 to 3 for any value of n. Try it for yourself, write it out on paper, or post it to your Facebook page.
For columns we’ll divide by the number of rows and use math.floor(). The floor function rounds down to the nearest whole number. For example math.floor(3/4)=0, math.floor(4/4)=1, math.floor(5/4)=1 etc.
The last step is to add an offset to position the objects where we want them on the screen.
See the truth table below and compare to these two lines of code from the script above:
square.x = ( 31 * ( i % 4 ) ) + 110
square.y = ( 31 * math.floor( i / 4 ) ) + 124
| i%4math.floor(i/4) | 0 | 1 | 2 | 3 |
| 0 | i=01%4=0floor(1/4)=0 | i=11%4=1floor(1/4)=0 | i=21%4=1floor(1/4)=0 | i=33%4=3floor(3/4)=0 |
| 1 | i=44%4=0floor(4/4)=1 | i=55%4=1floor(5/4)=1 | i=66%4=2floor(6/4)=1 | i=77%4=3floor(7/4)=1 |
| 2 | i=88%4=0floor(8/4)=2 | i=99%4=1floor(9/4)=2 | i=1010%4=2floor(10/4)=2 | i=1111%4=3floor(11/4)=2 |
| 3 | i=1212%4=0floor(12/4)=3 | i=1313%4=1floor(13/4)=3 | i=1414%4=2floor(14/4)=3 | i=1515%4=3floor(15/4)=3 |