Turret - GameSalad Tutorial

© Drew Collins 2011 Creating your first game

Drew Collins

GameSalad ~ Creating your first game

2 © Drew Collins 2011

For this tutorial I use version 0.9.6 beta of GameSalad which is the most recent version at the time of writing (27th of July 2011). So you’ve decided to use GameSalad? Congratulations! You’ve just decided to use one of the best game development applications there is to offer and best of all, it’s free! Ok, I may have lied about that last part; it’s mostly free. You can make your own games and publish them to the web for free but putting them on the Mac App Store or the iTunes App Store will cost you. But hey, don’t let that get you down; you still have full access to every other tool this app has to offer! If you haven’t already, download GameSalad from http://gamesalad.com/download/latestCreator and install it. While you’re at it create a user login for GameSalad (this will let you publish your games later). Then we can let the creating begin! In this tutorial I will be covering a few basics of the app to show you what I’ve learnt in a few weeks. Obviously the quality of your games will rely on the amount of time and effort you put into creating them. I’m doing VCE schoolwork at the moment so that sort of prioritizes over this at the moment. One of the main reasons you probably decided to use GameSalad is because it’s free but it also requires no coding knowledge whatsoever! You can make games that rival Angry Birds, Tiny Wings and Cut The Rope with this app and you don’t have to learn a whole new language just to put your idea out there. That’s enough of my chatter; let’s get down to business. This tutorial will be split into 3 main sections and several minor sections:

1. The UI i. The Home Screen ii. The Creator Screen

a. Actors b. Scenes

2. Creating your first game i. The Actors ii. The Scenes

3. Publishing your first game i. Information ii. Publication


© Drew Collins 2011 3

Chapter 1: The UI

The Home Screen When you first open GameSalad you will be greeted by a window with lots of things on it. This is the home screen (fig 1-‐1) and will become the place you go to whenever you’re starting something new. There is a tab bar to the side which will let you naviagate the app. The Home tab takes you to the home page of the application, the News tab will display news about GameSalad, the Start tab will let you see documentation, videos, tutorials and several other useful pieces of information to get you started, the Profile tab will display your profile if you’re logged in, the New tab lets you create anew game from scratch or using a template, the Recent tab will display recent games you’ve made and the Portfolio tab displays your portfolio of games. That was all pretty obvious.

fig 1-‐1: The GameSalad home screen The main tab I use in the home screen is the New tab because that’s the one that opens by default for me and it’s the one that let’s you start making games. I also use the Recent tab to open a game I’ve been working on. The other tabs I usually avoid because they don’t do much for me. Now that we’ve checked out the home screen, we can move onto the creator screen.



The Creator Screen To get to the creator screen (fig 2-‐1) we need to start making a gane so click on the New tab and select ‘My Great Project’ and click the ‘Edit in GameSalad Creator’ button. Bam! We’re hit by another window. This one is a little more exciting and looks more promising than the Home Screen.

fig 2-‐1 : The creator screen The first thing you are shown is the overview of the game. You can see the title, the description and lots of other exciting stuff. You will also see underneath that two buttons: ‘Scenes’ and ‘Actors’. Believe it or not this is where you can navigate through the scenes and actors in the game. By default the Scenes tab is displayed. There is a scene in there already: the Initial Scene. Click on ‘Actors’ and we will see what the deal is there. In the Actors tab you can see that there is another little box with the title ‘Actor Tags’. This is where your tags will appear if you choose to tag your actors. Tagging your actors is a good idea because it allows you to organize things a lot better. You can have all your background stuff in the ‘background tag’, all your player stuff in the ‘player’ tag and all your enemy stuff in the ‘enemy’ tag. Let’s look at the UI for creating an actor. First off we have to create an actor. To do this, click the button near the bottom left hand corner of the Actors tab (fig 2-‐2). This will make a new actor.



fig 2-‐2: Click the button circled in red to create a new actor By default the actor will be called ‘Actor 1’. That’s not very original so let’s rename it. Click on the actors name to edit it and enter a new one; I called my actor Gary. I want Gary to have a face so let’s double click on the actor to bring up the actor editor (fig 2-‐3).

