Getting Started with GameSalad

Exclusive offer: get 50% off this eBook here
GameSalad Beginner’s Guide

GameSalad Beginner’s Guide — Save 50%

A fun, quick, step-by-step guide to creating games with levels, physics, sound, and numerous enemies using GameSalad with this book and ebook

$26.99    $13.50
by Miguel DeQuadros | March 2012 | Beginner's Guides

So, you're ready to become an iPhone developer? This article will show you how to create a very simple prototype level. Once you get into GameSalad you will truly enjoy it, the interface is so simple, and you never have to do any programming.

 

Many people dream of creating games, but unfortunately not many people possess the knowledge to find a suitable game engine (or create their own), to learn the language and start developing. You are going to love GameSalad for its simplicity and power of use.

 

In this article by Miguel DeQuadros,author of GameSalad Beginner’s Guide will discuss the following topics for GameSalad:

 

  • System requirements for developing
  • Registering with GameSalad and downloading it
  • Tour through GameSalad's user interface
  • How to create a GameSalad project
  • How to add moveable characters, platform collisions, win and death points
  • Add controls to your characters
  • Preview your game on your computer

Let's get to it shall we?

 

System requirements

In order for you to run GameSalad and create amazingly awesome games, you must meet the minimum system requirements, which are as follows:

 

  • Intel Mac (Any Mac from 2006 and above)
  • Mac OS X 10.6 or higher
  • At least 1GB RAM
  • A device running iOS (iPad, iPhone 3G and up, or iPod Touch)

If your computer exceeds these requirements, perfect! If not, you will need to upgrade your computer. Keep in mind, these are the minimum requirements, having a computer with better specs is recommended.

 

Let's get into GameSalad

Let's start by downloading GameSalad and registering for an account. Let's go to GameSalad's website, www.gamesalad.com. Click the "Download Free App – GameSalad Creator" button.

 

While you are waiting for GameSalad to download, you should sign up for a free account. At the top of the page click Sign Up, enter your email address and create a username and password. You have two options for GameSalad membership, you can keep the Basic Pricing, which is completely free or select Professional Pricing. The difference is when you publish your App, you will have a Created with GameSalad splash screen, not a big deal right? Especially, not when you can get this awesome program for free! The Professional Pricing, which is $499 (USD) per year gives you all the features of the free version of GameSalad, plus it allows you to use iAds, Game Center, Promotional Links, your own Custom Splash Screen, and Priority Technical Support.

 

This does not include your Apple developer cost, which is $99 a year

Other tools that are recommended for game development:

 

Getting familiar with GameSalad's interface

Once you open GameSalad, you are presented with several options on the screen.

 

