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.

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.

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.

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.

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.

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.

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.

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.

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.