Getting Started & Installation
Relevant source files
The following files were used as context for generating this wiki page:
Kilo Man is a 2D side-scrolling platformer built using a modern web stack centered on Next.js 15 and React 19. The project leverages HTML5 Canvas for game rendering and physics, combined with Tailwind CSS v4 for UI layout and styling. The architecture is designed to support a "3D-seeming" aesthetic through advanced canvas techniques and parallax backgrounds.
Sources: architecture_plan.md:1-7, package.json:11-15
System Requirements & Prerequisites
Before installing the project, ensure your environment meets the following technology requirements:
| Requirement | Specification |
|---|---|
| Node.js Runtime | Compatible with Next.js 15 (typically v18.17.0 or later) |
| Package Manager | npm, yarn, pnpm, or bun |
| Development Language | TypeScript 5.x |
| Core Framework | Next.js 15.0.3, React 19.0.0-rc |
Sources: package.json:11-25, tsconfig.json:3-20, README.md:5-13
Installation & Local Development
The project is bootstrapped with create-next-app and uses standard Next.js scripts for lifecycle management.
1. Repository Setup
Clone the repository and install dependencies using your preferred package manager:
npm install
# or
yarn install
Sources: README.md:1-13, package.json:11-25
2. Running the Development Server
Execute the following command to start the local development environment:
npm run dev
Once started, the application is accessible at http://localhost:3000. The development server supports Hot Module Replacement (HMR), meaning the page updates automatically as you modify files like app/page.tsx.
Sources: README.md:5-17
3. Build and Production
To prepare the application for production deployment:
npm run build
npm run start
Sources: package.json:5-10
Architecture Overview
The following diagram illustrates the high-level initialization flow when the application starts:
The application starts at the root page which wraps the GameContainer. This container manages high-level state (GameStatus, Jump Modifiers) and coordinates between the GameCanvas (rendering engine) and UIOverlay (user interface).
Sources: app/page.tsx:1-8, app/layout.tsx:18-35, architecture_plan.md:11-22
Core Configuration
The project uses a standard TypeScript and Next.js configuration to ensure type safety and optimized builds.
TypeScript Configuration
The project is configured with strict type checking and uses the "bundler" module resolution.
- Target: ES2017
- JSX: Preserve (handled by Next.js)
- Path Aliases:
@/*maps to the root directory for cleaner imports.
Sources: tsconfig.json:3-28
Styling & Theme
Styling is managed via Tailwind CSS v4 with the @tailwindcss/postcss plugin. Global styles include font optimizations for the Inter and Geist font families.
- Font Sans: Geist Sans
- Font Mono: Geist Mono
- Global Constraints:
htmlandbodyare set toheight: 100%andoverflow: hiddento facilitate a full-screen game canvas.
Sources: app/globals.css:1-35, app/layout.tsx:5-16, package.json:18-24
Project Scripts Reference
| Script | Command | Purpose |
|---|---|---|
dev | next dev | Starts development server with HMR |
build | next build | Compiles application for production |
start | next start | Runs the built production application |
lint | eslint | Performs static analysis for code quality |
Sources: package.json:5-10
Conclusion
Setting up the Kilo Man project involves standard Next.js procedures. Once installed, the game engine relies on the interplay between React state management and a high-performance HTML5 Canvas game loop, all structured within the Next.js app router architecture.
Sources: architecture_plan.md:1-22, README.md:1-17