17 min read

In this article by Miguel DeQuadros, author of the book GameSalad Essentials, you will learn how to create your playable character.

We are going to cover a couple of different control schemes, depending on the platform you want to release your awesome game on. We will deal with some keyboard controls, mouse controls, and even some touch controls for mobile devices.

(For more resources related to this topic, see here.)

Let’s go into our project, and open up level 1.

  1. First we are going to add some gravity to the scene.
  2. In the scene editor, click on the Scene button in the Inspector window.
  3. In the Attributes window, expand the Gravity drop down, and change the Y value to 900.
  4. Now, on to our actor! We have already created our player actor in the Library, so let’s drag him into our level.
  5. Once he’s placed exactly where you want him to be, double-click on him to open up the actor editor. Instead of clicking the lock button, click the Edit Prototype… button on the upper left-hand corner of the screen, just above the actor’s image.

After doing this, we will edit the main actor within the Library; so instead of having to program each actor in every scene, we just drag the main actor in the library and boom! It’s programmed.

For our player actor, we are going to keep things super organized, because honestly, he’s going to have a lot of behaviors, and even more so if you decide to continue after we are done. Click the Create Group button, right beside the Create Rule button. This will now create a group which we will put all our keyboard control-based behaviors within, so let’s name it Keyboard Controls by double-clicking the name of the group.

Now let’s start creating the rules for each button that will control our character. Each rule will be Actor receives event | key | (whichever key you want) | is down. To select the key, simply press the Keyboard button inside the rule, and it will open up a virtual keyboard. All you have to do is click the key you want to use.

For our first rule, let’s do Actor receives event | key | left | is down. Because our sprite has been created with Kevin facing the right side, we have to flip him whenever the player presses the left arrow key. So, we have to drag in a Change Attribute behavior, and change it to Change Attribute: self.Graphics.Flip Horizontally to true. Then drag in an Animate behavior for the walking animation, and drag in the corresponding walking images for our character. Now let’s get Kevin moving! For each Move rule you create, drag in an Accelerate behavior, change it to the corresponding direction you want him to move in, and change the Acceleration value to 500. Again, you can play around with these moving values to whatever suits your style.

When you create the Move Right rule, don’t forget to change the Flip Horizontally attribute to false so that he flips back to normal when the right key is pressed.

Test out the level to see if he’s moving. Oops! Did he fall through the platforms? We need to fix that! We are going to do this the super easy way. Click on the home button and then to the Actors tab. On the bottom-left corner of the screen, you will find a + button, click on it. This will add a new group of actors, or tags; name it Platforms. Now all you have to do is, simply drag in each platform actor you want the character to collide against in this section. Now when we create our Collision behavior, we only have to do one for the whole set of platforms, instead of creating one per actor. Time saved, money made! Plus, it keeps things more organized.

Let’s go back to our Kevin actor, and outside of the controls group, drag in a Collide behavior, and all you have to do is change it to Bounce when colliding with | actor with tag: | Platforms. Now, whenever he collides with an actor that you dragged into the Platforms section, he will stop. Test it out to see how it works.

Bounce! Bounce! Bounce! We need to adjust a few things in the Physics section of the Kevin actor, and also the Platform actors. Open up one of the Platform actors (it doesn’t matter which one, because we are going to change them all), in the Attributes window, open up the Physics drop down, and change the Bounciness value to 0. Or if you want it to be a rubbery surface, you can leave it at 1, or even 100, whatever you like. If you want a slippery platform, change the Friction to a lower than one value, such as 0.1. Do the same with our Kevin actor. Change his Bounciness to 0, his Density to 100, and Friction to 50, and check off (if not already) the Fixed Rotation, and Movable options. Now test it out. Everything should work perfectly!

If you change the Platform’s Friction value and set it much higher, our actor won’t move very well, which would be good for super sticky platforms. We are now going to work on jumping. You want him to jump only when he is colliding with the ground, otherwise the player could keep pressing the jump button and he would just continue to fly; which would be cool, but it wouldn’t make the levels very challenging now, would it? Let’s go back to editing our Kevin actor. We need to create a new attribute within the actor itself, so in the Attributes window, click on the + button, select Boolean, and name it OnGround, and leave it unchecked. Create a new rule, and change it to Actor receives event | overlaps of collides | with actor with tag: | Platforms. Then drag in another rule, change it to Attribute | self.Motion Linear Velocity.Y | < 1, then click on the + button within the rule to create another condition, and change it to Attribute | self.Motion Linear Velocity.Y > -1.

Whoa there cowboy! What does this mean? Let’s break it down. This is detecting the actor’s up and down motion, so when he is going slower than 1, and faster than -1, we will change the attribute.

Why do this? It’s a bit of a fail safe, so when the actor jumps and the player keeps holding the jump key, he doesn’t keep jumping. If we didn’t add these conditions, the player could jump at times when he shouldn’t. Within that rule, drag in a Change Attribute behavior, and change it to Change Attribute: | self.OnGround To 1. (1 being true, 0 being false, or you can type in true or false.)

