🚀 快速安装
复制以下命令并运行，立即安装此 Skill：
npx @anthropic-ai/skills install github/awesome-copilot/game-engine💡 提示：需要 Node.js 和 NPM
游戏引擎技能
使用 HTML5 Canvas、WebGL 和 JavaScript 构建基于 Web 的游戏和游戏引擎。此技能包括入门模板、参考文档以及使用 Phaser、Three.js、Babylon.js 和 A-Frame 等框架进行 2D 和 3D 游戏开发的分步工作流程。
何时使用此技能
- 使用 Web 技术从头开始构建游戏引擎或游戏
- 实现游戏循环、物理、碰撞检测或渲染
- 使用 HTML5 Canvas、WebGL 或 SVG 进行游戏图形渲染
- 添加游戏控制（键盘、鼠标、触摸、手柄）
- 创建 2D 平台游戏、打砖块风格的游戏、迷宫游戏或 3D 体验
- 使用瓦片地图、精灵或动画
- 为网页游戏添加音频
- 使用 WebRTC 或 WebSockets 实现多人游戏功能
- 优化游戏性能
- 发布和分发网页游戏
先决条件
- HTML、CSS 和 JavaScript 的基础知识
- 支持 Canvas/WebGL 的现代网页浏览器
- 文本编辑器或 IDE
- 可选：用于构建工具和本地开发服务器的 Node.js
核心概念
以下概念构成了每个基于 Web 的游戏引擎的基础。
游戏循环
每个游戏引擎都围绕着游戏循环——一个持续的循环：
- 处理输入 – 读取键盘、鼠标、触摸或手柄输入
- 更新状态 – 更新游戏对象的位置、物理状态、AI 和逻辑
- 渲染 – 将当前游戏状态绘制到屏幕上
使用 requestAnimationFrame 实现流畅、浏览器优化的渲染。
渲染
- Canvas 2D – 最适合 2D 游戏、基于精灵的渲染和瓦片地图
- WebGL – 硬件加速的 3D 和高级 2D 渲染
- SVG – 基于矢量的图形，适合 UI 元素
- CSS – 对于基于 DOM 的游戏元素和过渡很有用
物理和碰撞检测
- 2D 碰撞检测 – 基于 AABB、圆形和 SAT 的碰撞
- 3D 碰撞检测 – 包围盒、包围球和光线投射
- 速度和加速度 – 用于移动的基本牛顿物理学
- 重力 – 平台游戏中恒定的向下加速度
控制
- 键盘 – 方向键、WASD 和自定义键位绑定
- 鼠标 – 点击、移动和用于 FPS 风格控制的指针锁定
- 触摸 – 移动触摸事件和虚拟摇杆
- 手柄 – 用于控制器支持的游戏手柄 API
音频
- Web Audio API – 程序化声音生成和空间音频
- HTML5 Audio – 用于音乐和音效的简单音频播放
分步工作流程
创建一个基本的 2D 游戏
- 设置一个包含
<canvas>元素的 HTML 文件 - 获取 2D 渲染上下文
- 使用
requestAnimationFrame实现游戏循环 - 创建具有位置、速度和大小属性的游戏对象
- 处理键盘/鼠标输入以实现玩家控制
- 实现游戏对象之间的碰撞检测
- 添加得分、生命值和胜利/失败条件
- 添加音效和音乐
构建一个 3D 游戏
- 选择一个框架（Three.js、Babylon.js、A-Frame 或 PlayCanvas）
- 设置场景、相机和渲染器
- 加载或创建 3D 模型和纹理
- 实现光照和着色器
- 添加物理和碰撞检测
- 实现玩家控制和相机移动
- 添加音频和视觉效果
发布游戏
- 优化资源（压缩图像、压缩代码）
- 跨浏览器和设备进行测试
- 选择分发平台（网页、应用商店、游戏门户）
- 如果需要，实现盈利模式
- 通过游戏社区和社交媒体进行推广
游戏模板
入门模板位于 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 时恢复状态 |
📄 原始文档
完整文档（英文）：
https://skills.sh/github/awesome-copilot/game-engine
💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)