SKILL.md
readonly只读
name
game-engine
description
使用HTML5、Canvas、WebGL和JavaScript构建基于Web的游戏引擎和游戏的专家技能。当需要创建游戏、构建游戏引擎、实现游戏物理、处理碰撞检测、设置游戏循环、管理精灵、添加游戏控制或处理2D/3D渲染时使用。涵盖平台游戏、打砖块类游戏、迷宫游戏、瓦片地图、音频、通过WebRTC实现多人游戏以及游戏发布等技术。
游戏引擎技能
使用HTML5 Canvas、WebGL和JavaScript构建基于Web的游戏和游戏引擎。本技能包含入门模板、参考文档以及2D和3D游戏开发的逐步工作流程，支持Phaser、Three.js、Babylon.js和A-Frame等框架。
何时使用本技能
- 使用Web技术从头构建游戏引擎或游戏
- 实现游戏循环、物理、碰撞检测或渲染
- 使用HTML5 Canvas、WebGL或SVG进行游戏图形处理
- 添加游戏控制（键盘、鼠标、触摸、手柄）
- 创建2D平台游戏、打砖块类游戏、迷宫游戏或3D体验
- 处理瓦片地图、精灵或动画
- 为Web游戏添加音频
- 使用WebRTC或WebSockets实现多人游戏功能
- 优化游戏性能
- 发布和分发Web游戏
先决条件
- 基本的HTML、CSS和JavaScript知识
- 支持Canvas/WebGL的现代Web浏览器
- 文本编辑器或IDE
- 可选：用于构建工具和本地开发服务器的Node.js
核心概念
以下概念构成了每个基于Web的游戏引擎的基础。
游戏循环
每个游戏引擎都围绕游戏循环展开——一个连续的循环：
- 处理输入 - 读取键盘、鼠标、触摸或手柄输入
- 更新状态 - 更新游戏对象的位置、物理、AI和逻辑
- 渲染 - 将当前游戏状态绘制到屏幕
使用requestAnimationFrame实现流畅、浏览器优化的渲染。
渲染
- Canvas 2D - 最适合2D游戏、基于精灵的渲染和瓦片地图
- WebGL - 硬件加速的3D和高级2D渲染
- SVG - 基于矢量的图形，适合UI元素
- CSS - 适用于基于DOM的游戏元素和过渡效果
物理和碰撞检测
- 2D碰撞检测 - AABB、圆形和SAT碰撞
- 3D碰撞检测 - 包围盒、包围球和射线投射
- 速度和加速度 - 基本的牛顿物理用于移动
- 重力 - 平台游戏中恒定的向下加速度
控制
- 键盘 - 方向键、WASD和自定义按键绑定
- 鼠标 - 点击、移动和FPS风格控制的指针锁定
- 触摸 - 移动触摸事件和虚拟摇杆
- 手柄 - 用于控制器支持的Gamepad API
音频
- Web Audio API - 程序化声音生成和空间音频
- HTML5 Audio - 简单的音频播放，用于音乐和音效
逐步工作流程
创建基本2D游戏
- 设置一个包含
<canvas>元素的HTML文件 - 获取2D渲染上下文
- 使用
requestAnimationFrame实现游戏循环 - 创建具有位置、速度和大小属性的游戏对象
- 处理键盘/鼠标输入以实现玩家控制
- 实现游戏对象之间的碰撞检测
- 添加得分、生命值和胜负条件
- 添加音效和音乐
构建3D游戏
- 选择一个框架（Three.js、Babylon.js、A-Frame或PlayCanvas）
- 设置场景、相机和渲染器
- 加载或创建3D模型和纹理
- 实现光照和着色器
- 添加物理和碰撞检测
- 实现玩家控制和相机移动
- 添加音频和视觉效果
发布游戏
- 优化资源（压缩图像、精简代码）
- 跨浏览器和设备测试
- 选择分发平台（Web、应用商店、游戏门户）
- 如果需要，实现盈利
- 通过游戏社区和社交媒体推广
游戏模板
入门模板位于assets/文件夹中。每个模板都提供了一个完整的工作示例，可作为新项目的起点。
| 模板 | 描述 |
|---|---|
paddle-game-template.md |
纯JavaScript的2D打砖块风格游戏 |
2d-maze-game.md |
带设备方向控制的迷宫游戏 |
2d-platform-game.md |
使用Phaser框架的平台游戏 |
gameBase-template-repo.md |
游戏基础模板仓库结构 |
simple-2d-engine.md |
带碰撞的简单2D平台游戏引擎 |
参考文档
详细的参考材料位于references/文件夹中。查阅这些文件以深入了解特定主题。
| 参考 | 涵盖主题 |
|---|---|
basics.md |
游戏开发介绍和结构 |
web-apis.md |
Canvas、WebGL、Web Audio、Gamepad和其他Web API |
techniques.md |
碰撞检测、瓦片地图、异步脚本、音频 |
3d-web-games.md |
3D理论、框架、着色器、WebXR |
game-control-mechanisms.md |
触摸、键盘、鼠标和手柄控制 |
game-publishing.md |
分发、推广和盈利 |
algorithms.md |
射线投射、碰撞、物理、向量数学 |
terminology.md |
游戏开发术语表 |
game-engine-core-principles.md |
游戏引擎的核心设计原则 |
故障排除
| 问题 | 解决方案 |
|---|---|
| Canvas为空白 | 检查是否在获取上下文后并在游戏循环内调用绘图方法 |
| 游戏运行速度不同 | 在更新计算中使用增量时间而非固定值 |
| 碰撞检测不一致 | 对快速移动的对象使用连续碰撞检测或减少时间步长 |
| 音频不播放 | 浏览器需要用户交互后才能播放音频；从点击处理程序触发播放 |
| 性能差 | 使用浏览器开发者工具进行性能分析，减少绘制调用，使用对象池，优化资源大小 |
| 触摸控制无响应 | 阻止默认触摸行为，并单独处理触摸事件与鼠标事件 |
| WebGL上下文丢失 | 处理webglcontextlost事件，并在webglcontextrestored时恢复状态 |
