New tile based platform engine – more theory

Read all posts about "" game

This post continues New tile based platform engine – theory behind the player and answers some questions made in these days.

In this part I’ll explain how to determine collisions between the player and the walls.

Once I know player position (easy to know thanks to _x and _y for AS2 or x and y for AS3), and its horizontal and vertical speed (determined in various ways according to keys pressed, terrain types, gravity and so on), I can forecast its future position.

Once I know player’s future position, I have to check all four corner spots (the ones marked with a yellow pixel in the picture shown at New tile based platform engine – theory behind the player and see if these points are in an empty, walkable area.

If they are in an empty area, I just update player position and restart the process.

If at least one of the four corners are in a unwalkable area, I have to move the player as close as I can to its future position while keeping it into a walkable area.

First, let’s see how do I check for player corners

function get_edges() {
    // right edge
    right = Math.floor((x_pos+5)/tile_size);
    // left edge   
    left = Math.floor((x_pos-6)/tile_size);
    // bottom edge
    bottom = Math.floor((y_pos+8)/tile_size);
    // top edge
    top = Math.floor((y_pos-9)/tile_size);
    // adjacent tiles
    top_right = level[top][right];
    top_left = level[top][left];
    bottom_left = level[bottom][left];
    bottom_right = level[bottom][right];

As you can see, I just operate on x_pos and y_pos (player’s future x and y centre positions) adding or subtracting the right amount of pixels to reach the four corners.

Once I have the left, right, top and bottom tiles, I just have to retrieve values in the level array, so the tile type at the top left corner will be level[top][left], the one at the bottom right will be level[bottom][right] and so on.

Divide et impera

Also known as divide and conquer, this rule will make you life easier.

Let’s look at this picture:

The green player is falling down and moving to the right, and we calculated next frame position (the transparent one).

As you can see, red circles show us the corners that would collide into the wall.

To determine the last possible position (the last one with all four corners outside the wall) we should determine player’s angle using trigonometry and trackback its movement until all corners are clean.

While possible and quite accurate, this process is not so easy to perform because of the approximation of trigonometry functions.

It’s much better to check collisions this way

In this picture I divided the down-right movement in two separate movements: a down one and a right one.

It’s not that important which one you will check first: in any case you will end, in case of collision, with an horizontal or vertical movement to backtrack, that is much more easy to do, while not so correct in a real world ruled by physic.

Anyway, this is not a physic engine but a platform/arcade one, so this is absolutely the best way to check for collisions.

Some bug fixes

I would like to thank superdean that explained and fixed the so-called “infamous Ladder Bug”.

You can find all details in this post and it will be officially included in the code in next update.

There was another bug that caused player to get stuck into the wall if jumping to the right and hitting a wall.

This bug appeared in part 6 and was fixed in part 7.

Just remove these two instructions

x_pos = Math.round(x_pos);
y_pos = Math.round(y_pos);

And everything will work fine.

Next update… coins and spikes!!

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers