Posted in Game Maker Studio

Game Maker Studio Post #2 Simple Asteroids using code

Assuming you now understand the very basics by which GMS operates (and if you don’t well the previous post is where you shouldav started from… but I am gonna overlook that since even I didn’t manage to read through the whole post…) I am gonna dive in and start actually using the software to build something playable! This post series as mentioned earlier will be made to aim to recreate the classic game “Asteroids” using GMS and some basic scripting in GML. No knowledge of code is assumed, except for maybe how variable work? Cause this uses a separate Language with different predefined variables and other stuff that I’ll write about as I dive deeper..

So let’s get started!

The Game Room

The first thing that we need to make anything in GMS is a room. Your game cannot run without at least one room, so go ahead and right click on rooms in your resource tree to create a new one!

On creating a new room you’ll be shown a big empty grey room and a bunch of menus on the left in different tabs. The settings tab will be open by default, use it to give your room a name (I use “room_base”) and set its speed to 60 (The higher the rate is the smoother the game will be, for a retro feel I chose the 60 fps[frames per second]).

The default color is grey and well I have played Asteroids on a black screen I am gonna do that first… In the various menu tabs for your room where you see “settings” “objects” etc, select “backgrounds”. Make sure that “Draw Background Color” remains ticked and click in the color box and change the background color to black.

We can actually run our game at this point but we wouldn’t see anything but a big black rectangle, the game room. Not very exciting. So lets get to work on our player!

The Player Sprite

The next thing I need is a sprite for the player’s spaceship! I am just gonna make something very quick and simple. I’m going to name mine sprite_player.

I clicked the “edit sprite” button to bring up the sprite editor, then simply clicked the little white sheet of paper icon in order to add a new frame to the sprite. As this is the first frame I am adding, GM will ask you what size the sprite should be. 32 x 32 pixels is the default, and is good enough for what I want, so I am just gonna go ahead and click OK..

I Double clicked my new empty animation frame to bring up the image editor. This is where I can actually draw your spaceship using simple paint-like image editing tools. It’s important based on the way GMS handles direction to draw your player spaceship initially facing to the right. Obviously I can import my own images into GMS if I have artwork produced in other tools such as Photoshop, and GM also supports PNGs and alpha transparency, but for now just drawing myself a simple spaceship will do!

After finishing my masterpiece, I went ahead and clicked the tick button to close the image editor and then did the same in the sprite editor to return to the overview screen for the sprite. Once here, there is this box in the bottom corner labelled “origin”. It’s very important that you click “center” (or just type in 16 for x and y) in order to properly center your spaceship.

Once you’ve made the sprite for our spaceship and centered the origin, it’s time to actually make a spaceship I can fly!

The Player Object

So this is the fun part where I actually get to create the game part of the game. Where I get to define how the player can interact with the game, and what the outcome of those interactions should be! I right clicked on Objects and create a new object. I called mine “object_player” (player because this is gonna be my sprite image… best to have the same suffix in that case cause else it would be confusing to me…).

When the object editor appears, I set the sprite using the drop down menu to our spaceship sprite (sprite_player). However you should avoid changing the default tickboxes. Make sure that “visible” is ticked and that “solid”, “persistant” and “uses physics” remain unticked. These can be useful options (I’ll, except for Solid which is usually more trouble than it’s worth) but for now ignore them as they will only cause problems.

As I explained in the basics article, objects (and therefore, all of your game’s mechanics) work on the principle of events and actions. You establish that when event X happens, I carry out action Y. The first thing I’re going to do is make it so our spaceship can turn left when I press the left arrow key.

So right click in the Events section of the object editor, hit “Add Event” and select Keyboard -> . Be sure to select from the “keyboard” section and not the “key press” or “key release” sections. More on those events in another game.

Now I need to associate an action with our left arrow key event. Because this post is based around learning GML scripting, there is actually only one action I will typically use and that’s the “Execute a piece of code” action which is found in the control tab in the actions menu on the far right of the screen.

All I’am doing when I use this action, is instead of using one of the pre-built drag and drop actions in GMS I’re defining one of our own. I can write instructions using GML code for our game to carry out. In this case I’re going to write a line of code to rotate our player object’s sprite.

So I went ahead and dragged this little paper square icon into your actions section, this will then open the code editor. So what on earth do I write in this magical, intimidating code editor? Well all I’am going to do is what a lot of the vast majority of code (and honestly the vast majority of programming) seems to boil down to, I’re going to take one number, and turn it into another one!

Precisely, I’am going to take our current direction, and adjust it by a small amount to the left.

Our sprite is drawn to the screen based on where our object is in the game (it’s x and y coordinate) and based on the “origin” of our sprite. But our object also contains a value that controls what angle to draw the sprite at. This value is called image_angle. By manipulating this value I can make our spaceship draw it’s sprite facing different directions!

By default image_angle equals zero. Which is based on the assumption that it is facing to the right. Now as this number increases, the the image is drawn at an angle rotating anti clockwise at a corresponding number of degrees. If image angle were to equal 90, our spaceship would be facing straight up. 180 = left, 270 = down and finally 360 would be facing right again.

So all I need to do is increase image_angle in order to turn left, so the line of code I’re going to write is:

image_angle = image_angle + 2;

Or in other words, image_angle equals itself plus 2. I end the line in a semi-colon as good programming practice to tell GMS where the line of code officially ends. I should also point out that the code ignores spaces between words. I could just as easily write:


And GMS would read it the same way. Adding spaces between words and commands in code just makes things easier on the eye and will help when reading your own code later.

I clicked the tick to close the code editor. You’ll notice that the “Left” event I created is now associated with one “Execute a piece of code” action. You can double click that action at any time to bring back the code editor and change your code.

I opened my room again, and went to the objects tab. Selected my player object from the drop down list and click anywhere in your room to add your spaceship. If you add too many, simply right click on them and hit delete.

Once I finished that I pressed F5 (or click the little green arrow in the top left of GM) in order to compile and run your game! This might take a second or two depending on how fast your PC is, but when your game window appears, press the left arrow key to see your spaceship spin around!

So now let me go ahead and do the exact same thing for when I press the right arrow key.

Now with the “Right” event selected, drag in another paper icon “code” action, which should open a new blank code editor. This time I am adding the code:

image_angle = image_angle – 2;

Or in other words, image_angle equals itself MINUS 2. This will cause our spaceship to rotate in the opposite direction, which is exactly what I want!

Link to so far which is not much: Asteroids #1

Okay I have a placement test to attend so that’s it for now… Ill move the ship forward and shoot tomorrow…

(๑º ロ º๑)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s