尧图网页设计 
AG Kit 网页游戏开发指南框架选型、WebGPU 迁移与浏览器性能优化实战【免费下载链接】ag-kit项目地址: https://gitcode.com/GitHub_Trending/an/ag-kit本文聚焦 AG Kit 技能体系中.agents/skills/game-development/web-games/SKILL.md所沉淀的浏览器游戏开发原则覆盖 2D/3D 框架选型决策、WebGPU 采纳策略、性能优化优先级、资产压缩与加载管线、PWA 化改造以及音频处理等完整环节。读完本文你将掌握一套可直接指导 AG Kit 内 Agent 编写网页游戏的工程化方法论包括如何按需求选框架、如何判断是否引入 WebGPU、如何为移动网络环境做资产与性能预算以及如何规避最常见的浏览器游戏反模式。1. 框架选型先回答游戏是什么再决定用什么引擎网页游戏开发的第一步不是写代码而是做框架选型。.agents/skills/game-development/web-games/SKILL.md给出的核心原则是由游戏类型驱动框架选择而不是由技术热度驱动。1.1 决策树该技能文档内置的决策树是判断框架的第一入口What type of game? │ ├── 2D Game │ ├── Full game engine features? → Phaser │ └── Raw rendering power? → PixiJS │ ├── 3D Game │ ├── Full engine (physics, XR)? → Babylon.js │ └── Rendering focused? → Three.js │ └── Hybrid / Canvas └── Custom → Raw Canvas/WebGL决策逻辑可以概括为两个问题维度2D 还是 3D定位需要完整引擎能力还是极致的渲染自由度需要场景管理、物理、输入、音频等开箱即用的完整功能选完整引擎2D 用 Phaser3D 用 Babylon.js只想要底层渲染管线、自行组装其余系统选渲染库2D 用 PixiJS3D 用 Three.js游戏形态足够特殊如纯 Canvas 2D 绘制、自定义渲染管线则直接使用原始 Canvas/WebGL。1.2 主流框架横向对比框架类型最佳适用场景Phaser 42D完整游戏功能场景、物理、动画、输入一应俱全PixiJS 82D高性能渲染、UI 层、对渲染原语有强控制需求Three.js3D可视化、轻量级 3D 场景追求最小依赖Babylon.js 73D完整引擎能力含物理、XR 支持1.3 在 AG Kit 中的实际定位从仓库结构看该技能并非孤立存在而是 AG Kit 游戏开发能力树的叶子节点上层编排技能 .agents/skills/game-development/SKILL.md 明确把 Web 浏览器HTML5、WebGL场景路由到game-development/web-games子技能专职角色 .agents/agent/game-developer.md 在其平台选型决策树中同样建议2D 平台跳跃/街机/解谜类若面向 Web 分发使用 Phaser、PixiJS与同族的 2D 技能 .agents/skills/game-development/2d-games/SKILL.md、3D 技能、VR/AR 技能形成先选框架、再按维度深化的调用链路。因此本文档中的决策树实际是 Agent 在开发网页游戏时框架选型阶段的标准入口选完框架后再按需加载 2D/3D 或美术、音频等专项子技能。2. WebGPU 采纳策略新项目默认 WebGPU WebGL 回退WebGPU 是浏览器端新一代图形 API相比 WebGL 提供更接近原生 GPU 的访问能力也是当前网页 3D 渲染的演进方向。2.1 浏览器支持现状该技能文档记录的支持矩阵如下具体版本随浏览器迭代持续推进落地前建议以 caniuse 实时数据复核浏览器支持情况Chrome✅ 自 v113 起Edge✅ 自 v113 起Firefox✅ 自 v131 起Safari✅ 自 18.0 起全球覆盖率合计约 73%2.2 三条采纳决策规则新项目默认采用 WebGPU 渲染并提供 WebGL 作为回退方案兼顾新特性与兼容性存量/老项目遗留支持从 WebGL 起步避免引入破坏性迁移能力检测运行时通过navigator.gpu是否存在来判断当前浏览器是否支持 WebGPU而不是依赖 UA 字符串猜测。2.3 特性检测的落地形态对应到实际代码能力检测通常是这样的结构async function initRenderer() { if (navigator.gpu) { // WebGPU 主路径 const adapter await navigator.gpu.requestAdapter(); const device await adapter.requestDevice(); return createWebGPURenderer(device); } // WebGL 回退路径 const canvas document.getElementById(game); return canvas.getContext(webgl2) || canvas.getContext(webgl); }实践建议不要把 WebGPU 与 WebGL 当作两套完全独立的渲染器来实现。更稳妥的做法是抽象一层渲染后端接口WebGPU 与 WebGL 分别实现同一接口游戏逻辑只依赖接口这样回退切换对业务层透明。3. 性能原则先承认浏览器的约束再谈优化浏览器是一个运行环境受外部强约束的平台性能优化必须从承认这些约束开始。3.1 浏览器环境的核心约束与应对策略约束应对策略无本地文件访问能力资源打包bundling、通过 CDN 分发标签页后台节流tab throttling页面隐藏时暂停游戏循环移动数据流量限制压缩资源体积音频自动播放受限要求用户交互后才能播放3.2 优化优先级由高到低该技能文档给出了明确的优化次序顺序本身就是方法论资产压缩Asset compression— KTX2、Draco、WebP体积是第一位的性能指标压缩在源头省钱懒加载Lazy loading— 按需加载不把首屏不需要的东西提前拉下来对象池Object pooling— 避免 GC减少垃圾回收引起的帧率抖动绘制调用批处理Draw call batching— 减少状态切换合并渲染状态、降低 GPU 提交开销Web Workers— 卸载重计算把寻路、物理预演等 CPU 密集任务移出主线程。3.3 与上层技能的呼应值得注意的是对象池减少绘制调用先 profile 再优化这些原则在上层编排技能 .agents/skills/game-development/SKILL.md 中被提升为跨平台通用准则其性能预算表给出 60 FPS 即 16.67ms 内 Input 1ms、Physics 3ms、AI 2ms、Game Logic 4ms、Rendering 5ms 的分配建议而本文档则把这些原则落到浏览器特有的约束上——例如标签页隐藏必须暂停移动网络必须压缩形成了通用原则 → 平台特化的完整闭环。3.4 页面可见性处理的代码形态Tab throttling → Pause when hidden落实到代码就是监听 visibilitychange 并暂停/恢复游戏主循环document.addEventListener(visibilitychange, () { if (document.hidden) { game.pause(); // 暂停逻辑与渲染 } else { game.resume(); // 恢复注意基于时间戳做 delta 修正 } });4. 资产策略压缩格式与分阶段加载网页游戏的首屏启动体验几乎完全由首包体积决定。4.1 压缩格式选型资产类型推荐格式贴图KTX2 Basis UniversalGPU 可直接解压的超压缩纹理格式音频WebM/Opus回退MP33D 模型glTF Draco/Meshopt 压缩这三组选择分别解决了三个问题KTX2 Basis Universal把贴图压缩到极小体积且 GPU 可直接解压避免 CPU 侧解码开销WebM/Opus是现代浏览器普遍支持的高压缩率音频容器MP3 仅作为老环境回退glTF Draco/Meshopt是 3D 资产生态的标准组合Draco 侧重几何压缩Meshopt 侧重快速解码与流式加载。4.2 分阶段加载策略阶段加载内容启动Startup核心资产控制在2MB 以内游戏进行中Gameplay按需流式加载后台Background预取下一关资源关键约束是启动包必须小于 2MB——这是移动端首屏体验的经验红线。与之配套的是三级加载模型启动阶段只加载能开始玩的最小集合进入玩法阶段后边玩边拉当玩家在当前关卡时利用空闲带宽预取下一关。4.3 懒加载的落地示意对应代码形态资产加载应当按需触发而非一次性全量const assets { level1: [textures/level1.ktx2, models/level1.glb], level2: [textures/level2.ktx2, models/level2.glb], }; async function loadLevel(id) { const group assets[id] ?? []; await Promise.all(group.map(url assetLoader.load(url))); }5. PWA 化让网页游戏可离线、可安装、可全屏PWAProgressive Web App是网页游戏类原生体验的关键工程手段。5.1 收益清单离线游玩弱网/无网环境下依然可启动安装到主屏像原生 App 一样有桌面图标入口全屏模式隐藏浏览器 UI获得沉浸式体验推送通知可触达玩家的二次召回渠道。5.2 三项硬性要求Service Worker负责静态资产与游戏运行时的缓存支撑离线能力Web App Manifest声明名称、图标、主题色、显示模式支撑安装到主屏HTTPSService Worker 等能力仅在安全上下文中可用localhost 除外。5.3 最小可用的 manifest 与 Service WorkerWeb App Manifest 的最小形态{ name: My Web Game, short_name: MyGame, display: fullscreen, start_url: /, icons: [ { src: /icons/icon-192.png, sizes: 192x192, type: image/png }, { src: /icons/icon-512.png, sizes: 512x512, type: image/png } ] }注意display: fullscreen正是全屏模式诉求的直接映射。Service Worker 的缓存骨架配合版本化缓存名便于更新const CACHE game-v1; const CORE_ASSETS [/, /index.html, /game.js, /assets/core.ktx2]; self.addEventListener(install, (e) { e.waitUntil(caches.open(CACHE).then((c) c.addAll(CORE_ASSETS))); }); self.addEventListener(fetch, (e) { e.respondWith( caches.match(e.request).then((hit) hit || fetch(e.request)) ); });实践提示缓存策略应与第 4 节的分阶段加载对齐——核心资产走 cache-first按需加载的关卡资源走 network-first / stale-while-revalidate避免缓存膨胀挤占存储配额。6. 音频处理浏览器音频的三大铁律网页游戏音频最大的特殊性在于浏览器对自动播放的严格限制。6.1 浏览器硬性要求AudioContext 的创建与启动需要用户交互点击/触摸作为前置条件应在首次点击/触摸时创建 AudioContext若 context 处于 suspended 状态需要显式调用 resume。对应代码形态let audioCtx null; document.body.addEventListener(pointerdown, () { if (!audioCtx) { audioCtx new AudioContext(); } else if (audioCtx.state suspended) { audioCtx.resume(); } }, { once: true });6.2 最佳实践清单使用Web Audio API而非旧式 HTML5audio标签做密集音效池化音频源pool audio sources复用 AudioBufferSourceNode避免反复创建带来的 GC 压力预加载常用音效把高频音效提前解码到 AudioBuffer使用 WebM/Opus 压缩与第 4 节资产压缩策略保持一致。这里的池化音频源与第 3 节对象池原则同源——同族技能 .agents/skills/game-development/game-audio/SKILL.md 还给出了更完整的 Web 平台格式建议WebM/OpusMP3 回退以及音频混音层级与 ducking 规则可作为本文档音频部分的纵深参考。7. 反模式清单网页游戏最常见的六个坑❌ 不要做✅ 应该做一次性加载全部资产渐进式加载progressive loading忽略标签页可见性页面隐藏时暂停阻塞在音频加载上懒加载音频跳过压缩所有资产都压缩假设用户网络很快主动处理慢网络逐条解读一次性加载全部资产→ 直接违反第 4 节的 2MB 启动预算首屏白屏时间不可接受忽略标签页可见性→ 后台标签页被节流后游戏循环继续跑恢复时出现时间跳变且白白消耗移动端电量阻塞在音频加载上→ 音频加载不应阻塞游戏启动应异步解码、按需播放跳过压缩→ 在移动数据环境下未压缩资产直接转化为用户流量费用与加载延迟假设网络快→ 需要同时考虑 2G/弱 Wi-Fi 场景配合第 4 节的分级加载与降级渲染。这五条反模式与该技能文档开头浏览器是最普及的平台尊重它的约束的核心理念完全一致。8. 在 AG Kit 中如何使用本文档该技能在 AG Kit 中按以下方式被消费路由入口上层技能 .agents/skills/game-development/SKILL.md 在 frontmatter 中声明when_to_use: When building games with Unity, Godot, Unreal, Phaser, or any game engine...并据目标平台把任务路由到game-development/web-games角色装配专职角色 .agents/agent/game-developer.md 通过 frontmatter 的skills: clean-code, game-development字段声明所需技能当游戏目标是浏览器时game-development编排技能会进一步加载web-games能力注册游戏开发技能族在 web/src/services/skills.json 中被注册为 Game Development 类别供前端文档站展示与检索技能自描述该技能自身 frontmatter 声明了allowed-tools: Read, Write, Edit, Glob, Grep即技能执行过程中仅使用文件读写与搜索类工具不涉及命令行执行属于纯知识型技能。推荐的技能组合路径浏览器 2D 游戏 → 先加载web-games完成框架选型再加载.agents/skills/game-development/2d-games/SKILL.md处理精灵/瓦片地图/相机需要音效时再引入.agents/skills/game-development/game-audio/SKILL.md。这与编排技能中的Routing Examples示例一完全一致I want to make a browser-based 2D platformer → 从web-games开始 → 再进入2d-games→ 参考game-design。结语浏览器的约束即是设计约束回到该技能文档的核心论断浏览器是最普及的平台——不要与它对抗而是尊重它的约束。框架选型由游戏类型驱动、WebGPU 采纳看能力检测、优化从压缩与懒加载做起、音频遵循交互解锁规则、PWA 补齐离线与安装能力这一整套原则构成了 AG Kit 中网页游戏开发的标准基线。当你基于这些原则完成一个版本后记得回到上层技能的迭代理念Great games come from iteration, not perfection. Prototype fast, then polish.——先快速原型验证玩法再围绕性能预算打磨细节。【免费下载链接】ag-kit项目地址: https://gitcode.com/GitHub_Trending/an/ag-kit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 AG Kit 网页游戏开发指南：框架选型、WebGPU 迁移与浏览器性能优化实战
AG Kit 网页游戏开发指南框架选型、WebGPU 迁移与浏览器性能优化实战【免费下载链接】ag-kit项目地址: https://gitcode.com/GitHub_Trending/an/ag-kit本文聚焦 AG Kit 技能体系中.agents/skills/game-development/web-games/SKILL.md所沉淀的浏览器游戏开发原则覆盖 2D/3D 框架选型决策、WebGPU 采纳策略、性能优化优先级、资产压缩与加载管线、PWA 化改造以及音频处理等完整环节。读完本文你将掌握一套可直接指导 AG Kit 内 Agent 编写网页游戏的工程化方法论包括如何按需求选框架、如何判断是否引入 WebGPU、如何为移动网络环境做资产与性能预算以及如何规避最常见的浏览器游戏反模式。1. 框架选型先回答游戏是什么再决定用什么引擎网页游戏开发的第一步不是写代码而是做框架选型。.agents/skills/game-development/web-games/SKILL.md给出的核心原则是由游戏类型驱动框架选择而不是由技术热度驱动。1.1 决策树该技能文档内置的决策树是判断框架的第一入口What type of game? │ ├── 2D Game │ ├── Full game engine features? → Phaser │ └── Raw rendering power? → PixiJS │ ├── 3D Game │ ├── Full engine (physics, XR)? → Babylon.js │ └── Rendering focused? → Three.js │ └── Hybrid / Canvas └── Custom → Raw Canvas/WebGL决策逻辑可以概括为两个问题维度2D 还是 3D定位需要完整引擎能力还是极致的渲染自由度需要场景管理、物理、输入、音频等开箱即用的完整功能选完整引擎2D 用 Phaser3D 用 Babylon.js只想要底层渲染管线、自行组装其余系统选渲染库2D 用 PixiJS3D 用 Three.js游戏形态足够特殊如纯 Canvas 2D 绘制、自定义渲染管线则直接使用原始 Canvas/WebGL。1.2 主流框架横向对比框架类型最佳适用场景Phaser 42D完整游戏功能场景、物理、动画、输入一应俱全PixiJS 82D高性能渲染、UI 层、对渲染原语有强控制需求Three.js3D可视化、轻量级 3D 场景追求最小依赖Babylon.js 73D完整引擎能力含物理、XR 支持1.3 在 AG Kit 中的实际定位从仓库结构看该技能并非孤立存在而是 AG Kit 游戏开发能力树的叶子节点上层编排技能 .agents/skills/game-development/SKILL.md 明确把 Web 浏览器HTML5、WebGL场景路由到game-development/web-games子技能专职角色 .agents/agent/game-developer.md 在其平台选型决策树中同样建议2D 平台跳跃/街机/解谜类若面向 Web 分发使用 Phaser、PixiJS与同族的 2D 技能 .agents/skills/game-development/2d-games/SKILL.md、3D 技能、VR/AR 技能形成先选框架、再按维度深化的调用链路。因此本文档中的决策树实际是 Agent 在开发网页游戏时框架选型阶段的标准入口选完框架后再按需加载 2D/3D 或美术、音频等专项子技能。2. WebGPU 采纳策略新项目默认 WebGPU WebGL 回退WebGPU 是浏览器端新一代图形 API相比 WebGL 提供更接近原生 GPU 的访问能力也是当前网页 3D 渲染的演进方向。2.1 浏览器支持现状该技能文档记录的支持矩阵如下具体版本随浏览器迭代持续推进落地前建议以 caniuse 实时数据复核浏览器支持情况Chrome✅ 自 v113 起Edge✅ 自 v113 起Firefox✅ 自 v131 起Safari✅ 自 18.0 起全球覆盖率合计约 73%2.2 三条采纳决策规则新项目默认采用 WebGPU 渲染并提供 WebGL 作为回退方案兼顾新特性与兼容性存量/老项目遗留支持从 WebGL 起步避免引入破坏性迁移能力检测运行时通过navigator.gpu是否存在来判断当前浏览器是否支持 WebGPU而不是依赖 UA 字符串猜测。2.3 特性检测的落地形态对应到实际代码能力检测通常是这样的结构async function initRenderer() { if (navigator.gpu) { // WebGPU 主路径 const adapter await navigator.gpu.requestAdapter(); const device await adapter.requestDevice(); return createWebGPURenderer(device); } // WebGL 回退路径 const canvas document.getElementById(game); return canvas.getContext(webgl2) || canvas.getContext(webgl); }实践建议不要把 WebGPU 与 WebGL 当作两套完全独立的渲染器来实现。更稳妥的做法是抽象一层渲染后端接口WebGPU 与 WebGL 分别实现同一接口游戏逻辑只依赖接口这样回退切换对业务层透明。3. 性能原则先承认浏览器的约束再谈优化浏览器是一个运行环境受外部强约束的平台性能优化必须从承认这些约束开始。3.1 浏览器环境的核心约束与应对策略约束应对策略无本地文件访问能力资源打包bundling、通过 CDN 分发标签页后台节流tab throttling页面隐藏时暂停游戏循环移动数据流量限制压缩资源体积音频自动播放受限要求用户交互后才能播放3.2 优化优先级由高到低该技能文档给出了明确的优化次序顺序本身就是方法论资产压缩Asset compression— KTX2、Draco、WebP体积是第一位的性能指标压缩在源头省钱懒加载Lazy loading— 按需加载不把首屏不需要的东西提前拉下来对象池Object pooling— 避免 GC减少垃圾回收引起的帧率抖动绘制调用批处理Draw call batching— 减少状态切换合并渲染状态、降低 GPU 提交开销Web Workers— 卸载重计算把寻路、物理预演等 CPU 密集任务移出主线程。3.3 与上层技能的呼应值得注意的是对象池减少绘制调用先 profile 再优化这些原则在上层编排技能 .agents/skills/game-development/SKILL.md 中被提升为跨平台通用准则其性能预算表给出 60 FPS 即 16.67ms 内 Input 1ms、Physics 3ms、AI 2ms、Game Logic 4ms、Rendering 5ms 的分配建议而本文档则把这些原则落到浏览器特有的约束上——例如标签页隐藏必须暂停移动网络必须压缩形成了通用原则 → 平台特化的完整闭环。3.4 页面可见性处理的代码形态Tab throttling → Pause when hidden落实到代码就是监听 visibilitychange 并暂停/恢复游戏主循环document.addEventListener(visibilitychange, () { if (document.hidden) { game.pause(); // 暂停逻辑与渲染 } else { game.resume(); // 恢复注意基于时间戳做 delta 修正 } });4. 资产策略压缩格式与分阶段加载网页游戏的首屏启动体验几乎完全由首包体积决定。4.1 压缩格式选型资产类型推荐格式贴图KTX2 Basis UniversalGPU 可直接解压的超压缩纹理格式音频WebM/Opus回退MP33D 模型glTF Draco/Meshopt 压缩这三组选择分别解决了三个问题KTX2 Basis Universal把贴图压缩到极小体积且 GPU 可直接解压避免 CPU 侧解码开销WebM/Opus是现代浏览器普遍支持的高压缩率音频容器MP3 仅作为老环境回退glTF Draco/Meshopt是 3D 资产生态的标准组合Draco 侧重几何压缩Meshopt 侧重快速解码与流式加载。4.2 分阶段加载策略阶段加载内容启动Startup核心资产控制在2MB 以内游戏进行中Gameplay按需流式加载后台Background预取下一关资源关键约束是启动包必须小于 2MB——这是移动端首屏体验的经验红线。与之配套的是三级加载模型启动阶段只加载能开始玩的最小集合进入玩法阶段后边玩边拉当玩家在当前关卡时利用空闲带宽预取下一关。4.3 懒加载的落地示意对应代码形态资产加载应当按需触发而非一次性全量const assets { level1: [textures/level1.ktx2, models/level1.glb], level2: [textures/level2.ktx2, models/level2.glb], }; async function loadLevel(id) { const group assets[id] ?? []; await Promise.all(group.map(url assetLoader.load(url))); }5. PWA 化让网页游戏可离线、可安装、可全屏PWAProgressive Web App是网页游戏类原生体验的关键工程手段。5.1 收益清单离线游玩弱网/无网环境下依然可启动安装到主屏像原生 App 一样有桌面图标入口全屏模式隐藏浏览器 UI获得沉浸式体验推送通知可触达玩家的二次召回渠道。5.2 三项硬性要求Service Worker负责静态资产与游戏运行时的缓存支撑离线能力Web App Manifest声明名称、图标、主题色、显示模式支撑安装到主屏HTTPSService Worker 等能力仅在安全上下文中可用localhost 除外。5.3 最小可用的 manifest 与 Service WorkerWeb App Manifest 的最小形态{ name: My Web Game, short_name: MyGame, display: fullscreen, start_url: /, icons: [ { src: /icons/icon-192.png, sizes: 192x192, type: image/png }, { src: /icons/icon-512.png, sizes: 512x512, type: image/png } ] }注意display: fullscreen正是全屏模式诉求的直接映射。Service Worker 的缓存骨架配合版本化缓存名便于更新const CACHE game-v1; const CORE_ASSETS [/, /index.html, /game.js, /assets/core.ktx2]; self.addEventListener(install, (e) { e.waitUntil(caches.open(CACHE).then((c) c.addAll(CORE_ASSETS))); }); self.addEventListener(fetch, (e) { e.respondWith( caches.match(e.request).then((hit) hit || fetch(e.request)) ); });实践提示缓存策略应与第 4 节的分阶段加载对齐——核心资产走 cache-first按需加载的关卡资源走 network-first / stale-while-revalidate避免缓存膨胀挤占存储配额。6. 音频处理浏览器音频的三大铁律网页游戏音频最大的特殊性在于浏览器对自动播放的严格限制。6.1 浏览器硬性要求AudioContext 的创建与启动需要用户交互点击/触摸作为前置条件应在首次点击/触摸时创建 AudioContext若 context 处于 suspended 状态需要显式调用 resume。对应代码形态let audioCtx null; document.body.addEventListener(pointerdown, () { if (!audioCtx) { audioCtx new AudioContext(); } else if (audioCtx.state suspended) { audioCtx.resume(); } }, { once: true });6.2 最佳实践清单使用Web Audio API而非旧式 HTML5audio标签做密集音效池化音频源pool audio sources复用 AudioBufferSourceNode避免反复创建带来的 GC 压力预加载常用音效把高频音效提前解码到 AudioBuffer使用 WebM/Opus 压缩与第 4 节资产压缩策略保持一致。这里的池化音频源与第 3 节对象池原则同源——同族技能 .agents/skills/game-development/game-audio/SKILL.md 还给出了更完整的 Web 平台格式建议WebM/OpusMP3 回退以及音频混音层级与 ducking 规则可作为本文档音频部分的纵深参考。7. 反模式清单网页游戏最常见的六个坑❌ 不要做✅ 应该做一次性加载全部资产渐进式加载progressive loading忽略标签页可见性页面隐藏时暂停阻塞在音频加载上懒加载音频跳过压缩所有资产都压缩假设用户网络很快主动处理慢网络逐条解读一次性加载全部资产→ 直接违反第 4 节的 2MB 启动预算首屏白屏时间不可接受忽略标签页可见性→ 后台标签页被节流后游戏循环继续跑恢复时出现时间跳变且白白消耗移动端电量阻塞在音频加载上→ 音频加载不应阻塞游戏启动应异步解码、按需播放跳过压缩→ 在移动数据环境下未压缩资产直接转化为用户流量费用与加载延迟假设网络快→ 需要同时考虑 2G/弱 Wi-Fi 场景配合第 4 节的分级加载与降级渲染。这五条反模式与该技能文档开头浏览器是最普及的平台尊重它的约束的核心理念完全一致。8. 在 AG Kit 中如何使用本文档该技能在 AG Kit 中按以下方式被消费路由入口上层技能 .agents/skills/game-development/SKILL.md 在 frontmatter 中声明when_to_use: When building games with Unity, Godot, Unreal, Phaser, or any game engine...并据目标平台把任务路由到game-development/web-games角色装配专职角色 .agents/agent/game-developer.md 通过 frontmatter 的skills: clean-code, game-development字段声明所需技能当游戏目标是浏览器时game-development编排技能会进一步加载web-games能力注册游戏开发技能族在 web/src/services/skills.json 中被注册为 Game Development 类别供前端文档站展示与检索技能自描述该技能自身 frontmatter 声明了allowed-tools: Read, Write, Edit, Glob, Grep即技能执行过程中仅使用文件读写与搜索类工具不涉及命令行执行属于纯知识型技能。推荐的技能组合路径浏览器 2D 游戏 → 先加载web-games完成框架选型再加载.agents/skills/game-development/2d-games/SKILL.md处理精灵/瓦片地图/相机需要音效时再引入.agents/skills/game-development/game-audio/SKILL.md。这与编排技能中的Routing Examples示例一完全一致I want to make a browser-based 2D platformer → 从web-games开始 → 再进入2d-games→ 参考game-design。结语浏览器的约束即是设计约束回到该技能文档的核心论断浏览器是最普及的平台——不要与它对抗而是尊重它的约束。框架选型由游戏类型驱动、WebGPU 采纳看能力检测、优化从压缩与懒加载做起、音频遵循交互解锁规则、PWA 补齐离线与安装能力这一整套原则构成了 AG Kit 中网页游戏开发的标准基线。当你基于这些原则完成一个版本后记得回到上层技能的迭代理念Great games come from iteration, not perfection. Prototype fast, then polish.——先快速原型验证玩法再围绕性能预算打磨细节。【免费下载链接】ag-kit项目地址: https://gitcode.com/GitHub_Trending/an/ag-kit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考