Scrolling TileMap

This is a READ-ONLY snapshot of the Godot Community Forums when TwistedTwigleg was the owner, which is hosted for archival reasons only. The current Godot Community Forums can be found here.

Some links may point to external websites, including the current Godot Community Forums. These websites are not associated with TwistedTwigleg.

Default_User

I have been prototyping elements that I will need for my 2D game. I have had success creating a TileMap at runtime. However, when the TileMap is larger than the Debug window, it's just cut off. I'd like to have scrolling behavior, because the map will be fairly large.

Example, I'm generating a map that's 20x5 tiles, but it's cut off on the left at 16. What do I need to set up to get what I need?

duane

You can use a ScrollContainer for that, but since TileMap objects don't have an inherent size, you'll want to make the map a child of something like a Panel. I'd keep the ScrollContainer and TileMap as separate scenes to make it easier to edit. Or, if you're generating the map at runtime, just add it to panel.

extends ScrollContainer
# ScrollContainer base node


const TILE_SIZE = 64.0

var panel:Panel
var tile_map:TileMap
onready var MapClass = preload('res://map.tscn')


func _ready() -> void:
	# Make a panel to give the scroll container a size.
	panel = Panel.new()
	add_child(panel)

	# Instance the tile map.
	tile_map = MapClass.instance()
	panel.add_child(tile_map)

	# Set the panel size to the used area of the map.
	panel.rect_min_size = (tile_map.get_used_rect().end + Vector2.ONE) * TILE_SIZE
	panel.rect_clip_content = true

Default_User

I actually created the TileMap and TileSet initially, so I could attach a script to the TileMap. But I could use your method and push functionality from the TileMap scrip to the enclosing panel. This is all prototyping at this point, so I move code around as needed. That gives me some things to try, thanks.

Default_User

I did some work with the script provided. I didn't clarify at the beginning that I was creating the tiles individually at init, so I didn't have a large initial map. I set the min for panel to a default value. Then I added the XY loops for generating the tiles. Looked good. I then ported it to C#, which is what I'm working in. Thanks for the assist.

For future reference, here's my final GD script:

extends ScrollContainer

const TILE_SIZE = 64.0

var panel:Panel
var tile_map:TileMap

func _ready() -> void:
	# Make a panel to give the scroll container a size.
	panel = Panel.new()
	add_child(panel)
	tile_map = TileMap.new()
	tile_map.tile_set = TileSet.new()
	panel.add_child(tile_map)

	# Set the panel size to the used area of the map.
	panel.rect_min_size = Vector2(1000,500)
	panel.rect_clip_content = true

	var tex = load('res://Ground.png')
	for y in 5:
		for x in 20:
			var id = tile_map.tile_set.get_last_unused_tile_id()
			tile_map.tile_set.create_tile(id)
			var name = "Tile"
			tile_map.tile_set.tile_set_name(id, name)
			tile_map.tile_set.tile_set_texture(id, tex)
			tile_map.set_cell(x, y, id)

# Called every frame. 'delta' is the elapsed time since the previous frame.
#func _process(delta):
#	pass