• OPENING SCENE
• Introduction
• Jumping Right In
• Jumping Right In
• Choose your own Adventure
• Getting Started
• Building a World
• Adding Movement
• Create a Game Space
• Making Things Happen
• Adding a Reward
• Hazards and Enemies
• Adding Game States
• GAME MECHANICS
• Game Mechanic: Add a Countdown Timer
• Game Mechanic: Jumping on Enemies
• Game Mechanic: Player Health
• Game Mechanic: Longer Jumps if Holding Jump Down
• Game Mechanic: Smaller Sprite Collision Boxes
• Game Mechanic: Extending the Game Size
• Game Mechanic: Adding Levels
• Game Mechanic: Keys and Doors
• ADDING POLISH
• Polish: Animate Sprite when Zapped
• Polish: Scaling our Game and Sprites
• Polish: Screen Shake
• Polish: Add Soundtrack Music
• Polish: Explosions using Particles
• Appendix
• Summary of our approach to learning Game Making
• How we approach Coding
• Playful and Reflective Approaches

Game Mechanic: Smaller Sprite Collision Boxes

We can play with collision effects with body size of player / enemy which can make the game seem fairer and more forgiving for players. This can really help if you are designing levels that are hard and of the shape of your sprite animations sometimes creates a big box area.

https://phaser.io/examples/v2/arcade-physics/offset-bounding-box

 

 

Check the Code: what we need to know and do

Our mechanic relies on us being able to check if we are jumping on our enemy. We will do this by checking to see if our player is on the way up or coming down from a jump. To do this we'll need to know about the following game elements;

• Adding Physics and Gravity - see Building a World
• Collision detection using overlap() function- see Adding a Reward

The code for a minimal example of the Smaller Sprite Collision Boxes game mechanic is shown here -  https://game-mechanic-smaller-sprite-collision-boxes.glitch.me/

Going over the code:

The size of or player is when we add it 46 wide by 42 high.

Have a look at an updated create function for the code that alters the collision body box of the player.

    player.body.setSize(26, 37, 5, 5);

There are four parameter here setSize(width, height, offsetX, offsetY) . We can see that we have set a new height and width of the Body of this sprite. In this case we taken 10 pixels off each. This does not affect how it look but does affect when it collides with other sprites.

If we don't put in the offset values for example if we use the follwoing code.

    player.body.setSize(26, 37, 0, 0);

then that new body will be anchored at the top left.

This is not ideal also. You may also notice that they player sinks into the ground.

So let's rese

To make this more useful to us as game designer we centered this new collision box by using the offset values 5 and 5. In other word this shifted the box 5 px over to the right (+5x) and five down (+5y) .

Our player no longer sinks into the ground and the new collision box seems more fair.

Collision boxes and Hazards

In the code example above the same technique has been applied to the enemy, but in this case the collision box has been set to be in the bottom right of the spider to make it very easy to jump over.

It's probably too easy! Have a play to make this seem a bit more of a challenge.

That's it. We hope you enjoy adding this game dynamic.

Bonus read: you can have a look at this great article on the more advanced ways of creating 2D platform games ¹.

http://higherorderfun.com/blog/2012/05/20/the-guide-to-implementing-2d-platformers/ ^{^}