How to create offset row or columns?

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
   
    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 

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

Cindy,
This should answer your question.

1
2
3
4
5
6
if math.mod(col, 2) == 0 then
        --print("even")
    else
        --print("odd")
    end
end

@ darci
that would work also but adds more coding which makes it less optimized

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;

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

can't try still on iPhone but it looks like u using col for x and y

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....

here you go

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
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

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

email to; my username@yahoo.com

its on its way internet running slooooow right now thanks att

views:2055 update:2011/10/11 8:57:46
corona forums © 2003-2011