Combining Tilemaps with ArcadePhysics

In this tutorial we will be looking at how we can use the ArcadePhysics component (which is to be attached to GameObjects) to resolve collisions with a Tiles on a TileMap to create a basic Platform styled game.

For this tutorial we are going to be using JavaScript as the language of choice.

Note: We are not going to make the character move/jump in this tutorial. We are ONLY going to focus on making the TileMap collide with the character.

Other Knowledge

Before we get started with this tutorial some previous knowledge of Kiwi/JavaScript is required. You will need to know how to do the following. If you do not know how to do the following, then don’t fret, as you can always look at the tutorials they are linked to.

Setup

To start this example you need to have already created a basic Kiwi Game in an HTML file, that uses a single State.

Once you have done that you will need to load in a few graphics inside the preload method of your state. One to use for your TileMap (so it will need to be at least a SpriteSheet) and another to use for your Sprite which will function as our Character.

You can download the graphics that I will be using, through the link above.

Create a TileMap

With the graphics loaded, the next step is to move to your create method of the State and instantiate a new TileMap and also create a new TileMapLayer that will function as the Ground our character will stand on.

I will be creating my TileMap through code, but if you prefer to create it in Tiled/through JSON, that works as well.

Take Note

In Kiwi each TileMapLayer when created will already have attached a ArcadePhysics component, so you don’t need to attach one to it!

Create a Sprite with ArcadePhysics

With our TileMap now created, the next stage is to now create or extend (depending on how you would like to do it) a Sprite GameObject and attach to it a new ArcadePhysics component.

The code below is an a piece of code that extends a Kiwi Sprite and that attaches to it an ArcadePhysics component, which updates every frame. Make sure if you use it to add it outside every other class/object so that it has Global Scope.

So far

so-far
What you should be seeing so far is a TileMap being rendered, and your character appearing somewhere on-screen.

Moving the Character

The next step we will do is make our character move vertically downwards, due to gravity.

Making our character move downwards due to gravity is an easy process. Since we already have the ArcadePhysics attached to our Character, we can easily tell the Y acceleration to increase at a constant 7px and the ArcadePhysics component will calculate the velocity for us.

Making Tiles Collidable

Now that we have set-up our game, what we need to do now is set-up which TileTypes will be SOLID and will stop our character from going through it.

To do we will use the following code at the bottom of the create method.

What we are doing above is looping through all of the TileTypes that we have created and assigning the allowCollisions property to ANY. This means that when the ArcadePhysics is resolving collisions between Tiles of that Type and another object, ANY side where an overlap has occured will result in the objects being seperated.

If you have tried this in your browser and are still wonder why this isn’t working, that is because we still have one more step to do.

Resolving Collisions

The last step in this tutorial is tell the ArcadePhysics on our TileMapLayer to check for a collision with our Character and if there is one to resolve the collision.

We need to place the code above inside of the update method of our State, as we need to check for a collision with the character every frame.

Finishing Touches

And that is it for this tutorial. You should currently have the player falling about 5 pixels and then staying on top of the first tile he hits.

To make this example more polished I recommend making the character walk and jump, perhaps adding in a background image, some sounds perhaps and then you will have the basics of a Platform game coming together.

Hope you have found it easy following this tutorial. Any comments/questions are always welcome!

Share the joy
Comments 1

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">