Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

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

- - - - -
4 replies to this topic
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

Appletreeman

[GLOBAL: userInfoPane.html]
Appletreeman
  • Contributor

  • 438 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,803 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

  • 438 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,803 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_controls]
[/topic_controls]