Game Design Using Buildbox

In this video, we show you how to do some quick game development by switching around just a few settings in a Buildbox template.:) Be sure to check us out o. Zweig believes “video-game designer” will be the next addition to that list, and that Buildbox will be the company to make it happen. Roblox Corp., an online gaming platform that lets its users create games, plans to go public this year and is valued at around $30 billion.

Last week I blogged about BuildBox adding a free subscription plan, and how easy is to build a game with no code.

Since I hate the #nocode tag, I am going to show you how to build a game like “Don’t Touch the Spikes” which I already coded with Phaser, this time using BuildBox and yes, a bit of code.

Since BuildBox does not feature HTML5 export, here is an animation of what we are going to build:

Game Design Using Buildbox System

We have a lot of features in this prototype: a moving 3D camera, physics, input management, particles, collision detection and a completely random game, which is the most difficult part to get in BuildBox, according to what people say on the web.

Follow me in the creation of the prototype:

First, create a new game. Say “no” to built-in templates and learn to build your stuff from scratch. It’s the best way to learn.

Game Design Using Buildbox

For the same reason, we say “no” to wizards, because we are wizards ourselves, aren’t we? So let’s start with an empty project.

This is the “Mind Map”, the place where you can organize the flow of your game. The default game takes place in a 2D world.

We are going to create a 3D game so we delete the 2D world by selecting it and press “Canc”, then by dragging a 3D World in the Mind Map

Now let’s connect the two “Load” nodes and we are ready to build our 3D game.

This is our empty scene. This is where we are going to place assets.

Click on “Asset Library”, select a Cube then click on “Add to Library”

Buildbox

Game Design Using Buildbox Tools

You will find it in your Asset Library bar, and if you select it you can change its name to “Wall”, as well as check “Physics” checkbox and set body type to “Static”.

Following the same concept, create two more physics static cubes which you will call “Left Wall” and “Right Wall”

The game also features spikes, which we can create using a cone. Add a Cone to Asset Library

The cone will be called “Spike”, will be a physics Kinematic body and we can also assign it a color by changing its “3D Model” settings. This way we’ll have a red cone

Now it’s time to add the player: a sphere.

The sphere is a dynamic physics body.

As you can see, the sphere is listed among the objects, but we want it to be a character, so let’s drag it up in “Characters” tab.

Games made with buildbox

The last actor to add to the game is a cube which we’ll use as a particle.

Call it “Particle” and set it as a dynamic physics body.

You can drag and drop assets from the Asset Library directly to the stage. Try to do it with a wall:

As long as your asset is selected, you can change its position, rotation and scale along the three axes. Give position (0, 22, 0), rotation (0, 0, 0) and scale (14, 2, 2) and your cube will probably disappear.

This is because it’s out of camera view

We can select the camera view with the proper button in the top right side of the window

Then we can select the camera and sets its properties just as if it were an asset: let’s try position (0, 0, 50), rotation all set to zero and size all set to 1:

Yeah! Now the wall is visible. Let’ add the bottom wall. You can drag and drop assets in camera view too:

Place the new wall at (0, -22, 0) and give it a scale of (14, 2, 2), and the bottom wall is placed.

Following the same concept, let’s add left wall at (-12, 0, 0) with scale (2, 20, 2).

And the right wall at (12, 0, 0) with the same scale.

Now the game field is completely built! Now, let’s add the player by dragging the sphere and giving it a position (-6, 1, 0).

And we are done with dragging and dropping assets. From now on, we’ll work on the sphere itself. Double click it on the Asset Library and you will open the Node Map. This is where you can arrange your nodes to crate an action for your character or object.

At the moment we only have the 3D model, but from the left accordion panel we can choose Controls -> Touch to drag and drop it on the Node Map.

Then, enable the Touch node by linking its “Enabled” label with the “Created” label of the Start node.

The game is also responsive to collisions, so drag three “If Collide” nodes from the “Actions” tab.

Buildbox 2

Make Your Own Game Buildbox

Nodes can be customized by selecting them and editing their properties in the panel on the right. Name the node “Left Wall Collision” and select “Left Wall” from “Affected Asset”. Then following the same concept create “Right Wall Collision” for “Right Wall” asset and “Spike Collision” for “Spike” asset.

Let’s link the nodes exactly as we did before with “Touch” node.

We want the ball to explode when the player hits a spike, so let’s add “Debris Explosion” to Node Map

Leave all default options, just select the “Particle” asset from “Asset” property. And link “Debris Explosion” with “Collide” label in “Spike Collision” node.

We also want the camera to rotate a bit following the sphere, and we can do it with “Camera Rotation Animation” node.

“Left Wall Collision” will be linked to a “Camera Rotation Animation” node whose target delta is (0, -5, 0) in 0.2 seconds and InCube easing function.

Design

Same thing for “RightWall Collision” but the other node will have a target delta (0, 5, 0).

Now, the king of the nodes: the Script Node.

By clicking on it you can add labels, which actually are signal listeners, and we will create “Jump”, “Left Wall Collision” and “Right Wall Collision”. Also have a look at the default code at the right of the screen: it’s JavaScript!

You can also add custom attributes to a Script Node by selecting them from “Add Attribute” button.

We are going to add three custom attributes: “Ball Speed”, “Jump Force” and “Max Spikes”, respectively with 15, 35, and 5 default values. Changing these values will affect gameplay.

And now it’s time to link the proper signals with the listeners to make the game react to touch, left wall collision and right wall collision.

Finally, the fun part: the script! Here it is the commented JavaScript:

Buildbox Game Assets

And this is how I built a 3D version of “Don’t Touch the Spikes” with BiuldBox. Next time I will add a star to collect to earn points, meanwhile download the full project. Do you like BuildBox?