Tile outline for tilesets

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By jobax

Is it possible to create some sort of coloured outline for each tile with a tileset? Trying to work on tile based movement and it would be nice to “see” where each tile is when I’m testing. Thanks.

:bust_in_silhouette: Reply From: 2D

You will want to extend the tilemap class and use the draw command to draw a grid. Check out Zylann’s answer in the link below, but use the get_used_rect() function in tilemap to get its size. Link to that post below as well. Let me know if you have implementation issue.

Link 1
Link 2

**EDITED on 3/4/2018
I couldn’t get it to behave using the draw_set_transform and I wanted you to have something usable so I just created a child node under the TileMap for the grids to be drawn in. Hopefully, this helps to guide you in the correct direction.


Thanks, I had a look at that. I’ve got all this in TileMap but nothing happens. Haven’t done any sort of drawing before.

var tilemap_size = Vector2()

func _ready():
	
	tilemap_size = self.get_used_rect().size
	
	print(tilemap_size)
	
	set_process(true)
	
func _draw():
	
	var color = Color(255.0, 0.0, 0.0)
	
	draw_set_transform(Vector2(), 0, tilemap_size)

	for y in range(0, tilemap_size.y):
		draw_line(Vector2(0, y), Vector2(tilemap_size.y, y), color)

	for x in range(0, tilemap_size.x):
		draw_line(Vector2(x, 0), Vector2(x, tilemap_size.x), color)
	
func _process(delta):
	
	update()

jobax | 2018-03-03 23:44

I don’t have computer access currently, but will look at it tomorrow and get back with you.

**Edited on 3/4/2018 - Updated my initial answer

2D||!2D | 2018-03-04 04:47

Thank you very much.

jobax | 2018-03-04 22:51

I also removed the position line, it essentially works perfectly without that (before the outlines were a bit misaligned and cutting across tiles). Also for whatever reason, I have to fill the map with tiles across the top and bottom for the lines to be drawn across the entire viewport. Will put into answer in case anyone else wants to do this. Thanks!

jobax | 2018-03-05 22:31

:bust_in_silhouette: Reply From: jobax

Thanks to 2D||!2D for all the help. Just add a node underneath the tileset with this in its script:

extends Node2D

onready var tilemap_rect = get_parent().get_used_rect()
onready var tilemap_cell_size = get_parent().cell_size
onready var color = Color(0.0, 1.0, 0.0)

func _ready():
	set_process(true)
	
func _process(delta):
	update()
	
func _draw():
	for y in range(0, tilemap_rect.size.y):
		draw_line(Vector2(0, y * tilemap_cell_size.y), Vector2(tilemap_rect.size.x * tilemap_cell_size.x, y * tilemap_cell_size.y), color)
		
	for x in range(0, tilemap_rect.size.x):
		draw_line(Vector2(x * tilemap_cell_size.x, 0), Vector2(x * tilemap_cell_size.x, tilemap_rect.size.y * tilemap_cell_size.y), color)

I had to cover the top and bottom of the viewport with tiles for the lines to draw over the entire map (can just add tiles outside the viewport) for my test project.