Note: The source code to Bubble Racing and a living version of this tutorial can be found here.
Bubble Racing is a game where you compete with friends to be the first to solve a maze (or obstacle course). There is no obstacle more tried and true than a wall. We’re going to jazz up the visuals of our walls a little bit, but functionally what we’re making here is an obstacle that things like bubbles can not pass through.
New Scene and then
Save Scene As. I named my scene
Wall because I am creative, and put the scene in a folder called
wall because I am audacious. Click
2D Scene Under the
Create Root Node section. Now, unless you want to make invisible walls (a totally valid choice), you will want to add an image that just screams “unpassable barrier”. The sky is the limit here, but I went with a creative and audacious rock. Feel free to use my rock by downloading it and putting it in your
Now here things get really advanced. Drag
rock1.png from the
FileSystem section into the middle-ish area. Congratulations! Your wall can be seen. I like to set the
y position of things to exactly 0. You can do that by clicking on the
rock1 node and adjusting the position under the
Transform section on the right.
We’re going to lean entirely on Godot’s physics engine here. I do enjoy whipping out some maths and creating terribly buggy physics code, but as it turns out that is a real time sink and also usually a bad idea. First, add a StaticBody2D node, and then add a CollisionShape2D node inside of that. Click on the CollisionShape2D node and then set the Shape to
Rect on the right menu. The rectangle this produces seems to default to 20 by 20, so set the
Scale of the
5 to get a 100 by 100 rectangle. Again, set
y to 0 to make sure the collision rectangle matches up with the graphic you added in the last step.
Godot has a built in lighting system, and in Bubble Racing we’re going to use it because we can. And because it looks cool. Our bubbles are going to produce light, and our walls are going to block light! Add a
LightOccluder2D node to the scene. With the
LightOccluder2D node selected, look for the
Polygon field and click
PoolVector. This next part is a little funky. In the
Size field put 4. This will create inputs for 4 different points. Set the points as follows:
0: -50, -50
1: 50, -50
2: 50, 50
3: -50, 50
After you have some initial points in there, you can move the points around in the UI to fine tune things.
Create a new scene in your
WallTest. Drag several instances of your wall into the scene.
Next, we’ll add something to bounce around on those walls of yours. Add a
RigidBody2Dnode to your
WallTestscene. Godot will complain that this
RigidBody2Dhas no shape, so add a
CollisionShape2Dnode as a child of the
RigidBody2Dnode. Give the
CollisionsShape2Dnode a Rect shape, and a scale of
To make this thing visible, I added a rock sprite to it. Rocks can fall, right?
To test that your walls will cast shadows, add a
Light2Dnode to your
RigidBody2Dnode. Drag a light map onto the
Light2Dnode. If you’re wondering what a light map is, it’s an image that tells Godot the shape and brightness of the light. Here’s an image that will work: bubble-light.png
There are a bunch of settings on the light. One that you’ll need to change for sure is to check the
Shadow. Otherwise… you won’t get any shadows and this test will look pretty sad. After messing around with the other settings under
Shadow, these looked pretty decent:
Filter Smooth: 40
A quirk of Godot is that lights don’t really light anything up unless there is an image of something in the background. Rocks can be backgrounds, right? Drag a rock (an image of a rock, not an instance of your wall) into the scene and stretch it out to cover the whole screen.
You may notice that things seem pretty wildly bright. This is because we’re taking a bright scene and making it even brighter with the light. To get things back into the visual range of normal humans, add a
CanvasModulatenode to the bottom of the scene’s node list. Set the color of the
CanvasModulateto something dark and brooding like
686868. This will make your whole scene darker.
To run your test, click the
Play Scene button on the top right. It looks like one of those things film people clap shut when they yell “Cut!” No idea what those are called, but that is what the button looks like. Also
F6 will work if you have no idea what I’m talking about.
Congratulations! You made a wall.
To be way more fancy than is needed, I made 3 rocks, and added some code to randomize them some. The code is here if you’re interested in such things. Here’s the final result: