SOVEREIGN MOON PRESENTS…

Buildbox Tutorial: The Basics For Beginners (With Video)

In our Buildbox tutorial series, we’ll show you how you can build amazing 2D and 3D games without having to know how to code.  

Sovereign Moon Studios is dedicated to helping game enthusiasts bring their creative visions to life by teaching them how to make a video game from scratch without having to know how to code or draw. 

A Buildbox Crash Course Tutorial To Get You Started

In today’s tutorial I’m going to introduce absolute beginners to Buildbox. Recently, I’ve been . As we progress through this tutorial series, I’ll be doing so with a focus on using no-code development tools rather than scripting to create games. This is because the Sovereign Moon Studios audience is interested in learning how to make games without having to code, so my focus will be on teaching you how to use visual scripting tools, which are built into Godot, instead.

So let’s jump in and start learning about Godot’s interface.

Introduction to Buildbox’s Interface

In today’s tutorial I’m going to introduce you to Buildbox, a beginner friendly no-code game engine that allows you to build beautiful video games without having to know how to program.

I’ve been covering many different no-code engines on our blog recently including how to use Unity’s built in no-code tools and most recently I covered Godot’s visual scripting tools. However, out of all of these tools, I believe that Buildbox offers the most beginner friendly experience.

Using Buildbox it’s really easy to build games and with Buildbox it’s not uncommon to go from idea to finished game within a month or two.

Today’s tutorial is only meant to be an introductory tutorial for beginners where I’ll cover the basics. But hopefully, by the end of this tutorial you’ll have a better understanding of how to design games using Buildbox, set up mind maps and use nodes to program your game without writing a line of code. So let’s jump in.

So the first thing we’re going to do is we’re going to open up Buildbox and create a new game.

WIZARD FOR EASY GAME CREATION

So what we’re going to do in order to make our lives a bit easier, is we’re going to use the wizard to set up our game.

MIND MAP

Once our game is set up we’ll be brought to our mind map page. This page is designed to allow you to control your top level game mechanics and game flow. The mind map area doesn’t have many nodes to work with, but you can do a lot with the new nodes that are available to you.

Over to the left you’ll see the mind map nodes you have available to you. You have a 3D world, 2D world, UI screen and a random node.

Because we’re going to be building a 2D game, I’ll be using a 2D node. So let’s get this wired up. First, notice that we’re currently going from our start node directly into our 2D game node. This means that on start, the game will automatically play.

All of these nodes have nested properties that we can get access to if we double click on any node. For example, if we click on our 2D game mode, we’ll be brought to our main 2D game world that we’ll need to start designing. But let’s not get ahead of ourselves. Let’s head back to our mind map for a moment.

Now what if we wanted to place a menu before our game started so the user could change their settings or pick the world they enter into.

So what we could do, is we could add a new UI screen by dragging and dropping it into our mind map and then we’ll name the UI screen to “Main”. I mentioned previously, that nodes are nested to help keep the interface clear and your game organized. So although we can make some basic modifications to this UI node here like change it’s name or add music to it, we need to double click on the node to access this node’s properties (just like we did with the 2D world node).

If we do that we’ll be able to set up the components to this UI. For demonstration purposes, we’re going to keep this really simple. Let’s just add a background image and a button in order to play the game.

To add a background image, you can just drag and drop an image from your computer onto the canvas area. Just drag and drop the image onto the “image” option and then scale your background to your liking.

Next, let’s add a button that will bring a player into your game world if it’s clicked. We’ll grab a label from over here and drag it into our canvas. Now, what we’ll do, with this label selected, we’ll go into the labels properties and we’ll change the text to say “Play”.

Now, let’s stop for a moment, because I want to show you one really important thing that a lot of beginners get stuck on. Let’s navigate back to our mind map by clicking on our mind map here. Notice currently that we haven’t linked this UI node to anything yet. But more importantly, what I want you to notice is that we have an input port here on the left, but we have no output port on our right. So essentially, we can link into this node, but it currently can’t link out.

