Game Engine
GitHubOfficialFirst committed by jhaugaDistributed by GitHub
- Skill
- Tool integration
- Software development
- MIT
- No issues found
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
The Game Engine skill provides a structured approach to developing interactive 2D and 3D games for the web. It covers the entire lifecycle of game development, from core engine architecture—such as the game loop and rendering pipelines—to specific implementations of physics, collision detection, and input handling. The skill includes reference documentation on web APIs, algorithms, and 3D theory, alongside practical templates for common game types like platformers and maze games.
What it does
- Provides workflows for building game engines and games from scratch.
- Explains core concepts like game loops, rendering, and physics.
- Offers reference material for WebGL, Canvas, and Web Audio APIs.
- Includes starter templates for 2D platformers and breakout-style games.
- Covers advanced topics like raycasting, collision detection, and multiplayer networking.
- Guides users through asset optimization and game publishing.
When to use it
- When you need to build a web-based game or a custom game engine.
- When implementing game mechanics like physics, collision, or input controls.
- When you need to understand 3D rendering pipelines or WebGL fundamentals.
- When you are looking for starter code for 2D or 3D web game projects.
- When you need to optimize game performance or handle cross-browser audio issues.
Advantages
- Centralizes essential game development knowledge for the web.
- Provides ready-to-use templates to accelerate project setup.
- Offers clear, step-by-step procedures for common game development tasks.
- Includes troubleshooting guides for common rendering and performance issues.
- Supports both 2D (Canvas) and 3D (WebGL/Three.js) development workflows.
Usage examples
- “How do I set up a basic game loop using requestAnimationFrame?”
- The agent provides a code structure that initializes a canvas, defines an update function for game logic, and a render function for drawing, tied together by a recursive requestAnimationFrame call.
- “Can you help me implement AABB collision detection for my 2D platformer?”
- The agent explains the Axis-Aligned Bounding Box algorithm and provides a JavaScript function to check if two rectangular objects overlap.
- “What are the steps to publish my web game?”
- The agent outlines a checklist including asset compression, code minification, cross-browser testing, and choosing a distribution platform.
Install
Download the skill as a ZIP:
https://autogineer.com/agent-skills/github/game-engine/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip game-engine.zip -d .agents/skills
Documentation by jhauga
Game Engine Skill
Build web-based games and game engines using HTML5 Canvas, WebGL, and JavaScript. This skill includes starter templates, reference documentation, and step-by-step workflows for 2D and 3D game development with frameworks such as Phaser, Three.js, Babylon.js, and A-Frame.
When to Use This Skill
Building a game engine or game from scratch using web technologies
Implementing game loops, physics, collision detection, or rendering
Working with HTML5 Canvas, WebGL, or SVG for game graphics
Adding game controls (keyboard, mouse, touch, gamepad)
Creating 2D platformers, breakout-style games, maze games, or 3D experiences
Working with tilemaps, sprites, or animations
Adding audio to web games
Implementing multiplayer features with WebRTC or WebSockets
Optimizing game performance
Publishing and distributing web games
Prerequisites
Basic knowledge of HTML, CSS, and JavaScript
A modern web browser with Canvas/WebGL support
A text editor or IDE
Optional: Node.js for build tooling and local development servers
Core Concepts
The following concepts form the foundation of every web-based game engine.
Game Loop
Every game engine revolves around the game loop -- a continuous cycle of:
Process Input - Read keyboard, mouse, touch, or gamepad input
Update State - Update game object positions, physics, AI, and logic
Render - Draw the current game state to the screen
Use requestAnimationFrame for smooth, browser-optimized rendering.
Rendering
Canvas 2D - Best for 2D games, sprite-based rendering, and tilemaps
WebGL - Hardware-accelerated 3D and advanced 2D rendering
SVG - Vector-based graphics, good for UI elements
CSS - Useful for DOM-based game elements and transitions
Physics and Collision Detection
2D Collision Detection - AABB, circle, and SAT-based collision
3D Collision Detection - Bounding box, bounding sphere, and raycasting
Velocity and Acceleration - Basic Newtonian physics for movement
Gravity - Constant downward acceleration for platformers
Controls
Keyboard - Arrow keys, WASD, and custom key bindings
Mouse - Click, move, and pointer lock for FPS-style controls
Touch - Mobile touch events and virtual joysticks
Gamepad - Gamepad API for controller support
Audio
Web Audio API - Programmatic sound generation and spatial audio
HTML5 Audio - Simple audio playback for music and sound effects
Step-by-Step Workflows
Creating a Basic 2D Game
Set up an HTML file with a
<canvas>elementGet the 2D rendering context
Implement the game loop using
requestAnimationFrameCreate game objects with position, velocity, and size properties
Handle keyboard/mouse input for player control
Implement collision detection between game objects
Add scoring, lives, and win/lose conditions
Add sound effects and music
Building a 3D Game
Choose a framework (Three.js, Babylon.js, A-Frame, or PlayCanvas)
Set up the scene, camera, and renderer
Load or create 3D models and textures
Implement lighting and shaders
Add physics and collision detection
Implement player controls and camera movement
Add audio and visual effects
Publishing a Game
Optimize assets (compress images, minify code)
Test across browsers and devices
Choose distribution platform (web, app stores, game portals)
Implement monetization if needed
Promote through game communities and social media
Game Templates
Starter templates are available in the assets/ folder. Each template provides a complete, working example that can be used as a starting point for a new project.
| Template | Description |
|---|---|
paddle-game-template.md | 2D Breakout-style game with pure JavaScript |
2d-maze-game.md | Maze game with device orientation controls |
2d-platform-game.md | Platformer game using Phaser framework |
gameBase-template-repo.md | Game base template repository structure |
simple-2d-engine.md | Simple 2D platformer engine with collisions |
Reference Documentation
Detailed reference material is available in the references/ folder. Consult these files for in-depth coverage of specific topics.
| Reference | Topics Covered |
|---|---|
basics.md | Game development introduction and anatomy |
web-apis.md | Canvas, WebGL, Web Audio, Gamepad, and other web APIs |
techniques.md | Collision detection, tilemaps, async scripts, audio |
3d-web-games.md | 3D theory, frameworks, shaders, WebXR |
game-control-mechanisms.md | Touch, keyboard, mouse, and gamepad controls |
game-publishing.md | Distribution, promotion, and monetization |
algorithms.md | Raycasting, collision, physics, vector math |
terminology.md | Game development glossary |
game-engine-core-principles.md | Core design principles for game engines |
Troubleshooting
| Issue | Solution |
|---|---|
| Canvas is blank | Check that you are calling drawing methods after getting the context and inside the game loop |
| Game runs at different speeds | Use delta time in update calculations instead of fixed values |
| Collision detection is inconsistent | Use continuous collision detection or reduce time steps for fast-moving objects |
| Audio does not play | Browsers require user interaction before playing audio; trigger playback from a click handler |
| Performance is poor | Profile with browser dev tools, reduce draw calls, use object pooling, and optimize asset sizes |
| Touch controls are unresponsive | Prevent default touch behavior and handle touch events separately from mouse events |
| WebGL context lost | Handle the webglcontextlost event and restore state on webglcontextrestored |
Files
- ATTRIBUTION.mdAdded by AutoGineer851 B
- LICENSELicence file added by AutoGineer1.0 KiB
- SKILL.md6.2 KiB
- assets/2d-maze-game.md13.0 KiB
- assets/2d-platform-game.md58.2 KiB
- assets/gameBase-template-repo.md9.9 KiB
- assets/paddle-game-template.md38.4 KiB
- assets/simple-2d-engine.md14.0 KiB
- references/3d-web-games.md23.9 KiB
- references/algorithms.md24.5 KiB
- references/basics.md10.9 KiB
- references/game-control-mechanisms.md19.1 KiB
- references/game-engine-core-principles.md21.6 KiB
- references/game-publishing.md13.7 KiB
- references/techniques.md27.4 KiB
- references/terminology.md19.4 KiB
- references/web-apis.md51.4 KiB
assets/gameBase-template-repo.md
GameBase Template Repository
A feature-rich, opinionated starter template for 2D game projects built with Haxe and the Heaps game engine. Created and maintained by Sebastien Benard (deepnight), the lead developer behind Dead Cells. GameBase provides a production-tested foundation with entity management, level integration via LDtk, rendering pipeline, and a game loop architecture -- all designed to let developers skip boilerplate and jump straight into game-specific logic.
Repository: github.com/deepnight/gameBase Author: Sebastien Benard / deepnight Technology: Haxe + Heaps (HashLink or JS targets) Level editor integration: LDtk
Purpose
GameBase exists to solve the "blank project" problem. Instead of setting up rendering, entity systems, camera controls, debug overlays, and level loading from scratch, developers clone this repository and begin implementing game-specific mechanics immediately. It reflects patterns refined through commercial game development, particularly from the development of Dead Cells.
Key benefits:
Pre-built entity system with grid-based positioning and sub-pixel precision
LDtk level editor integration for visual level design
Built-in debug tools and overlays
Frame-rate independent game loop with fixed-step updates
Camera system with follow, shake, zoom, and clamp
Configurable Controller/input management
Scalable rendering pipeline with Heaps
Repository Structure
gameBase/
src/
game/
App.hx -- Application entry point and initialization
Game.hx -- Main game process, holds level and entities
Entity.hx -- Base entity class with grid coords, velocity, animation
Level.hx -- Level loading and collision map from LDtk
Camera.hx -- Camera follow, shake, zoom, clamping
Fx.hx -- Visual effects (particles, flashes, etc.)
Types.hx -- Enums, typedefs, and constants
en/
Hero.hx -- Player entity (example implementation)
Mob.hx -- Enemy entity (example implementation)
import.hx -- Global imports (available everywhere)
res/
atlas/ -- Sprite sheets and texture atlases
levels/ -- LDtk level project files
fonts/ -- Bitmap fonts
.ldtk -- LDtk project file (root)
build.hxml -- Haxe compiler configuration
Makefile -- Build/run shortcuts
README.mdKey Files and Their Roles
src/game/App.hx -- Application Entry Point
The main application class that extends dn.Process. Handles:
Window/display initialization
Scene management (root scene graph)
Global input controller setup
Debug toggle and console
class App extends dn.Process {
public static var ME : App;
override function init() {
ME = this;
// Initialize rendering, controller, assets
new Game();
}
}src/game/Game.hx -- Game Process
Manages the active game session:
Holds reference to the current
LevelManages all active
Entityinstances (via a global linked list)Handles pause, game-over, and restart logic
Coordinates camera and effects
class Game extends dn.Process {
public var level : Level;
public var hero : en.Hero;
public var fx : Fx;
public var camera : Camera;
public function new() {
super(App.ME);
level = new Level();
fx = new Fx();
camera = new Camera();
hero = new en.Hero();
}
}src/game/Entity.hx -- Base Entity
The core entity class featuring:
Grid-based positioning:
cx,cy(integer cell coordinates) plusxr,yr(sub-cell ratio 0.0 to 1.0) for smooth sub-pixel movementVelocity and friction:
dx,dy(velocity) with configurablefrictX,frictYGravity: Optional per-entity gravity
Sprite management: Animated sprite via Heaps
h2d.Animordn.heaps.HSpriteLifecycle:
update(),fixedUpdate(),postUpdate(),dispose()Collision helpers:
hasCollision(cx, cy)check against the level collision map
class Entity {
// Grid position
public var cx : Int = 0; // Cell X
public var cy : Int = 0; // Cell Y
public var xr : Float = 0.5; // X ratio within cell (0..1)
public var yr : Float = 1.0; // Y ratio within cell (0..1)
// Velocity
public var dx : Float = 0;
public var dy : Float = 0;
// Pixel position (computed)
public var attachX(get,never) : Float;
inline function get_attachX() return (cx + xr) * Const.GRID;
public var attachY(get,never) : Float;
inline function get_attachY() return (cy + yr) * Const.GRID;
// Physics step
public function fixedUpdate() {
xr += dx;
dx *= frictX;
// X collision
if (xr > 1) { cx++; xr--; }
if (xr < 0) { cx--; xr++; }
yr += dy;
dy *= frictY;
// Y collision
if (yr > 1) { cy++; yr--; }
if (yr < 0) { cy--; yr++; }
}
}src/game/Level.hx -- Level Management
Loads and manages level data from LDtk project files:
Parses tile layers, entity layers, and int grid layers
Builds a collision grid (
hasCollision(cx, cy))Provides helper methods to query the level structure
class Level {
var data : ldtk.Level;
var collisions : Map<Int, Bool>;
public function new(ldtkLevel) {
data = ldtkLevel;
// Parse IntGrid layer for collision marks
for (cy in 0...data.l_Collisions.cHei)
for (cx in 0...data.l_Collisions.cWid)
if (data.l_Collisions.getInt(cx, cy) == 1)
collisions.set(coordId(cx, cy), true);
}
public inline function hasCollision(cx:Int, cy:Int) : Bool {
return collisions.exists(coordId(cx, cy));
}
}src/game/Camera.hx -- Camera System
Provides:
Target tracking: Follow an entity smoothly with configurable dead zones
Shake: Screen shake with decay
Zoom: Dynamic zoom in/out
Clamping: Keep the camera within level bounds
src/game/Fx.hx -- Effects System
Particle and visual effect management:
Particle pools
Screen flash
Slow-motion helpers
Color overlay effects
Technology Stack
Haxe
A cross-platform, high-level programming language that compiles to multiple targets:
HashLink (HL): Native bytecode VM for desktop (primary dev target)
JavaScript (JS): Browser/web target
C/C++: Via HXCPP for native builds
Heaps (Heaps.io)
A high-performance, cross-platform 2D/3D game engine:
GPU-accelerated rendering via OpenGL/DirectX/WebGL
Scene graph architecture with
h2d.ObjecthierarchySprite batching and texture atlases
Bitmap font rendering
Input abstraction
LDtk
A modern, open-source 2D level editor created by Sebastien Benard:
Visual, tile-based level design
IntGrid layers for collision and metadata
Entity layers for game object placement
Auto-tiling rules
Haxe API auto-generated from the project file
Setup Instructions
Prerequisites
Install Haxe (4.0+): haxe.org
Install HashLink (for desktop target): hashlink.haxe.org
Install LDtk (for level editing): ldtk.io
Getting Started
# Clone the repository
git clone https://github.com/deepnight/gameBase.git my-game
cd my-game
# Install Haxe dependencies
haxelib install heaps
haxelib install deepnightLibs
haxelib install ldtk-haxe-api
# Build and run (HashLink target)
haxe build.hxml
hl bin/client.hl
# Or use the Makefile (if available)
make runUsing as a Starting Point
Clone or use the template -- Do not fork; clone into a new directory with your game's name.
Rename the package -- Update
src/game/package declarations and project references to match your game.Edit
build.hxml-- Adjust the main class, output path, and target as needed.Design levels in LDtk -- Open the
.ldtkfile, define your layers and entities, and export.Implement entities -- Create new entity classes in
src/game/en/extendingEntity.Iterate -- Use the debug console (toggle in-game) for live inspection and tuning.
Build Targets
| Target | Command | Output | Use Case |
|---|---|---|---|
| HashLink | haxe build.hxml | bin/client.hl | Development, desktop release |
| JavaScript | haxe build.js.hxml | bin/client.js | Web/browser builds |
| DirectX/OpenGL | Via HL native | Native executable | Production desktop release |
Debug Features
GameBase includes built-in debug tooling:
Debug overlay: Toggle with a key to show entity bounds, grid, velocities, collision map
Console: In-game command console for toggling flags, teleporting, spawning entities
FPS counter: Visible frame-rate and update-rate monitor
Process inspector: View active processes and their hierarchy
Game Loop Architecture
GameBase uses a fixed-timestep game loop pattern:
Each frame:
1. preUpdate() -- Input polling, pre-frame logic
2. fixedUpdate() -- Physics, movement, collisions (fixed timestep)
- May run 0-N times per frame to catch up
3. update() -- General per-frame logic
4. postUpdate() -- Sprite position sync, camera update, rendering prepThis ensures physics behavior is consistent regardless of frame rate, while rendering and visual updates remain smooth.
Entity Lifecycle
Constructor --> init() --> [game loop: fixedUpdate/update/postUpdate] --> dispose()Constructor: Set initial position, create sprite, register in global entity list
fixedUpdate(): Physics step (velocity, friction, gravity, collision)
update(): AI, state machine, animation triggers
postUpdate(): Sync sprite position to grid coordinates, apply visual effects
dispose(): Remove from entity list, destroy sprite, clean up references
Requirements and compatibility
Written for: GitHub Copilot
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Security
No issues found by our static scan· No issues found
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- First committed by
jhauga
- Publisher
- GitHub (Official)
- Distributed by
- GitHub
- Source
- github/awesome-copilot · skills/game-engine · commit 797337f
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
- Contributors
- jhauga
AutoGineer is not affiliated with or endorsed by jhauga or GitHub.
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download game-engine.zip