Sponsored by

  • Intel
  • HP

Video gamesHow to

Create cross-platform games with GameMaker: Studio

Create cross-platform games with GameMaker: Studio

Make simple games without code and learn to program as you go along. Gavin Smart introduces GameMaker: Studio.

  • Knowledge needed: Basic coding, basic CSS, logical thinking
  • Requires: Windows PC, GameMaker: Studio (Free, Standard or Professional)
  • Project Time: 1-2 hours

Have a great idea for a game but don’t have any coding experience? Want to create a game but have limited resources and time available? Not sure which app stores you want to publish your game in and want to keep your options open? If these are questions you’ve posed, we suggest you give GameMaker: Studio a try. It provides all you need to create a game and then publish it to run natively on multiple app stores including the Chrome Web Store, Facebook, Windows 8, OS X, the App Store, Google Play, Windows Phone 8 and many others. Studio offers a simple to use, drag-and-drop interface, which allows novice game developers to jump right in and have a prototype up and running in a matter of minutes, while more advanced users can make use of its powerful built-in, games-oriented scripting language, giving them access to a host of ready-made features they would otherwise have to create themselves.

01. GameMaker: Studio 101 – rooms and objects

So you’ve just started up GameMaker: Studio for the first time, and you’re wondering if creating a game is really as easy as everyone says it is. The first thing you will need is a level or world for your game. We’ve given these names to associate with everyday things, and in the case of a game level, you would use a room. As with all resources in GameMaker, it’s very easy to create these; simply click the Create Room icon in the tool bar, and your first room or level has been created. This room will currently be empty and not yet visually appealing, but even at this level, a couple of seconds into your first game, you will be able to run it on any of the available platforms, and actually see it on a device or in a browser.

Now that the first room’s been set up, the next step is to add some more elements to it. Things that you see and interact with are called objects and are created in the same way as a room, so simply clicking on the Object icon in the tool bar will give you your first object to play with. Once created, you have the ability to assign anything you want to it; you can give it an image, apply physics have it move, make it interactive, and any number of other behaviours.

02. Creating a basic game

Now that we’ve covered the basics, you can move on to making a very simple game in which objects move around. We’ll make a game in which you must move an object to another – once there, you win.

Object behaviour is defined by events applied to the object, and there are many different events available. Making an object that the player can control isn’t much more work than just creating an object that does nothing. So to add this, we will use an event that is triggered when a certain key has been pressed; the Key Press event. When the key we choose has been pressed, the action associated with this event is executed. We will create a simple keyboard control, so that when we press the W key, the player will start the 'moving in a direction' action; this action is defined as moving up with a speed of 5. Separate events for each of the keys A, S and D can also be added for the remaining directions (left, down and right). Events for touch screens, accelerometers and mouse movement can be added too, giving you the flexibility to receive player input from any of the supported platforms.

Before an object is visible and interactive within the game room, it needs to first be assigned an image and then be placed within the room. Assigning objects an image is done using the Sprite section of the Object Editor. Placing an object in a room is done using the Objects tab within the Room Editor. Simply select the object you want, and then place it in the room by clicking the position that you want it to appear at. You can now run the game, and you will have directional control over this object.

To make the object that the player will move to, create an object like the first. But this time, instead of adding player controlled movement, add a collision event with the player-controlled object. And that’s all we need to do for checking collision between the two objects, as GameMaker: Studio takes care of all the collision checking for you and just lets you know when it has happened.

Lastly, we need to let the player know they’ve reached the goal and have won. This can be done easily by using the Collision event that was just added. All that we need to add is an action that informs the player – Display Message in this case, but you can make your own message box styled for your game is you like. And voila! Those are the basics for a simple game, created in under five minutes and without having any programing experience at all.

03. Creating a chart topper in seven simple steps

So how do you go from this simplistic type of game, to something like Angry Birds? Well, "easily" is the answer, and GameMaker: Studio includes a demo of a similar game that was made in just two days to prove it! Below is an overview of the stages we went through when creating the demo Angry Cats.

The first stage of the demo walks you through creating the room that would hold the playable level for the demo. This is no different from the room we created for the basic game above; the only real difference is that we enabled Room is Physics World in the physics settings of the Room Editor. GameMaker: Studio uses the popular Box2D physics engine, and this makes creating physics-based games like this a snap! Some additional information is also set here for things like views, backgrounds and so on, but we won’t look at those here.

The next step is to create different destructible block objects that will make up the level. As with the room, these will be set up as physics objects, and that will take care of all movement the blocks will need to do. There are three different types of block; stone, wood and glass.  Each behaves in a slightly different manner, and while we could go about creating each of these as different blocks, and assigning lots of values to each of them, this is not very efficient and quite time consuming. Instead, we can use inheritance to create a parent that will hold most of the block’s values and then create child blocks that will inherit these values but also have some of their own. GameMaker’s inheritance system also applies events to children, making collision handling much easier to deal with.

The next stage is to create an object which is going to be fired by the player; in this case, our cat. As with the blocks, this will also be a physics object, so all of its movement will be handled by GameMaker, and all we have to do is set up its physics properties, and how the cat will behave.

Now that we have a cat to fire and some blocks to fire at, the next stage is to look at how to actually fire the cat. To do this we need to create an object the player can control; this will be the slingshot that fires the cats. Since this slingshot is only controlled by the player, we don’t want it to be a physics object, and so will have to define all of its behaviours ourselves; this is the only really difficult part of the game, as everything else is managed by GameMaker.

So let’s look at how the firing mechanism works. We have done this by noting the difference in the players’ cursor position between when they click on the slingshot and when they have released their hold over the object. This value gives us a 2D vector we can then use to apply an impulse to the cat, and then we let GameMaker take over to handle the cat’s actual movement. An important thing to note here is that we don’t move the cat object to the player’s cursor position when they are pulling on the slingshot; we only spawn the object at the slingshot’s rest position once the impulse vector has been calculated. We do this so that GameMaker deals entirely with the object’s movement, and we are not letting the player interfere with it in any way. To make the player feel as if they are pulling the cat backwards within the slingshot, we draw the sprite for the cat in the slingshot without actually spawning the object until the player has let go.

Next we need to tidy up the level and give the game some sort of objective. First we add a limit on how many cats can be fired by the player, and then add a bird that the player is supposed to hit with their cats, or by other physics objects. We can then add scoring based on how many blocks have been destroyed, and how many birds were hit. Finally, we add some end of game conditions so that we know when to stop – conditions in which all the cats have been fired and another for when all the birds have been hit.

The final step is to create a menu system for the player when starting or finishing the game. The menu would also have access to additional levels, or options if we needed them. Our menu was made using a different room, and when the player clicks to play, they are taken to the main games’ room and vice versa when the game is over.

And there you have it, the beginning stages of cloning a game that has been at the top of the charts since it was released. This game can then be exported onto any of the available platforms without any extra work.

04. Exporting an HTML5 game

We’ve already touched on how easy it is to export a GameMaker: Studio game to multiple platforms or app stores, but we have found that most people don’t realise exactly how easy this is. Exporting to HTML5 could not be simpler: simply choose HTML5 from the Target drop down menu box, click the Create Executable button and then choose where to save it – and that’s it. Your game will now be saved as an HTML5 game and can be hosted somewhere on the internet.

To get started using GameMaker: Studio for free, please visit www.yoyogames.com

Gavin joined YoYo Games in 2011 as an Associate Producer after previously working at both Rockstar North and Realtime Worlds. He has a background in Games Programming from Abertay University.

Liked this? Read these!

Subscription offer

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection