🌿 EcoQuest: Waste Warrior

"Sort waste. Save Earth. Level up." 🌍

A 2D pixel-art RPG built with the Maki framework where you play as Lia, a waste-sorting hero on a mission to clean up 3 increasingly challenging levels and save the planet.

💡 Inspiration

Waste mismanagement is one of the most overlooked everyday problems — most people genuinely don't know which bin a battery or a milk carton belongs in. We wanted to tackle that knowledge gap in the most engaging way possible: a game.

The Maki Hackathon gave us the perfect excuse to build something that's fun first and educational second. We drew inspiration from classic top-down RPGs like early Pokémon — familiar movement, tiled worlds, a sense of progression — but replaced combat with something that actually matters in real life: sorting your trash correctly.

🎮 What It Does

EcoQuest drops you into a tiled map — a City Park, an EcoSchool, or an Eco Factory — scattered with waste items. Your job is simple:

Walk over waste to pick it up automatically
Carry it to the correct bin to sort it
Don't run out of time or hearts ❤️

Sort correctly and you earn XP and build up a combo multiplier (x2 → x3 → x4). Sort into the wrong bin and you lose a heart. Three wrong sorts and it's game over.

Each level introduces a new bin category, ramping up the challenge:

Level	Setting	Bins
1	🌳 City Park	DRY ♻️, WET 🌿
2	🏫 EcoSchool	+ HAZARD ☢️
3	🏭 Eco Factory	+ E-WASTE 🔌

After each level you get a grade (S / A / B / C / D) based on your accuracy, and a final Victory screen wraps up the run.

🛠️ How We Built It

The game is built entirely in JavaScript (ES Modules) using two main technologies:

Maki Framework (@tialops/maki) is the backbone. It sits on top of Phaser and handles the RPG-specific heavy lifting — loading Tiled JSON maps, registering player sprites, and extracting collision walls from the map's tile layers. We used its Scene base class, manager singleton, and this.maki.player() API throughout.

Phaser 4 handles the actual rendering, arcade physics, input, camera, and tweens. Because Maki extends Phaser rather than replacing it, we could drop down to raw Phaser APIs whenever we needed fine-grained control.

The architecture is built around a single BaseGameScene that holds all shared game logic — waste spawning, bin collision detection, HUD, combo system, hearts — and thin Level*Scene subclasses that only declare a map key and level config. This kept each level file under ~60 lines.

Maps were designed in Tiled Map Editor and exported as JSON. Maki loads them automatically — no manual tile parsing needed.

🚧 Challenges We Ran Into

Collision detection between player and items/bins was trickier than expected. Since both waste items and bins are dynamically spawned game objects (not tilemap layers), we had to roll our own proximity-based detection each frame rather than relying on Maki's built-in wall colliders.

HUD layering caused a lot of overlap issues early on. Getting the top bar, bottom bar, hearts, combo display, held-item indicator, and timer to all sit correctly over the scrolling camera required careful use of setScrollFactor(0) and setDepth() constants.

Balancing the levels took more iteration than expected. Time limits and spawn rates that felt fair in testing felt brutal (or too easy) in practice, especially as the number of bin categories grew.

🏆 Accomplishments We're Proud Of

A fully playable 3-level game loop with title, level-complete, game-over, and victory screens — all within the hackathon window
A combo + XP system that actually makes correct sorting feel rewarding
Clean scene architecture that made adding levels trivial — Level 2 and 3 are each ~30 lines
Emoji-based textures generated at runtime — no external sprite sheet needed for waste items or bins, keeping the asset bundle tiny
A grade system (S/A/B/C/D) that gives players a reason to replay and improve

📚 What We Learned

Maki makes map-driven RPG scenes genuinely fast to set up. manager.map() + manager.getWallGroup() saved us hours of Tiled integration boilerplate.
Phaser's arcade physics is powerful but requires discipline — it's easy to accidentally create physics bodies that interact in unexpected ways when you're spawning and destroying objects frequently.
Game feel is hard. The mechanics on paper (walk → pick up → drop in bin) are trivially simple, but making them feel satisfying required a lot of small tweaks: pickup animation, combo flash, screen shake on wrong sort, smooth camera lerp.
Scope control is everything in a hackathon. We cut a multiplayer mode, a shop system, and a full dialogue system to ship a polished single-player experience instead.

🔭 What's Next for EcoQuest

More levels — outdoor markets, beaches, hospitals, each with unique waste categories
NPC dialogue — characters who teach sorting rules in-world, turning the game into a genuine educational tool
Mobile support — virtual joystick and touch-friendly UI so it's playable on phones
Leaderboard — global high scores per level to drive replayability
Accessibility options — colorblind-friendly bin colours, adjustable text size
Localisation — waste sorting rules differ by country; region-specific rule sets would make the game genuinely useful worldwide