GameSalad Creator Walkthrough

Adapted from The Official GameSalad Guide to Game Development | 2014 Cengage Learning Inc.

Kimberly Unger & Jeannie Novak

GameSalad Creator Walkthrough SPACE SHOOTER

Just what youve been waiting fora complete soup-to-nuts walkthrough using GameSalad Creator!

Before you start, make sure you have downloaded and installed GameSalad Creator. Keep in mind that were using Mac Creator for the purposes of this walkthrough. If you have Windows Creator, make sure you understand the specifics of that version; manuals for both versions are available at http://gamesalad.com/manuals, and basic tutorials and terminology are discussed in the Appendix (pp. 200-213) of The Official GameSalad Guide to Game Development.

Project Info Open File -> New to access the following dialog box:

Enter a title and brief description of the game youd like to make. (You can always go back and adjust this later.). Under Platform, you can choose where this game will be distributed. Creator will ensure that you are then working at the proper screen resolution and ratio for those devices. The platform may also be changed later; it is possible to develop a game in Creator that can be adjusted to fit other platforms after the fact. In order to make this demo easily accessible to everyone, choose Game Salad Arcade as your publishing platform; this will give you a classic 3:2 screen ratio (480 pixels wide by 320 pixels high).

For a comparison of screen dimensions based on platform,

see the table on p. 76 in The Official GameSalad Guide to Game Development.



When you open the StN project provided for this walkthrough, the window will default to the Actors tab. Click on the Project Info tab to enter the above information.

Assets You have several options when it comes to asset creation and importing:

create your own get them online (e.g., free clipart) purchase them from the GameSalad Marketplace

If youre using the StN project file, youll find all the necessary assets included in the package. However, to truly customize your game, youll need to replace these with new ones using one of the above options! We suggest that you initially use the assets provided and then replace them after youve created the game; this way, you wont be bogged down with asset management while familiarizing yourself with the game design process. Heres a rundown of the assets youll be creating or importing; corresponding filenames in the sample project are in parentheses: SCENES

menu (Main Menu) scene (Initial Scene) high score screen (HighScores)

ACTORS

background layers (StN_Bkgd_Stars0003, Starfield 1, ControlBox) ship actor (StN_Player and StN_Player_Fire) laser (StN_Player_Laser) enemies (SpinningDeath) explosion (BoomBoom) main (TitleScreen, MenuBackground, MenuButton) high score (HighScore) scoreboard (Scoreboard) spawner (Spawner) life (Heart) powerup (HeartPlus)

Note: There are no Tables used in this project. IMPORTING If you arent using the assets provided in the package, collect all your assets into one place so they are easy to import. (If you are using the assets provided, continue on with this walkthroughbut come back to this section after youve created the entire project so that you can import original assets and make this game your own!)



Once the assets have been imported, Creator will make a copy of them and place them in your games directory tree for better organization. (After importing, you can zip up your original set of files and keep them as a backup.)

1. Open a new file in Creator and select the GameSalad Arcade platform. The Arcade settings provide you with a good base from which you can work. The screen size is 480 x 320 pixels, which can be resized if you decide to deploy to a different platform later on.

2. Save your file. This will establish the directory tree for your new game.

3. Click on the Scenes tab and then double-click on the scene labeled Initial Scene to load the Production Area. On the lower left side of the screen is the Library window. Click on the

Images tab. Click on in the bottom left corner to open a dialog box that will allow you to import your assets.

Creator collects all assets in the Library and defines them by three major categories: Behaviors (nodes largely defined only by Creator), Images, and Sounds. When you import, Creator will compress and convert the files to maximize space.



Once your assets have been imported, you are ready to begin assembling your game. You may skip the asset importation and just use placeholder Actors to start designing your gameplay, but the thought exercise of determining which assets you need will clarify and refine your game design before you get started.

Background: Oscillating Star Field Its possible to simply build a static background image of stars and run your game on top of that but for a space shooter like this, a little extra movement will add oomph to the level. Put parallax motion to work for you! Background Layer One 1. Access the Inspector by clicking on the Scenes tab and then double-clicking on the Scene labeled Initial Scene. Browse the Actors tab area in the Inspector window to locate your background image (or StN_Bkgd_Stars00). Drag that Actor onto the Stage to the right and match it up to the top left corner. You may need to rescale the Actor to suit your screen size. 2. Note the position of the Actor by clicking on next to Position to view the X and Y coordinates (e.g., X = 243.3516 / Y = 159.2266). Make a note of these coordinates; youll be entering them into fields later.

For more information on importing assets, see p. 209 in The Official GameSalad Guide to Game Development.

For more information on creating Actors, see pp. 206-207 in The Official GameSalad Guide to Game Development.



3. Return to the Stage by clicking on the back buttonand repeat Step 1, moving your Actor from its existing location to a new location. (We moved it to the bottom right of the screen.) 4. Repeat Step 2 to check the Actors new X and Y coordinates under the Position menu. 5. While in the Editing space for this background Actor, add the first set of coordinates to the Rule menu (on the right):

When ANY conditions are valid: Attribute | self.Position.X | [insert X position into the field] Attribute | self.Position.Y | [insert Y position into the field]

Be sure that Attribute is selected in the left field (as opposed to Actor receives event). If the second field is blank, click on the ellipsis ( ) to open the Attribute Browser and then select Actor name, Position, and either X or Y to set the axis. You must select in the third field; if you select the start of the action will not be triggered! Using means that Creator will keep checking the position of the object; in essence, you are giving it kick to start the loop moving. 6. In the Move To Behavior, enter the second set of coordinates into the Position fields. Make sure Relative to: scene is selected and Run to completion is not selected. Set the Speed to a lower value by either typing it in the field or using the slider. (We suggest entering a value of 20 for this demo, but you can go lower or higher depending on the effect you want; for example, going as low as 5 makes the field move in a very choppy manner.) If the Move To Behavior is not present, drag it from the Library into the Rule.

7. Click Create Rule (top right) to begin a new Rule. If the new Rule appears nested within the original Rule/Move To pair, be sure to drag it outside the existing rule. Again, make sure the following are selected:

