If you’ve been reading this blog, you’ll know that my last few posts have all been about creating the level editor for my old game jam game Unweighted. This is the next post in that series, talking about how I implemented the wire system for the level editor.
Why Wires? 🔗
In the game, most of the interactivity comes from the player moving on top of buttons and switches, to cause some change elsewhere in the level. Early on in development, these signals were all done by hand in the Godot scene editor. The wires were there purely as a way to signal to the player that an action occurred, and each tile was enumerated in a level-specific script so that its color could be changed. When I started thinking about creating a level editor, however, I knew that some programmatic solution would be needed for both sending the signals to the level objects and changing the appearance of the wires. I talked a bit in my first post about solving this problem. So now all I needed to do was add a system that would allow a user to actually place wires in the level editor.
No Grid, No Problem 🔗
Unlike, say, Minecraft redstone, where connections are automatically formed between adjacent cells with wires, the wires in our game don’t form connections automatically. This is good for space efficiency, as you can have parallel wires running next to each other without them being interconnected. The problem with this is that it makes it not so straightforward to use a purely grid-based approach for placing them.
Luckily, because of previous work in placing tiles, I already had a function that got called when the cursor moved from one tile to another. So a quick modification to that function was all I needed to add functionality there.
func mouse_entered_tile(current: Vector2i, prev: Vector2i) -> void:
if Input.is_mouse_button_pressed(MOUSE_BUTTON_LEFT):
if object_to_place == WIRES:
level.place_wire(prev, current)
else:
# If the mouse button is down when we enter the tile, treat it as a click.
place_object(current)
else:
preview_object(current)
The place_wire() function is doing all the heavy lifting here. Let’s go through it section by section. The first thing we do is get the “directions” pointed to by any existing wires in the cells we want to link. A vertical wire tile would return directions of [Vector2i.DOWN, Vector2i.UP] for example.
func place_wire(from: Vector2i, to: Vector2i) -> void:
var from_directions := get_wire_directions(from, -1)
var to_directions := get_wire_directions(to, -1)
Next we ensure that the tiles we’re connecting are actually adjacent to each other.
# Ensure the tiles are adjacent.
var diff := from - to
if diff not in [Vector2i.LEFT, Vector2i.UP, Vector2i.DOWN, Vector2i.RIGHT]:
return
Then we add the new direction to both lists of directions, taking care not to add any duplicates.
if (to - from) not in from_directions:
from_directions.append(to - from)
if (from - to) not in to_directions:
to_directions.append(from - to)
Finally we get the tile map parameters given the new set of directions. get_wire_tile_params() is like the inverse of get_wire_directions(). The latter turns a tile into a set of directions, and the former a set of directions back into a tile. In this case we need both the source_id and alternative_tile to account for reflections. That’s why get_wire_tile_params() returns an Array.
var from_params := get_wire_tile_params(from_directions)
var to_params := get_wire_tile_params(to_directions)
wire_tile_map.set_cell(from, from_params[0], Vector2i(0, 0), from_params[1])
wire_tile_map.set_cell(to, to_params[0], Vector2i(0, 0), to_params[1])
Both get_wire_directions() and get_wire_tile_params() are absurdly long switch statements to deal with every possible case (all 2^4 = 16 of them!). Their implementation is trivial, but of course due to their size were the source of quite a few bugs I had to stomp out.
Previewing 🔗
Because placing wires was strictly a click-and-drag process I was stumped for a while trying to think of a way to preview. In the end, I made a new tile, a dot with no connections, and previewed that when the user moved their mouse around without clicking. I also made it so it would place that dot tile when the user first clicked, to make it more obvious that they’re placing a wire.
Once I had this done, I sent yet another progress update to my team.
Erasing Wires 🔗
I was toying around with the idea of forcing the user to click and drag to erase wires, but in the end I found that pretty unintuitive. So instead, I treated the wire tiles like anything else. I slotted them in the erase order after objects, but before tiles, to match their visual order.
One slight quirk of this erasing system is that it will almost always leave “spurs” where you cut the tile off. Perhaps I could have made it so that when a tile was erased, its neighbors would remove any connections to that tile as well, but at this point I was getting anxious to finish this project.
After finishing implementing the wires completely, I had my first actual demo of creating a level. From here on out it would mostly just be tweaks to the UX, and no more core features.
Conclusion 🔗
And that’s it for this week’s post! I’ll see you next time with one last installment on how I made my final tweaks (and did some user testing!). And of course, when I get around to it I’ll have to make that ethernet wiring post as well. So keep an eye out for those posts, and I’ll see you next time!