Logic with nodes moves from left to right. So essentially what we’ll want to do is, wire our start node’s output into our UI’s input. But then from there, our goal is to allow the player to click on the “play” button to play our game. From there, we should be able to link the UI to the 2D game node in order to activate the game world. But currently, there is no way to do that because our UI node has no output port. So let’s fix that. Let’s jump back into our “main UI” by either double clicking on it, or clicking this tab here.

Game Object Control

In order to program an output port, we simply need to add a “navigation button”. So let’s add that into our UI now. By default these are invisible triggers. So when we drag this in, we can place it over our text, like this, so when someone clicks on our text, they will really be clicking on this navigation button. So all we need to do now is rename this navigation button to something like “play”.

Now, navigate back to our mind map and notice that our UI has a new output port called “Play”. It’s just picking up the custom name of our navigation button. So if I go back and change our navigation button to “Play Now”, and then come back here, the output port will show the new name.

Now from there, we can link this into our 2D game world.

And we could add multiple outputs into our main UI as well. For example, imagine we had a game planned where we wanted the player to pick which game world they wanted to enter. We might have a winter world and a summer world. Or we might have a hard level and an easy level.

So in order to program that all we need to do is go back to our UI and add another navigation button. We’ll rename this one to summer and then ‘ll add a new navigation button and we’ll call it winter. Now, notice we have two outputs when we go back to our mind map. You can do some really interesting things by being able to branch off into different areas of your mind map.

Next, I want to look at this UI we have linked to the 2D game world’s output to the right. Now the UI we link to this port will be unique, because this is our game’s overlay. So we could display things here like our character avatar, health bar, points, level or player controls to name only a few examples.

So again, by double clicking on this UI we’ll be brought to the UIs main interface. Here we can add the elements we want to overlay into our game. Let’s imagine we want to overlay points into our game. In a future tutorial, I’ll cover how to collect points and coins, but for now, let’s just add this component into our game.

Let’s drag and drop two labels int our game. One of them will be a basic text unit which will allow us to tell our players what we’re measuring, and the other will be an actual point counter.

So drag one label into your UI and then enter “points” into the text section of the properties window. Next drag and drop another label just to the right of the label you’ve already created, but this time select “score” under function and then under “score type” select “points”. Now as you collect points in your game, they will show up here.

So let’s play the game now to see how this looks! As you can see all of the game logic we created previously is now working perfectly. On game load, we’re brought to our main UI page, where we need to click play before we enter into our 2D game world. Once we’re in our 2D game world, our UI is being overlaid properly and up to this point, our video game is operating exactly as it should be.

I’ll cover one last feature of the mind map tool and that’s the random node under the logic settings. Essentially a random node allows you to randomly select an option from a list of potential options. Again, imagine we created four 2D game worlds to represent different environments and challenges. They could be land, air and water levels.. So we could add this random logic node and then link each individual 2D game world to the outputs to have the random selection node pick which game world our character will enter. There are other use cases as well, but you get the point. Essentially, it’s used to randomize a selection to help introduce an element of surprise.

So my goal with this tutorial was to give you a basic introduction to Buildbox by showing you around the interface and teaching you how the mind map feature works.

I hope you found this tutorial helpful. In the next tutorial, we’ll talk about the building and design of actual scenes within Buildbox. You won’t want to miss that tutorial, so ensure you keep on following along.

Also, remember, we’re just creating basic games here as an introduction to game design for non-coders. However, if you want to take your no-code game design skills to the next level, consider enrolling in our no-code game development course, where we teach you how to create breathtaking video games from scratch without having to know how to code.

Thanks for stopping by today!

Sovereign Moon Studios is dedicated to helping game enthusiasts bring their creative visions to life without having to know how to code or draw. Our NoCode game development course teaches indie game devs how to build breathtaking games from scratch. 

Want to Make Video Games?

Do you love game design? So do we! For this reason, we created a no-code video game development course that walks you through the process of bringing your game visions to life without needing to know how to program and without having to be an artist. We will teach you how to bring your game to life in our 4 hour 36 module no-code game development course.