Now, inside the Keyboard Controls group, create a new rule and name it Jumping. Change the rule to Actor receives event | key | space | is down, and we need to check another condition, so click on the + button inside of the rule, and change the new condition to Attribute | self.OnGround is true. This will not only check if the space bar is down, but will also make sure that he is colliding with the ground. Drag in a Change Attribute behavior inside of this Jumping rule, and change it to self.OnGround to 0, which, you guessed it, turns off the OnGround condition so the player can’t keep jumping! Now drag in a Timer behavior, change it to For | 0.1 seconds, then drag in an Accelerate behavior inside of the Timer, and change the Direction to 90, Acceleration to 5000.

Again, play around with these values. If you want him to jump a little higher, or lower, just change the timing slower or faster. If you want to slow him down a bit, such as walking speed and falling speed (which is highly recommended), in the Attributes section in the Actor window, under Motion change the Max Speed (I ended up changing it to 500), then click on Apply Max Speed. If you put too low a value, he will pause before he jumps because the combined speed of him walking and jumping is over the max speed so GameSalad will throttle him down, and that doesn’t look right.

For the finishing touch, let’s drag in a Control Camera behavior so the camera moves with Kevin. (Don’t forget to change the camera’s bounds in the scene!)

Now Kevin should be shooting around the level like a maniac!

If you want to use mobile controls, let’s go through some details. If not, skip ahead to the next heading.

Mobile controls

Mobile controls in GameSalad are relatively simple to do. It involves creating a non-moveable layer within the scene, and creating actors to act as buttons on screen. Let’s see what we’re talking about.

Go into your scene. Under the Inspector window, click on the Scene button, then the Layers tab. Click on the + button to add a new layer, rename it to Buttons, and uncheck scrollable.

If you have a hard time renaming the new layer by double clicking on it, simply click on the layer and press Enter or the return key, you will now be able to rename it. Whether or not this is a bug, we will find out in further releases.

In each button, you’ll want to uncheck the Moveable option in the Physics section, so the button doesn’t fall off the screen when you click on play. Drag them into your scene in the ways you want the buttons to be laid out.

We are now going to create three new game attributes; each will correspond to the button being pressed. Go to our scene, and click on the Game button in the Inspector window, and under the Attributes tab add three new Boolean attributes, LeftButton, RightButton, and JumpButton.

Now let’s start editing each button in the Library, not in the scene. We’ll start with the left arrow button. Create a new rule, name it Button Pressed, change it to Actor receives event | touch | is pressed. Inside that rule, drag in a change attribute behavior and change it to game.LeftButton | to true; then expand the Otherwise drop down in the rule and copy and paste the previous change attribute rule into the Otherwise section and change it from true to false.

What this does is, any time the player isn’t touching that button, the LeftButton attribute is false. Easy! Do the same for each of the other buttons, but change each attribute accordingly. If you want, you can even change the color or image of the actor when it’s pressed so you can actually see what button you are pressing.

Simply adding three Change Attribute behaviors to the rule and changing the colors to 1 when being touched, and 0 when not, will highlight the button on touch. It’s not required, but hey, it looks a lot better! Let’s go back into our Kevin actor, copy and paste the Keyboard Controls group, and rename it to Touch Controls. Now we have to change each rule from Actor receives event | key, to Attribute | game.LeftButton | is true (or whatever button is being pressed). Test it out to see if everything works. If it does, awesome! If not, go back and make sure everything was typed in correctly.

Don’t forget, when it comes to changing attributes, you can’t simply type in game.LeftButton, you have to click on the button beside the Attribute, and then click on Game, then click LeftButton.

Now that Kevin is alive, let’s make him armed and dangerous. Go back to the Scene button within the scene editor, and under the Layers tab click on the Background layer to start creating actors in that layer. If you forget to do this, GameSalad will automatically start creating actors in the last selected layer, which can be a fast way of creating objects, but annoying if you forget.

Attacking

Pretty much any game out there nowadays has some kind of shooting or attacking in it. Whether you’re playing NHL, NFL, or Portal 2, there is some sort of attack, or shot that you can make, and Kevin will locate a special weapon in the first level.

The Inter Dimensional Gravity Disruptor

I created both, the weapon and the projectile that will be launched from the Inter Dimensional Gravity Disruptor. For the gun actor, don’t forget to uncheck the Movable option in the Physics drop down to prevent the gun from moving around.

Now let’s place the gun somewhere near the end of the level. For now, let’s create a new game-wide attribute, so within the scene, click on the Game button within the Inspector window, and open the Attributes tab. Now, click on the + button to add a new attribute. It’s going to be a Boolean, and we will name it GunCollected. What we are going to do is, when Kevin collides with the collectable gun at the end of the level, the Boolean will switch to true to show it’s been collected, then we will do some trickery that will allow us to use multiple weapons.

We are going to add two more new game-wide attributes, both Integers; name one KevX, and the other KevY. I’ll explain this in a minute.