Following are the options:

 

  • Home: It shows you the latest GameSalad links (Success stories, their latest game release, and so on...).
  • News: It is self-explanatory, this shows you the latest update notes, and what is new in the GS community.
  • Start: The getting started screen, here you have video tutorials, Wiki Docs, Blog, and more.
  • Profile: This shows you, your GameSalad's profile page, messages, followers, and likes.
  • New: These are all your new projects, Blank templates, and various bare bone templates to get you started.
  • Recent: This shows you all of your recently saved projects.
  • Portfolio: This shows all your published Apps through GameSalad.
    •  
      • Back/Forward buttons: Used when navigating back and forth between windows
      • Web Preview: Allows you to see what your game will look like within the browser (HTML5)
      • Home: This takes you right back to the project's main window
      • Publish: Brings up the Publish window, here you can chose to deploy your game to the web, iPhone, iPad, Mac, or Android
      • Scenes: Gives you a drop-down menu of all your scenes
      • Feedback: Have some thoughts about GameSalad? Click this to send them to the Creators!
      • Preview: At the main menu, or while editing an actor this starts your game from the beginning. If you are in a level, it will preview the level
      • Help: Brings up the GameSalad documentation, which lists many help topics.
      • Target Platform and Orientation: This drop-down menu gives you, your device options, iPhone Landscape, iPhone Portrait, GameSalad.com, iPad Landscape, iPad Portrait, and 720p HD
      • Enable Resolution Independence (only when iPhone and iPad device is set): Check this option if you are creating a game specifically for the iPhone 4, 4S, iPad, or Kindles and Nooks. This takes your high resolution images and converts them for iPhone 3GS, 3G, and iPhone (1st Gen)
      • Scenes Tab: Switch to this to see all your wonderful levels!
      • Actors Tab: Select this tab to see all your actors in the game project. From this tab, you can group different types of actors, such as platforms and enemies. This comes in handy when an actor has to collide with numerous other actors (enemies or platforms)
      • + button: Adds a Level
      • - button (when a level is selected): Deletes a level
      • Inspector (with Game selected)
        • Actors: Here, you will see all your in-game items (Players, platforms, collectables, and so on)
        • Attributes: Here, you can edit all the attributes of the game such as the display size.
        • Devices: Here, you can edit all the settings for the mouse, touch screen, accelerometer, screen, and audio.
      • Inspector (with Scene selected)
        • o Attributes: Here, you can edit all the attributes of the current level, such as the size of the level, screen wrap (X,Y), Gravity, background color, camera settings, and autorotate.
        • o Layers: Here, you can create numerous layers with scrollable on or off. For example, a layer called UI with scrollable deselected will have all your user interface items, and they will stay on the screen.
      • Library (with Behaviors selected)
        • o Standard: These are all the standard GameSalad behaviors (Movements, change actor attributes, and more)
        • o Custom: These are your own custom behaviors. Let's say, you needed the same behavior throughout numerous actors but you didn't want to keep re-adding and changing the behavior for each actor. Once, you create the Behavior, drag it into this box and you can use it as much as you want.
        • o Pro: These are all the professional behaviors (only available when you have paid for the professional membership). These include Game Center Connect, iAd, and Open URL
      • Library (with Images selected)
        • Project: This shows all your imported images into this project.
        • Purchased: This is a new feature that shows the images you have purchased through GameSalad's Marketplace. (When you click Purchase Images..., this will take you to the GameSalad Marketplace where you will have a plethora of Content packs and more to purchase and import into your game)
        • When you click the "+" button, you can import images from your hard drive, alternately, you can drag them directly into the Library from the Finder
      • Library (with Sounds selected): This shows you all of your sound effects and music that you have imported into your project. As with images, when you click the "+" button you can import sound effects or music from your hard drive, or drag them directly in from the Finder.
      • Actor Mode: This involves normal mouse functions; it allows you to select actors within the level. Following is the screenshot of the icon:
      • Camera Mode: It allows you to edit the camera, position, and scrolling hot spots for characters that control the camera. Following is the screenshot of the icon:
      • Reset Scene: While previewing your level and if this button is pressed, everything will go back to its initial state. Following is the screenshot of the icon:
      • Play: This will start a preview of the current level. This is different from the green Project Preview button, as this will only preview the current level, and not the whole project. When you complete the level, an alert will appear telling you the scene has ended, and you can either select to preview the next level, or reset the current scene. Following is the screebshot of the icon:
      • Show Initial State: If you have run a preview, and want to see the initial state without ending the preview, then pause the preview, click on the following icon and the initial state is seen. Following is the screenshot of the icon:
    • For now, let's click New | My Great Project

      This is a fresh project; everything is empty. You can see that you have one level so far, but you can add more at a later time. See the Scenes and Actors Tabs? Currently, Scenes is selected, this shows you all of your levels, but if you click the Actors tab, you will be able to see all your actors (or game objects, characters, collectables, and so on.) in the game. You can also rearrange all of the actors in Actor Tags, to give you an idea of what these are useful for. Take for example, if you have 30 different enemies, when you are setting up your collisions within behaviors, you won't have to set up 30 different collisions. Rather, when you set up all the enemies within a tag named Enemies you can do a single collision behavior for all actors of the tag! This reduces a lot of time when coding. We will get into more detail about actor tags, when we get into creating some games later in the book.

      If you double-click on the Initial Scene, you will be taken to the level editor. Before we do that, let's go through the buttons shown in the following screenshot:

      The descriptions of the buttons in the previous screenshot are as as follows:

      Seems pretty easy, right? It is! GameSalad's user interface is simple. Even if you don't know what a certain button does, just hover your mouse over the button and a tooltip appears and tells you what the button does. Even though it's a very simple user interface, it is very powerful. Take for example, something as simple as the Enable Resolution Independence option. Simply selecting this takes out a lot of time from having to create two sets of images, a high resolution retina-friendly image, and a lower quality set for non-retina display images. With this option, all you have to do is create a high resolution set. Choose this option and GameSalad automatically creates a lower quality set of images for non-retina devices. How great is that? Such a simple option and yet it saves so much time and effort, and isn't simplicity what everyone wants?

      Now let's get into the scene editor

      Double-click our initial scene and you will see the Scene Editor, yes it may be a little daunting, but once you get used to the user interface, it is really quite simple. Let's break down all the buttons and see what they do:

      What do all these buttons mean? Following is a description of all the buttons and boxes:

      There we go! The GameSalad interface really is that easy to navigate! In this article, you set up an account with GameSalad, you downloaded and installed it and now you know how to use the interface. GameSalad has such a simple interface, but it is really powerful. As we looked at earlier, an option as simple as Resolution Independence is so easy to select and yet one click takes off so much time from creating different sets of images that can be used for developing. This is what makes GameSalad so great; it's such a simple user interface and yet it is so powerful. What is so amazing about all of it, is that there's no programming involved whatsoever! For those who don't have the smartness to program a full game, this is what everyone else wants, simple, quick, and super powerful.