Any (When Any conditions are valid:) Attribute (not Actor receives event) self.Position.X (click on the ellipsis ( ) and select the Actors name, Position, and X) self.Position.Y (click on the ellipsis ( ) and select the Actors name, Position, and Y)

(not or alone)



This time, enter the second set of coordinates into the fields. (Click on to add the second line to the Rule.) 8. Drag the Move To Behavior from the Library into the new Rule you created. Enter the first set (start) of coordinates into the fields. Again, make sure to select scene (Relative to scene) and enter the same speed as you did earlier. You should now have an oscillating starfield backgroundbut youre not done yet! Now lets include some parallax action. (Parallax describes the effect when things in the foreground seem to move past you more quickly than things in the background.)

Background Layer Two 1. Add two copies of the Starfield 1 Actor to your scene and stack them vertically as seen in the image below (one above the other). Double-click on the Starfield 1 Actor (a 512 x 360 image of white stars on a transparent background). After double-clicking on the Actor, be sure youre editing the Prototype (original) version; this means that every copy of this Actor we drag into any Scene will have the same logic.

2. Drag a Change Velocity Behavior into the editing window for the Starfield 1 Prototype Actor. Since the starfield should travel from the top to bottom of the screen, set the direction to 90 and set the speed value to 10. (You can adjust the speed up or down depending on what works best for your design.)

For more information on Behaviors and Attributes, see pp. 80-84, 210-211, 213 in The Official GameSalad Guide to Game Development.



3. Add a Rule (When All conditions are valid) to the editing window for the Starfield 1 Prototype Actor. Set the Attribute to self.Position.Y and set the conditions self.size.Height/2. This means that the Behavior youre about to add gets triggered when the Actor reaches the position that is twice its own height. (If the height of the Actor is 100, this Behavior is triggered when it reaches 200.)

4. Add a Change Attribute Behavior and set it to self.position.Y self.position.Y+2*self.position.Height. When your Actor reaches the location specified in Step 3, it will revert back to its original position and then begin the motion from top to bottom all over again.

Since youll be publishing this game to GameSalad Arcade as a demo, you need to think about working with keyboard and mouse controls. GameSalad has done something rather clever here: The mouse controls now automatically map to touchscreen controls (or vice versa). Therefore, youll need to work with the mouse controls as much as possible.

CHECKPOINT

CLICK ON THE BIG GREEN ARROW & TEST YOUR GAME!



Player Character: Moving Ship Now, its time to create the player character for your gameand make it move horizontally . . . Asteroids style! 1. Double-click on your Ship Actor (or StN_Player) so that you are editing the Prototype. (If you build many levels, then be sure to add this ship to each of them.) Youll need to give the ship some basic Behaviors that will govern how you control it in the game. Since youre including these Behaviors in the Prototype, they will carry over to every copy of this Actor. 2. Go to the Editor and click on the Rule button to add a rule to your editor window. Youll now need to map the Rule to one of the movement keys. Since youre publishing your game to GameSalad Arcade, youll need to include keyboard controls. Anything you do with mouse controls will be cross compatible with touchscreen devices (e.g., smartphones, tablets)but if you deploy on mobile, you will have to remap the ship controls. (See the box at your next checkpointat the end of the Laser sectionfor instructions on how to do this.) 3. Set your new Rule (When All conditions are valid) to Actor receives event. Set the dropdown to key and down. (This tells the game to execute the Behavior youre about to include when a specific key is pressed.) Note that a blank field followed by Keyboard appears. Since you want to slide your ship to the left, input a into this field.

For more information on creating Actors, see pp. 206-207 in The Official GameSalad Guide to Game Development.



4. Drag an Accelerate Behavior into your Rule. Do you remember using Move To when you created your oscillating starry background? This resulted in a slow, even movement. Accelerate moves an Actor in a set directionbut it accelerates as it goes, so it starts out slow and then gets faster and faster. To move your ship to the left, set the Accelerate direction to 180 degrees (by inputting 180 into the Direction: field) and choose scene in the Relative to: dropdown menu; this will ensure that your ship will always go leftno matter what happens to it. Set Acceleration: to 100.

5. Create a second Rule, following Steps 3 and 4 abovebut this time, set the Accelerate direction to 0 degrees relative to actor. Make sure you set the keyboard key to d.

The ship should slide back and forth as you press the a and d keys. But what happens when it runs off the edge? Nothing. It will keep going, and you will never see it again. So youll need to fix that by going to Scene Attributes and check the box associated with the Wrap X boolean. Test it again. Now your ship should slide off the screen on one side and reappear on the other.

For more information on Scene Attributes, see pp. 86-87 in The Official GameSalad Guide to Game Development.

CHECKPOINT

DRAG YOUR SHIP INTO THE SCENE & TEST YOUR GAME!



Weapons: Lasers! Now that theres space, and a ship that flies in space, consider what might happen when things get in the way. You guessed it: Time for space lasers! To get your ship to shoot lasers, youll need two different Actors. The laser Actors must be created on the fly, and they should have Behaviors that allow them to move properly and destroy themselves once they move off of the screen to the top. 1. Make sure the test Actor you added to the Scene to test has been deleted. (Dont delete the Actor from the Library; just make sure it has been deleted from the Scene.)

2. Double-click on the ship Actor (StN_Player) to make sure youre working with the Prototype. Add a new Rule that states When All conditions are valid and set the dropdowns to Actor receives event, mouse button, and down. This means that any time the mouse button is pressed down, the Behavior youre about to add will get executed.

3. Drag the Spawn Actor Behavior into the new Rule you just created. Set the Actor that gets spawned to StN_Player_Laser. Dont adjust the direction and location yet, but do set Layer Order to in front of actor and Relative to actor.

CHECKPOINT

DRAG YOUR SHIP INTO THE SCENE

& TEST YOUR GAME!



