In my last blog post, I talked about the absolute basics of GameSalad. I covered the UI and how to create an actor and make that actor move in your scene. As promised, I want to continue with some more tutorial posts to help you get on your way to developing your ideas. In this post, I’m going to continue from where we left off and talk about collision detection.

What is Collision Detection?

Collision detection is a game mechanic in which objects can detect when they are colliding with one another. It’s basically a fundamental mechanic for any video game. Even the most primitive of games have collision detection. Consider Pong, for instance. In Pong, the ball can collide with the two paddles on either side of the screen. Likewise, it can collide with any of the walls that surround the playing field. The paddles can only move up or down until they run into a wall. When a paddle hits a wall, it stops and you can no longer move in that direction. If the ball hits a paddle or a wall, the ball bounces off of the object and moves in the other direction. Collision Detection is what makes these mechanics possible. The ball and paddles know when they are colliding with something and execute some behavior as a result. Creating collision detection from scratch is somewhat complicated and requires some serious mathematics. Fortunately, GameSalad makes it easy for us.

Collision Detection is what makes these mechanics possible. The ball and paddles know when they are colliding with something and execute some behavior as a result. Creating collision detection from scratch is somewhat complicated and requires some serious mathematics. Fortunately, GameSalad makes it easy for us.

Setting Up the Scene in GameSalad

Since this tutorial is still an introductory one, we are going to implement a very simple example of collision detection. We will create four walls around our scene that will serve as a boundary. Our player will not be able to move passed any of these boundaries. Once you know how to create a basic collision detection, you’ll be able to apply the same workflow to the rest of your game.

Instructions:

First thing’s first, open up your GameSalad project that we created last time. Let’s get started.

STEP ONE: Add a new Actor using the Library → Actors section

STEP TWO: Rename this actor by double-clicking its name in the list of Actors. Name it “Wall”.

STEP THREE: Drag the Wall into your scene by clicking on its name in the Actors list and dragging it into the scene.

STEP FOUR:  What we want to do is resize the object so that it is a tall, thin, object that covers an entire side of the scene. To resize the object, use the handles on the edges of the object in the scene to resize it. The handles are circled in this screenshot:

STEP FIVE: You’ll want to end up with something like in this screenshot. Notice how it covers the entire left side of the frame. You can move the object by clicking and dragging the center circle in the middle of it.

We put the wall outside of the frame so that we don’t see it in our game. It will still exist in the scene, but it is just not being rendered. Our player will still be able to hit and collide with it.

STEP SIX: Now, we need to copy this and put the copy on the right side of the frame. With the wall selected, press Ctrl + C to copy and Ctrl + V to paste. Once it’s pasted, drag it to the right side of the frame:

STEP SEVEN: Now, we need to put walls on the top and bottom of the screen. You can copy the walls again, but you’ll need to resize them so they are wide, not tall since the top and bottom of our screen are much longer than they are tall:

STEP EIGHT: Now we need to actually add collision. In the Actor library, click on the Player Actor and go into the Backstage.

STEP NINE: Inside the backstage, make sure you have the Player(Prototype) selected and type “Collide” in the text box and choose the “Collide” option that comes up. Make your Collide behavior look like this:

STEP TEN: Before we can playtest, we need to change some physics options for our player and our walls. First, select Wall from the Actor Library and go to the “Actor” tab under “Attributes”.

STEP ELEVEN: Scroll down in the attributes list and expand the “Physics” section. Under the physics section, uncheck “Movable” and check “Fixed Rotation”

STEP TWELVE: At this point, you should be able to playtest your game. When you do, try moving your character off the screen in any direction. If you did everything right, your character should stop when it hits a wall.

In Conclusion:

As with my first tutorial, this is a very simple guide to illustrate the basics of a concept. The thing about collision detection in GameSalad is it’s incredibly simple. Once you know how to do this, you can apply this to any other actor in your game. There are more advanced settings for a collision that I won’t be going into, but feel free to experiment with different physics properties and see how your actors respond. You can get some fun interactions to happen just by experimenting with collisions and physics. That’s it for this tutorial. Stay up-to-date with our blog if you want to read more content like this!

Blogger: Mark Philipp, Application Engineer at Studica