GameSalad Beginner’s Guide A fun, quick, step-by-step guide to creating games with levels, physics, sound, and numerous enemies using GameSalad with this book and ebook
Published: March 2012
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Creating a new project!

How Easy! Simply open up GameSalad and you meet the welcome screen. You will see on the sidebar that New is selected, so let's go ahead and open up the project My Great Project. Now, you have a blank slate to work with. Now, let's open up the level Initial Scene, which opens up the scene editor. Does it seem a little confusing? If so, don't worry, the user interface is so simple that you will be navigating around it, in no time. What we are going to do in this article is make a simple (and I mean very simple) platform game.

 

Time for action – setting up a platform level

Ok let's populate this level.

 

  1. In the inspector box, click on the + button, and you will see a new actor appear.
  2. Now, let's double-click Actor 1 and the actor editor will show up. Under the size drop-down, change both X and Y to 32 for a smaller character. Take a look at the editor and feel around; we will spend a lot of time here. When you're done, click the Back button at the top to return to the scene editor.
  3. Drag the actor into the level, press the Play button, nothing happened? That is bexause we haven't added any gravity yet!
  4. Under the Inspector, click Scene | Gravity | Y then add 300, or whatever you would like, it all depends on what kind of level you are making, but I find 300 is a good gravity for regular levels. If you are creating a space level, make that number smaller for less gravity, if you are creating an underwater level, make it a larger number for more.
  5. Now, press the Play button. Your character falls right off the screen, no worries now, we have to add a platform for your character to land on.
  6. Under the Inspector, click Game | +, now you will have another actor named Actor 2. Let's make things a little easier here, double-click the name of the actor to rename it. For Actor 1 change the name to Player and the name of Actor 2 to Platform. Now double-click on Platform.
  7. Go to the Attributes, and under Size, change Width to 350, and the Height to 10. Change the color to anything you like. Scroll lower to Physics, change Restitution to 0. If you leave it at 1, it will make this platform bouncy, and right now, we don't want that. Finally, uncheck the movable box to prevent the platform from moving, again another thing we don't want.
  8. Go back to the level editor and drag the Platform actor into the level and place it underneath your actor. Press the Play button, the character falls as before, and the platform stays in place but the actor keeps falling and doesn't stop at the platform.
  9. Double-click the Player actor. Under the attributes box, scroll down and change the Restitution to 0 as we did for the Platform. Now in the Library, scroll through the Behaviors and find the Collide behavior. Drag it into the white box where it says Drag your behaviors here.
  10. Change the drop-down box that says Player to Platform. Go back to the scene editor and press the Play button. The Player falls and stops on the platform. If it doesn't, double-check you followed all the steps properly; usually, it can be the simplest thing you missed. That's OK! Things are looking pretty good, but now we are going to add some controls.
  11. Double-click your Player actor to bring up the editor.

What just happened

What did we just do here? We just created a new actor and added some attributes to it to make it have a platform type movement. We also added gravity to the scene to make our actor move. Pretty simple isn't it? Especially, when you compare GameSalad's collision detection to coding it:

 