Click the mouse button and see where your laser appears. It should show up in the center of your ship. Not quite where you want it, right? Direction shows you at which direction from the center of the Actor the object will appear once you set the first Position to a number other than 0. Therefore, in its default state, the X position (the position along the X axis) will make the laser appear to the right of center. If we change that direction to 180, the laser will appear to the left.

Spawn Your Weapons 1. Adjust the X and Y values for Position until the laser appears in the desired position. (In our example, the X/Y values are -13 and 25.) Be sure you are still working with the Prototype version of the ship Actor; in fact, delete the test version of the ship Actor from the Scene before you make any changesjust to make sure they carry through properly.

2. Drag in a second Spawn Actor Behavior, and set up your second laser following Steps 3-5 above. Youll notice that as you test your ship and slide it back and forth, a string of motionless lasers will be left hanging as you move along. Lets go ahead and fix that! 3. Double-click on the laser Actor (StN_Player_Laser) to open up the Editing window. 4. Drag the Move Behavior to the Editing window. Note: You arent setting up any Rules here; this is because youll want this Behavior to execute as soon as the object is spawned. A Rule sets parameters (when THIS, then THAT)but if you just place the Behavior, all alone, then it will execute as soon as the Scene starts to run (or in this case, as soon as the Actor appears in the Scene).

5. Set the following parameters: Direction: 90 (straight up) | Relative to: actor | Move Type: additive | Speed: 300 (default)

CHECKPOINT

TEST YOUR GAME & WATCH THOSE LASERS GO!



Enemies: Spinning Wheels of Death, or . . . ? You now have a floating starfield, a ship that moves, and a ship that shootsbut you still dont have a real game! Its time for some gameplay. You need those lasers to do (e.g., blow up) somethingso lets create some enemies to destroy and a way to keep score! 1. Double-click on the spinning wheel of death (SpinningDeath) Actoror the enemy Actor you createdso that you are working in the Prototype. Again, a bunch of these will show up during the gameso you must work in the Prototype to ensure that all the information you enter goes with each copy you add or spawn into the Scene.

2. If youre using the SpinningDeath Actor, you probably want these enemies to spin a bit as they move forward through the screenso lets start with this: Drag the Rotate Behavior into the Editing window. The Rotate Behavior adds a rotational spin to the Actor with no speeding up or slowing downno stop or start. It just spins at the rate you set, in the direction you set, for all eternity (or until you blow it to bits with your ship). Set Direction to Counter-clockwise and Speed to 90.

REMAPPING MOVEMENT FOR MOBILE DEVICES

Instead of playing with imaginary joystick controls, its best to set them up so that the ship slides left and right when the mobile device is tilted. Heres how to remap movement for mobile devices:

1. Go back to your Ship Actor Prototype. Those Rules you created that made the ship Accelerate left and right are still valid and you can leave those in these if needed. However, for the sake of simplicity, you could change them to work with the accelerometer (which tells a mobile device when its being moved, tilted, or shaken) rather than the keyboard.

2. Instead of an Action, change the dropdown under your first movement Rule to Attribute. Select Devices>Accelerometer>X.

3. Set the Attribute Rule to -10. This means that if the numeric value of the accelerometer is less than or equal to the value of -10, it will cause the ship to slide to the left.

4. Repeat this for your second movement Rule by changing the dropdown to Attribute. Select Devices>Accelerometer>X and set this Attribute Rule to 10. This means that if the numerical value of the Accelerometer is greater than or equal to 10, it should slide to the right.

5. Since we use the mouse to control the firing of the ship (see next part of this walkthrough), we do not need to worry about remapping the firing since its already built in to the mouse Attribute.



3. Drag the Move Behavior into the Editing window. Youll use this to make the Actor move from the top to the bottom of the window. Set Direction to 270, Relative to scene, Move Type to additive, and Speed to 100. Note: You could do this with Gravitybut this way, youll get to control the rate at which your little spinning stars of death move forward. This means we can easily change those Attributes based on power-ups, etc.

4. As the last component before your next test, add another Rule (When All conditions are valid): Actor receives event | overlaps or collides | with actor of type | StN_Player_Laser [or the name of the laser Actor you created] 5. Drag a Spawn Actor Behavior into this Rule. In our example, well use BoomBoom as the Actor to be spawned. (We will create this Actor next; for now, just use any Actor from the dropdown list.) Make sure these parameters are selected: Layer Order = in front of actor, Direction = 270, Relative to = actor (in both instances), and Position is 0.0 (X and Y).

6. Drag a Destroy Behavior into this Rule; this will instruct the game to destroy the enemy Actor when it overlaps or collides with the laser Actor (StN_Player_Laser). Be sure to add the Destroy Behavior after the Spawn Actor Behaviorbecause once it executes, it will be gone and none of the Behaviors on it will work.

7. Drop the enemy Actor into your Scene and see what happens! Ideally, when you shoot it with your lasers, it will vanish and be replaced with whatever you used for the Spawn Actor in Step 5. Notice that the Spawned Actor doesnt move once spawned.



Explosion: Go Boom! You may have noticed that the BoomBoom Actor has not yet made an appearance. Its time to create that Actor and get a quick look at animated frames. (This kind of animated frame setup is what you might use in other kinds of games such as character animations in platformer games or other animated effects.) 1. Create an empty Actor and give it a name. (Weve named ours BoomBoom.) Double-click on this explosion Actor to open up the Editing window.

2. This is where your design decision comes into play. Do you want the little explosion to continue along the same path as the ship? If you do, youll need to add a Move and a Rotate Behavior with the same parameters as we used in Step 3 above. If not, move along to the next step.

3. Drag an Animate Behavior, which takes a series of images and runs them in sequence to create an animation. You can choose the order of the images, and the frame rate (30 frames per second for high-quality; 12 for low-quality). Weve given you four frames of an explosion to play with. Drag these four frames over and arrange them from smallest to largest.

4. Drag a Timer Behavior into the editing window. Theres no real way to tell the game to destroy this when the animation is finished. Instead, youll need to add a timer to make the explosion vanish when desired. In this case, you could set After for 0.2 seconds, check Run to Completionand then drag a Destroy Behavior into the Timer Behavior so that the BoomBoom Actor gets destroyed after those 0.2 seconds are up. Please note that everything we want this BoomBoom Actor to do--whether running the animation, movement, even its destructionhas all been placed within the Actor itself.



