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

asked Nov 3, 2018 in Engine by adzy2k6 (19 points)

2 Answers

+3 votes
Best answer

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.

answered Nov 3, 2018 by woopdeedoo (185 points)
selected Nov 6, 2018 by adzy2k6

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.

0 votes

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.

answered Sep 1 by surferlul (22 points)
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.