How to navigate within a tileset using keyboard?

Questions
1

When creating a map, I click a tile, place it, and then… I have to click on the neighboring tile in the tileset so that I can place it?

There must be a way to use the arrow keys to navigate to the next tile over so I can rapidly switch between tiles while placing with the mouse, right?

I’d prefer if this was the default behavior of the arrow keys, if possible.

Sorry I’m sure there’s an obvious answer here, but looking through the documentation and all the keyboard shortcuts, for some reason I’m not finding it.

2

You can use the arrow keys to navigate the tilesets view when it’s active, but if the map view is active (e.g. just after placing a tile), the arrow keys will scroll the map view instead. So, in vanilla Tiled, you indeed have to click to select a tile, and the arrow keys are only useful if you misclick. There’s no keyboard-only way to focus the tilesets view that I’m aware of.

The arrow keys, if not assigned to an action, will do different things depending on the active view/panel (scroll the map view, navigate tileset, navigate properties, navigate layers, etc). So, making them always navigate the tileset would mean losing their other functionality. But, for users who don’t care to navigate other things with the arrow keys, it would be nice to have the option.

For now, you can sort of fake this with scripting. You can use this script to add “Select Next Tile” and “Select Previous Tile” actions to Tiled, and then you can assign Right and Left arrow keys to them in Edit > Preferences > Keyboard.

var selectNextTile = tiled.registerAction("SelectNextTile", function(action) {
	if(!tiled.mapEditor || !tiled.mapEditor.tilesetsView || !tiled.mapEditor.tilesetsView.currentTileset
	|| !tiled.mapEditor.tilesetsView.selectedTiles || tiled.mapEditor.tilesetsView.selectedTiles.length < 1) {
		return;
	}

	var selectedTile = tiled.mapEditor.tilesetsView.selectedTiles[0];
	var selectedTileset = tiled.mapEditor.tilesetsView.currentTileset;

	var tileIndex = selectedTileset.tiles.indexOf(selectedTile);
	if(tileIndex < 0)
		tileIndex = 0;
	else {
		if(tileIndex < selectedTileset.tiles.length-1)
			tileIndex++;
		else tileIndex = 0;
	}
	
	tiled.mapEditor.tilesetsView.selectedTiles = [selectedTileset.tiles[tileIndex]];
});
selectNextTile.text = "Select Next Tile";

var selectPrevTile = tiled.registerAction("SelectPrevTile", function(action) {
	if(!tiled.mapEditor || !tiled.mapEditor.tilesetsView || !tiled.mapEditor.tilesetsView.currentTileset
	|| !tiled.mapEditor.tilesetsView.selectedTiles || tiled.mapEditor.tilesetsView.selectedTiles.length < 1) {
		return;
	}

	var selectedTile = tiled.mapEditor.tilesetsView.selectedTiles[0];
	var selectedTileset = tiled.mapEditor.tilesetsView.currentTileset;

	var tileIndex = selectedTileset.tiles.indexOf(selectedTile);
	if(tileIndex < 0)
		tileIndex = selectedTileset.tiles.length-1;
	else {
		if(tileIndex > 0)
			tileIndex--;
		else tileIndex = selectedTileset.tiles.length-1;
	}
	
	tiled.mapEditor.tilesetsView.selectedTiles = [selectedTileset.tiles[tileIndex]];
});
selectPrevTile.text = "Select Previous Tile";

tiled.extendMenu("Map", [
	{ action: "SelectNextTile", before: "SelectNextTileset" },
	{ action: "SelectPrevTile" }
]);

However, this script doesn’t include options for navigating up/down. That wouldn’t be hard to implement for the simple case of a non-wrapped tileset (increment/decrement the selected index by the tileset’s columnCount instead of by 1), but it’s not practical to support wrapping because the API provides no information about that.

1 Like