5. Go back to your enemy Actor (SpinningDeath) and change the Spawned Actor in Step 5 to BoomBoom (or the name of the explosion Actor you created). Run the Scene with the new enemy Actor to test out what happens when you hit it with a laser!

This may feel like a step backwardbut as you design your scoring system and user interface, you need to take a quick look at creating a few additional screens. The interstitial space (or time) is what appears between levels. Once a level is cleared, what do you see? Do you get a video ad? Do you get a map that shows your progress? In this section, youll need to look at how to save high scores so that they are persistent between rounds of gameplay (after you turn the game off, then return to it later)and we need to have a place to display and show off that functionality. Hence, we are going to create a few extra screens: one for your main menu screen (which gives you a chance to show that you know how to create a button), and one to display the high score (which gives you a place to show off the scoring system youll be building next).

Main Menu: Screen & Buttons The main menu is hard to missand its pretty standard: First comes the company logo, followed by a title with a handful of buttons labeled Play, New Player, Instructions, Tutorial. There are even buttons that allow players to connect to their Facebook or Twitter accounts. Lets create a simple main menu for your game:

PLAYTESTING FOR REAL

Now that you have the rudiments of a gameincluding ships that fly, and stuff that blows upits time to start playtesting for real. Try out the ship movement: Do you like the way it slides back and forth? Do you want it to go faster or slower? Make adjustments to the Move speed of the ship, the targets. Adjust it until you have fun when you play. This is an opportune time to review your own Design Document (if you created one!) to see if there are any elements that you might want to try out to make it more engaging. Power-ups? Flashing lights? Make notes about what you might want to add.

CHECKPOINT

PRESS THE GREEN BUTTON

& MAKE YOUR ENEMY GO BOOM!!



1. Create a new Scene (or use the Main Menu Scene provided). The quickest way to do this is to click on the Home button at the top of the screen and then on the Scenes tab, which will give you a list of all the Scenes available. Click on in the bottom left corner of the screen to create a new Scene. Name the Scene and drag it to the left so that its the first one in the list. 2. Create a new Actor containing your Title image by following Step 1 above but clicking on the Actors tab instead of Scenes (or use the TitleScreen Actor provided). Double-click on the Main Menu Scene and drag the TitleScreen Actor into it. 3. If youd like to include a sound or music loop, this is a good place to attach it. To do this, double-click on your Title Actor and find the Play Sound or Play Music Behavior. Drag the Behavior into the Scene Editor and find your sound or music file by clicking on the dropdown menu next to Sound. (Alternatively, you can click on the Sounds tab in the Library to find the file; after dragging the desired file into the editing window, the associated Play Sound or Play Music Behavior will automatically appear.) 4. Create an Actor to use as a button (or use the MenuButton image provided). Since youll want to reuse this button (or one very much like it), youll need to add an image to it. (Note: The MenuButton provided has two images attached to it: 1) buttons default state; 2) on mouseover.) Do this by double-clicking on the Actor to load the Editor. Click on the Images tab

in the Library and then on (bottom left) to find the image on your hard drive and attach it. 5. To activate the mouseover version of the menu button Actor, create a Rule (When All conditions are valid) and set it to: Actor receives event | mouse position is | inside. Grab the Change Image Behavior and drag it into the Rule. Select the image that should appear upon mouseover. (In our example, we use MenuUp2.) Changing the image wont affect the buttons function, but it will provide an extra level of detail to the game and make it look more polished. 6. Click on next to Otherwise at the bottom of this Rule. Drag another Change Image Behavior underneath Otherwise and set it back to your original image. (Weve created a MenuUp3 image that looks identical to the original MenuButton Actor and attached it to the Actor.) This will set up the menu button Actor so that it changes when the mouse button is over the image and will change back when the mouse moves away from it.



7. Create a second Rule (When All conditions are valid) and set it to Actor receives event | mouse button is | down. As before, if you are working with mobile devices, you can use touch for the rule rather than the mouse button.

8. Drag the Play Sound Behavior and drag it into this second Rule. If you have attached a sound file that should be played when the menu button is pressed, make sure its selected in the Sound dropdown menu. (Weve provided beep-3 in our example.) Click run to completion to ensure that the sound finishes playing before the next Behavior is executed.

9. Drag the Change Scene Behavior into this same Rule. (Note: This Behavior must appear under the Play Sound Behavioror the sound file will not run to completion before the Scene changes!) Set Go to Scene to the Scene you want to move to when the button is tapped. You can simply use Next Scene, and it will jump to the next scene in orderor you can choose a specific Scene. (We use Initial Scene in our example.)

If you dont see the menu first, your Scenes are out of order. Click on the Home button to see the list of Scenes associated with your gameand make sure the main menu Scene is first in line!

CHECKPOINT

Press the Preview Button to Test the Menu!



High Score Screen In order to track the players high score or show off level progress, youll need to create a High Score screen. This will be utilized predominantly in the next section, but we will run through the setup here: 1. Create a new Scene and give it a name. (Weve created HighScores for our example.) Place it at the end of the list somewhere so that it doesnt accidentally run out of sequence.

2. Place your background image. If you have any sound or music files youd like to play while the High Score screen appears, use the Play Sound or Play Music Behavior to attach them here.

3. Under the Inspector window, click on the Game tab and then on Attributes. To add a new

Attribute, click on in the bottom left corner. A dialog box will appear asking you to Pick an Attribute Type. Click on the integer radio button. An unnamed New Attribute will appear in the Attributes list. Double-click on New Attribute to rename it. (Weve named ours High Score for this example.)

4. Create a new Actor. (Weve created HighScore for this example.) Youll use this to display the High Score after a level is finished. Dont add an image; you just want it to show the integer of the High Score.