CGRect rectOne =[charshot frame];
CGRect rectTwo =[target frame];
float leftMostOne = CGRectGetMinX(rectOne);
float leftMostTwo = CGRectGetMinX(rectTwo);
float rightMostOne = CGRectGetMaxX(rectOne);
float rightMostTwo = CGRectGetMaxX(rectTwo);
float topMostOne = CGRectGetMinY(rectOne);
float topMostTwo = CGRectGetMinY(rectTwo);
float bottomMostOne = CGRectGetMaxY(rectOne);
float bottomMostTwo = CGRectGetMaxY(rectTwo);
if((topMostOne < bottomMostTwo && bottomMostOne > topMostTwo) &&
(leftMostOne < rightMostTwo && rightMostOne > leftMostTwo)) {
gameState = kGameStatePaused; // Pause the game
UIAlertView *alert = [[UIAlertView alloc]
//Bring up text saying nice shot
initWithTitle:nil
message:@"Nice Shot!"
delegate:self
cancelButtonTitle:nil
otherButtonTitles:@"Continue", nil];
[alert show];
[alert release];
target.center = CGPointMake(target.center.x, enemyY);
//change to random position
charShot.center = CGPointMake(0, 0);
//Change character shot to x-0 y-0
shooting = NO;
//turns off a boolean so the character stops shooting
immunity.progress = immunity.progress + .10; //add to score
}

Yes, I don't think too many people want to do that... Let's keep going!

 

Have a go hero

We created a normal platform movement, but try doing this:

 

  • Create a space scene (lower gravity)
  • Create different platform types such as super bouncy or sticky

Play around with the settings and you'll be going in no time!

 

Time for action – let's make your player move!

In this section, we are going to start adding some movement for our character. We will add simple left and right motions. We won't deal with jumping just yet though.

 

  1. Click on Create Group, rename the group to Controls.
  2. Click on Create Rule and drag the rule into your controls group, just to keep things organized, for when you start putting more behaviors, it can get pretty cluttered. Rename the rule to Move Left, then click the middle drop-down box and change it from mouse button to key.
  3. Click the Keyboard button and an image of a keyboard will pop up. Now, click the left arrow key on the keyboard.
  4. Go to the Library and find the Move behavior and drag it into the rule (Be sure you drag it into the rule, if you don't, the player will keep moving.)
  5. Change the Behavior settings in the previous screenshot, Direction – 180, Speed – 100, and everything else can be left as it is.
  6. Repeat what we just did with the rule and in the Move behavior but just change everything to Right arrow key. You can easily duplicate a behavior/rule by selecting Option and clicking-and-dragging the new duplicate to anywhere you like.
  7. Go back to the scene editor and test it out. Now, you'll be able to move back and forth across the platform. This is kind of boring though, isn't it? Let's add a level end, and a death point.

What just happened

We added some life to our actor by adding a couple of super simple behaviors and rules. He can now move left and right and he is affected by gravity and can collide with other actors.

 

Now, we are going to add the ending points for our level, a death and a win point.

 

Have a go hero

Play around with some of the movements, try doing a mouse movement, or if you're feeling adventurous, try doing some touch or accelerometer motion.

 

Have a go hero

Time for action – create ways to win or lose

 

Your level needs something more... all you can do is move around, don't you think we should finish it? Let's add a door for your character to enter and win the level, and let's make your actor die when he falls off the platform. First, we are going to create a way for the player to win:

 

  1. Go back to the level editor and under Inspector let's create another actor. Click on Actor 3, change its width to 32, height to 50, color to gold (or whatever you like), uncheck movable, and rename it to Door. Everything else can be left as it is.
  2. Return to the level editor, drag the door into the level at a place where your player will be able to reach it. Double-click your player actor in the Inspector, not in the level. If you go to edit the one in the level, you are editing a copy of the original and any changes you make will not be reflected on the actor in the Inspector. This can be good if you need to make per-level changes, but normally you would edit the original actor to make universal changes. Let's create another rule, Let's call it Level Win. Change the middle drop-down box from mouse button to overlaps or collides, and change the last drop-down box (the one that says player) to Door.
  3. In the Library, scroll down to find the Display Text behavior, drag it into the Level Win rule. Change the text to You Win!
  4. Add a Timer behavior. Change the drop-down box that says Every to After and the time from 5 to 1.
  5. Find the Reset Scene behavior and drag it into the timer.

  6. Test it. Touch the door, and You Win! appears on your character, and after one second it will reset the scene.
  7. Pretty beautiful isn't it? It reminds me of the old Atari games, I use to play when I was a kid. We can do better!
  8. Let's go and add the Kill zone, or an actor that will kill your actor on contact. In the level editor, under the Inspector create another actor (don't forget you press the + button to create actors!). Rename it to Kill Zone.
  9. Double-click Kill Zone, change the width to 480 (the full width of the iPhone screen), and turn off movable.
  10. Go back to the level editor and drag the Kill zone actor to the level, just underneath the platform.
  11. Double-click the Player actor, create a new rule, and rename it to Player Death or something delightfully horrible like that.
  12. The same as our door, change the middle drop-down box from mouse button to overlaps or collides, and change the last drop-down box from Player to Kill Zone.
  13. In the Behavior section, find the Reset Scene behavior and drag it into the rule.
  14. Looks good right? That's it! Or is it that Kill zone is a sore sight, let's hide it. Double-click the Kill Zone actor, and under Graphics uncheck Visible.

