Help with this grid

Solar2D General Questions/Discussion
#1

Hi all, I’m new to Corona and could do with some help.

I got the below code from another post on this forum and have tweaked it a little bit…

[lua]local function tapRect(event)
print(“clicked rect:”…event.target.tag)
end

local i = 1
for row = 1,5 do
for col = 1,5 do
local rect = display.newRect(col * 85, row * 85,75,75)
rect.tag = i
i= i + 1
rect:addEventListener(“tap”,tapRect)

end
end [/lua]

It works well except the whole grid is offset, I would like it 10 from left and top but because of the way the math is written, this cannot work.

Could anyone help me change it so that this is the case.

I would eventually swap the squares for different images.

Appreciate any help.

Dan. [import]uid: 107975 topic_id: 18955 reply_id: 318955[/import]

#2

Hi Dan,
I think there’s probably quite a few ways you do can do this, but here’s something that might work for you.

The first optional parameter for display.newRect is the displayGroup you want to put the new rectangle into. If you setup a displayGroup, and insert the grid into this group, you can this move the grid on the screen to where you want.

display.newRect( [parentGroup,] left, top, width, height )

So something like the following would work:

[lua]local function tapRect(event)
print(“clicked rect:”…event.target.tag)
end

local i = 1
local group = display.newGroup()
local rectWidth = 75
local rectHeight = 75
for row = 1,5 do
for col = 1,5 do
local rect = display.newRect(group, col * 85, row * 85, rectWidth, rectHeight)

rect.tag = i
i= i + 1
rect:addEventListener(“tap”,tapRect)

end
end
group.x = -rectWidth
group.y = -rectHeight[/lua]
[import]uid: 102698 topic_id: 18955 reply_id: 73007[/import]

#3

Thankyou!

I have altered it to the correct sizes I am after. with the below code

[lua]local function tapRect(event)
print(“clicked rect:”…event.target.tag)
end

local i = 1
local group = display.newGroup()
local rectWidth = 90
local rectHeight = 90
for row = 1,5 do
for col = 1,3 do
local rect = display.newRect(group, col * 102, row * 150, rectWidth, rectHeight)
rect.tag = i
i= i + 1
rect:addEventListener(“tap”,tapRect)

end
end
group.x = -rectWidth
group.y = -rectHeight + 20[/lua]

Could I bother you again to show me how I would add text below each square.
Dan. [import]uid: 107975 topic_id: 18955 reply_id: 73011[/import]

#4

Dan,
Threw this together so you’ll have to play with it, but it’ll give you the idea

[lua]local function tapRect(event)
print(“clicked rect:”…event.target.tag)
end

local i = 1
local group = display.newGroup()
local rectWidth = 90
local rectHeight = 90

for row = 1,5 do
for col = 1,3 do
local rect = display.newRect(group, col * 102, row * 150, rectWidth, rectHeight)
rect.tag = i
i= i + 1
rect:addEventListener(“tap”,tapRect)

end
end

–Display Text Below Squares

–For Each Child Object in the Group
for i=1, group.numChildren do
local square = group[i]
square:setReferencePoint(display.BottomLeftReferencePoint)
–Create Text
local myText = display.newText(square.tag, 0, 0, native.systemFont, 24)
–Insert into Group
group:insert(myText)
–Set Reference point to be the bottom left of each square
myText:setReferencePoint(display.BottomLeftReferencePoint)
–Adjust position of text
myText.x = square.x
myText.y = square.y + myText.height
–Set Color to RED
myText:setTextColor(255,0,0)
end

group.x = -rectWidth
group.y = -rectHeight + 20[/lua] [import]uid: 102698 topic_id: 18955 reply_id: 73012[/import]