Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Centering a grid on the screen
Started by Appletreeman Jul 11 2019 10:05 AM

- - - - -
8 replies to this topic

Best Answer nick_sherman , 21 July 2019 - 12:30 PM

 
 
 
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()
 

[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

Appletreeman

[GLOBAL: userInfoPane.html]
Appletreeman
  • Contributor

  • 446 posts
  • Corona SDK

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.

 



[TOPIC: post.html]
#2

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,820 posts
  • Corona SDK

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 likes this

[TOPIC: post.html]
#3

Appletreeman

[GLOBAL: userInfoPane.html]
Appletreeman
  • Contributor

  • 446 posts
  • Corona SDK

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



[TOPIC: post.html]
#4

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,820 posts
  • Corona SDK

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.



[TOPIC: post.html]
#5

rynfaxy

[GLOBAL: userInfoPane.html]
rynfaxy
  • Observer

  • 1 posts
  • Corona SDK

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



[TOPIC: post.html]
#6

Appletreeman

[GLOBAL: userInfoPane.html]
Appletreeman
  • Contributor

  • 446 posts
  • Corona SDK

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



[TOPIC: post.html]
#7

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,820 posts
  • Corona SDK

  Best Answer

 
 
 
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()
 

  • Appletreeman likes this

[TOPIC: post.html]
#8

Appletreeman

[GLOBAL: userInfoPane.html]
Appletreeman
  • Contributor

  • 446 posts
  • Corona SDK

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.



[TOPIC: post.html]
#9

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,820 posts
  • Corona SDK

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




[topic_controls]
[/topic_controls]