Godot Version
4.4.1
Question
I’m wondering what would be the best approach for my game (Forum link, and Itch.io) when it comes to building levels.
There’ll be a TL:DR at the bottom, but if you want the full context: I’m working on a Sokoban style game. Basically a 2d top down grid based puzzle game, where you push boxes around. In my case, into holes. Holes cannot be walked over, unless filled with a box. Simple stuff.
When I started this project I simply put an array of arrays in my level script to “draw” the map. 0 was void, 1 was floor, 2 was holes, 3 boxes, 4 the player. For example like so:
var level = [
[0,0,0,0,0,0,0,0,0],
[0,1,1,1,1,1,1,1,0],
[0,1,4,1,1,3,2,1,0],
[0,1,1,1,1,1,1,1,0],
[0,0,0,0,0,0,0,0,0]
]
Which would in-game, be something like this:
(Void is black, green is the player, yellow the boxes, dark grey the holes, and light grey the floors)
That, as you can imagine, became tedious quickly, and hard to visualise when maps get more complex.
So I created a parser that takes an image. Like the one above, although that one is upscaled for visibility, but in reality every square is a pixel, so very small. This made creating levels much faster and worked well.
Until, I finished the basics of my game, and wanted to add new mechanics and complexities. For example a teleporter. One would be feasible, simple add 2 pixels of the same colour, and make them teleport to each other. But what if you add 2 teleporters (4 tiles)? In this case, there’s no way of knowing, from the image alone which tile should teleport where.
Surely, this can be fixed by using even more colours. Different colours for every different teleport. But that is not very scalable, and what if I later want to add pressure plates and doors? You get the idea, that won’t work long term.
Another solution I considered was supplementing the image with a file. For example some simple JSON to define some entities. For example like this:
{
"teleports": [
{"id": "A", "position": [3, 5], "connects_to": "B"},
{"id": "B", "position": [8, 2], "connects_to": "A"}
],
"pressure_plates": [
{"position": [4, 6], "controls": ["door_1", "door_2"]}
],
"doors": [
{"id": "door_1", "position": [7, 3], "initially_open": false}
]
}
Like where teleports should be and to which they connect. And while that is a viable option, I don’t like it not being visual. It’s hard to make puzzles as it is, if then have to see the map, but mentally visualise from the JSON file where things are suppose to be, that’s going to be complex in larger maps.
A final solution I’m considering (After brainstorming with AI), is perhaps making a level builder in Godot. It’s starting to sound like the only feasible option the more I think about it. However, I’ve never done anything like that. So before I jump down that rabbit hole, I’m turning to you, the wonderful community, to perhaps give me a better suggestion on how to tackle this problem, or if there aren’t any, some great resources to build this tool.
Thanks for your time and answers in advance 
.
TL:DR: What would be the easiest way to create levels visually for a grid based box pushing puzzler, with entities like teleporters, doors, keys, switches.