How to create offset row or columns?

Getting Started Newbie Questions
#1

If I make a grid like below, how do I offset every odd numbered column?

  
 local localGroup = display.newGroup()  
 local screenWidth = display.contentWidth  
 local screenHeight = display.contentHeight  
 local rows = 9  
 local columns = 7  
 local offSetY = 18 -- half of color.height  
 local color = {"red.png", "green.png", "blue.png", "yellow.png"}   
 local boxes  
  
 for row = 1, rows do  
  
 for col = 1, columns do  
  
 local mRand = math.random(#color);   
 boxes = display.newImageRect(color[mRand], 36, 36);   
 boxes.x = 0 + (col \* 40);   
 boxes.y = 0 + (row \* 40);   
 localGroup:insert(boxes);  
 localGroup:setReferencePoint(display.BottomCenterReferencePoint);  
 localGroup.x = screenWidth \* 0.5;  
 localGroup.y = screenHeight - 32  
 end  
 end

[import]uid: 65840 topic_id: 14407 reply_id: 314407[/import]

#2

do this

boxes.y = row * ( 40 + ( ( row%2)*20) ) )
or
boxes.x = col * ( 40 + ( ( col%2)*20)))

sorry for keep editing I’m on iPhone with poor service and watching saints

[import]uid: 7911 topic_id: 14407 reply_id: 53278[/import]

#3

Cindy,
This should answer your question.

[lua]if math.mod(col, 2) == 0 then
–print(“even”)
else
–print(“odd”)
end
end[/lua]

Thanks [import]uid: 63320 topic_id: 14407 reply_id: 53282[/import]

#4

@ darci
that would work also but adds more coding which makes it less optimized [import]uid: 7911 topic_id: 14407 reply_id: 53288[/import]

#5

Thanks for the reply.
When I tried your code to offSet the columns it got all messed up and not the result I wanted so I changed it a little to this;

boxes.y = col \* (40 + ((row%2)\*2.5))

Now it offSet the columns at the bottom but not all the way up, try this code and see what I mean.

[code]
local localGroup = display.newGroup()
local screenWidth = display.contentWidth
local screenHeight = display.contentHeight
local rows = 9
local columns = 7
local offSetY = 18 – half of color.height
local color = {“red.png”, “green.png”, “blue.png”, “yellow.png”}
local boxes

for row = 1, rows do

for col = 1, columns do

