Upset Baby Games

Upset Baby Games

Your First Game [part 1]

Your First Game [part 1] image
Published: 2019-11-22 20:25:09

INTRODUCTION

So you want to get into making video games but you have absolutely zero experience in anything even remotely related to it. Well, this tutorial is for you. Sometimes all people need is to know where to start and then they can figure out the rest on their own but for those who need to be stepped through the process I've got your back. We're going to go step-by-step through the creation of a simple asteroids clone. I'll do my best to explain why we do what we do along the way but if you have questions feel free to ask post them on this page via Dissenter.

First off, how does one go from 'I typed this' to 'computer do this'? The thing is, you speak a different language than your computer. There is no way it can understand the complexity of human language. In the case of two humans speaking different languages we would use a translator to enable the two people to communicate. That is exactly what we need to do when designing a game as well, we need some kind of translator.

In computer terms this translator is called a compiler. What we do is pick a programming language we want to use where we then get a compiler that understands this programming language and can translate it for the computer to understand. Once translated we can pass this translation around to our friends or whomever and they can tell their computers to read it. This is called a program. I game is just a program with the goal of entertainment.

At this point you may be asking what programming language you should use to make your game. Well, we are going to want to use a game engine to make our first game so it would make sense that we use whatever language that game engine uses. Why use a game engine, though? Why not just build things from scratch? Let me put it this way; building a game with a game engine is like building a house where you can go to the store to pick up the materials. It still takes a lot of effort but you only have to focus on the house. Building a game without a game engine is like building a house where you have to make the materials and design all the tools from scratch. This makes an already complicated task significantly worse.

With that out of the way, what game engine are we going to use? Well, there are many game engines out there for us to pick from. Some popular examples are the Unreal Engine, Unity 3D, GameMaker: Studio, and Godot. They are all good for different things but I'm going to go ahead and pick one for you.

Download

We are going to use Godot. This engine is ideal for starting out because it is free, runs on the three major operating systems, is easy to understand, and is powerful enough to still be useful once you've grasped the basics. Go ahead and start downloading it as you will need the software for the remainder of this tutorial. When you open the download page you will see two versions; Standard Version and Mono Version. You will want to download the Standard Version. If you are provided the option of 64-bit and 32-bit you should download the 64-bit version unless your computer is more than 10 years old. You should also download the resource pack for this tutorial as it gives you some basic images to use for your first game.

While you wait for that to download, let me explain a little further why we want to use a game engine. First off, the game engine comes with a compiler that knows how to translate any code we write with it. We don't need to go hunting for a language to use and a compiler that knows how to handle it, it is all done for us. Secondly, the game engine provides a lot of tools already designed for you. The most useful of these tools being, for example, drawing shapes and pictures on the screen. If we don't have an engine then we have to manually tell the computer how we want it to light up the pixels! While this is far from impossible to do, it is a bit much for your first dive into making games.

Okay, so you have the application downloaded. All that you have to do is unzip the file and run the application inside. Let the problem solving commence!

When you open up the program, you should see a picture similar to the one shown down below (Note: If it asks you to open the asset library, select 'no').

image...

Go ahead and press the New Project button. A Create New Project window should pop up. Fill out the project name with something, I opted for Asteroids of Doom because it sounds funny, and press Create & Edit. If the button is grayed out you need to press the Create Folder button next to your project name first.

image...

Alright! You should now have an empty project where we can make the magic happen! If you are feeling intimidated, don't worry. Pretty much every engine looks intimidating the first time it is opened, even for experienced programmers. We are gonna show this engine who's boss and you are gonna be a pro at it in no time.

image...

Godot

Because games can be designed a bajillion different ways, this means that every game engine is going to handle the expected approach to game design a little differently as well. Because of this I will need to explain some Godot-specific elements that you will need to know before you get started.

On the left hand side you will see a list with the title Create Root Node: that contains the options 2D Scene, 3D Scene, User Interface, and Other Node. We will be making a simplified 2D asteroids clone so go ahead and press the 2D Scene option.

Godot uses what is called a node system. You can think of a node as a little piece of code designated to do a very specific task or follow a set of rules. You can then attach nodes together to make them do increasingly complex things.

Let me give you an example. Let's say you wanted to make a 2D racing game and you had to create the player-controlled car. You might create a basic node called "PlayerCar" to represent the idea of your car. You could then attach a node to your PlayerCar node called "CarBody" that tells the game what the body of car should look like. Well, you also want to be able to run into other cars so you would attach yet another node to your PlayerCar called "CarCollision" which would handle detecting collisions with other cars.

Let's say you wanted to be able to have the car body in multiple parts, such as the driver, the wheels, and the frame. In this case you would add nodes to the CarBody node; one for the player, one for each wheel, one for the frame, and so forth. All of these nodes, however, 'belong' to the PlayerCar node. These would be called the 'children' of the PlayerCar and you can kind of picture how connecting all these nodes together create a big "family" tree.

