In this article by Ty Audronis author of the book Buildbox 2 Game Development, teaches the reader the Buildbox 2 game development environment by example.The following excerpts from the book should help you gain an understanding of the teaching style and the feel of the book.The largest example we give is by making a game called Ramblin’ Rover (a motocross-style game that uses some of the most basic to the most advanced features of Buildbox).Let’s take a quick look.
(For more resources related to this topic, see here.)
Making the Rover Jump
As we’ve mentioned before, we’re making a hybrid game. That is, it’s a combination of a motocross game, a platformer, and a side-scrolling shooter game. Our initial rover will not be able to shoot at anything (we’ll save this feature for the next upgraded rover that anyone can buy with in-game currency). But this rover will need to jump in order to make the game more fun.
As we know, NASA has never made a rover for Mars that jumps. But if they did do this, how would they do it? The surface of Mars is a combination of dust and rocks, so the surface conditions vary greatly in both traction and softness. One viable way is to make the rover move in the same way a spacecraft manoeuvres (using little gas jets). And since the gravity on Mars is lower than that on Earth, this seems legit enough to include it in our game.
While in our Mars Training Ground world, open the character properties for Training Rover. Drag the animated PNG sequence located in our Projects/RamblinRover/Characters/Rover001-Jump folder (a small four-frame animation) into the JumpAnimation field. Now we have an animation of a jump-jet firing when we jump. We just need to make our rover actually jump. Your Properties window should look like the following screenshot:
The preceding screenshot shows the relevant sections of the character’s properties window
We’re now going to revisit the Character Gameplay Settings section. Scroll the Properties window all the way down to this section. Here’s where we actually configure a few settings in order to make the rover jump. The previous screenshot shows the section as we’re going to set it up. You can configure your settings similarly.
The first setting we are considering is Jump Force. You may notice that the vertical force is set to 55. Since our gravity is -20 in this world, we need enough force to not only counteract the gravity, but also to give us a decent height (about half the screen). A good rule is to just make our Jump Force 2x our Gravity.
Next is Jump Counter. We’ve set it to 1. By default, it’s set to 0. This actually means infinity. When JumpCounter is set to 0, there is no limit to how many times a player can use the jump boost… They could effectively ride the top of the screen using the jump boost,such as a flappy bird control. So, we set it to 1 in order to limit the jumps to one at a time.
There is also a strange oddity with the Buildbox that we can exploit with this. The jump counter resets only after the rover hits the ground. But, there’s a funny thing… The rover itself never actually touches the ground (unless it crashes), only the wheels do. There is one other way to reset the jump counter: by doing a flip. What this means is that once players use their jump up, the only way to reset it is to do a flip-trick off a ramp. Add a level of difficulty and excitement to the game using a quirk of the development software!
We could trick the software into believing that the character is simply close enough to the ground to reset the counter by increasing Ground Threshold to the distance that the body is from the ground when the wheels have landed. But why do this? It’s kind of cool that a player has to do a trick to reset the jump jets.
Finally, let’s untick the Jump From Ground checkbox. Since we’re using jets for our boost, it makes sense that the driver could activate them while in the air. Plus, as we’ve already said, the body never meets the ground. Again, we could raise the ground threshold, but let’s not (for the reasonsstated previously).
Awesome! Go ahead and give it a try by previewing the level. Try jumping on the small ramp that we created, which is used to get on top of our cave. Now, instead of barely clearing it, the rover will easily clear it, and the player can then reset the counter by doing a flip off the big ramp on top.
Making a Game Over screen
This exercise will show you how to make some connections and new nodes using Game Mind Map.
The first thing we’re going to want is an event listener to sense when a character dies. It sounds complex, and if we were coding a game, this would take several lines of code to accomplish. In Buildbox, it’s a simple drag-and-drop method.
If you double-click on the Game Field UI node, you’ll be presented with the overlay for the UI and controls during gameplay. Since this is a basic template, you are actually presented with a blank screen. This template is for you to play around with on a computer, so no controls are on the screen. Instead, it is assumed that you would use keyboard controls to play the demo game. This is why the screen looks blank:
There are some significant differences between the UI editor and the World editor. You can notice that the Character tab from the asset library is missing, and there is a timeline editor on the bottom. We’ll get into how to use this timeline later. For now, let’s keep things simple and add our Game Over sensor.
If you expand the Logic tab in the asset library, you’ll find the Event Observer object. You can drag this object anywhere onto the stage. It doesn’t even have to be in the visible window (the dark area in the center of the stage). So long as it’s somewhere on the stage, the game can use this logic asset. If you do put it on the visible area of the stage, don’t worry; it’s an invisible asset, and won’t show in your game.
While the Event observer is selected on the stage, you’ll notice that its properties pop up in the properties window (on the right side of the screen). By default, the Game Over type of event is selected. But if you select this drop-down menu, you’ll notice a ton of different event types that this logic asset can handle. Let’s leave all of the properties at their default values (except the name; change this to Game Over) and go back to Game Mind Map (the top-left button):
Do you notice anything different? The Game Field UI node now has a Game Over output. Now, we just need a place to send this output.
Right-click on the blank space of the grid area. Now you can either create a new world or new UI. Select Add New UI and you’ll see a new green node that is titled New UI1. This new UI will be your Game Over screen when a character dies.
Before we can use this new node, it needs to be connected to the Game Over output of Game Field UI. This process is exceedingly simple. Just hold down your left mouse button on the Game Over output’s dark dot, and drag it to the New UI1‘s Load dark dot (on the left side of the New UI1 node).
Congratulations, you’ve just created your first connected node. We’re not done yet, though. We need to make this Game Over screen link back to restart the game. First, by selecting the New UI1 node, change its name using the parameters window (on the right of the screen) to Game Over UI. Make sure you hit your Enter key; this will commit the changed name. Now double-click on the Game Over UI node so we can add some elements to the screen.
You can’t have a Game Over screen without the words Game Over, so let’s add some text.
So, we’ve pretty much completed the game field (except for some minor items that we’ll address quite soon). But believe it or not, we’re only halfway there! In this article, we’re going to finally create our other two rovers, and we’ll test and tweak our scenes with them. We’ll set up all of our menus, information screens, and even a coin shop where we can use in-game currency to buy the other two rovers, or even use some real-world currency to short-cut and buy more in-game currency. And speaking of monetization, we’ll set up two different types of advertising from multiple providers to help us make some extra cash. Or, in the coin-shop, players can pay a modest fee to remove all advertising!
Ready? Well, here we go!
We got a fever, and the only cure is more rovers!
So now that we’ve created other worlds, we definitely need to set up some rovers that are capable of traversing them. Let’s begin with the optimal rover for Gliese. This one is called the K.R.A.B.B. (no, it doesn’t actually stand for anything…but the rover looks like a crab, and acronyms look more military-like).
Go ahead and drag all of the images in the Rover002-Body folder as characters. Don’t worry about the error message. This just tells you that only one character can be on the stage at a time. The software still loads this new character into the library, and that’s all we really want at this time anyway. Of course, drag the images in the Rover002-Jump folder to the Jump Animation field, and the LaserShot.png file to the Bullet Animation field.
Set up your K.R.A.B.B. with the following settings:
For Collision Shape, match this:
In the Asset Library, drag the K.R.A.B.B. above the Mars Training Rover. This will make it the default rover. Now, you can test your Gliese level (by soloing each scene) with this rover to make sure it’s challenging, yet attainable. You’ll notice some problems with the gun destroying ground objects, but we’ll solve that soon enough.
Now, let’s do the same with Rover 003. This one uses a single image for the Default Animation, but an image sequence for the jump. We’ll get to the bullet for this one in a moment, but set it up as follows:
Collision Shape should look as follows:
You’ll notice that a lot of the settings are different on this character, and you may wonder what the advantage of this is (since it doesn’t lean as much as the K.R.A.B.B.). Well, it’s a tank, so the damage it can take will be higher (which we’ll set up shortly), and it can do multiple jumps before recharging (five, to be exact). This way, this rover can fly using flappy-bird style controls for short distances. It’s going to take a lot more skill to pilot this rover, but once mastered, it’ll be unstoppable. Let’s move onto the bullet for this rover. Click on the Edit button (the little pencil icon) inside Bullet Animation (once you’ve dragged the missile.png file into the field), and let’s add a flame trail.
Set up a particle emitter on the missile, and position it as shown in the following screenshots:
The image on the left shows the placement of the missile and the particle emitter. On the right, you can see the flame set up. You may wonder why it is pointed in the opposite direction. This will actually make the flames look more realistic (as if they’re drifting behind the missile).
Preparing graphic assets for use in Buildbox
Okay, so as I said before, the only graphic assets that Buildbox can use are PNG files. If this was just a simple tutorial on how to make Ramblin’ Rover, we could leave it there. But it’s not just it. Ramblin’ Rover is just an example of how a game is made, but we want to give you all of the tools and baseknowledge you need to create all of your own games from scratch. Even if you don’t create your own graphic assets, you need to be able to tell anybody creating them for you how you want them. And more importantly, you need to know why.
Graphics are absolutely the most important thing in developing a game. After all, you saw how just some eyes and sneakers made a cute character that people would want to see. Graphics create your world. They create characters that people want to succeed. Most importantly, graphics create the feel of your game, and differentiate it from other games on the market.
What exactly is a PNG file?
Anybody remember GIF files? No, not animated GIFs that you see on most chat-rooms and on Facebook (although they are related). Back in the 1990s, a still-frame GIF file was the best way to have a graphics file that had a transparent background. GIFs can be used for animation, and can have a number of different purposes. However, GIFs were clunky. How so? Well, they had a type of compression known as lossy. This just means that when compressed, information was lost, and artifacts and noise could pop up and be present.
Furthermore, GIFs used indexed colors. This means that anywhere from 2 to 256 colors could be used, and that’s why you see something known as banding in GIF imagery.
Banding is where something in real life goes from dark to light because of lighting and shadows. In real life, it’s a smooth transition known as a gradient. With indexed colors, banding can occur when these various shades are outside of the index. In this case, the colors of these pixels are quantized (or snapped) to the nearest color in the index. The images here show a noisy and banded GIF (left) versus the original picture (right):
So, along came PNGs (Portable Network Graphics is what it stands for). Originally, the PNG format was what a program called Macromedia Fireworks used to save projects. Now,the same software is called Adobe Fireworks and is part of the Creative Cloud. Fireworks would cut up a graphics file into a table or image map and make areas of the image clickable via hyperlink for HTML web files. PNGs were still not widely supported by web browsers, so it would export the final web files as GIFs or JPEGs.
But somewhere along the line, someone realized that the PNG image itself was extremely bandwidthefficient. So, in the 2000s, PNGs started to see some support on browsers. Up until around 2008, though, Microsoft’s Internet Explorer still did not support PNGs with transparency, so some strange CSS hacks needed to be done to utilize them.
Today, though, the PNG file is the most widely used network-based image file. It’s lossless, has great transparency, and is extremely efficient. Since PNGs are very widely used, and this is probably why Buildbox restricts compatibility to this format. Remember, Buildbox can export for multiple mobile and desktop platforms.
Alright, so PNGs are great and very compatible. But there are multiple flavours of PNG files. So, what differentiates them?
What bit-ratings mean?
When dealing with bit-ratings, you have to understand that when you hear 8-bit image and 24-bit image, it maybe talking about two different types of rating, or even exactly the same type of image. Confused? Good, because when dealing with a graphics professional to create your assets, you’re going to have to be a lot more specific, so let’s give you a brief education in this.
Your typical image is 8 bits per channel (8 bpc), or 24 bits total (because there are three channels: red, green, and blue). This is also what they mean by a 16.7 million-color image. The math is pretty simple. A bit is either 0 or 1. 8 bits may look something as 01100110. This means that there are 256 possible combinations on that channel. Why? Because to calculate the number of possibilities, you take the number of possible values per slot and take it to that power. 0 or 1; that’s 2 possibilities, and 8 bit is 8 slots. 2x2x2x2x2x2x2x2 (2 to the 8th power) is 256. To combine colors on a pixel, you’d need to multiply the possibilities such as 256x256x256 (which is 16.7 million). This is how they know that there are 16.7 million possible colors in an 8 bpc or 24-bit image. So saying 8 bit may mean per channel or overall. This is why it’s extremely important to add thr “channel” word if that’s what you mean.
Finally, there is a fourth channel called alpha. The alpha channel is the transparency channel. So when you’re talking about a 24-bit PNG with transparency, you’re really talking about a 32-bit image. Why is this important to know? This is because some graphics programs (such as Photoshop) have 24-bit PNG as an option with a checkbox for transparency. But some other programs (such as the 3D software we used called Lightwave) have an option for a 24-bit PNG and a 32-bit PNG. This is essentially the same as the Photoshop options, but with different names. By understanding what these bits per channel are and what they do, you can navigate your image-creating software options better.
So, what’s an 8-bit PNG, and why is it so important to differentiate it from an 8-bit per channel PNG (or 24-bit PNG)? It is because an 8-bit PNG is highly compressed. Much like a GIF, it uses indexed colors. It also uses a great algorithm to “dither” or blend the colors to fill them in to avoid banding. 8-bit PNG files are extremely efficient on resources (that is, they are much smaller files), but they still look good, unless they have transparency.
Because they are so highly compressed, the alpha channel is included in the 8-bits. So, if you use 8-bit PNG files for objects that require transparency, they will end up with a white-ghosting effect around them and look terrible on screen, much like a weather report where the weather reporter’s green screen is bad.
So, the rule is…
So, what all this means to you is pretty simple. For objects that require transparency channels, always use 24-bit PNG files with transparency (also called 8 bits per channel, or 32-bit images). For objects that have no transparency (such as block-shaped obstacles and objects), use 8-bit PNG files. By following this rule, you’ll keep your game looking great while avoiding bloating your project files. In the end, Buildbox repacks all of the images in your project into atlases (which we’ll cover later) that are 32 bit. However, it’s always a good practice to stay lean.
If you were a Buildbox 1.x user, you may remember that Buildbox had some issues with DPI (dots per inch) between the standard 72 and 144 on retina displays. This issue is a thing of the past with Buildbox 2.
Image sequences
Think of a film strip. It’s just a sequence of still-images known as frames. Your standard United States film runs at 24 frames per second (well, really 23.976, but let’s just round up for our purposes). Also, in the US, television runs at 30 frames per second (again, 29.97, but whatever…let’s round up).
Remember that each image in our sequence is a full image with all of the resources associated with it. We can quite literally cut our necessary resources in half by cutting this to 15 frames per second (fps).
If you open the content you downloaded, and navigate to Projects/RamblinRover/Characters/Rover001-Body, you’ll see that the images are named Rover001-body_001.png, Rover001-body_002.png and so on. The final number indicates the number that should play in the sequence (first 001, then 002, and so on).
The animation is really just the satellite dish rotating, and the scanner light in the window rotating as well. But what you’ll really notice is that this animation is loopable.
All loopable means is that the animation can loop (play over and over again) without you noticing a bump in the footage (the final frame leads seamlessly back to the first).
If you’re not creating these animations yourself, you’ll need to make sure to specify to your graphics professional to make these animations loopable at 15 fps. They should understand exactly what you mean, and if they don’t…you may consider finding a new animator.
Recommended software for graphics assets
For the purposes of context (now that you understand more about graphics and Buildbox), a bit of reinforcement couldn’t hurt.
A key piece of graphics software is the Adobe Creative Cloud subscription (http://www.adobe.com/CreativeCloud ). Given its bang for the buck, it just can’t be beaten. With it, you’ll get Photoshop (which can be used for all graphics assets from your game’s icon to obstacles and other objects), Illustrator (which is great for navigational buttons), After Effects (very useful for animated image sequences), Premiere Pro (a video editing application for marketing videos from screen-captured gameplay), and Audition (for editing all your sound).
You may also want some 3D software, such as Lightwave, 3D Studio Max, or Maya. This can greatly improve the ability to make characters, enemies, and to create still renders for menus and backgrounds. Most of the assets in Ramblin’ Rover were created with the 3D software Lightwave.
There are free options for all of these tools. However, there are not nearly as many tutorials and resources available on the web to help you learn and create using these.
One key thing to remember when using free software: if it’s free…you’re the product. In other words, some benefits come with paid software, such as better support, and being part of the industry standard. Free software seems to be in a perpetual state of “beta testing.”
If using free software, read your End User License Agreement (known as a EULA) very carefully. Some software may require you to credit them in some way for the privilege of using their software for profit. They may even lay claim to part of your profits.
Okay, let’s get to actually using our graphics in Ramblin’ Rover…
Summary
See? It’s not that tough to follow. By using plain-English explanations combined with demonstrating some significant and intricate processes, you’ll be taken on a journey meant to stimulate your imagination and educate you on how to use the software. Along with the book comes the complete project files and assets to help you follow along the entire way through the build process. You’ll be making your own games in no time!
Resources for Article:
Further resources on this subject:
- What Makes a Game a Game? [article]
- Alice 3: Controlling the Behavior of Animations [article]
- Building a Gallery Application [article]