fig 2-‐3: The actor screen This new window can seem a little daunting but don’t worry: everything is a lot easier than it looks. Like I said before, I want to give Gary a face so let’s do that. Open up the images folder this tutorial came with (if you don’t have it, you can download it at http://cl.ly/8x7g) and drag the image labeled ‘Gary.png’ onto the



white square that says ‘Drag Image Here’. The image should then appear and Gary should have a face. There is one more thing we need to do before I’ll be satisfied with his face. We need to resize the actor to fit the image. Whenever you make an actor you always need to specify it’s size. The default is 100 x 100 pixels but that’s a bit too big for Gary. His face is 50 x 50 pixels so let’s resize him to that. Do this by clicking on the little arrow next to the ‘Size’ attribute and then double clicking on the width value, changing it to 50 and then doing the same for the height one. Gary should be the right size now. So we’ve created our character. Let’s get an idea of how to make them do stuff. If you put Gary into the scene now he wouldn’t do anything. I want to make him move forwards when I hit the up arrow key. To do that we have to create a rule. A rule is exactly what it sounds like. The rule we will be creating will tell Gary that, when we press the up arrow key, he has to move forwards. In the top right hand corner of the screen there should be two buttons: ‘Create Group’ and ‘Create Rule’. The group button just makes a group for your rules so you can easily organise them. Since we will only give Gary one rule we don’t really need a group. Click on the ‘Create Rule’ button. You should see a box appear in the window. This is your rule. The title of the rule is ‘Rule’. That’s not very descriptive so I’m going to rename it. To rename the rule double click on it’s title and then type in the new title (in this case “Move forwards”). To finish renaming the rule hit enter. Just below the title is a little bar that say’s ‘When All conditions are valid:’. This means that when all the conditions set are met the rule will go into action. You can change ‘All’ to ‘Any’ if you want but I’m going to leave it as it is. The next thing below that is the condition. By default the condition is based on the mouse button but we want the up key. To change this click on ‘mouse button’ and select ‘key’. Then click on the keyboard button and select the up key. Leave the last box as down. You can check out the other options there are; they are pretty self explaintory. Next we have to create a behavior that will move Gary forwards. To do this, look in the behaviours library for ‘Move’ and drag it to the text that says ‘Drag your behaviours here’. This will create another little box which we will use to move Gary. We want Gary to move forwards which is towards the top of the screen so the first thing to do is set the angle to 90 degrees. You can leave everything else pretty much the same; we will come back and change them later.



fig 2-‐4: The settings for Gary to move forward Now we get to try out the game so far. Up in the top left hand corner is a button that says ‘Scenes’. Click on that and then select ‘Intial Scene’. You are now looking at the game so far. Pretty boring, huh? Let’s drag Gary into the middle of the scene. Up the top of the window there is a green arrow with the word ‘Preview’ below it. This button allows you to preview your game so click it and let’s try it out! You will notice when you press the up arrow key that Gary starts to move upwards. You will also notice that he doesn’t stop. I think we should make him stop and we should probably make him a little slower as well. Click the button labeled ‘Home’ (in the top left hand corner) and then go back into Gary’s actor screen. The first thing we will do is change his speed down to 150. At the moment he is zooming along at 300 which is a tad fast for this game. We also need to make him stop afterwards. To do this we need to open the ‘Otherwise’ drop down box of the rule. At the very bottom of the ‘Move forwards’ rule is a little arrow and the text ‘Otherwise:’. Click the arrow. Now we need to stop Gary from moving. To do this drag a ‘Change Velocity’ behavior from the library and set the speed to 0. This just tells the game that when the up arrow key isn’t down, change the speed of Gary to 0. Now if you click the ‘Preview’ button and try it out again, Gary should stop.



fig 2-‐5: The settings for Gary to move forward and stop That’s it! You have learnt how to use the basics of GameSalad and can finally move onto Chapter 2: Creating your first game!



Chapter 2: Creating your first game Now we move onto the fun stuff: making your own, fully functioning game! Before you make any game you should always plan out what actors and scenes you’re going to have. This will make the actual making of the game a lot easier. Start off by making a new blank game. We will then create our actors and scenes but first we need to do a few little things to do. If you open up the default scene you will see on the left a panel. In the top right hand corner of that panel is a toggle between ‘Game’ and ‘Scene’. Make sure the toggle is set to game. Next open the attributes tab below the toggle. Create a new attribute by clicking on the plus button. Set it to ‘index’ and then change the name to “Life”. Make the value 300. Repeat this process but call this one “Enemy Life”. Create one more attribute and set it to ‘integer’. Name this one “Killed Enemies” and set it to 0. Lastly rename the scene from ‘Initial Scene’ to “Game”. Now we should be ready to make our actors.

The Actors Some of our actors interact with each other, which means that they both have to be in existence for one to work. Because of this we will create all of our actors at once and then go through and modify them individually. Create 12 actors and name them:

1. Turret 2. Enemy 3. Life 4. Enemy Life 5. Bullet 6. Life Text 7. Enemy Life Text 8. Play Text 9. Game Over 10. Pause 11. Unpause 12. Controller

Turret First off we’ll make the turret. This is what the user will control and is the center focus of the game. Open up the turret actor and then set the width to 20 and the height to 50. Our turret will be pinned down in the one location so moving it around the screen is unnecessary. We will use the left and right arrow keys to rotate it so that the player can shoot in all directions.



Create a new group to keep all of the rotation rules in one spot. Name the group “Rotation” and then create a new rule inside it. Name that rule “Rotate Left”. Set the rule so that it will be activated when the player hits the left arrow key. This is done the same way we made Gary move forwards in the previous chapter. Now we need a behavior to make the turret rotate. Obviously we should use the rotate behavior so drag that into the rule. Set the rotation to counter-‐clockwise and then set the speed to 200. Just like we did with Gary, we need to stop the rotation when the left arrow key isn’t being pressed. To do this, drag a rotate behavior into the ‘Otherwise:’ section of the rule and set the speed to 0.

fig 3-‐1: The rotation settings for the turret actor We now need to duplicate the rule for rotating right. To do this, click on the title bar of the ‘Rotate Left’ rule and hit Command+C and then Command+V. Change the name of the copy to “Rotate Right” and, in the first rotate behavior, change the rotation to clockwise. After doing this collapse the whole rotation group and click on the home button. Rename the initial scene as “Game” and the double click it to open. Drag the turret actor into the very middle of the game and preview it to make sure it works. Adjust the speed to your liking if you want.



Next up is the shooting rule for the turret. Create a new rule and name it “Shoot” then set the rule to activate when the spacebar is pressed. Drag the ‘Spawn Actor’ behavior into the rule and set it to spawn the bullet actor. Leave the direction and position alone, just make sure they are both relative to the actor. It should be like that by default. Now if you go into the game and press the spacebar a bullet should be shot out of the turret. If you rotate the turret around and shoot, the bullet should shoot in the direction of the turret.

fig 3-‐2: The settings to the turret to shoot One more thing we need to do is make the players life go down whenever it is hit by an enemy. To do this, create a new rule and name it “Life”. We need to set this rule to activate when the enemy collides with the turret. Change ‘mouse button’ to ‘overlaps or collides’. Then set the actor to ‘Enemy’. Drag the interpolate behavior over to the rule and set it to interpolate the attribute ‘Game.Life’. Do this by clicking on the ellipsis (…) and clicking on ‘Game’ and double clicking on ‘Life’. Next we need to set the ‘To:’ value. Click on the ‘e’ next to the box. This will bring up a formula bar. Formulae are the closest thing you will get to coding but they are still really simple. Click on the arrow in the bottom left hand corner of the formula box. This will bring up another box, which should have three options: Game, Devices and Turret. Select ‘Game’ and then ‘Life’, just like you did before, then type minus ten (-‐10). Click on the green



tick to enter the formula then set the duration to 0.2 and the function to linear. This whole behavior means that, when the rule is met (the turret collides with the enemy), the life value we set earlier will go down by 10. Obviously we need to make this stop going down once the collision is over. To do this drag the ‘Change Attribute’ behavior into the ‘Otherwise:’ section of the rule and make ‘Game.Life’ change to ‘Game.Life’. This will just make the life value stay put.

fig 3-‐3: The settings for the player to lose life if it is hit by an enemy Lastly we need to give the turret an image. Drag ‘Turret.png’ onto the actor and then save your progress so far. Next up is the enemy. Enemy This actor needs to come towards the turret. First, set the size to 30 by 30 and then drag the ‘Accelerate Toward’ behavior into the window. You don’t have to put this behavior into a rule because we want this to always happen. Make sure the behavior is set to be relative to the scene. Click on the ‘e’ next to the horizontal position. We want to import an attributer here so click on the drop down button in the bottom right hand corner of the formula box. Click on ‘Game’ and then ‘Display Size’. Now double click on ‘Width’ and it will be put into the formula bar. Add a slash and the number two (/2) to divide the width by two. Click the tick to set the formula. This formula will set the horizontal location for the enemy to move towards to half the width of the game. Do the same for the



vertical position box but use the vertical dimension rather than the width one. Now set the acceleration to 50. This will make the enemy always fly towards the center of the game, which is where our turret is.

fig 4-‐1: The settings for the enemy actor to accelerate toward the center of the game Now we need to make the enemy die if it collides with the turret. To do this, create another rule, name it “Collide with Turret” and then set the rule to go into effect if the enemy actor collides with the turret actor. Now we need to tell the enemy to be destroyed because it’s collided with the turret. Drag the ‘Destroy’ behavior into the rule. You don’t need to do anything else in that behavior (and you can’t) but we do need to add another behavior. Drag the “Change Attribute” behavior below the ‘Destroy’ behavior but so it is still part of the rule. Set the ‘Game.Enemy Life’ attribute to ‘Game.Enemy Life+25’. This will make the enemy life value go up by 25 every time an enemy hits the turret.



fig 4-‐2: The settings for when the enemy actor collides with the turret actor Next up is the settings for when the enemy collides with a bullet. First off, create a new rule and call it “Collide with Bullet”. Then set the rule to go off when the enemy actor collides with the bullet actor. Add the ‘Destroy’ behavior and then two ‘Change Attribute’ actors. In the first ‘Change Attribute’ actor, set ‘Game.Enemy Life’ to ‘Game.Enemy Life-‐25’. In the second one set ‘Game.Killed Enemies’ to ‘Game.Killed Enemies+1’. This will decrease the enemy life by 25 and increase the number of kills by 1. The last thing for the enemy is to give it an image. Drag ‘Enemy.png’ onto the actor and then save your progress. Now we move onto the Life actor. Life Our life bar will be one that replenishes over time. This is actually quite simple and can be added to pretty much any game. Open up the life actor and we can begin. The first thing we need to do is set the size of the life bar. That’s going to be 20 wide and 300 high. We want the life actor to represent the life of the player so we need to use a ‘Constrain Attribute’ behavior. Drag this right into the actor and then contrain the attribute ‘Self.Size.Height’ to ‘Game.Life’. This will make the height of the actor equal to the amount of life the player has.



fig 5-‐1: The ‘Constrain Attribute’ behavior Now we need to make the life automatically replenish itself. To do this, create a new rule and name it life. Set the rule to activate when the attribute ‘Game.Life’ doesn’t equal 300. Add a ‘Timer’ behavior and set that to go off every 2 seconds and not run to completion. Now add a ‘Change Attribute’ behavior to that timer and change ‘Game.Life’ to ‘Game.Life+5’. We now need to add an otherwise behavior. To do this, create a new rule in the ‘Otherwise:’ section of the ‘Life’ rule. Name this rule ‘Stop Life’ and set it to activate when the attribute ‘Game.Life’ is equal to 300. Now drag a ‘Change Attribute’ behavior into that rule and change ‘Game.Life’ to ‘Game.Life’.



fig 5-‐2: The settings to make the players life replenish automatically The last thing we will do is add another rule and call it “Max 300”. Set it to activate when the attribute ‘Game.Life’ is greater than 300. Add the ‘Change Attribute’ behavior and change ‘Game.Life’ to 300.



fig 5-‐3: The ‘Max 300’ settings for the life actor That’s pretty much it for the life actor, just finish it up by dragging ‘Life.png’ onto the actor. Next we will work on the ‘Enemy Life’ actor. Enemy Life The enemy life actor is very similar to the player life actor. We will start off by making the actor 20 wide and 300 high and then adding the ‘Constrain Attribute’ behavior. This is the same as the one in the life actor except that it constrains to the attribute ‘Game. Enemy Life’. There is one rule in this actor. Create a new rule and name it “Max 300”. Set the rule to go off when ‘Game.Enemy Life’ is greater than 300. Add a ‘Change Attribute’ behavior and change the attribute ‘Game.Enemy Life’ to 300.

fig 6-‐1: The settings for the enemy life actor That’s it; just drag ‘Enemy Life.png’ on and save your progress. Up next: the bullet actor. Bullet The bullet actor is really easy to do. We start off by setting the size to 5 by 5 and then dragging in an ‘Accelerate’ behavior. Set the direction to 90 degrees relative to ‘actor’ and the acceleration to 1000.



Now add a new rule and name it “Destroy”. Set it to activate when the actor collides with the enemy actor and then drag in the destroy behavior.

fig 7-‐1: The settings for the bullet actor Drag in ‘Bullet.png’ and save. That’s all for the bullet actor. Life Text Seeing the life bar is all fine and dandy but some people mightn’t know that it is your life bar so let’s label it. To do this we use the ‘Life Text’ actor. This is one of the easiest actors there is. Simply drag a ‘Display Text’ behavior in, set it to display the text “Life” and set the colour to green. We’ll also set it to be left aligned so that we can place the actor more easily later on.



fig 7-‐1: The settings for the life text actor There is one more thing before we finish up here. In the attributes part of the actor there is an attribute called ‘Color’. Click on the white box next to it and drag the opacity bar all the way down. This makes the actor invisible so only the text is visible and we don’t have a great big white box in the middle of our game. Once you’ve done that you can close the colour picker window and save your actor.

fig 7-‐2: The colour settings for the life text actor



Enemy Life Text The enemy life text actor is exactly the same as the life text actor but the text says “Enemy Life” and is red. See if you can remember what to do.

fig 8-‐1: The settings for the enemy life text actor Play Text The play text actor is very similar to the two previous actors we just created except for one thing. It has a rule. Let’s do the text side of this actor first. Add the ‘Display Text’ behavior and set it to display the text ‘Play’ in black. Leave it center aligned and make the actor invisible. This actor will link the main menu to the game. Add a new rule and call it “Play”. Leave the settings for the rule to the mouse button down. Add a ‘Change Scene’ behavior and change the scene to ‘Game’. Add three ‘Change Attribute’ behaviors and change ‘Game.Killed Enemies’ to 0, ‘Game.Enemy Life’ to 300 and ‘Game.Life’ to 300. Set the actor to be invisible and save your work.



fig 9-‐1: The settings for the play text actor Game Over Now let’s work on the game over actor. It’s kind of like the life text actors. Make the actor invisible and then add a rule. Name it “Game Over” and set it to activate when the attribute ‘Game.Life’ is equal to or less than 0. Add a ‘Display Text’ behavior and Make it display white text that says “Game Over”.



fig 10-‐1: The game over text rule for ‘Game Over’ Make another rule and call it “You Win” and set it to activate when the attribute ‘Game.Enemy Life’ is equal to or less than 0. Add the ‘Display Text’ behavior and set it to display white text saying ‘You Win!”

fig 10-‐2: The win text rule for ‘Game Over’



That’s all for the ‘Game Over’ actor. Next up is the ‘Pause’ actor. Pause We want to add a pause button to our game. Every game should have one because it’s almost impossible to play a game without being interrupted and you don’t want to die whenever you are interrupted, do you? Set the actor to be 20 by 20 and create a new rule. Set the rule to activate when any of the conditions are valid. The two conditions we will enter are when the mouse button is down and when the P key is down. To add another condition click on the + button in the top right hand corner of the rule. Now before we can go any further we will have to add another scene so quickly create a new scene and name it “Pause”. Then go back to the pause actor. Drag the behavior labeled ‘Pause Game’ into the rule and set it to the scene labeled ‘Pause’.

fig 11-‐1: The settings for pausing the game Drag ‘Pause.png’ onto the actor and save your work. Unpause What use is a pause button if you can’t resume play? For this we need an unpause actor. Set the size to 20 by 20 and then add a rule. Set the rule to



activate when the mouse button is down and then drag the ‘Unpause Game’ behavior into the rule.

fig 12-‐1: The settings for the unpause actor Lastly add ‘Unpause.png’ to the actor and save your work. Controller The final actor to create is the controller actor. This is what will make the enemies randomly appear. Make the controller actor invisible and then add a ‘Timer’ behavior. Click on the formula button for the seconds box and click on the ‘insert function’ button in the middle. Click on ‘random’ and then change ‘min’ to 2 and ‘max’ to 5. Drag a ‘Spawn Actor’ behavior into the timer and make it spawn the enemy actor. Leave the direction at 0 and set the width position to 500. Click on the formula button for the height position and set it to a random number between -‐5 and 325 like you did for the seconds option in the timer.



fig 13-‐1: The settings for the spawn timer in the controller actor Now we will add a rule and call it “Game Over”. Set it to go off when either the attribute ‘Game.Life’ is equal to or below 0 or when then attribute ‘Game.Enemy Life’ is equal to or below 0. Just like we did for the pause actor, we need to create a new scene so make a new scene and call it “Game Over”. Go back to the ‘Game Over’ actor and drag the ‘Change Scene’ behavior to the rule. Make it change to the ‘Game Over’ scene. Lastly we’ll add some text. Add the ‘Display Text’ behavior and make it display ‘Game.Killed Enemies’ in white text.



fig 13-‐2: The settings for the text and game over part of the controller actor Save your progress so far and prepare for making the scenes.

The Scenes It’s great to have all these actors that interact with each other, but so far they don’t do much. We have a few scenes and nothing much in them so let’s populate them with something a little more interesting. Menu So far we have a ‘Game’ scene, a ‘Pause’ scene and a ‘Game Over’ scene. The last scene we will add is a ‘Menu’ scene. This scene will let the player start the game because no one wants to open up a game and be dumped straight into it; they won’t be prepared. The first thing we will do to the menu is add a background. To be more specific we will be adding an animated background. This more just so we know how to add animations to a game. Open up the menu scene and where the library is that has all the behaviors click on the images tab in the top right hand corner. Then click the plus button in the bottom left hand sign and add all the images in the folder ‘Background’.



fig 14-‐1: The background image in the menu scene Drag one of those images onto the scene and center it. Double click on the background and it will open up the images as an actor. There will be one big difference. The actor will be locked. We need to unlock that and to do that you just click on the ‘Edit Prototype’ button in the top left hand corner.

fig 14-‐2: The locked background actor



Add an ‘Animate’ behavior to the actor, drag all of the background images into the behavior and then set the fps to 24.

fig 14-‐3: The animate behavior of the background actor. Now that we have done that, we can go back to the menu scene and add our ‘Play’ actor into it. Preview the final result and then we will move onto the pause scene. Pause The pause scene is also very important to the game. Imagine you are playing this amazing game and then the doorbell rings. You have to answer it so what do you do? You pause the game and then answer the door. It’s probably someone wanting to have a lengthy chat and the whole time you just keep looking back at the game, wishing you were playing that instead. So open up the pause scene and simply drag the ‘Unpause’ actor to the top of the scene in the middle and we’re done! Game Over Next up is the ‘Game Over’ scene. Open up the scene and drag the ‘Game Over’ actor into the middle of the scene. That’s it.



Game Last up is the main part of the game: the actual game scene. Delete everything you might have put in here when you were testing the game and we will start fresh so that there’s nothing we might’ve accidentally added to the scene. Let’s start with the turret actor. Drag it into the middle and make it as centered as possible. Then drag the ‘Life’ actor to the left hand of the screen. Do the same for the ‘Enemy Life’ actor but on the right hand side. Now drag the ‘Pause’ actor into the bottom right hand corner.

fig 15-‐1: The game scene with life, the turret and a pause button Now drag in the ‘Life Text’ and ‘Enemy Life Text’ actors and place them next to their respective life bars. We want to position the text just right but at the moment we can’t see it. To overcome this we will click the play button just below the ‘Web Preview’ button in the middle, on top of the preview screen (fig 15-‐2).

fig 15-‐2: the play button



Immediately after pressing play you should see the text. Pause the game but do not hit stop. Now rotate the text actors so they are going up the life levels. You can rotate them by clicking and dragging on the little knob coming out of the middle of the actor (fig 15-‐3).

fig 15-‐3: the rotate knob of the actor Once you’ve done that just drag the controller to somewhere random and out of the way on the screen and we’re done. Press the green ‘Preview’ button to try the game out! You can also click on the ‘Web Preview’ button to see what it will be like on the web. If you want, make a few adjustments to make the game suit your wants then prepare to publish.



Chapter 3: Publishing your first game So we’ve easily made this awesome game and we just know that everyone is going to want to play it. The obvious thing to do is to upload it to the internet for people to play for free. So let’s get started. There are two things we need to worry about when publishing:

1. The information 2. Actually publishing the game

The information Whenever you’re putting something out there you need to inform the public why they should play your game. You need to tell them what the game is about, any context that might come with it and what they can expect from it. Click on the ‘Home’ button to take you to the home page part of the game. You can see several information input areas here: the title of the game, a description, tags etc. In the title are name the game “Turret”. In the tags area add tags such as “turret” or “shooter” or anything else that suits the game. In the description describe the game. I said: “You control a turret. Destroy the enemies before they destroy you.” In the instructions enter how to play the game. I entered: “Left and right arrows to rotate. Space to shoot.” Now we are ready to publish. Make sure you have a GameSalad account before you publish or it won’t work.

Publishing Now we can finally share our amazing game with the world. Click the ‘Publish’ button. The first thing that will happen is you will be prompted to sign into GameSalad; enter your login details and click ‘Login’. You will now be greeted by another window which will allow you to choose your platform for your game. Select ‘GameSalad Arcade’. If you had an Apple Developer account which you had paid for then you could upload it for the iPhone, iPad or Mac but I wouldn’t advise the iPhone or iPad seeing as the game uses the keyboard for the controls. If you already have games uploaded you will be asked if you wish to create a new game or update an old one. Click ‘Create New Game’.



In the window that pops up, enter the required information (you can see what I entered in fig 16-‐1) and then click on ‘Choose File’ to import an icon. Select ‘icon.png’ and click ‘Open’. Then click ‘Next’.

fig 16-‐1: the settings for publishing the turret game Check any options you want and click ‘Next’ again. If you have a YouTube video of the game in action, paste the link in the box provided and click ‘Enter’, otherwise leave it blank or enter this url: http://www.youtube.com/watch?v=4LLZS5-‐4O24. Click ‘Next’. This page asks for some screenshots. We need screenshots so the players can see what the game looks like. Go back to the GameSalad game and click on the green preview button. In the top right hand corner there is a little button with a camera icon. Play the game and every time you get to a good and descriptive point of the game (e.g. in the middle of a shot at an enemy) press the camera button and set it as a screenshot. Now that we have the screenshots, drag them onto the designated areas and click ‘Next’. The screen might load for a bit while it collects all the information. It will then give you all the information you have provided so that you can double check it. If you’ve made a mistake, click the edit button for that area and correct it. Otherwise click ‘Publish’. Read the Terms and Conditions (I’m just kidding, who



does that? But seriously read them, it’s a good read) and click ‘Agree and Upload’ if you agree. The game will now be uploaded and eventually ready for play on the world wide web. Tell all of your friends about your great new game and waste the rest of today playing it.



Thank you for using this tutorial; it’s the first one I’ve really made so I apologise for anything wrong with it. I’d also like to point out that I’m Australian which means I spell some words differently to Americans and some other nationalities. Email in any feedback (good or bad) to me at [email protected]. Please check out my website at drewcollins.99k.org. -‐ Drew Collins

Turret - GameSalad Tutorial

Documents

Transcript of Turret - GameSalad Tutorial