Drawing an infinite grid from a tool

Question

I am trying to create an infinite grid, similar to what happens when you use a TileMap in the editor. I am assuming that you need to find what the camera can see and draw the lines relevant to that area, but I'm not sure how to do this. You also need to redraw as the camera moves, which I'm also not sure about.

This is mainly for use in the editor, but it may come in handy to know this for in game as well. I would like to use Gdscript if possible.

Answer 1

EDIT: I recommend you take a look at surferlul's answer, in which he shows a working example of how to do this. I think my answer (below) is not really that useful.

---

You could take a look at how godot does it itself on the tilemap editor plugin.
(Here's the header file if needed.)

At a glance I'm not sure whether that algorithm runs every frame, or if it's run once, like you'd expect from drawing commands. (The fact that the plugin is written in C++ means it can afford to redraw everything if needed.)

My assumption would be that you could draw a grid of some size bigger than the screen, and move it with the camera but by increments of cell_size or cell_size*10 (arbitrary number) so you can't notice that the grid is moving with the camera. I think the tough part about this is to make sure the grid size is never smaller than the screen if you zoom out too much. Maybe you could redraw the grid to change its size every N zoom steps or something.

---

Or... perhaps it could be made into a paralax background layer which automatically takes care of tiling it when the camera reaches the boundaries. You don't even need a huge grid for that, and you just need to update it whenever the cell_size gets changed.

Personally I think I would try the second option. Sounds like it could work and also sounds simple enough. The thing to look out for is to make sure the tiling properly aligns the grids and doesn't overlap lines such that they create some sort of visual artifacts.

I have no clue if that works in the editor, though.

Comments

Thanks for pointing out tilemapeditor. I had found the TIleMaps C implementation, but didn't realise there was an editor plugin.

It seems to find the canvas transform and the size of the overlay, and then draws the grid based on that. I think I can do something similar with a GDScript plugin.

Answer 2

Assuming you have a Node2D as the base node and a Camera2D as a child of Node2D add an extra Node2D (Grid) to Node2D and add this script to Grid

extends Node2D
export var on = true

func _draw():
    if on: 
        var size = get_viewport_rect().size  * get_parent().get_node("Camera2D").zoom / 2
        var cam = get_parent().get_node("Camera2D").position
        for i in range(int((cam.x - size.x) / 64) - 1, int((size.x + cam.x) / 64) + 1):
        draw_line(Vector2(i * 64, cam.y + size.y + 100), Vector2(i * 64, cam.y - size.y - 100), "000000")
    for i in range(int((cam.y - size.y) / 64) - 1, int((size.y + cam.y) / 64) + 1):
        draw_line(Vector2(cam.x + size.x + 100, i * 64), Vector2(cam.x - size.x - 100, i * 64), "000000")

func _process(delta):
    update()

This will draw an infinite black grid with a spacing of 64 pixels. Depending on if you want the grid to be drawn on top of nodes or underneath you'll have to drag the Grid up or down.

Comments

This works perfectly. Thanks for sharing.

Also, you can use the camera's offset instead of the position, if that's the camera's property that you're working with.

Your answer should become the one selected as best. :)

---

It didn't work. The grid isn't infinite and it appears to the top left

---

Set "Current" property of Camera2D to true. Then it should work.