This is very basic description of what a pure ‘logical’ grid based on numbers/math may look like (i.e. without using grid container or such):
You will basically end up with two coordinate systems:
- Your grid units, how many cells width and height (e.g. 10 x 10) .
- The real pixels to which your grid should translate.
Here is a simplified example of how this might work.
const GRID_WIDTH: int = 10 # ← units
const GRID_HEIGHT: int = 10 # ← units
const TILE_SIZE: int = 150 # ← pixels
You have a main screen (or game screen) and your board on it. It may have the following node structure:
Main (Control)
– BoardGrid (Control)
– – Tiles (Node2D)
– – – Tile instance 1(Control)
– – – Tile instance 2 (Control)
etc.
You should set custom min size for the BoardGrid node:
func _ready() -> void:
# assuming you reference BoardGrid node in the code
var grid_px := Vector2(GRID_WIDTH * TILE_SIZE, GRID_HEIGHT * TILE_SIZE)
BoardGrid.custom_minimum_size = grid_px
Center the BoardGrid node or align it otherwise - this is a Control node so you can use anchors.
You should have a separate scene for a tile which should also be a Control node. Set the custom min size for this node to your TILE_SIZE. Instantiate the tiles within the Tiles ‘folder’ under the BoardGrid using a nested loop. The pixel coordinates of each tile (its top-left corner) should be derived from a function, e.g :
func grid_to_pixel(pos: Vector2i) -> Vector2:
return Vector2(pos.x, pos.y) * TILE_SIZE
That is, you feed your tile position, e.g. (1, 1) to this function and it returns the pixel position coordinates relative to the BoardGrid node (your tiles are within the coordinate space of BoardGrid, so it’s top-left corner is the origin). So for each tile Godot takes the position of its top-left corner from the grid_to_pixel function, and the size of it from custom_min_size set for the tile scene/class. These two numbers are used to position the tile in the grid in the real (pixel) coordinates.
That’s pretty much it. BoardGrid is responsible for global positioning, the grid_to_pixel function and your nested loop tile spawn function are reponsible for positioning the tiles within the BoardGrid. The tile scene is responsible for the texture and other properties of the tile itself.
Hope this helps.