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> element
- Get the 2D rendering context
- Implement the game loop using
requestAnimationFrame
- Create 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 |
Source: github/awesome-copilot → skills/game-engine/SKILL.md
1---2name: game-engine3description: Expert skill for building web-based game engines and games using HTML5, Canvas, WebGL, and JavaScript. Use when asked to create games, build game engines, implement game physics, handle collision detection, set up game loops, manage sprites, add game controls, or work with 2D/3D rendering. Covers techniques for platformers, breakout-style games, maze games, tilemaps, audio, multiplayer via WebRTC, and publishing games.4---5# Game Engine Skill
6
7Build 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.
8
9## When to Use This Skill
10
11- Building a game engine or game from scratch using web technologies
12- Implementing game loops, physics, collision detection, or rendering
13- Working with HTML5 Canvas, WebGL, or SVG for game graphics
14- Adding game controls (keyboard, mouse, touch, gamepad)
15- Creating 2D platformers, breakout-style games, maze games, or 3D experiences
16- Working with tilemaps, sprites, or animations
17- Adding audio to web games
18- Implementing multiplayer features with WebRTC or WebSockets
19- Optimizing game performance
20- Publishing and distributing web games
21
22## Prerequisites
23
24- Basic knowledge of HTML, CSS, and JavaScript
25- A modern web browser with Canvas/WebGL support
26- A text editor or IDE
27- Optional: Node.js for build tooling and local development servers
28
29## Core Concepts
30
31The following concepts form the foundation of every web-based game engine.
32
33### Game Loop
34
35Every game engine revolves around the game loop -- a continuous cycle of:
36
371. **Process Input** - Read keyboard, mouse, touch, or gamepad input
382. **Update State** - Update game object positions, physics, AI, and logic
393. **Render** - Draw the current game state to the screen
40
41Use `requestAnimationFrame` for smooth, browser-optimized rendering.
42
43### Rendering
44
45- **Canvas 2D** - Best for 2D games, sprite-based rendering, and tilemaps
46- **WebGL** - Hardware-accelerated 3D and advanced 2D rendering
47- **SVG** - Vector-based graphics, good for UI elements
48- **CSS** - Useful for DOM-based game elements and transitions
49
50### Physics and Collision Detection
51
52- **2D Collision Detection** - AABB, circle, and SAT-based collision
53- **3D Collision Detection** - Bounding box, bounding sphere, and raycasting
54- **Velocity and Acceleration** - Basic Newtonian physics for movement
55- **Gravity** - Constant downward acceleration for platformers
56
57### Controls
58
59- **Keyboard** - Arrow keys, WASD, and custom key bindings
60- **Mouse** - Click, move, and pointer lock for FPS-style controls
61- **Touch** - Mobile touch events and virtual joysticks
62- **Gamepad** - Gamepad API for controller support
63
64### Audio
65
66- **Web Audio API** - Programmatic sound generation and spatial audio
67- **HTML5 Audio** - Simple audio playback for music and sound effects
68
69## Step-by-Step Workflows
70
71### Creating a Basic 2D Game
72
731. Set up an HTML file with a `<canvas>` element
742. Get the 2D rendering context
753. Implement the game loop using `requestAnimationFrame`
764. Create game objects with position, velocity, and size properties
775. Handle keyboard/mouse input for player control
786. Implement collision detection between game objects
797. Add scoring, lives, and win/lose conditions
808. Add sound effects and music
81
82### Building a 3D Game
83
841. Choose a framework (Three.js, Babylon.js, A-Frame, or PlayCanvas)
852. Set up the scene, camera, and renderer
863. Load or create 3D models and textures
874. Implement lighting and shaders
885. Add physics and collision detection
896. Implement player controls and camera movement
907. Add audio and visual effects
91
92### Publishing a Game
93
941. Optimize assets (compress images, minify code)
952. Test across browsers and devices
963. Choose distribution platform (web, app stores, game portals)
974. Implement monetization if needed
985. Promote through game communities and social media
99
100## Game Templates
101
102Starter 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.
103
104| Template | Description |
105|----------|-------------|
106| `paddle-game-template.md` | 2D Breakout-style game with pure JavaScript |
107| `2d-maze-game.md` | Maze game with device orientation controls |
108| `2d-platform-game.md` | Platformer game using Phaser framework |
109| `gameBase-template-repo.md` | Game base template repository structure |
110| `simple-2d-engine.md` | Simple 2D platformer engine with collisions |
111
112## Reference Documentation
113
114Detailed reference material is available in the `references/` folder. Consult these files for in-depth coverage of specific topics.
115
116| Reference | Topics Covered |
117|-----------|---------------|
118| `basics.md` | Game development introduction and anatomy |
119| `web-apis.md` | Canvas, WebGL, Web Audio, Gamepad, and other web APIs |
120| `techniques.md` | Collision detection, tilemaps, async scripts, audio |
121| `3d-web-games.md` | 3D theory, frameworks, shaders, WebXR |
122| `game-control-mechanisms.md` | Touch, keyboard, mouse, and gamepad controls |
123| `game-publishing.md` | Distribution, promotion, and monetization |
124| `algorithms.md` | Raycasting, collision, physics, vector math |
125| `terminology.md` | Game development glossary |
126| `game-engine-core-principles.md` | Core design principles for game engines |
127
128## Troubleshooting
129
130| Issue | Solution |
131|-------|----------|
132| Canvas is blank | Check that you are calling drawing methods after getting the context and inside the game loop |
133| Game runs at different speeds | Use delta time in update calculations instead of fixed values |
134| Collision detection is inconsistent | Use continuous collision detection or reduce time steps for fast-moving objects |
135| Audio does not play | Browsers require user interaction before playing audio; trigger playback from a click handler |
136| Performance is poor | Profile with browser dev tools, reduce draw calls, use object pooling, and optimize asset sizes |
137| Touch controls are unresponsive | Prevent default touch behavior and handle touch events separately from mouse events |
138| WebGL context lost | Handle the `webglcontextlost` event and restore state on `webglcontextrestored` |
139
140---
141
142**Source:** [`github/awesome-copilot`](https://github.com/github/awesome-copilot) → `skills/game-engine/SKILL.md`
thedixitjain