5. Drag your new Actor into the Scene and double-click on it to open it up in the Editor. In the Attributes box on the left, find Color and click on the arrow to open it. You should see Red, Green, Blue, and Alphaall of which are associated with 1. Double-click on the 1 to the right of Alpha to modify the valuesetting it to 0. This will ensure that only the text itself is displayed in the Actor and not the white box.



6. Find the Display Text Behavior and drag it into the Editor. Click on to open the Expression Editor. Click on and then Game to open the list of Game Attributes. Find the new High Score Attribute you just created in Step 3 above, double-click on it, and then click on the green checkmark to save the Expression. (You can also modify the font type, style, and size here.) 7. Click on the green Preview arrow ( ). It will automatically take you to the Menu screen you just created. On the bottom of the screen, theres a list of Scenes. Double-click on the High Score Scene (HighScores) to preview that Scene specifically. You should see a big 0 in the middle of the Scene when it runs. Any number you place under the Game Attribute you created will now display here. Next, youll be collecting the players highest score and saving it out to the High Score Attribute.

Keeping Score Now that theres a High Score screen for bragging rights, its time to determine how to keep score. Your game needs a scoreboardand every time an enemy (e.g., spinning wheel of death) gets blown up, +1 should be added to that scoreboard. Seems easy enough, right?

ENEMY SPAWNER Youve already created a single enemy Actor (e.g., spinning wheel of death)but in order to truly keep score, youll need a few more enemies. As always, theres more than one way to do this. A simple solution is to create a spawner that will spit out an enemy every few seconds: 1. Create a new Actor (or use the Spawner Actor created for this walkthrough). Dont add an image to it; since its going to be offscreen, the player will never see it. (Note: From a design standpoint, you might want to create a small icon or something rather than just working with clunky white boxesbut thats your personal preference; if the boxes dont bother you, then just roll with it!) 2. Double-click on your Actor so that you are working in the Editor with the Prototype. Find the Timer Behavior and drag it over to the Editor. Find the random function in the Expression Editor ( ) and set the min/max to (1,3) so that it will spawn an enemy at random times. Depending on how you have set up your spawners, you run the risk of enemies colliding with one anotherso be sure to test this.

For a different (and less complex) way to keep score, see pp. 32-35 in The Official GameSalad Guide to Game Development.



3. Drag a Spawn Actor Behavior into your Timer Behavior, and set it to spawn your enemy Actor (or SpinningDeath). Set Layer Order to in front of actor. Both Relative settings = actorand both Direction and Position coordinates should be set to 0.0.

4. Now to reap the fruits of your cleverness: Open up your Scene and drag one of these spawner Actors into it and place it off camera. (Since you added the Behaviors in the Prototype, they are all going to be exactly the same.)

CHECKPOINT

TEST YOUR SCENE & SEE YOUR ENEMIES MULTIPLY!

For a different version of Spawning an Actor, see pp. 12-15 in The Official GameSalad Guide to Game Development.



BASIC SCOREKEEPING Now that you have a whole bunch of enemies to shoot at, its time to start keeping score. Lets begin with the most basic component: counting and tallying the actual score. This can be modified to keep track of lives, ammo, or any other tally component of your game. Youll set up the game to keep track of how many enemies you destroy, and youll save that information on a level-by-level basis. 1. Load the Initial Scene and access Game Attributes from the Inspector. Add three new

Attributes by clicking on in the bottom left. (These will be universal attributeswhich means that they will accessible from any level of the game at any time.) Your new Attributes will handle the following:

score of the current level overall score of the entire game high score

(Weve provided the above three Attributes as Current Level 01, Current Game Score, and High Score, respectively; if youre creating these Attributes from scratch, feel free to use other descriptive names.) Youll save your score out to these Attributes as you go; these can then be accessed again when you go from one Scene to the next. (Note: Keep in mind that you can also do this with Tables.)

DESIGN DECISION

If you created a design document for your game (sample available for this walkthrough), you may have listed the following criteria for the scoring system: 1. The score needs to be cumulative. This means that the game is going to have to keep track of the player score across multiple levels of the game. There are a couple of ways to do this. One, we can build everything within a single game Scene. This is doable, but it can become a bit of a resource management nightmare--especially since you need to keep track of menu screens, progress tracking, etc. If youre a beginning designer, you should build a separate Scene for each level.

2. The High Score is tracked. The game saves your high score (or several high scores) even between playtimes. You need this information to be persistent; you have to record and save it so that when players come back to play again, they can see if they are doing better or worse. This will also give you the option of sending this score to a leaderboard. (We wont be covering leaderboards in this tutorial, but this will set you up for one later.)



2. Create a scoreboard Actor (or use the Scoreboard Actor provided for this walkthrough) and assign an image to it. You need to give yourself a scoreboard to display the numbers. One of the reasons you set this up first is for basic debugging purposes; its easy to see if the scorekeeping is working if it actually prints the score (or lack of score) from the start.

3. Drag the scoreboard Actor onto the Initial Scene and double-click on it. Select the Prototype of this Actor. (This means that youre adding all these nodes to the original version of the Actorso whenever you drag it into a Scene, you will not need to add all this stuff over and over again.)

4. Under Behaviors, find Display Text and drag it into the Editor. You may fiddle with the scale and font at your discretion, but be aware that you will not be able to see anything in your Scene unless the game is actually running or being previewed. 5. Instead of displaying something like Hello World, youll want to use the Expression Editor to tell the score Actor to pull its information from new Game Attribute you created in Step 1 that handles the score of the current level (or Current Level 01 provided). Click on to access the Expression Editor, and then click on (on the left). Click on Game and then double-click on the Attribute you created (or Current Level 01), and then on the green checkmark ( ) to save the Expression. (Note that the Expression Editor will add the prefix game. to the Attribute name [e.g., game.Current Level 01]. This is a debug bit in Creator: If that pale blue oval shows up around the Expression, then you know you have made/entered a valid selection.)



5. You need to tell the enemies that when they blow up, the Current Score 01 needs to increase by one point (or 10 points). Go find your enemy Actor (e.g., SpinningDeath) and double-click on it to open the Prototype. Scroll down until you find the only Rule you added (known as On Collidewhere the enemy Actor collides with the player Actor); drag a Change Attribute Behavior just above the Destroy Behavior.