And that's everything! Seems pretty easy right! It totally is! Let's see our finished project:

 

Uh oh... I know what's going to happen next! Do you want to preview your game? Simply, click the green arrow at the top of GameSalad's interface! You will get an exact preview of what your game will look like.

 

That is all that's involved in prototyping your game! Need a quick idea of what your game is going to do? Want to see how it will look or play out before you have everything ready to develop? Do what we did in this article, you don't need all the fancy images, you just need to see how things will feel and perform on the target devices. In this article, you were able to create a new GameSalad project, get familiar with some simple behaviors, keyboard controls, collisions, and you learned how to preview your game without deploying it to a device. Quiz time!

Summary

In this article, we had a small tour through GameSalad's interface, learned how to create a new project, and we even made our own prototype game! Using GameSalad, you got an idea of how simple it is, how one simple collide behavior can save so much time compared to coding it. Imagine 27 lines of code to do something that requires just about 5 behaviors in GameSalad. Now that you see how simple GameSalad is, are you not happy you are using it? The frustrations of coding are not something everyone wants to put up with, especially, not when there's a tool as simple as GameSalad out there!

 


Further resources on this subject:


GameSalad Beginner’s Guide A fun, quick, step-by-step guide to creating games with levels, physics, sound, and numerous enemies using GameSalad with this book and ebook
Published: March 2012
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Miguel DeQuadros

Miguel DeQuadros is a Game Developer and founder of the independent development studio Wurd Industries, based in Ontario, Canada. He has been developing iPhone games since the release of the App Store back at the exciting release of iOS 2.0. Since then, working under Wurd Industries, he has had eight games and one entertainment app published world-wide on the App Store, with more to come.

Originally interested in 3D animation and graphic design, Miguel focused mainly on this, but then got the game development "bug" and has been developing iPhone Apps since 2008. This allows him to use his creativity and knowledge of 3D animation for cut scenes and videos within his apps, and he loves every minute of it. Starting from his first project "Toy Tennis" back in 2008 (which, to this day, still remains a very popular app, thought it has been updated quite a bit with new graphics and social integration), down to his current project iMMUNE 3: The Final Stand, he continues to develop iPhone apps.

He began expressing interest in GameSalad when it was first launched in March 2009, but never started using it until January of 2010, when he started to develop his third iOS game, iMMUNE 2: Rise of the Salmonella, a 2D platformer sequel to the iMMUNE series. To this day, he and Wurd Industries continue to be Professional Members of the GameSalad community and still use GameSalad for prototyping and developing games for the iOS devices, and are now branching out to Mac development.

Books From Packt


Unity 3.x Game Development by Example Beginner's Guide
Unity 3.x Game Development by Example Beginner's Guide

OGRE 3D 1.7 Beginner's Guide
OGRE 3D 1.7 Beginner's Guide

MySQL 5.1 Plugin Development
MySQL 5.1 Plugin Development

Adobe Flash 11 Stage3D (Molehill) Game Programming Beginner’s Guide
Adobe Flash 11 Stage3D (Molehill) Game Programming Beginner’s Guide

Unity iOS Game Development Beginners Guide
Unity iOS Game Development Beginners Guide

Google SketchUp for Game Design: Beginner's Guide
Google SketchUp for Game Design: Beginner's Guide

3D Game Development with Microsoft Silverlight 3: Beginner's Guide
3D Game Development with Microsoft Silverlight 3: Beginner's Guide

Cocos2d for iPhone 1 Game Development Cookbook
Cocos2d for iPhone 1 Game Development Cookbook


Your rating: None Average: 3 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
2
w
x
C
e
j
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software