Fadhil Official Logo
Fadhil NuruzzamanSoftware Engineer
Fadhil Official Logo
Web GamePersonal2026

Paw & Pixel: Pixel Art Exploration Game

Paw & Pixel is a small personal game built as a tribute to Tupe, an orange tabby stray cat raised at home who stayed after her two siblings grew up and left. She was calm and affectionate, always nuzzling close, and would only come running when called in a falsetto voice. She passed away at four years old. The player walks a small pixel-art forest built with Phaser 3, with a cat companion sprite based on her as a quiet way of keeping her memory close

Preview

Walk Through the Site

A scrollable look at the finished site, exactly as a visitor would browse it

Paw & Pixel: Pixel Art Exploration Game desktop preview

Desktop

Paw & Pixel: Pixel Art Exploration Game mobile preview

Mobile

Tech Stack

Technologies Powering the Build

The tools and technologies that came together to bring this project to life

TypeScript logo
Phaser logo
Vite logo
Seedance logo
Claude logo
Cursor logo
GitHub logo
Yarn logo
Vercel logo

Roles

A Skill-by-Skill Breakdown

Each project draws on a mix of disciplines, here’s how they came together on this one

Web Development

  • Structured the game with Phaser 3's scene system, a loading scene that preloads every asset before fading into the main game scene
  • Built a custom world builder that places around 260 trees, hand-placed groves near the borders and interior plus a seeded procedural fill for the rest, all with Y-sort depth so trees and characters overlap correctly
  • Implemented a dual-layer collision system, per-trunk circles plus connecting segment walls, so the player can't clip through gaps between trees
  • Built a floating virtual joystick for touch input, active anywhere on screen for mobile and tablet

Web Design

  • Deliberately left the interface free of any HUD, score, or menu, keeping the focus on quiet exploration
  • Kept the world's color palette calm and grounded in green, matching the quiet, reflective tone of the tribute

Graphic Design

  • Generated pixel-art assets (trees, grass, stones, character sprites) with Seedance and arranged them by hand to build the world
  • Designed a pixel-style loading screen with a custom progress bar and the tagline "nowhere to go, still going"
  • Created the site's favicon
  • Compressed every image to WebP and under 200KB before upload, without a visible drop in quality

Highlights

Behind the Scenes

A closer look at what the finished product offers, the obstacles along the way, and what came out of it

Key Features

  • Fully responsive design across desktop and mobile devices
  • Optimized images for fast loading
  • A hand-arranged forest world of about 260 trees across 5 species, each placed with its own rules
  • Dual-layer trunk collision so the player can never clip through gaps between trees
  • Floating virtual joystick for touch controls on mobile and tablet
  • Custom directional sprites (front, back, side) for both Fadhil and Tupe, each with a per-direction walking animation
  • No HUD, menus, or scoring, just a calm space to walk around
  • Playable directly in the browser, no installation required

Challenges Faced

Filling a Forest Without It Feeling Repetitive

A 1600x1600 world needed roughly 260 trees to feel like a real forest, but placing them all by hand would have taken forever and risked visible repetition, solved by hand-placing 82 trees in groves along the borders and interior, then filling the rest with a seeded procedural algorithm that scattered around 180 more while keeping a minimum distance between groves

Keeping AI-Generated Assets Visually Consistent

Assets were generated through Seedance separately per type (trees, grass, characters), risking a mismatched style or palette between them, fixed by iterating on prompts and manually curating outputs to keep every asset consistent

Preventing the Player From Slipping Between Trees

A single circle collision per tree still let the player squeeze through narrow diagonal gaps where trees stood close together, fixed by adding a second collision layer, thin segment walls between any two trunks within 34px of each other, closing every gap a single circle would miss

Lessons Learned

  • Working with Phaser's scene system and directional sprite animations was a first real taste of game development, a different discipline from the usual web projects
  • AI coding assistants turned out just as useful for navigating an unfamiliar game engine API as for typical web development
  • A simple problem, like a character clipping through gaps between objects, often needs a second, purpose-built collision layer instead of a single bigger one

Impacts

Problems Solved After Launch

How this project changed things for the business and its users after launch

A memory kept alive

Images under 200KB

3-direction sprite set

Zero clip-through gaps

Critical Fix

A Stray Cat's Life Too Easily Forgotten

Before

Stray cats like Tupe rarely get any lasting record of the life they lived, once they're gone there's usually nothing left behind

After

Tupe now has a small, permanent world to be remembered in, a personal reminder that even a stray cat's life and affection deserve to be honored

Performance

Slow-Loading Pages From Unoptimized Images

Before

High-resolution images across the site, not just one section, risked slowing down every page

After

Every image across the site is compressed to WebP and kept under 200KB, keeping pages fast without a visible drop in quality

Improvement

Flat Movement Without a Sense of Direction

Before

The character only had a single static sprite regardless of which way it moved

After

Added directional sprites (front, back, side) for both the player and the cat companion, giving movement a proper sense of life

Improvement

Characters Slipping Through Gaps Between Trees

Before

A single circle collision per tree still let the player squeeze through narrow diagonal gaps where trees stood close together

After

Added connecting segment walls between nearby trunks, closing every gap a single circle could miss, so movement now feels solid and grounded