6. Under the Change Attribute Behavior, click on the ellipsis ( ), then on Game and finally double-click on the Game Attribute you added in Step 1 that handles the score of the current level (or Current Level 01 provided). Whenever this Actor collides with the laser Actor, it will make a change to the Current Level 01 Attribute.

TIP: Always click on the green checkmark after entering information using the Expression Editor. If you close the Expression Editor without clicking the green

checkmark, you will lose the information you just entered.



7. Under To: in the Change Attribute Behavior, open up the Expression Editor by clicking on . Click on (on the left) followed by Gameand then double-click on the same Game

Attribute (or Current Level 01). After it appears in the field, manually add a +1 after it (so that it reads game.Current Level Attribute 01 +1). This will read the Attribute, add 1, and change the Attribute to reflect the new number. (If you put +10, 10 will be added instead.)

If all goes as planned, you should see a big 0 in the score box when the game loads. Once you shoot an enemy, this should change to 1. If it does not, youll need to pop back into the Scene and double-click on the scoreboard to open it in the Expression Editor and click the Revert to Prototype button. This will ensure that all of the bits you added in the Prototype copy over to the copy of the Actor currently in the Scene.

GAME LEVEL TIMER & SETTING THE HIGH SCORE There are a few different ways to end a level. You could build in waves of enemies, set a timer, or end after a certain number of baddies have been destroyed. In order to showcase how to set up a persistent High Score, lets go with a timer. The High Score will depend on how many enemies you shoot within a certain amount of time. 1. Remember when you placed the ControlBox Actor in your initial Scene to make the starfield oscillate? Youll need to add a timer to this Actor, so double-click on it to edit the Prototype.

2. Drag a new Timer Behavior into the Editor for the Prototype and set it to After 30 seconds. (If thats not enough time, add more.) Be sure that Run to Completion is checked.

3. If the current score is higher than the High Score, youll need to change the High Score to match. Within Timer Behavior you just added, create a Rule that states, When All conditions are valid: Change your first parameter from Event to Attribute, and click on the ellipsis ( ) to set the next parameter to the level score by clicking on Game and then double-clicking on Current Level 01. (The parameter will appear as game.Current Level 01.) Set the comparison button in the middle to and use the Expression Editor ( ) to set the last Attribute to your High Score Attribute (game.High Score). This will compare the current score (which is cumulative) to the High Score. If the current score is greater than or equal to the current High Score, then the next node gets executed.

CHECKPOINT

TEST YOUR GAME, SHOOT AN ENEMY & WATCH YOUR SCORE INCREASE!



4. Drag a Change Attribute Behavior into the Rule. (Make sure you put it into the Rule rather than between the Rule and the Timer.) Click on the ellipsis ( ) to set Change Attribute to the games high score by clicking on Game and then double-clicking on High Score. (The parameter will appear as game.High Score.) Use the Expression Editor ( ) to set the next parameter to reflect the current score (game.Current Level 01).

5. Drag a Change Scene Behavior the Rule, but still within the Timer. Set Go to Scene: to your High Score screen (HighScores).

You havent set up the defeat conditions yetso even if the enemies hit you, youre safe! After 30 seconds, you should be presented with the High Score screen showing the new High Score (which should be the same as your current score). Pause your Preview and hit the reset button ( ). Note that your score will keep going up.

CHECKPOINT

TEST YOUR GAME & SHOOT AS MANY ENEMIES AS POSSIBLE!



SAVING THE HIGH SCORE The High Score loses its effectiveness if it disappears between games, so you need to make the High Score persistent. This requires saving out the High Score and ensuring that it gets loaded back in at the start of the game: 1. Load the High Score (HighScores) Scene and drag the menu button Actor (MenuButton) that depicts the Play button onto the Scene.

2. Since youve already set up the basics for the menu button and saved them in its Prototype, you dont have to repeat any of that work. In this case, work with the Instance of the Actor (the copy that exists in this Scene only). Double-click on the menu button Actor within the Scene and click on the big lock to edit the Instance. (Your changes will not appear in any other buttons.) 3. Find the Change Scene Behavior that was already dragged into the Editor and set the pulldown to Main Menu.

4. Drag a Save Attribute Behavior onto the Editor. The Attribute should get saved permanently before the Scene is changed, so do not place the Behavior in the Rule; instead, place it above the Rule so that it will execute as soon as the Actor is loaded. Remember that Creator executes these nodes in order from top to bottom. (See the image in the previous section for an example.)

TIP: If youre unsure whether youre working with an Instance or the Prototype associated with a particular Actor, look for the Edit Prototype and Revert to

Prototype buttons on the top portion of the screen. If they are there, youre editing an Instance; if they arent there, youre editing the Prototype.



5. Under the new Save Attribute Behavior, give your score a key. This is a name in the player preference file that is used to identify the number or property. (You can save out any type of Attributeincluding booleans, integers, and text strings.) Your High Score Attribute will now be permanently saved every time the High Score page shows upwhich is awesome. However, when you load the game right now, that integer will appear as 0. This is because all the Attributes begin at 0fresh and new. Be sure to load the High Score Attribute as soon as the game boots. 6. Go back to the Main Menu Scene and double-click on the background Actor in the Scene to open it up in the Editor. (Click on the lock to work with this Instance of the Actor.) Since this is the first page to load, loading High Score on this Scene will make the process invisible. 7. Drag the Load Attribute Behavior into the Editor. You dont need to set up a Rule or a Timer; you just want the High Score to fire off as soon as the Scene loads. Under Load Attribute, find the key you created in Step 4 and set it there. Under Attribute, select the High Score Attribute (game.High Score).

Be sure to begin playing your game on the Main Menuand dont shoot anything!

