Project Overview
This project is a web-based recreation of the classic Pokémon Fire Red game using modern web technologies. It's built with React, Vite, TypeScript, and the Canvas API to simulate the core gameplay mechanics of the original Game Boy Advance game that was a significant part of my childhood.
Currently in its early stages, the project focuses on recreating the movement and exploration aspects of the game, including a faithful recreation of Pallet Town (the starting area in the original game).
Technical Highlights
Custom Game Engine
Built a lightweight game engine using Canvas API and TypeScript to handle rendering, game state, and user input.
Movement System
Implemented grid-based movement with smooth animations and directional character sprites.
Multi-layered Rendering
Created a system for rendering multiple map layers to simulate depth (character can walk behind or in front of objects).
Scene Transitions
Implemented location warping system for entering buildings and transitioning between areas.
Technical Challenges
The most complex aspect of this project was implementing the game's movement and collision systems. Unlike modern game engines that provide these features out of the box, I had to build everything from scratch using the Canvas API:
- Collision Detection: Created a grid-based collision system that checks if the player's next position would intersect with a collidable tile or object.
- Camera System: Implemented a camera that follows the player character while keeping them centered on the screen, with smooth transitions between movements.
- Tile Rendering: Developed an efficient system to render only the tiles visible within the viewport, rather than the entire map, to maintain performance.
- Multi-layered Maps: Created a system that renders map elements in the correct order to simulate depth, allowing the player to walk behind certain objects (like trees) and in front of others.
Personal Connection
Pokémon Fire Red was a significant part of my childhood and sparked my interest in game development. I spent countless hours exploring the world of Kanto, collecting Pokémon, and battling trainers. This project is both a technical challenge and a tribute to a game that influenced my path toward becoming a software engineer.
Lessons Learnt
This project (in it's short lifespan) has taught me about:
- Game Development Fundamentals: Understanding game loops, state management, and the importance of frame rate consistency.
- Canvas API Mastery: Deepening my knowledge of the Canvas API for efficient rendering and manipulation.
- TypeScript for Complex Systems: Using TypeScript's type system to manage complex game state and prevent bugs.
- Performance Optimization: Techniques for optimizing rendering performance in Canvas-based applications.
- Project Architecture: Designing a flexible architecture that can be expanded with new features without requiring major refactoring.
Future Development
This project continues to be a labor of love and a technical playground where I can experiment with game development concepts while paying homage to a game that inspired me.
