HTML5 Game Development: 2D Platform Game Fundamentals

Find royalty-free game assets for a 2d platformer using itch.io and open game art, featuring a pixel platformer pack of hero spritesheets for standing, running, jumping, and more.

Explore how spritesheets pack multiple frames into one image to improve performance. Learn frame sizing, indexing, and the difference between spritesheets and texture atlases with image and JSON descriptor.

Load a spritesheet, define frame dimensions, and create a sprite from the texture to display a run animation in Phaser.

Learn to create a spritesheet animation with a key, frames generated by generateFrameNumbers, a frame-rate, and repeat, then apply it to the player sprite.

Enable the arcade physics engine in Phaser, add physics bodies, set gravity, constrain to world bounds, and enable debug options to visualize bodies and velocity.

Adjust the game scale to 500 by 320 and recenter the character, then set the collision rectangle to 12 by 40 and offset it 12 by 23 within the sprite.

Refactor the player code into a dedicated hero class that extends the sprite class, wire its constructor with scene and coordinates, and instantiate it in the game scene.

Capture keyboard input with the keyboard plug-in to move your character, monitor key states, and respond to space, left, right, and up keys using cursor keys.

Implement horizontal movement by reading cursor keys in the hero’s pre update method, set x velocity to ±250, flip the sprite, and adjust the collision offset for proper hitbox alignment.

Move by applying acceleration to reach a target speed and top speed, set a maximum velocity for x and y, and add drag to slow down when input ends.

Implement jumping by applying an upward velocity, using a ground check and a just-pressed input, with optional velocity capping or acceleration for variable jump height.

Implement double jump by allowing a second jump in the air after the jump key is pressed, using a boolean flag and setting vertical velocity to -300 for the bounce.

Fix two jump bugs by resetting the jump flag on ground and refining double jump logic with a new jumping flag and collisions, then refactor with a finite state machine.

Learn how finite state machines organize character movement by enforcing a single active state. They define transitions between standing, jumping, and double jumping and simplify future animation and movement logic.

Install the javascript-state-machine library with npm to manage character movement and animations with states and transitions, like solid, liquid, gas, and melt or vaporize, using from fields and lifecycle methods.

Import the state machine package and set up movement in the hero class, creating a move state with standing, jumping, flipping, and falling transitions, and on jump/flip adjust vertical velocity.

Discover how to trigger transitions by querying the state machine for valid moves, evaluating move predicates, and invoking the matching transition methods.

Implement jump predicates that require the standing state and a pressed jump key. Refactor input handling into a class property and validate transitions with a platform collision test.

Load sprite sheets and create idle, run, pivot, jump, flip, and fall animations using a state machine to manage transitions.

Fix the fall spritesheet by editing the full image to match the 32 by 64 frames of other sheets, adjusting canvas size and frame spacing in Photoshop.

Explain a flowchart for animation states in a 2D platform game, detailing transitions between idle, running, jumping, falling, pivoting, and flipping, and how to implement the logic.

Create and initialize a hero animation state machine, define transitions among idle, running, pivoting, falling, jumping, and flipping, and map each state to corresponding hero-<state> animations via lifecycle.

Add predicate-based logic to an animation state machine for 2D platform game fundamentals, defining idle, run, pivot, jump, and fall transitions using ground checks, velocity, and facing direction.

Wire the animation state machine by hooking transitions via predicates, mirror the movement state machine, and test in a browser to observe responsive, lifelike character animations.

Explore how to create a game level with tiled, choosing orthogonal orientation, configuring base64 uncompressed tiles, and saving maps as TMX or JSON for use in Phaser.

Create a tile set from selected 32 by 32 tiles using the free spreadsheet packer, adjust padding and margin to one, save it as world dash one dot PMG in assets/tile sets, and embed the tile set in the map.

Build a basic platform level in tiled, naming the ground layer, placing blocks and bushes, with spikes on a separate layer, then export level-1.json to load in the game code.

Load the exported level data and tile set, create a tile map for the ground layer named ground using world-1 tiles, and render it in the scene.

Expand the game world to the tile map size and configure the camera to stay within the map bounds while following the hero, enabling scrolling to view the entire level.

Set collision on the ground tile layer using tile IDs, then add a physics collider between the hero and the ground layer; enable optional debug rendering to visualize collidable tiles.

Prevent pixel bleeding by extruding tile edges to extend the one-pixel border, and consider using a sprite packing tool like texture packer to automate extrusion.

Add a foreground layer to the tiled level and place bushes in front of the player. Reorder scene children so the hero sits between the ground and foreground layers.

Add a background cloud layer with parallax scrolling to create depth, using a cloud image as a tileset and a background tile map layer with a 0.6 scroll factor.

Fix clouds tile size warning by cropping clouds image to 224 tall (seven rows of 32 by 32) and re-export level; disable audio in config to quiet audio context warning.

Create an object layer named objects to store the hero's start point. Place the point to align the hero's bottom center and use its x and y for spawn coordinates.

Add spike objects with the insert tile tool and identify them by gid 7; create a spikes physics group with movable true and gravity false to handle hero collisions.

Fix spike rendering by loading a 32x32 spritesheet with correct margins and spacing, and set the spike origin to bottom left for precise placement and collisions.

Learn to implement a hero death sequence in a 2d platform game: trigger the death state on spike collisions, bounce the hero, ignore input, and reset to start after animation.

Implement a spike collision death sequence by using an overlap collider to trigger the hero's kill. Adopt an event-driven approach to disable colliders, stop the camera, and reset the game.

Learn how to reset a Phaser 2d platform game by detecting hero death, measuring the camera bottom, and respawning a fresh hero at the start with the camera following.