Lives: Hearts, or . . . ? As it currently stands, you can merrily plink away and run your score up to around 100 points before the level ends. This is kind of funbut lets face it: Youre not building a Big Red Button game (which is not much of a challenge, and definitely not as much fun). Its time to limit your ship to three lives and add some risk. You may have noticed by now that things dont always get created in order. Sometimes you need to get halfway through the creation of one game component before you can start on another. Getting the score counting with your ships lives is like this. In order to make your ship explode when one of the enemies hits it, you need to get the collisions to act against one another. Part of this has already been set in motion because the enemies explode when the lasers touch them. Next, set the ship itself so that it: (a) explodes when touched by an enemy; (b) removes one of three lives (or hearts) once the ship has been hit; and (c) takes us to the High Score screen when all three lives have been destroyed.

CHECKPOINT

PLAY YOUR GAME & SEE IF THE HIGH SCORE LOADS PROPERLY!



1. Find the image you created to represent lives (or use the Heart image provided). Go into the properties for the Actor and shrink it down to 32 x 32 pixels. This way, you can drag over multiple copies of the heart without having to resize them every time. Dont drag the hearts into your Scene just yet, though. 2. Go to Game Attributes and create a new Integer Attribute called Lives. Set this to 3.

3. Find the player Actor (or StN_Player) and double-click on it to open up the Prototype. Create a new Rule that states: When All conditions are valid: | Actor receives event | overlaps or collides | with actor of type | SpinningDeath [or name of the enemy Actor you created].

4. Drag a Spawn Actor Behavior into this Rule. Set the Actor to BoomBoom (or the name of the explosion Actor you created). Make sure the Layer Order is set to in front of actor, both Relative to: pulldowns are set to actor, and the Direction: and Position: fields are set to 0.0. 5. Drag a Destroy Behavior underneath this Spawn Actor Behavior. (Make sure that the Spawn Actor is on top; otherwise, the player Actor will be destroyed before it has a chance to Spawn the explosion.)

6. In order to count down one of those Lives you created in the Game Attribute, drag a Change Attribute Behavior into the same Rule you created and place it above the Spawn Actor Behavior. Set the Change Attribute: to game.Lives by clicking on the ellipsis ( ), then on Game, and finally double-clicking on Lives. Click on to use the Expression Editor to set the To: field to game.Lives -1. Click on to select Game, then Livesand then manually add -1 to the field before clicking on the green checkmark.



Your ship will now be destroyed when it collides with an enemy, and the Attribute you set will decrease by one every time this happens. However, you still dont have any visual representationso theres no way for players to determine how many lives they have left. Now, youll have to get clever!

COUNTING HEARTS & RESPAWNS Things are going to get a little bit twistyso follow this bit carefully! Youll need to set your Lives scoring up so that the number of hearts shown on screen is directly tied to that Lives Attribute. When this Attribute hits 0, the player will be directed to the High Score screen. 1. Double-click on the lives Actor (or Heart) so that youre working in the Prototype.

2. Drag the Replicate Behavior into the Editor. In the Copies field, open the Expression Editor by clicking on and then on to select Game and then Livesfollowed by the green checkmark. Set your direction by using the little spinning dial next to Replication Direction; it defaults to 90 degrees to the rightso as you have it set up, it will make copies of itself in the chosen direction. Set Spacing to 15. As the ship gets destroyed and the Lives Attribute count decreases, each life (or Heart) will disappear to match.

3. Create a new Game Attribute. Name it (weve used Alive? for this walkthrough), make sure the checkbox is checked, and select boolean as its type. Youll turn this boolean on and off to indicate when the ship has been destroyed so that the game knows when to respawn the ship.



4. Find the ControlBox Actor you created earlier, and double-click on it so that youre working in the Prototype. Create a new Rule and set it to: When All conditions are valid | Attribute game.Alive? | is false.

5. Drag a Timer Behavior into the Rule. Set it to read: After 5 seconds. Be sure the Run to Completion boolean has been checked so that it will count off five full seconds every time. You can adjust this number up or down, depending on your tastes (or better yet, test it on a few friends and see what they think is the right number).

6. Drag a Spawn Actor Behavior into the Timer. Set Actor to your player Actor (or StN_Player) and set the Position X/Y coordinates to 341 and 75. Leave everything else alone.

7. Drag a Change Attribute Behavior into the Timer underneath the Spawn Actor Behavior. Set Change Attribute to game.Alive? and set the To field to true.

8. Go back to your player Actor and open up its Prototype. Drag a Change Attribute Behavior into the Editor, and put it above the Spawn Actor in the last (collision) Rule you created earlier. Make sure Change Attribute is set to game.Alive? and the To field is set to false. (When the ship is destroyed, the boolean will be set to false. The Control Box will pick that up, start the timer to spawn a new ship, and change that boolean back to true.)

End Level Previously, the level ended when we hit 30 secondswhich is good for some basic testing. (You may want to leave that in as you continue to build on this game.) However, when you are done with this and you just want the level to end when the player runs out of lives, here is what you need to set this up:

For a somewhat different way to use a Timer, see pp. 38-39 in The Official GameSalad Guide to Game Development.

TIP: For any of the Spawn Actor options, you could optionally use the random function under the Expression Editor. This function will allow you to work within a range (e.g., having an enemy spawn randomly between 1 and 3 seconds, or having the player ship spawn at a random location, instead of in the same place every time). This will increase

the challenge level for the player, but it will cost you some control as a designer.



1. Go into the ControlBox Actor and shut off the Timer Behavior by clicking on the On/Off toggle button in the upper left corner of the Timer Behavior. (This way, youre not actually deleting the Behaviorand if you change your mind and want the levels to be timed in the future, you can easily turn the Behavior back on and adjust the timing.)

2. Add a new Rule to the bottom of the stack and set it to When All conditions are valid | Attribute | game.Lives | = |0.0

3. Drag a Change Scene Behavior into the Editor and set Go to Scene to HighScores. When the Attribute you created for your hearts counts down to 0, it will trigger a Scene change to take the player to the High Score screen.

