Game Engine Agent Skill

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 |