–local mRand = math.random(#color);
boxes = display.newRect(0, 0, 36, 36 )
boxes.x = 0 + (col * 40);
boxes.y = col * (40 + ((row%2)*2.5))
–boxes.y = 0 + (row * 40);
localGroup:insert(boxes);
localGroup:setReferencePoint(display.BottomCenterReferencePoint);
localGroup.x = screenWidth * 0.5;
localGroup.y = screenHeight - 32
end
end
[/code] [import]uid: 65840 topic_id: 14407 reply_id: 53291[/import]

#6

can’t try still on iPhone but it looks like u using col for x and y [import]uid: 7911 topic_id: 14407 reply_id: 53295[/import]

#7

Oh, I got more answers…

Basically what this is for is a board game where every odd number column is y offSet by half of the gridsBox size. The grid is then filled with random colored rects and the goal is to clear the board of the rects that are of the same color and is adjacent to each other. To clear a color, 2 or more rects must be connected. So basically if I tap one rect, it checks if there are any of the same color adjacent, if there are then they will be removed. If a set of rects are cleared in the middle then the other rects above should fall down.

I don’t know of any games like this in the appStore but I have seen some online. But the logic is like bejeweled but without the swapping of gems and with offSet Columns so it looks a little prettier… [import]uid: 65840 topic_id: 14407 reply_id: 53296[/import]

#8

here you go
[blockcode]
local localGroup = display.newGroup()
local screenWidth = display.contentWidth
local screenHeight = display.contentHeight
local rows = 9
local columns = 7
local offSetY = 18 – half of color.height
local color = {“red.png”, “green.png”, “blue.png”, “yellow.png”}
local boxes = {}

for row = 1, rows do
for col = 1, columns do
ct = ((row-1)*columns) + row
boxes[ct] = display.newRect( ((row%2)*18) + (col-1)*40, (row-1)*40, 36, 36 )
localGroup:insert(boxes[ct]);
localGroup:setReferencePoint(display.BottomCenterReferencePoint);
localGroup.x = screenWidth * 0.5;
localGroup.y = screenHeight - 32
end

end
[/blockcode]

you also have to give each box a unique name which is what the [ct] does [import]uid: 7911 topic_id: 14407 reply_id: 53302[/import]

#9

Thanks for the help, I changed the offSet and everything works great. I leaned a lot from this.

Here’s how it looks now, just a few minor changes so it fit in portrait on iPhone.

local localGroup = display.newGroup()  
 local screenWidth = display.contentWidth  
 local screenHeight = display.contentHeight  
 local rows = 9  
 local columns = 7  
 local offSetY = 18 -- half of color.height  
 local color = {"red.png", "green.png", "blue.png", "yellow.png"}  
 local boxes = {}  
   
 for row = 1, rows do  
 for col = 1, columns do  
 ct = ((row-1)\*columns) + row  
 boxes[ct] = display.newRect((col-1)\*40, ((col%-2)\*18) + (row-1)\*40, 36, 36 )  
 localGroup:insert(boxes[ct]);  
 localGroup:setReferencePoint(display.BottomCenterReferencePoint);  
 localGroup.x = screenWidth \* 0.5;  
 localGroup.y = screenHeight - 32  
 end  
   
 end

When I changed the code to fit my project it looks like this, I had to change a few things because the random colors got messed up when the x and y positions are inside the newImageRect() so I moved them outside and it was fine. also put it inside a function and added an eventListener to check for touch and remove boxes.

Now to the next question, When I have removed a box how do I make that column it was in drop down to fill that empty space?

[code]
local localGroup = display.newGroup()
local screenWidth = display.contentWidth
local screenHeight = display.contentHeight
local rows = 9
local columns = 7
local offSetY = 18 – half of color.height
local color = {“red.png”, “green.png”, “blue.png”, “yellow.png”}
local boxes = {}
local makeBoxes = {}
local removeBoxes = {}

makeBoxes = function ( )
for row = 1, rows do
for col = 1, columns do
local mRand = math.random(#color);
ct = ((row-1)*columns) + row
boxes[ct] = display.newImageRect(color[mRand], 36, 36 )
boxes[ct].x = (col-1)*40
boxes[ct].y = ((col%-2)*offSetY) + (row-1)*40
localGroup:insert(boxes[ct]);
localGroup:setReferencePoint(display.BottomCenterReferencePoint);
localGroup.x = screenWidth * 0.5;
localGroup.y = screenHeight - 32

boxes[ct]:addEventListener(“touch”, removeBoxes)
end
end
end

removeBoxes = function (event )
if (event.phase == “ended”) then
event.target:removeSelf()
print(" box removed ")
end
end
[/code] [import]uid: 65840 topic_id: 14407 reply_id: 53385[/import]

#10

glad to hear u got it. now for the next part. what u need is to save ur rand color info in a table and when u delete a block u change that position in the table to say “none” then make a loop after u delete a block that runs thought this table and when it find “none” it takes the table location for the block that would be above it and swap them then redraw the board then repeat until there’s no more possitable swaps. also u would want to remove all of the buttons before starting this to avoid touching another block while this is going on then once done it restores all the buttons. hope this helps get u going in the right direction if u need more help once you get this going just ask. there’s a lot of math in doing this [import]uid: 7911 topic_id: 14407 reply_id: 53389[/import]

#11

Thanks for the help,

I know there will be lot’s of math involved in this and math is not my strong side so…

The most difficult part in programming is how to structure the project the best way, I had a look at a tutorial over at mobile tuts and they listed all the functions and vars before they started writing the code so that’s what I will do because it seamed like a wise thing to do. I’m also using the director class for scene management.

Please give me feedback and if I should modulize the project.

game.lua

[code]
module(…, package.seeall)

function new( )

local gameGroup = display.newGroup()
local hudGroup = display.newGroup()

local screenWidth = display.contentWidth
local screenHeight = display.contentHeight

local gameBg
local scoreLabel
local timeBar
local levelLabel
local pauseButton

local rows = 9
local columns = 7
local offSetY = 18
local boxWidth = 40
local boxHeight = 40
local color = {“red.png”, “green.png”, “blue.png”, “yellow.png”}
local saveColors = {}
local boxes = {}
local makeBoxes = {}
local checkForMatch = {}
local removeBoxes = {}
local moveBoxesDown = {}
local directions = {“N”, “NW”, “NE”, “S”, “SW”, “SE”}
local canRemoveBoxes = true
local cleanMemory = {}

– Create the grid and add boxes to it.
makeBoxes = function()
for row = 1, rows do
for col = 1, columns do
local mRand = math.random(#color);
ct = ((row-1)*columns) + row
boxes[ct] = display.newImageRect(color[mRand], 36, 36 )
boxes[ct].x = (col-1) * boxWidth
boxes[ct].y = ((col%-2) * offSetY) + (row-1) * boxHeight
localGroup:insert(boxes[ct]);
localGroup:setReferencePoint(display.BottomCenterReferencePoint);
localGroup.x = screenWidth * 0.5;
localGroup.y = screenHeight - 32

boxes[ct]:addEventListener(“touch”, removeBoxes)
end
end
end

– Check if there are any adjacent boxes of the same color, need at least 3 adjacent to remove.
checkForMatch = function()
end

– Touch handler for removing boxes
removeBoxes = function(event)
if (event.phase == “ended”) then
event.target:removeSelf()
print(" box removed ")
end

– Move boxes down if there is an empty space below.
moveBoxesDown = function()
end

– Remove listeners and other things not needed anymore.
cleanMemory = function()
end

– Insert into groups
gameGroup:insert(hudGroup)

return gameGroup
end
[/code] [import]uid: 65840 topic_id: 14407 reply_id: 53400[/import]

#12

i have an old version of a game that im working on that does what you need but different gameplay its not documented well at all and the code is abit jumbled and nowhere near optimized but it may help you if you take ur time reading the code and following the math give me ur email and ill send the project to you. this code(project) is not for reuse but you can use it to help you design what you need [import]uid: 7911 topic_id: 14407 reply_id: 53402[/import]

#13

email to; my username@yahoo.com [import]uid: 65840 topic_id: 14407 reply_id: 53407[/import]

#14

its on its way internet running slooooow right now thanks att [import]uid: 7911 topic_id: 14407 reply_id: 53421[/import]