Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Developer Tools
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, im...
skill openclawclawhub Free
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, im...
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- assets/2d-maze-game.md, assets/2d-platform-game.md, assets/gameBase-template-reop.md, assets/paddle-game-template.md, assets/simple-2d-engine.md, references/3d-web-games.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- jhauga
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
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
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. TemplateDescriptionpaddle-game-template.md2D Breakout-style game with pure JavaScript2d-maze-game.mdMaze game with device orientation controls2d-platform-game.mdPlatformer game using Phaser frameworkgameBase-template-reop.mdGame base template repository structuresimple-2d-engine.mdSimple 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. ReferenceTopics Coveredbasics.mdGame development introduction and anatomyweb-apis.mdCanvas, WebGL, Web Audio, Gamepad, and other web APIstechniques.mdCollision detection, tilemaps, async scripts, audio3d-web-games.md3D theory, frameworks, shaders, WebXRgame-control-mechanisms.mdTouch, keyboard, mouse, and gamepad controlsgame-publishing.mdDistribution, promotion, and monetizationalgorithms.mdRaycasting, collision, physics, vector mathterminology.mdGame development glossarygame-engine-core-principals.mdCore design principles for game engines
Troubleshooting
IssueSolutionCanvas is blankCheck that you are calling drawing methods after getting the context and inside the game loopGame runs at different speedsUse delta time in update calculations instead of fixed valuesCollision detection is inconsistentUse continuous collision detection or reduce time steps for fast-moving objectsAudio does not playBrowsers require user interaction before playing audio; trigger playback from a click handlerPerformance is poorProfile with browser dev tools, reduce draw calls, use object pooling, and optimize asset sizesTouch controls are unresponsivePrevent default touch behavior and handle touch events separately from mouse eventsWebGL context lostHandle the webglcontextlost event and restore state on webglcontextrestored
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
6 Docs
- assets/2d-maze-game.md
- assets/2d-platform-game.md
- assets/gameBase-template-reop.md
- assets/paddle-game-template.md
- assets/simple-2d-engine.md
- references/3d-web-games.md