mcpField
G
game-engine

game-engine

github.com/github开发40.5k13.2k 次安装今天更新
代码仓库

关于 game-engine

面向使用 JavaScript、HTML5 Canvas 和 WebGL 开发游戏及引擎的技能，提供入门模板、参考资料和工作流，涵盖 2D 与 3D 项目。

主要功能

  1. 012D 与 3D 游戏工作流
  2. 02Canvas 和 WebGL 指引
  3. 03物理与碰撞检测技巧
  4. 04输入控制与音频指引
  5. 05入门模板与参考资料

适用场景

  1. 01着手开发浏览器 2D 游戏
  2. 02构建 3D Web 体验
  3. 03添加控制、物理或音频
  4. 04准备发布 Web 游戏

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/github/awesome-copilot --skill game-engine

安装后在 Claude Code 中输入/game-engine确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/
2d-maze-game.md
2d-platform-game.md
gameBase-template-repo.md
paddle-game-template.md
simple-2d-engine.md
references/
3d-web-games.md
algorithms.md
basics.md
game-control-mechanisms.md
game-engine-core-principles.md
game-publishing.md
techniques.md
terminology.md
web-apis.md

详细介绍

游戏引擎技能

使用 HTML5 Canvas、WebGL 和 JavaScript 构建基于 Web 的游戏和游戏引擎。此技能包含入门模板、参考文档，以及使用 Phaser、Three.js、Babylon.js 和 A-Frame 等框架进行 2D 和 3D 游戏开发的分步工作流。

何时使用此技能

  • 使用 Web 技术从零构建游戏引擎或游戏
  • 实现游戏循环、物理、碰撞检测或渲染
  • 使用 HTML5 Canvas、WebGL 或 SVG 处理游戏图形
  • 添加游戏控制（键盘、鼠标、触摸、游戏手柄）
  • 创建 2D 平台跳跃游戏、打砖块类游戏、迷宫游戏或 3D 体验
  • 处理瓦片地图、精灵或动画
  • 为 Web 游戏添加音频
  • 使用 WebRTC 或 WebSockets 实现多人功能
  • 优化游戏性能
  • 发布和分发 Web 游戏

前置条件

  • 具备 HTML、CSS 和 JavaScript 基础知识
  • 支持 Canvas/WebGL 的现代 Web 浏览器
  • 文本编辑器或 IDE
  • 可选：用于构建工具和本地开发服务器的 Node.js

核心概念

以下概念构成了每个基于 Web 的游戏引擎的基础。

游戏循环

每个游戏引擎都围绕游戏循环运行——这是一个持续不断的循环：

  1. 处理输入 - 读取键盘、鼠标、触摸或游戏手柄输入
  2. 更新状态 - 更新游戏对象位置、物理、AI 和逻辑
  3. 渲染 - 将当前游戏状态绘制到屏幕上

使用 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 游戏
  1. 设置一个包含 <canvas> 元素的 HTML 文件
  2. 获取 2D 渲染上下文
  3. 使用 requestAnimationFrame 实现游戏循环
  4. 创建具有位置、速度和尺寸属性的游戏对象
  5. 处理键盘/鼠标输入以控制玩家
  6. 实现游戏对象之间的碰撞检测
  7. 添加得分、生命和胜利/失败条件
  8. 添加音效和音乐
构建 3D 游戏
  1. 选择框架（Three.js、Babylon.js、A-Frame 或 PlayCanvas）
  2. 设置场景、相机和渲染器
  3. 加载或创建 3D 模型和纹理
  4. 实现光照和着色器
  5. 添加物理和碰撞检测
  6. 实现玩家控制和相机移动
  7. 添加音频和视觉效果
发布游戏
  1. 优化资源（压缩图像、压缩代码）
  2. 跨浏览器和设备测试
  3. 选择分发平台（Web、应用商店、游戏门户）
  4. 如有需要，实现变现
  5. 通过游戏社区和社交媒体推广

游戏模板

assets/ 文件夹中提供了入门模板。每个模板都提供了一个完整、可运行的示例，可作为新项目的起点。

模板描述
paddle-game-template.md使用纯 JavaScript 的 2D Breakout 风格游戏
2d-maze-game.md使用设备方向控制的迷宫游戏
2d-platform-game.md使用 Phaser 框架的平台游戏
gameBase-template-repo.md游戏基础模板仓库结构
simple-2d-engine.md带碰撞检测的简单 2D 平台引擎

参考文档

references/ 文件夹中提供了详细的参考材料。查阅这些文件以深入了解特定主题。

参考涵盖主题
basics.md游戏开发简介与剖析
web-apis.mdCanvas、WebGL、Web Audio、Gamepad 及其他 Web API
techniques.md碰撞检测、瓦片地图、异步脚本、音频
3d-web-games.md3D 理论、框架、着色器、WebXR
game-control-mechanisms.md触摸、键盘、鼠标和游戏手柄控制
game-publishing.md分发、推广和变现
algorithms.md射线投射、碰撞、物理、向量数学
terminology.md游戏开发术语表
game-engine-core-principles.md游戏引擎的核心设计原则

故障排除

问题解决方案
Canvas 是空白的检查你是否在获取上下文之后、并在游戏循环内部调用绘制方法
游戏运行速度不一致在更新计算中使用增量时间，而不是固定值
碰撞检测不一致对快速移动的对象使用连续碰撞检测或减小时间步长
音频不播放浏览器要求用户交互后才能播放音频；从点击处理程序中触发播放
性能较差使用浏览器开发工具进行分析，减少绘制调用，使用对象池，并优化资源大小
触摸控制无响应阻止默认触摸行为，并将触摸事件与鼠标事件分开处理
WebGL 上下文丢失处理 webglcontextlost 事件，并在 webglcontextrestored 时恢复状态

评论

支持 Markdown