Put Some Spin on It What you have now is the basic outline of a game. Ideally, a standalone game of this type will have 25-50 different levels, multiple enemies, boss fightsyou name it! However, almost all these elements can be built using the basics we have covered so far. For example, you could throw a random expression (covered below) into the mix, and the ships will shoot in a random pattern. Lets take a look at some specials (e.g., how to make an Extra Life, or how to shield your ship from impact). Many of these move into the somewhat vague realm of polish (elements that dont add much to the gameplay but that give your game a professional feelor putting the icing on the cake, so to speak). Despite the fact that including specials can often be time-consuming (and tedious), they can take a good independent game and make it feel like a publisher-backed professional title.



POWERUPS Powerups have become essential elements in many shooter games. They can be found in platformers, first-person shooters, and puzzle games. They can change the gameplaymaking it easier (or sometimes more difficult) for players to beat any given level. Currently, the inclusion of powerups can be one of the most efficient ways to monetize a game (e.g., being sold through in-app purchases (IAP) as single-use items). 1. Create a powerup Actor (or use the HeartPlus Actor provided) and double-click on it to be sure you are working in the Prototype. (There are two images provided in case you prefer to create an animation, as seen in the example below.)

2. Go into Game Attributes and create a new Attribute. Make it boolean and name it HeartPlus? This is the property youll need to tell the game when there is currently a powerup in the scene. If its marked true, then a new powerup will not spawn.



3. Create a Rule that states: When All conditions are valid | Actor receives event | overlaps or collides | with actor of type | StN_Player_Laser [or the laser Actor you created earlier]. 4. Lets make this Rule more specific. Click to the right of the Rule box and add the condition Attribute | game.lives | 5. This means that this Rule will happen if the Actor collides with the Laser and if the player has fewer than 5 lives.

5. Drag a Change Attribute Behavior over to the Rule. Set Change Attribute to game.Lives (that same attribute you created to keep track of how many lives the player has), and set the To field to game.Lives+1. 6. Drag another Change Attribute Behavior over to the Rule and place it right above the Change Attribute Behavior you just added. Set Change Attribute to game.HeartPlus? and set the To field to false.

7. Drag a Spawn Actor Behavior into the Rule (under both Change Attribute Behaviors) and set it to spawn the explosion Actor (or BoomBoom). Leave all the other fields as is.

8. Drag a Destroy Behavior into the Rule just under the Spawn Actor Behavior, and your powerup is almost ready to go!

9. At the very bottom of the Rule, you will see the word Otherwise. Click to the left to open up a new Conditions window. 10. Drag a Change Attribute Behavior over to the Rule. Set the Behavior to game.CurrentGameScore (that same attribute you created to keep track of the game score), and set the To field to game.CurrentGameScore+20.



10. Drag a Spawn Actor Behavior under the Change Attribute Behavior from Step 9 and set the Actor to BoomBoom. 11. Drag a Destroy Behavior to the Rule and place it under the Spawn Actor from Step 10.

Now, its time to get your powerup into the Scene. You can just place it in there to test it outbut during actual gameplay, you need to apply some creative thinking. Heres an idea: Create an invisible Actor that spawns one of these heart powerups. In order to do this, youll need to set the number of seconds between spawns and the location at which the powerup is spawned to random numbers.

1. Double-click on the ControlBox Actor open its Prototype.

2. Create a new Rule and set it to: When All conditions are valid | Attribute | game.HeartPlus? | is false. Youre going to have a little fun with randomization; these powerulps wont show up in the same place every time!

3. Drag a Timer Behavior into the new Rule. Set it to After, and then open the Expression Editor by clicking on . Instead of clicking on to select an Attribute, click on the function pulldown in the middle and select random (which will appear as random(min,max) in the Expression. Change min to 1 and max to 5and then click on the green checkmark. Make sure the Run to Completion box has been checked.



4. Drag a Spawn Actor Behavior into the Rule just under the Timer Behavior. Set the Actor to the powerup you just created (or HeartPlus). Go into the first of the position fields (corresponding to the X axis) and click on to open the Expression Editor. Select random in the insert function menu ( )but this time, change min to 50 and max to 400. Go to the second field next to position (corresponding to the Y axis) and do the same thingbut this time, set min to 100 and max to 250. This will provide random points on both the X (left/right) and Y (up/down) planesallowing the powerup to spawn at a random X/Y coordinate somewhere in the Scene.

5. Drag one last Change Attribute over into the Rule underneath the Spawn Actor Behavior and set it to game.HeartPlus? and the To field to true. This will switch the Attribute to true and will keep the game from spawning a new powerup until this one has been destroyed.

IMAGE SWITCHING Its the little things that a player notices. Lets take a look at one enhancement: changing the way the ship looks when it has activated a powerup. You can accomplish this transformation by using simple image switching to show the glow of the lasers when the ship fires its weapon: 1. Double-click on the player Actor (StN_Player) to work in its Prototype.

2. Find the Rule that allows you to fire the laser (which is most likely at the top), and drag a Change Image Behavior into the Rule above the Spawn Actor Behavior that spawns the laser Actor (or StN_Player_Laser). Set the image to the StN_Player_Fire image weve provided (or create your own). This image has a bit of a glow on it, as if from the lasers youre firing.

3. Drag a Timer Behavior into the Rule just under the Spawn Actor node. This will change the image back after the laser is spawned. Set it to After and for a very small amount such as 0.1. Be sure that Run to Completion is checked. 4. Drag a new Change Image Behavior into the Timer, and set the image back the original player Actor (StN_Player). Publish this to GameSalad Arcade, and you will have a simple outline of a shooter style gamefrom the menu screen down to the end screen. From here it becomes a question of iteration and variation. Building additional levels will primarily involve changing Attributes and Behaviors. For example, you could build different enemiessome that are more difficult to shoot, some that are slower, and maybe some that fight back! You can increase or decrease the number of spawners, or speed up or slow down the spawn rate. By using the Change Attribute Behavior, you can keep track of the levels a player has completed while also keeping track of the individual High Score for each individual level. At this point, you have used most of the essential functions of GameSalad Creator at least once and should have a basic understanding of how they interact with your game.

GOOD LUCK!

GameSalad Creator Walkthrough

Documents

Transcript of GameSalad Creator Walkthrough