How to display images in a 4x4 grid?

Solar2D General Questions/Discussion
#1

I can’t think of any way to align 4 images so that one goes top left, one goes top right, bottom left and bottom right. I’m pretty sure the wrong way is to hard code the pixel x, y coordinates, so is there an example of how it would be done?

bg1 = display.newImage(‘01_Sky_A.jpg’)
bg2 = display.newImage(‘01_Sky_B.jpg’)
bg3 = display.newImage(‘01_Sky_C.jpg’)
bg4 = display.newImage(‘01_Sky_D.jpg’)

bg1.x = 0
bg1.y = 0

bg2.x = ?
bg2.y = ?

etc…
[import]uid: 132937 topic_id: 34980 reply_id: 334980[/import]

#2

[code]
local group = display.newGroup()
local spacing = 50
local images = {“01_Sky_A.jpg”, “01_Sky_B.jpg”, “01_Sky_C.jpg”, “01_Sky_D.jpg”}

for i = 1, 2 do
for j = 1 , 2 do
local image = display.newImageRect(group, images[i], 100, 100)
image:setReferencePoint(display.TopLeftReferencePoint)
image.x = (i-1) * (image.width + spacing)
image.y = (j-1) * (image.height + spacing)
end
end
[/code] [import]uid: 13560 topic_id: 34980 reply_id: 139161[/import]

#3

This is exactly what I was looking for. Thank you very much!
[edit:]

Just in case anyone else needs this code, it needed a minor tweak. There needed to be a counter outside of the for loops (and increased inside the for loops) in order for the pictures to come out like this
|A|B|

|C|D|

otherwise, using i (as posted above) would produce
|A|B|

|A|B|
(modified code below)
index = 1

for i = 1, 2 do
for j = 1 , 2 do
local image = display.newImageRect(group, images[index], 400, 400)
image:setReferencePoint(display.TopLeftReferencePoint)
image.x = (i-1) * (image.width + spacing)
image.y = (j-1) * (image.height + spacing)
index = index + 1
end
end [import]uid: 132937 topic_id: 34980 reply_id: 139172[/import]

#4

[code]
local group = display.newGroup()
local spacing = 50
local images = {“01_Sky_A.jpg”, “01_Sky_B.jpg”, “01_Sky_C.jpg”, “01_Sky_D.jpg”}

for i = 1, 2 do
for j = 1 , 2 do
local image = display.newImageRect(group, images[i], 100, 100)
image:setReferencePoint(display.TopLeftReferencePoint)
image.x = (i-1) * (image.width + spacing)
image.y = (j-1) * (image.height + spacing)
end
end
[/code] [import]uid: 13560 topic_id: 34980 reply_id: 139161[/import]

#5

This is exactly what I was looking for. Thank you very much!
[edit:]

Just in case anyone else needs this code, it needed a minor tweak. There needed to be a counter outside of the for loops (and increased inside the for loops) in order for the pictures to come out like this
|A|B|

|C|D|

otherwise, using i (as posted above) would produce
|A|B|

|A|B|
(modified code below)
index = 1

for i = 1, 2 do
for j = 1 , 2 do
local image = display.newImageRect(group, images[index], 400, 400)
image:setReferencePoint(display.TopLeftReferencePoint)
image.x = (i-1) * (image.width + spacing)
image.y = (j-1) * (image.height + spacing)
index = index + 1
end
end [import]uid: 132937 topic_id: 34980 reply_id: 139172[/import]

#6

Awesome!! This really helped!

#7

Awesome!! This really helped!