That is how we will be building our game. We will have one main node called "Game" where we then split it into multiple further nodes, like one for the menu, one for the high-score, and so forth. We keep splitting nodes further and further adding as much detail as we want until the entire game is just a big tree of nodes.

Now, this could get really hard to keep track of as you get more and more nodes. This is why Godot implemented the idea of a "Scene". All a scene is is a self-contained portion of that big tree. It's like a mini-tree. For example, if we look back at the car example we started our tree with the "PlayerCar" node. The tree is complete, it represent a car. We don't need to add anything to it to make it more 'car'. However, we still have our game that the car belongs to; it's a child of the game tree. Once we are done with our car we can simply add our "Car Scene" to our giant game tree and it inserts the whole car tree to our game. But whenever we need to change something with our car, we can still just open up our mini tree of the car, the "Car Scene", instead of having to search through the whole game tree.

When we selected "2D Scene" earlier, all it did was create our first node and this node already has code that tells it it is inside of a 2D world. We could make this node the main node of our game, of our ship, of our asteroid, of a bullet, whatever. As we make the game we are actually going to make multiple scenes and attach them together to make our big game tree.

If this is all confusing to you, that is okay. I just want you to have it in your head so as we walk through making a game it all starts to make sense. I've rambled a lot here so let's go ahead and start making something.

Makin' The Stuff

I assume you have already pressed the 2D Scene option where the engine's windows should have changed a little bit. On the left now, where it used to say Create Root Node: you will now see the label Node2D. The first thing we are going to make is our user-controlled ship and we are going to make this node represent it.

To mark the occasion, right click on the Node2D node and select 'Rename'. Go ahead and give it a descriptive name such as 'Player'. Now the first thing we will want to do is to give the ship a shape. We want to be able to see it, after all! To do this we need to add a child node that knows how to display an image. In game design an image is generally called a sprite so that's the type of node we want. Right click on your, now appropriately labeled, 'Player' node and choose Add Child Node.

You will see a window pop up with a formidable list of different types of nodes. Feel free to browse for a bit just to get a feel for what kinds are available to use. You likely won't have to use most of these but it is good to know your options. When you are done looking, type 'sprite' in the search bar and you should see the Sprite node get highlighted. That's the one we want so go ahead and press Create to add it as a child to your 'Player' node.

Now that we have our sprite node we need to actually give it an image to draw! There are two windows you should notice here:

  • The one in the bottom left corner labeled FileSystem
  • The one in the right labeled Inspector

The Inspector window should have properties for your sprite node such as Texture, Normal Map, Offset, and so forth. If you don't see this in the inspector then make sure that you have clicked on your Sprite node.

What we need to do is specify the texture to use for our sprite node and thus our player. First up, extract the resources ZIP that you downloaded above. Inside there should be a folder named Sprites. Go ahead and drag that folder into the FileSystem section of Godot and it should add it to the project. Now, in the FileSystem section, click on the newly added Sprites folder and drag the player.png into the Texture section in the Inspector.

image...

At this point your ship should be centered on top of a green line and a red / purple line inside of the center window. If you zoom out by placing your mouse over the ship and scrolling (+ and - keys work as well) then you should be able to see that the ship is in the top-left corner of what appears to be a rectangle made out of colorful lines. This rectangle will be the size of your game window when the game runs. We want our ship to start in the center of the window so we should move it out of the corner!

Before you do that, however, you must remember that your player currently has two nodes. You have the 'Player' parent node and the 'Sprite' image node. We want to move your whole player, not just the image of your player. If you only move the image then the game will think that your player is in the top left while it will look like the ship is in the center of the window! So, to make sure we only move the parent node you should first click on the 'Player' node. Above the center window you should see a whole bunch of icons; a mouse cursor, a ruler, a hand, etc. You want to press the icon left of the bone. It looks like two squares with white dots. When you press this it just tells Godot that if you click any of the child nodes of the Player (such as the Sprite node) it will move the whole thing instead of the child you selected. Now you are good to click on your spaceship and drag it into the middle of that rectangle!

Now, we may not have officially gotten much made yet but let's go ahead and take a look at our work! In the upper-right of your window there should be a movie clapper with an arrow on it pointing to the right (sitting next to the square icon). Hovering over it should display "Play Scene (F6)". Press it.

A problem occurs! The scene has never been saved! I suppose we better do that so press 'Yes' to the dialog that pops up. A file explorer will open up. Go ahead and create a new folder called "Scenes" and save our scene as "Player.tscn". Once you are done, the game should start, showing your ship sitting in the middle of the window! Exciting stuff.

It is worth noting how pressing that magical "Play Scene" button just somehow works. What is happening when you do that is the engine is passing all of its pre-written code, such as how to make a window, load our image, and draw it on screen, to an included compiler. It's so easy!

NEXT TIME

Now that is all for this first part of the tutorial. I realize we only just got started but I think this is a good chunk of information. In the next part we are going to make the ship move, add asteroids, bullets, and more which will require that we learn to write our own code.

I hope that you've found this useful so far and are excited to keep going! See you in the next one!