Open up the Kevin actor in the Inspector window, create a new Rule, and change it to: Actor receives event | overlaps or collides | with | actor of type | Inter-Dimensional-Gravity-Disruptor, or whatever you want to name it; then drag in a Change Attribute behavior into the rule, and change it to game.GunCollected | to true. Finally, outside of this rule, drag in two Constrain Attribute behaviors and change them to the following:

game.KevX | to | self.position.x
game.KevY | to | self.position.y

The Constrain attributes do exactly what it sounds like, it constantly changes the attribute, constraining it; whereas the Change Attribute does it once.

That’s all we need to do within our Kevin actor. Now let’s go back to our gun actor inside the Inspector and create a new Rule, change it to Attribute | game.GunCollected | is true.

Inside that rule, drag in two Constrain Attribute behaviors, and change them to the following:

self.position.x | to | game.KevX
self.position.y| to | game.KevY +2

Test out your game now and see if the gun follows Kevin when he collects it. If we were to put a Change Attribute instead of Constrict Attribute, the gun would quickly pop to his position, and that’s it. You could fix this by putting the Change attributes inside of a Timer behavior where every 0.0001 second it changes the attributes, but when you test it, the gun will be following quite choppily and that doesn’t look good.

We now want the gun to flip at the same time Kevin does, so let’s create two rules the same way we did with Kevin. When the Left arrow key is pressed, change the flipped attribute to true, and when the Right arrow key is pressed change the flipped attribute to false. This happens only when the GunCollected attribute is true, otherwise the gun will be flipping before you even collect it. So create these rules within the GunCollected is true rule.

Now the gun will flip with Kevin! Keep in mind, if you haven’t checked out the gun image I created (I drew the gun on top of the Kevin sprite) and saved it where it was positioned, no centering will happen. This way the gun is automatically positioned and you don’t have to finagle positioning it in the behaviors.

Now, for the pew pew. Open up our GravRound actor within the Inspector window, simply add in a Move behavior and make it pretty fast; I did 500. Change the Density, Friction, and Bounciness, all to zero.

Open up our Gun actor. We are going to create a new Rule; it will have three conditions to the rule (for Shoot Left) and they are as follows:

  • Attribute | game.GunCollected | is true
  • Actor receives event | key | (whatever shoot button you want) | is down
  • Attribute | self.graphic.Flip.Horizontally | is true

Now drag in a Spawn Actor behavior into this rule, select the GravRound actor, Direction: 180, Position: -25. Copy and paste this rule and change it so flip is false, and the Direction of the Spawn Actor is 0.0, and Position is 25:

Test it out to make sure he’s shooting in the right directions. When developing for a while, it’s easy to get tired and miss things.

Don’t forget to create a new button for shooting, if you are creating a mobile version of the game. Shooting with touch controls is done the exact same way as walking and jumping with touch buttons.

Melee weapons

If you want to create a game with melee weapons, I’ll quickly take you through the process of doing it. Melee weapons can be made the same way as shooting a bullet in real. You can either have the blade or object as a separate actor positioned to the actor, and when the player presses the attack button, have the player and the melee weapon animate at the same time.

This way when the melee weapon collides with the enemy, it will be more accurate. If you want to have the player draw the weapon in hand, simply animate the actor, and detect if there is a collision.

This will be a little less accurate, as an enemy could run into the player when he is animating and get hurt, so what you can do is have the player spawn an invisible actor to detect the melee weapon collisions more accurately. I’ll quickly go through this with you.

When the player presses the attack button and the actor isn’t flipped (so he’ll be facing the right end of the screen), animate accordingly, and then spawn the actor in front of the player.

Then, in the detector actor you spawn when attacking, have it automatically destroyed when the player has finished animating.

Also, throw in a Move behavior, especially when there is a down swipe such as the attack. For this example, you’ll want a detector to follow the edge of the blade. This way, all you have to do is detect collisions inside the enemies with the detector actor.

It is way more accurate to do things this way; in fact you can even do collisions with walls. Let’s say the actor punches a wall and this detector collides with the block, spawn some particles for debris, and change the image of the block into a cracked image.

There are a lot of cool things you can do with melee weapons and with ranged weapons. You can even have the wall pieces have a sort of health bar, which is really a set amount of times a bullet or sword will have to hit it before it is destroyed.

Kevin is now bouncing around our level, running like a silly little boy, and now he can shoot things up.

Summary

We had an unmovable, boring character—albeit a good looking one. We discussed how to get him moving using a keyboard, and mobile touch controls. We then discussed how to get our character to collect a weapon, have that weapon follow him around, and then start shooting it.

What are we going to talk about, you ask? Well, we are going to make Kevin have health, lives, and power ups. We’ll discuss an inventory system, scoring, and some more game play mechanics like pausing and such.

Relax for a little bit, take a nice break. If the weather is as nice out there as it is at the time of me writing, go enjoy the lovely sun. I can’t stress the importance of taking a break enough when it comes to game development. There have been many times when I’ve been programming for hours on end, and I end up making a mistake and because I’m so tired, I can’t find the problem. As soon as I take rest, the problem is easy to fix and I’m more alert.

Resources for Article:


Further resources on this subject:


LEAVE A REPLY

Please enter your comment!
Please enter your name here