Centering a grid on the screen

[Appletreeman]

Hi all, 

I’ve got the code below that creates a grid of tiles near the top left corner of the screen.  What I’d like to do is have the grid centered on the screen regardless of the board width and height - this will be selectable by the user.

I’m not brilliant at maths and when I’ve tried to work out how to do it it hasn’t worked and usually either ends up in the wrong place or just a mess in the centre at which point my brain starts shouting at me to admit defeat and ask for help.  So here we are.  This is the code I have for creating the grid so far…

display.setDefault( "background", .80, .90, .80 ) local boardWidth = 10 local boardHeight = 10 local board = {} local function createBoard () local vOffset = 1 for r = 1, boardHeight do local hOffset = 1 board[r]={} for c = 1, boardWidth do local x = (24\*c)+hOffset local y = ((24\*r)+vOffset) board[r][c] = display.newRect( x, y, 23, 23 ) board[r][c]:setFillColor(.4, .4, .5, 1) board[r][c].strokeWidth = 1 ; board[r][c]:setStrokeColor(0,0,0) hOffset = hOffset + 2 end vOffset = vOffset + 2 end end createBoard()

Pleeeease help save my brain and tell me it’s really easy.

[nick_sherman]

I would normally create a display group with a rect inserted first that is the size of the board, including any gaps between cells, and store it as group.box. While I’m designing I have the alpha at something like 0.2 so I can see the boundaries and any mistakes in inserting the cells, then just set to zero when done.

Then as I add each cell into the group, I set its reference point to top left and position as -group.box.width/2, -group.box.height/2, plus the row, col value multiplied by the cell size + gap size.

Then just position the group in the centre of the screen as normal. I use this method quite a lot to position windows within windows within windows and the objects within them.

[Appletreeman]

@nick_sherman - I was originally doing something similar to that when the board only had 3 fixed sizes, but I’d like to add the option for the player to choose the width and height.  Think minesweeper on Windows where the player could choose easy, medium, expert or custom board sizes.

[nick_sherman]

Well as long as the size of the board isn’t going to change once it’s drawn, that shouldn’t matter. Just replace the boardWidth, boardHeight values with what the user chooses and then work out the square size based on that and how much space you want the grid to take up.

[rynfaxy]

Agreed…The same size of board doesn’t matter.Replacing boardheight and boardweight would help…Try it and that should help.

[Appletreeman]

@nick_sherman,  I’m really sorry, my brain just doesn’t want to work with this.  I’ve tried your idea but just can’t get my head around it.  I hate asking but if you get some spare time could you show me what you mean please. 

[nick_sherman]

[lua]

local boardWidth = 10

local boardHeight = 10

local cellSize = display.actualContentWidth / boardWidth * 0.8

local gapSize = cellSize * 0.15

local board = {}

local function createBoard ()

  local g = display.newGroup()

  g.box = display.newRect(g, 0, 0, cellSize * boardWidth + gapSize * (boardWidth - 1), cellSize * boardHeight + gapSize * (boardHeight-1))

  for r = 1, boardHeight do

    board[r]={}

    for c = 1, boardWidth do

      local rect = display.newRect(g, 0, 0, cellSize, cellSize)

      rect.anchorX = 0

      rect.anchorY = 0

      rect.x = -g.box.width/2 + (c-1) *(cellSize+gapSize)

      rect.y = -g.box.height/2 + (r-1)*(cellSize+gapSize)

      rect:setFillColor(.4, .4, .5, 1)

      rect.strokeWidth = 1 ; rect:setStrokeColor(0,0,0)

      board[r][c] = rect

    end

  end

  board.group = g

  g.x = display.contentCenterX

  g.y = display.contentCenterY

end

createBoard()

[/lua]

[Appletreeman]

Wow!  That was fast.  @nick_sherman - Thankyou so much.  When I’m not quite so tired I’ll spend some time examining the code to see exactly how you did it.

[nick_sherman]

No problem. Made a couple of changes to my post, there was a typo in line 32 and didn’t need vOffset anymore.

[nick_sherman]

I would normally create a display group with a rect inserted first that is the size of the board, including any gaps between cells, and store it as group.box. While I’m designing I have the alpha at something like 0.2 so I can see the boundaries and any mistakes in inserting the cells, then just set to zero when done.

Then as I add each cell into the group, I set its reference point to top left and position as -group.box.width/2, -group.box.height/2, plus the row, col value multiplied by the cell size + gap size.

Then just position the group in the centre of the screen as normal. I use this method quite a lot to position windows within windows within windows and the objects within them.

[Appletreeman]

@nick_sherman - I was originally doing something similar to that when the board only had 3 fixed sizes, but I’d like to add the option for the player to choose the width and height.  Think minesweeper on Windows where the player could choose easy, medium, expert or custom board sizes.

[nick_sherman]

Well as long as the size of the board isn’t going to change once it’s drawn, that shouldn’t matter. Just replace the boardWidth, boardHeight values with what the user chooses and then work out the square size based on that and how much space you want the grid to take up.

[rynfaxy]

Agreed…The same size of board doesn’t matter.Replacing boardheight and boardweight would help…Try it and that should help.

[Appletreeman]

@nick_sherman,  I’m really sorry, my brain just doesn’t want to work with this.  I’ve tried your idea but just can’t get my head around it.  I hate asking but if you get some spare time could you show me what you mean please. 

[nick_sherman]

[lua]

local boardWidth = 10

local boardHeight = 10

local cellSize = display.actualContentWidth / boardWidth * 0.8

local gapSize = cellSize * 0.15

local board = {}

local function createBoard ()

  local g = display.newGroup()

  g.box = display.newRect(g, 0, 0, cellSize * boardWidth + gapSize * (boardWidth - 1), cellSize * boardHeight + gapSize * (boardHeight-1))

  for r = 1, boardHeight do

    board[r]={}

    for c = 1, boardWidth do

      local rect = display.newRect(g, 0, 0, cellSize, cellSize)

      rect.anchorX = 0

      rect.anchorY = 0

      rect.x = -g.box.width/2 + (c-1) *(cellSize+gapSize)

      rect.y = -g.box.height/2 + (r-1)*(cellSize+gapSize)

      rect:setFillColor(.4, .4, .5, 1)

      rect.strokeWidth = 1 ; rect:setStrokeColor(0,0,0)

      board[r][c] = rect

    end

  end

  board.group = g

  g.x = display.contentCenterX

  g.y = display.contentCenterY

end

createBoard()

[/lua]

[Appletreeman]

Wow!  That was fast.  @nick_sherman - Thankyou so much.  When I’m not quite so tired I’ll spend some time examining the code to see exactly how you did it.

[nick_sherman]

No problem. Made a couple of changes to my post, there was a typo in line 32 and didn’t need vOffset anymore.