All SkillsGet Started Free
Game Engine
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.
MCP get_skill({ skillId: "game-engine-0e5fc3ef" })Use this skill with your agent
Create a free account and connect via MCP
# 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: 1. **Process Input** - Read keyboard, mouse, touch, or gamepad input 2. **Update State** - Update game object positions, physics, AI, and logic 3. **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
#github-copilot#game#enginebrowser