Vertical Platformer

Preview

Background

Level background and world art, built and exported from Tiled.

Warrior Idle

Warrior sprite sheet: one of eight directional animation states (idle, run, jump, fall, attack).

Features

• Physics engine: custom gravity, velocity, and acceleration system built from scratch
• Tile-based collision: solid blocks and one-way pass-through platforms using AABB detection
• Animated sprites: 8-directional warrior animations (idle, run, jump, fall) with frame-buffered playback
• Precise hitbox: offset hitbox separate from the visual sprite for fair, gameplay-tuned collisions
• Camera system: smooth horizontal and vertical panning that follows the player within a viewport box
• Pixel-art scaling: game world rendered at 256×144 and scaled 4× to 1024×576 for a crisp retro look
• Level designed in Tiled: map geometry built in Tiled editor and exported as collision data

How it works

Physics & movement

Each frame, gravity (0.1 px/frame²) is added to the player's vertical velocity. The player's position is updated by the current velocity, then checked against collision blocks to halt movement as needed.

Collision system

Two types of collision geometry are defined via tile maps exported from Tiled:

• Solid blocks (16×16 px): full AABB, stop movement in all directions
• Platform blocks (16×4 px): one-way, only block the player when falling downward from above

Sprite animation

The Sprite base class holds a horizontal sprite sheet and advances frames using a configurable frame buffer (delay in frames before advancing). Player extends Sprite and calls switchSprite() to transition between animation states based on movement input and velocity.

Camera

A virtual camera box (200×80 px) is anchored around the player. When the player reaches any edge of the box, the canvas translation shifts to pan the view, horizontally constrained to the level width and vertically to the level height.

Tech stack