Welcome to the first part of this series on Banana, a 2D top-down railway simulator built with React and PixiJS.
What is Banana?
Banana is a browser-based railway simulation game where you can design and operate your own rail network. You lay tracks, place stations, build train formations, and watch them run on schedules — all rendered in real-time on an infinite canvas.
Inspiration
The project draws inspiration from games like:
- NIMBY Rails — for its track layout and network planning
- A-Train — for its city-building and timetable management
- Transport Fever — for its train formation and physics
Tech Stack
- React 19 with TypeScript for the UI layer
- PixiJS 8 for high-performance 2D WebGL rendering
- Vite as the build tool
- Tailwind CSS and Radix UI for styling and components
- i18next for internationalization (English and Traditional Chinese)
- Custom internal packages from the
@ue-toomonorepo for canvas, curves, math, and animation
What This Series Covers
Over the next 10 parts, we will walk through every major feature of Banana:
- Introduction & Overview (this article)
- Track System
- Terrain
- Trains & Formations
- Train Physics & Movement
- Stations & Buildings
- Timetables & Scheduling
- Camera & Navigation
- Serialization & Import/Export
- Debug Tools & Performance
Let's get started!