Fonts & Assets
Relevant source files
The following files were used as context for generating this wiki page:
The Fonts & Assets system in Kilo Man encompasses the configuration of typography via Next.js optimization tools, the management of external image assets, and the implementation of procedurally generated visual elements. The project prioritizes a "3D-seeming" aesthetic achieved through high-performance rendering techniques on an HTML5 Canvas rather than relying heavily on external 3D models or textures.
Sources: architecture_plan.md:5-7, app/layout.tsx:1-12
Typography & Styling
The project utilizes the next/font package to manage typography, ensuring automatic optimization and efficient loading of font families.
Primary Font Configuration
The application uses Inter as its primary font, configured with the Latin subset and assigned to a CSS variable --font-inter for global access. The README.md also references Geist, a font family for Vercel, which is automatically optimized via Next.js.
Sources: app/layout.tsx:4-8, README.md:20-22
Global CSS Variables
The visual theme is supported by CSS variables defined in the root layout and global stylesheet, providing a foundation for consistent coloring and font application across the UI and Canvas overlays.
| Variable | Value/Source | Description |
|---|---|---|
--font-inter | Inter (Google Font) | Primary sans-serif font used for UI text. |
--font-geist-sans | Geist | Optimized sans-serif variant. |
--font-geist-mono | Geist Mono | Optimized monospace variant. |
--background | #ffffff / #0a0a0a | Dynamic background color for light/dark modes. |
--foreground | #171717 / #ededed | Dynamic text color for light/dark modes. |
Sources: app/layout.tsx:4-8, app/globals.css:3-13
Visual Assets
External graphical assets are minimal, as the game utilizes procedural drawing for its main entities. However, critical branding and icon assets are integrated through standard Next.js asset management.
Branding Assets
- KiloLogo.png: This is the primary visual asset used for the application icon and within the game world as a background parallax element.
- Icon Configuration: The logo is defined as the project's favicon in the metadata configuration.
Sources: app/layout.tsx:13-15, app/components/Game/GameCanvas.tsx:75-84
Procedural Asset Generation
Instead of sprite sheets, the "3D-seeming" look is generated at runtime via the Canvas API using gradients and geometric primitives.
This diagram illustrates how external assets (Logo) and procedural instructions (Primitives/Gradients) combine to render game visuals.
Sources: architecture_plan.md:33-45, app/components/Game/GameCanvas.tsx:112-212
Rendering Implementation
Parallax Background Layers
The background system simulates depth by moving different visual layers at varying speeds relative to the camera position.
- Sky: A linear gradient from Dark Blue (
#0f172a) to Deep Purple (#3b0764). - Kilo Logo: Rendered with a low alpha (
0.2) and slow parallax factor (0.05). - Stars/Particles: 50 procedurally generated white squares moving at a factor of
0.1. - Far Mountains: Dark Indigo (
#1e1b4b) shapes moving at a factor of0.2. - Near Hills: Indigo (
#312e81) shapes moving at a factor of0.5.
Sources: app/components/Game/GameCanvas.tsx:112-167
Platform Visuals
Platforms utilize a "2.5D" style. A lighter "Top Face" (#fbbf24) is drawn above a gradient "Front Face" (#d97706 to #92400e) to simulate depth and perspective.
Sources: app/components/Game/GameCanvas.tsx:172-187, architecture_plan.md:40-42
Character Art (Humanoid)
The player character is a humanoid shape composed of geometric primitives:
- Head: Yellow 200 circle.
- Torso/Legs: Yellow 500 rectangles.
- Shadow: A semi-transparent black ellipse (
rgba(0,0,0,0.3)) rendered at the base of the character.
Sources: app/components/Game/GameCanvas.tsx:192-228, architecture_plan.md:44-46
Conclusion
The Fonts & Assets system leverages the Next.js font optimization framework for UI typography while relying on procedural Canvas rendering for game world visuals. This approach ensures high performance and a distinct aesthetic with minimal external dependency on large image or model files.