+2 votes

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.

in Engine by (19 points)

2 Answers

+3 votes
Best answer

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.

by (186 points)
edited by

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.

+1 vote

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

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.

by (24 points)

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. :)

Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to webmaster@godotengine.org with your username.