14 changed files with 2288 additions and 14 deletions
@ -1,4 +1,4 @@ |
|||||
node_modules |
node_modules |
||||
.cache |
.cache |
||||
dist |
dist |
||||
.idea |
.idea.superpowers/ |
||||
|
|||||
@ -0,0 +1,34 @@ |
|||||
|
<h2>架构方案选择</h2> |
||||
|
<p class="subtitle">全面重构，你倾向哪种架构风格？</p> |
||||
|
|
||||
|
<div class="options"> |
||||
|
<div class="option" data-choice="ecs" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">A</div> |
||||
|
<div class="content"> |
||||
|
<h4>ECS (Entity Component System)</h4> |
||||
|
<p><strong>特点：</strong>实体只是ID，数据存在组件，系统处理逻辑</p> |
||||
|
<p><strong>优点：</strong>高性能，组合灵活，适合复杂游戏</p> |
||||
|
<p><strong>缺点：</strong>学习曲线陡，简单游戏可能过度设计</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="option" data-choice="scene-based" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">B</div> |
||||
|
<div class="content"> |
||||
|
<h4>场景驱动 + 面向对象</h4> |
||||
|
<p><strong>特点：</strong>基于场景/窗口分层，组件是对象，沿用现有思路优化</p> |
||||
|
<p><strong>优点：</strong>直观，符合认知，简单游戏上手快</p> |
||||
|
<p><strong>缺点：</strong>大型游戏可能出现类爆炸</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="option" data-choice="modular" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">C</div> |
||||
|
<div class="content"> |
||||
|
<h4>模块化分层架构 (推荐)</h4> |
||||
|
<p><strong>特点：</strong>清晰划分核心层/业务层，依赖注入，事件总线</p> |
||||
|
<p><strong>优点：</strong>平衡了简洁和可扩展，符合"自己用着舒服"的目标</p> |
||||
|
<p><strong>缺点：</strong>比纯场景驱动多一点抽象</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<p class="subtitle">我个人推荐 C - 模块化分层，既保持了一定简洁性，又有足够的扩展性，适合框架逐步演化。你的选择？</p> |
||||
@ -0,0 +1,104 @@ |
|||||
|
<h2>当前架构 - PixiJS 游戏开发框架</h2> |
||||
|
<p class="subtitle">现有代码结构分析</p> |
||||
|
|
||||
|
<div class="architecture-diagram"> |
||||
|
<svg width="700" height="480" viewBox="0 0 700 480"> |
||||
|
<!-- Main --> |
||||
|
<rect x="250" y="20" width="200" height="60" rx="8" fill="#e1f5fe" stroke="#0288d1"/> |
||||
|
<text x="350" y="55" text-anchor="middle" font-size="14">main.ts</text> |
||||
|
|
||||
|
<!-- Game Singletons --> |
||||
|
<rect x="100" y="120" width="160" height="70" rx="8" fill="#f3e5f5" stroke="#7b1fa2"/> |
||||
|
<text x="180" y="150" text-anchor="middle" font-size="14">Game (Singleton)</text> |
||||
|
<text x="180" y="170" text-anchor="middle" font-size="12">Renderer / Stage / Ticker</text> |
||||
|
|
||||
|
<rect x="300" y="120" width="160" height="70" rx="8" fill="#f3e5f5" stroke="#7b1fa2"/> |
||||
|
<text x="380" y="150" text-anchor="middle" font-size="14">Stage (Singleton)</text> |
||||
|
<text x="380" y="170" text-anchor="middle" font-size="12">Scene Management</text> |
||||
|
|
||||
|
<rect x="500" y="120" width="130" height="70" rx="8" fill="#f3e5f5" stroke="#7b1fa2"/> |
||||
|
<text x="565" y="150" text-anchor="middle" font-size="14">Assets</text> |
||||
|
<text x="565" y="170" text-anchor="middle" font-size="12">Bundle Loading</text> |
||||
|
|
||||
|
<!-- Windows / Scenes --> |
||||
|
<rect x="25" y="230" width="180" height="100" rx="8" fill="#e8f5e9" stroke="#388e3c"/> |
||||
|
<text x="115" y="275" text-anchor="middle" font-size="14">defineWindow()</text> |
||||
|
<text x="115" y="295" text-anchor="middle" font-size="12">Auto-imported from</text> |
||||
|
<text x="115" y="315" text-anchor="middle" font-size="12">src/stages/**/page_*.ts</text> |
||||
|
|
||||
|
<rect x="240" y="230" width="180" height="100" rx="8" fill="#e8f5e9" stroke="#388e3c"/> |
||||
|
<text x="330" y="260" text-anchor="middle" font-size="14">IWindow Interface</text> |
||||
|
<text x="330" y="280" text-anchor="middle" font-size="12">layout / onLoad /</text> |
||||
|
<text x="330" y="300" text-anchor="middle" font-size="12">onUnLoad / update /</text> |
||||
|
<text x="330" y="320" text-anchor="middle" font-size="12">lateUpdate</text> |
||||
|
|
||||
|
<rect x="460" y="230" width="190" height="100" rx="8" fill="#e8f5e9" stroke="#388e3c"/> |
||||
|
<text x="555" y="260" text-anchor="middle" font-size="14">Two Scene Types</text> |
||||
|
<text x="555" y="280" text-anchor="middle" font-size="12">• Normal - destroyed on exit</text> |
||||
|
<text x="555" y="300" text-anchor="middle" font-size="12">• Resident - always visible</text> |
||||
|
<text x="555" y="320" text-anchor="middle" font-size="12">supports hold-last option</text> |
||||
|
|
||||
|
<!-- Components --> |
||||
|
<rect x="50" y="365" width="130" height="80" rx="8" fill="#fff3e0" stroke="#f57c00"/> |
||||
|
<text x="115" y="400" text-anchor="middle" font-size="14">Button</text> |
||||
|
<text x="115" text-anchor="middle" y="420" font-size="12">NineSlice + press</text> |
||||
|
<text x="115" text-anchor="middle" y="435" font-size="12">state feedback</text> |
||||
|
|
||||
|
<rect x="220" y="365" width="130" height="80" rx="8" fill="#fff3e0" stroke="#f57c00"/> |
||||
|
<text x="285" y="400" text-anchor="middle" font-size="14">Position</text> |
||||
|
<text x="285" text-anchor="middle" y="420" font-size="12">Centering /</text> |
||||
|
<text x="285" text-anchor="middle" y="435" font-size="12">alignment helpers</text> |
||||
|
|
||||
|
<rect x="390" y="365" width="130" height="80" rx="8" fill="#fff3e0" stroke="#f57c00"/> |
||||
|
<text x="455" y="400" text-anchor="middle" font-size="14">Sound</text> |
||||
|
<text x="455" text-anchor="middle" y="420" font-size="12">@pixi/sound</text> |
||||
|
<text x="455" text-anchor="middle" y="435" font-size="12">integration</text> |
||||
|
|
||||
|
<rect x="560" y="365" width="110" height="80" rx="8" fill="#fff3e0" stroke="#f57c00"/> |
||||
|
<text x="615" y="400" text-anchor="middle" font-size="14">Utils</text> |
||||
|
<text x="615" text-anchor="middle" y="420" font-size="12">Sprite</text> |
||||
|
<text x="615" text-anchor="middle" y="435" font-size="12">helpers</text> |
||||
|
|
||||
|
<!-- Arrows --> |
||||
|
<defs> |
||||
|
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth"> |
||||
|
<polygon points="0 0, 10 3, 0 6" fill="#666"/> |
||||
|
</marker> |
||||
|
</defs> |
||||
|
<line x1="350" y1="80" x2="180" y2="120" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/> |
||||
|
<line x1="350" y1="80" x2="380" y2="120" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/> |
||||
|
<line x1="350" y1="80" x2="565" y2="120" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/> |
||||
|
<line x1="380" y1="190" x2="115" y2="230" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/> |
||||
|
<line x1="380" y1="190" x2="330" y2="230" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/> |
||||
|
</svg> |
||||
|
</div> |
||||
|
|
||||
|
<p class="subtitle">我已经探索完代码，这是一个基于 PixiJS v8 的小游戏框架，已经具备了基本的场景管理、资源加载、组件系统。现在请回答我的第一个问题：</p> |
||||
|
|
||||
|
<div class="section"> |
||||
|
<h3>这个框架你主要用来开发什么类型的游戏？</h3> |
||||
|
</div> |
||||
|
|
||||
|
<div class="options"> |
||||
|
<div class="option" data-choice="small" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">A</div> |
||||
|
<div class="content"> |
||||
|
<h4>小型休闲游戏 / 点击类游戏</h4> |
||||
|
<p>单场景或少数场景，简单交互，放置点击类玩法</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="option" data-choice="mid" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">B</div> |
||||
|
<div class="content"> |
||||
|
<h4>中型游戏 - 多关卡多场景</h4> |
||||
|
<p>多个关卡，复杂的UI流程，多个场景切换</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="option" data-choice="multiple" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">C</div> |
||||
|
<div class="content"> |
||||
|
<h4>不确定/探索中</h4> |
||||
|
<p>框架还在演化，想先做个好的基础再看</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,35 @@ |
|||||
|
<h2>开发体验优先级</h2> |
||||
|
<p class="subtitle">框架还在演化中，目标是让自己用着舒服。哪些方面对你来说最重要？</p> |
||||
|
|
||||
|
<div class="options" data-multiselect> |
||||
|
<div class="option" data-choice="typesafety" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">A</div> |
||||
|
<div class="content"> |
||||
|
<h4>类型安全 / TypeScript</h4> |
||||
|
<p>严格的类型定义，良好的自动补全，少踩坑</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="option" data-choice="simplicity" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">B</div> |
||||
|
<div class="content"> |
||||
|
<h4>简洁易用</h4> |
||||
|
<p>少写样板代码，API 直观，快速开始</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="option" data-choice="extensible" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">C</div> |
||||
|
<div class="content"> |
||||
|
<h4>可扩展性</h4> |
||||
|
<p>模块化设计，容易添加新功能和工具</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="option" data-choice="performance" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">D</div> |
||||
|
<div class="content"> |
||||
|
<h4>性能优化</h4> |
||||
|
<p>自动内存管理，资源释放，避免泄漏</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<p class="subtitle">可以多选，点击已选项取消选择。选完告诉我就行。</p> |
||||
@ -0,0 +1,80 @@ |
|||||
|
<h2>推荐设计：模块化分层架构</h2> |
||||
|
<p class="subtitle">清晰分层，每个模块职责单一，依赖明确</p> |
||||
|
|
||||
|
<div class="architecture-diagram"> |
||||
|
<svg width="680" height="520" viewBox="0 0 680 520"> |
||||
|
<!-- Layers from bottom to top --> |
||||
|
<rect x="40" y="20" width="600" height="80" rx="8" fill="#e8f5e9" stroke="#2e7d32"/> |
||||
|
<text x="340" y="50" text-anchor="middle" font-size="16" font-weight="bold">Core Layer - 核心层</text> |
||||
|
<text x="340" y="70" text-anchor="middle" font-size="13">Game (Application) | EventBus | AssetManager | Ticker | Random | Logger</text> |
||||
|
|
||||
|
<rect x="40" y="120" width="600" height="80" rx="8" fill="#e3f2fd" stroke="#1565c0"/> |
||||
|
<text x="340" y="150" text-anchor="middle" font-size="16" font-weight="bold">Scene Layer - 场景层</text> |
||||
|
<text x="340" y="170" text-anchor="middle" font-size="13">SceneManager | BaseScene | Transition | LifeCycle Hooks</text> |
||||
|
|
||||
|
<rect x="40" y="220" width="600" height="80" rx="8" fill="#f3e5f5" stroke="#6a1b9a"/> |
||||
|
<text x="340" y="250" text-anchor="middle" font-size="16" font-weight="bold">Component Layer - 组件层</text> |
||||
|
<text x="340" y="270" text-anchor="middle" font-size="13">Button | Panel | Label | ProgressBar | List 等常用UI组件</text> |
||||
|
|
||||
|
<rect x="40" y="320" width="600" height="80" rx="8" fill="#fff3e0" stroke="#e65100"/> |
||||
|
<text x="340" y="350" text-anchor="middle" font-size="16" font-weight="bold">Utils Layer - 工具层</text> |
||||
|
<text x="340" y="370" text-anchor="middle" font-size="13">Position (align) | Tween (animation) | Sound | Storage | Math | Random</text> |
||||
|
|
||||
|
<rect x="40" y="420" width="600" height="70" rx="8" fill="#eceff1" stroke="#37474f"/> |
||||
|
<text x="340" y="455" text-anchor="middle" font-size="16" font-weight="bold">Game Content - 游戏内容层</text> |
||||
|
<text x="340" y="475" text-anchor="middle" font-size="13">你的游戏场景 / 关卡 / 游戏逻辑 在这里</text> |
||||
|
|
||||
|
<!-- Arrows showing dependency direction --> |
||||
|
<defs> |
||||
|
<marker id="arrowhead2" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth"> |
||||
|
<polygon points="0 0, 10 3, 0 6" fill="#666"/> |
||||
|
</marker> |
||||
|
</defs> |
||||
|
<line x1="340" y1="100" x2="340" y2="120" stroke="#666" stroke-width="2" marker-end="url(#arrowhead2)"/> |
||||
|
<line x1="340" y1="200" x2="340" y2="220" stroke="#666" stroke-width="2" marker-end="url(#arrowhead2)"/> |
||||
|
<line x1="340" y1="300" x2="340" y2="320" stroke="#666" stroke-width="2" marker-end="url(#arrowhead2)"/> |
||||
|
<line x1="340" y1="400" x2="340" y2="420" stroke="#666" stroke-width="2" marker-end="url(#arrowhead2)"/> |
||||
|
<text x="50" y="285" font-size="12" fill="#666">上层依赖下层 ↓</text> |
||||
|
</svg> |
||||
|
</div> |
||||
|
|
||||
|
<h3>主要改进点</h3> |
||||
|
<div class="pros-cons"> |
||||
|
<div class="pros"> |
||||
|
<h4>✓ 优点</h4> |
||||
|
<ul> |
||||
|
<li>每个层职责清晰，符合单一职责原则</li> |
||||
|
<li>完全 TypeScript 类型定义，完美的开发体验</li> |
||||
|
<li>依赖方向明确，易于测试和模块替换</li> |
||||
|
<li>保留自动扫描 page_*.ts 的便利特性</li> |
||||
|
<li>自动资源引用计数卸载，避免内存泄漏</li> |
||||
|
<li>添加了常用工具：tween 动画、统一事件总线、存储</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="cons"> |
||||
|
<h4> Tradeoffs</h4> |
||||
|
<ul> |
||||
|
<li>比原来多一些文件，但这是合理分工</li> |
||||
|
<li>需要一点时间适应新的API，但更直观</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<p class="subtitle">这个架构你觉得对吗？方向是否符合你的预期？</p> |
||||
|
|
||||
|
<div class="options"> |
||||
|
<div class="option" data-choice="approve" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">Y</div> |
||||
|
<div class="content"> |
||||
|
<h4>方向正确，可以按这个设计来</h4> |
||||
|
<p>认可这个分层架构，继续下一步写详细设计文档</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="option" data-choice="adjust" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">N</div> |
||||
|
<div class="content"> |
||||
|
<h4>需要调整某些部分</h4> |
||||
|
<p>我会告诉你具体要改什么</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,26 @@ |
|||||
|
<h2>重构范围</h2> |
||||
|
<p class="subtitle">你希望重构的范围是多大？</p> |
||||
|
|
||||
|
<div class="options"> |
||||
|
<div class="option" data-choice="cleanup" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">A</div> |
||||
|
<div class="content"> |
||||
|
<h4>整理优化现有结构</h4> |
||||
|
<p>修复类型问题，整理目录结构，改进API设计，保持整体架构不变</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="option" data-choice="moderate" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">B</div> |
||||
|
<div class="content"> |
||||
|
<h4>中度重构 + 常用工具</h4> |
||||
|
<p>整理现有结构 + 添加常用的开发工具（tween、布局、事件系统等）</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="option" data-choice="full" onclick="toggleSelect(this)"> |
||||
|
<div class="letter">C</div> |
||||
|
<div class="content"> |
||||
|
<h4>全面架构重构</h4> |
||||
|
<p>重新设计整体架构，建立更清晰的模块分层和依赖关系</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1 @@ |
|||||
|
{"type":"click","text":"Y\n \n 方向正确，可以按这个设计来\n 认可这个分层架构，继续下一步写详细设计文档","choice":"approve","id":null,"timestamp":1776570444460} |
||||
@ -0,0 +1 @@ |
|||||
|
{"type":"server-started","port":50629,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:50629","screen_dir":"/home/dash/projects/pixi-demo/.superpowers/brainstorm/55071-1776569663/content","state_dir":"/home/dash/projects/pixi-demo/.superpowers/brainstorm/55071-1776569663/state"} |
||||
@ -0,0 +1,25 @@ |
|||||
|
{"type":"server-started","port":50629,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:50629","screen_dir":"/home/dash/projects/pixi-demo/.superpowers/brainstorm/55071-1776569663/content","state_dir":"/home/dash/projects/pixi-demo/.superpowers/brainstorm/55071-1776569663/state"} |
||||
|
{"type":"screen-added","file":"/home/dash/projects/pixi-demo/.superpowers/brainstorm/55071-1776569663/content/current-architecture.html"} |
||||
|
{"source":"user-event","type":"click","text":"C\n \n 不确定/探索中\n 框架还在演化，想先做个好的基础再看","choice":"multiple","id":null,"timestamp":1776570052484} |
||||
|
{"source":"user-event","type":"click","text":"C\n \n 不确定/探索中\n 框架还在演化，想先做个好的基础再看","choice":"multiple","id":null,"timestamp":1776570060740} |
||||
|
{"source":"user-event","type":"click","text":"C\n \n 不确定/探索中\n 框架还在演化，想先做个好的基础再看","choice":"multiple","id":null,"timestamp":1776570060932} |
||||
|
{"type":"screen-added","file":"/home/dash/projects/pixi-demo/.superpowers/brainstorm/55071-1776569663/content/dev-experience.html"} |
||||
|
{"source":"user-event","type":"click","text":"D\n \n 性能优化\n 自动内存管理，资源释放，避免泄漏","choice":"performance","id":null,"timestamp":1776570230871} |
||||
|
{"source":"user-event","type":"click","text":"B\n \n 简洁易用\n 少写样板代码，API 直观，快速开始","choice":"simplicity","id":null,"timestamp":1776570232744} |
||||
|
{"source":"user-event","type":"click","text":"A\n \n 类型安全 / TypeScript\n 严格的类型定义，良好的自动补全，少踩坑","choice":"typesafety","id":null,"timestamp":1776570233120} |
||||
|
{"source":"user-event","type":"click","text":"B\n \n 简洁易用\n 少写样板代码，API 直观，快速开始","choice":"simplicity","id":null,"timestamp":1776570233496} |
||||
|
{"source":"user-event","type":"click","text":"B\n \n 简洁易用\n 少写样板代码，API 直观，快速开始","choice":"simplicity","id":null,"timestamp":1776570241056} |
||||
|
{"source":"user-event","type":"click","text":"C\n \n 可扩展性\n 模块化设计，容易添加新功能和工具","choice":"extensible","id":null,"timestamp":1776570242440} |
||||
|
{"source":"user-event","type":"click","text":"C\n \n 可扩展性\n 模块化设计，容易添加新功能和工具","choice":"extensible","id":null,"timestamp":1776570246216} |
||||
|
{"source":"user-event","type":"click","text":"B\n \n 简洁易用\n 少写样板代码，API 直观，快速开始","choice":"simplicity","id":null,"timestamp":1776570246720} |
||||
|
{"source":"user-event","type":"click","text":"A\n \n 类型安全 / TypeScript\n 严格的类型定义，良好的自动补全，少踩坑","choice":"typesafety","id":null,"timestamp":1776570247856} |
||||
|
{"source":"user-event","type":"click","text":"A\n \n 类型安全 / TypeScript\n 严格的类型定义，良好的自动补全，少踩坑","choice":"typesafety","id":null,"timestamp":1776570249360} |
||||
|
{"source":"user-event","type":"click","text":"B\n \n 简洁易用\n 少写样板代码，API 直观，快速开始","choice":"simplicity","id":null,"timestamp":1776570253408} |
||||
|
{"source":"user-event","type":"click","text":"C\n \n 可扩展性\n 模块化设计，容易添加新功能和工具","choice":"extensible","id":null,"timestamp":1776570266728} |
||||
|
{"type":"screen-added","file":"/home/dash/projects/pixi-demo/.superpowers/brainstorm/55071-1776569663/content/refactor-scope.html"} |
||||
|
{"source":"user-event","type":"click","text":"C\n \n 全面架构重构\n 重新设计整体架构，建立更清晰的模块分层和依赖关系","choice":"full","id":null,"timestamp":1776570283578} |
||||
|
{"type":"screen-added","file":"/home/dash/projects/pixi-demo/.superpowers/brainstorm/55071-1776569663/content/architecture-options.html"} |
||||
|
{"source":"user-event","type":"click","text":"A\n \n ECS (Entity Component System)\n 特点：实体只是ID，数据存在组件，系统处理逻辑\n 优点：高性能，组合灵活，适合复杂游戏\n 缺点：学习曲线陡，简单游戏可能过度设计","choice":"ecs","id":null,"timestamp":1776570305210} |
||||
|
{"source":"user-event","type":"click","text":"C\n \n 模块化分层架构 (推荐)\n 特点：清晰划分核心层/业务层，依赖注入，事件总线\n 优点：平衡了简洁和可扩展，符合\"自己用着舒服\"的目标\n 缺点：比纯场景驱动多一点抽象","choice":"modular","id":null,"timestamp":1776570312321} |
||||
|
{"type":"screen-added","file":"/home/dash/projects/pixi-demo/.superpowers/brainstorm/55071-1776569663/content/proposed-architecture.html"} |
||||
|
{"source":"user-event","type":"click","text":"Y\n \n 方向正确，可以按这个设计来\n 认可这个分层架构，继续下一步写详细设计文档","choice":"approve","id":null,"timestamp":1776570444460} |
||||
@ -0,0 +1 @@ |
|||||
|
55079 |
||||
File diff suppressed because it is too large
@ -0,0 +1,209 @@ |
|||||
|
# PixiJS 游戏开发框架 - 重构设计 |
||||
|
|
||||
|
## 项目背景 |
||||
|
|
||||
|
这是一个基于 PixiJS v8 的个人游戏开发框架，目标是打造对自己来说好用的开发体验。框架目前处于演化阶段，尚未锁定具体游戏类型，需要良好的扩展性来适应未来需求。 |
||||
|
|
||||
|
## 设计目标 |
||||
|
|
||||
|
满足四个核心需求： |
||||
|
|
||||
|
1. **类型安全** - 完整 TypeScript 类型定义，良好的 IDE 自动补全 |
||||
|
2. **简洁易用** - 减少样板代码，API 直观易懂 |
||||
|
3. **可扩展性** - 模块化设计，易于渐进式添加功能 |
||||
|
4. **性能优化** - 正确的资源管理，避免内存泄漏 |
||||
|
|
||||
|
## 架构设计 |
||||
|
|
||||
|
采用**模块化分层架构**，清晰划分职责，依赖方向明确： |
||||
|
|
||||
|
``` |
||||
|
┌─────────────────────────────────────────┐ |
||||
|
│ Game Content (游戏内容层) │ |
||||
|
│ - 你的游戏场景、关卡、业务逻辑 │ |
||||
|
└─────────────────────────────────────────┘ |
||||
|
↑ 依赖 |
||||
|
┌─────────────────────────────────────────┐ |
||||
|
│ Utils Layer (工具层) │ |
||||
|
│ - 定位对齐、动画补间、音频、存储、数学工具 │ |
||||
|
└─────────────────────────────────────────┘ |
||||
|
↑ 依赖 |
||||
|
┌─────────────────────────────────────────┐ |
||||
|
│ Component Layer (组件层) │ |
||||
|
│ - 常用UI组件: Button, Label, Panel... │ |
||||
|
└─────────────────────────────────────────┘ |
||||
|
↑ 依赖 |
||||
|
┌─────────────────────────────────────────┐ |
||||
|
│ Scene Layer (场景层) │ |
||||
|
│ - 场景管理、生命周期、场景切换过渡 │ |
||||
|
└─────────────────────────────────────────┘ |
||||
|
↑ 依赖 |
||||
|
┌─────────────────────────────────────────┐ |
||||
|
│ Core Layer (核心层) │ |
||||
|
│ - Game 应用入口、事件总线、资源管理器 │ |
||||
|
└─────────────────────────────────────────┘ |
||||
|
``` |
||||
|
|
||||
|
**依赖原则**：上层依赖下层，下层不依赖上层。这样保证了核心稳定，上层易于变化。 |
||||
|
|
||||
|
## 模块详细设计 |
||||
|
|
||||
|
### 1. Core Layer 核心层 |
||||
|
|
||||
|
#### `Game` (应用主类) |
||||
|
- 维护 PixiJS renderer, stage, ticker |
||||
|
- 处理屏幕方向适配（强制竖屏/横屏） |
||||
|
- 处理窗口 resize 自动缩放 |
||||
|
- 单例模式，全局唯一入口 |
||||
|
|
||||
|
#### `EventBus` (事件总线) |
||||
|
- 提供全局事件订阅/发布 |
||||
|
- 支持一次性事件监听 |
||||
|
- 类型安全的事件定义 |
||||
|
|
||||
|
#### `AssetManager` (资源管理器) |
||||
|
- 基于 PixiJS v8 Assets API |
||||
|
- 自动引用计数，卸载时自动释放 |
||||
|
- 支持按 bundle 批量加载卸载 |
||||
|
|
||||
|
#### `Logger` (日志工具) |
||||
|
- 开发环境打印调试，生产环境可关闭 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### 2. Scene Layer 场景层 |
||||
|
|
||||
|
#### `SceneManager` |
||||
|
- 自动扫描 `src/scenes/**/page_*.ts` 场景文件 |
||||
|
- 支持两种场景类型： |
||||
|
- `Normal` - 普通场景，退出时销毁 |
||||
|
- `Resident` - 常驻场景，只隐藏不销毁 |
||||
|
- 支持 `isHolderLast` 选项 - 保留上一场景只隐藏 |
||||
|
- 场景切换生命周期钩子 |
||||
|
|
||||
|
#### `BaseScene` |
||||
|
- 抽象基类，所有场景继承自它 |
||||
|
- 定义完整的生命周期： |
||||
|
``` |
||||
|
loadBundle() → 加载资源 |
||||
|
layout() → 创建UI布局 |
||||
|
onLoad() → 场景显示完成 |
||||
|
update(dt) → 每帧更新 |
||||
|
lateUpdate(dt) → 更新后处理 |
||||
|
onUnLoad() → 场景即将隐藏 |
||||
|
unLoadBundle() → 卸载资源 |
||||
|
``` |
||||
|
|
||||
|
#### `SceneTransition` (可选) |
||||
|
- 场景切换过渡效果接口 |
||||
|
- 默认提供淡入淡出效果 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### 3. Component Layer 组件层 |
||||
|
|
||||
|
保留并重构现有组件： |
||||
|
|
||||
|
#### `Button` |
||||
|
- 支持九妹自适应背景 |
||||
|
- 支持按下状态反馈（切换纹理/透明度缩放） |
||||
|
- 自动处理点击、触摸事件 |
||||
|
- 自动更新布局（文字变化时自适应大小） |
||||
|
|
||||
|
#### `Label` (新增) |
||||
|
- 封装文本，简化创建 |
||||
|
|
||||
|
#### `Panel` (新增) |
||||
|
- 容器组件，支持背景、padding |
||||
|
|
||||
|
未来可扩展：`ProgressBar`, `List`, `Dialog` 等 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### 4. Utils Layer 工具层 |
||||
|
|
||||
|
#### `Position` (定位工具) |
||||
|
- 提供常用对齐方式：center, top, bottom, left, right |
||||
|
- 支持偏移调整 |
||||
|
- 相对于设计分辨率（750px宽度）自动计算 |
||||
|
|
||||
|
#### `Tween` (动画工具) |
||||
|
- 封装 `@tweenjs/tween.js` |
||||
|
- 简化常用动画：淡入淡出、移动、缩放 |
||||
|
|
||||
|
#### `SoundManager` |
||||
|
- 封装 `@pixi/sound` |
||||
|
- 统一播放/暂停/停止接口 |
||||
|
- 支持音量控制 |
||||
|
|
||||
|
#### `Storage` |
||||
|
- 本地存储封装 |
||||
|
- 支持对象序列化 |
||||
|
|
||||
|
#### `MathUtils` |
||||
|
- 常用数学工具：随机、角度、距离计算 |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 目录结构 |
||||
|
|
||||
|
``` |
||||
|
src/ |
||||
|
├── core/ # Core Layer |
||||
|
│ ├── Game.ts # 主应用 |
||||
|
│ ├── EventBus.ts # 事件总线 |
||||
|
│ ├── AssetManager.ts # 资源管理 |
||||
|
│ └── Logger.ts # 日志 |
||||
|
├── scene/ # Scene Layer |
||||
|
│ ├── SceneManager.ts # 场景管理器 |
||||
|
│ ├── BaseScene.ts # 场景基类 |
||||
|
│ └── types.ts # 类型定义 |
||||
|
├── components/ # Component Layer |
||||
|
│ ├── Button.ts |
||||
|
│ ├── Label.ts |
||||
|
│ └── Panel.ts |
||||
|
├── utils/ # Utils Layer |
||||
|
│ ├── Position.ts |
||||
|
│ ├── Tween.ts |
||||
|
│ ├── Sound.ts |
||||
|
│ ├── Storage.ts |
||||
|
│ └── MathUtils.ts |
||||
|
├── enums/ # 枚举定义 |
||||
|
│ ├── SceneType.ts |
||||
|
│ └── Orientation.ts |
||||
|
├── types/ # 全局类型定义 |
||||
|
│ └── index.d.ts |
||||
|
└── scenes/ # Game Content - 你的游戏场景 |
||||
|
└── **/page_*.ts # 每个场景一个文件 |
||||
|
``` |
||||
|
|
||||
|
## 主要改进对比原架构 |
||||
|
|
||||
|
| 方面 | 原架构 | 新架构 | |
||||
|
|------|--------|--------| |
||||
|
| 类型 | 部分隐式`any`，类型不完整 | 完整 TypeScript 类型严格模式 | |
||||
|
| 目录分类 | 混合在一起 | 按分层清晰划分 | |
||||
|
| 生命周期 | 只有基础的 onLoad/onUnLoad | 完整的分段生命周期 | |
||||
|
| 资源管理 | 基本的引用计数 | 统一在 AssetManager，更可靠 | |
||||
|
| 事件系统 | 无 | 全局 EventBus 解耦 | |
||||
|
| 工具方法 | 零散 | 分类整理，统一导出 | |
||||
|
| API 一致性 | 风格不统一 | 一致的编码风格和命名 | |
||||
|
|
||||
|
## 范围确认 |
||||
|
|
||||
|
本次重构是**全面架构重构**： |
||||
|
- 重新组织目录结构 |
||||
|
- 重新设计模块接口 |
||||
|
- 保留自动发现场景的特性 |
||||
|
- 添加缺失的工具模块 |
||||
|
- 补全所有类型定义 |
||||
|
|
||||
|
不引入 ECS 复杂度，保持面向对象 + 分层，符合个人开发体验。 |
||||
|
|
||||
|
## 成功标准 |
||||
|
|
||||
|
- 可以按照新架构写出游戏场景代码 |
||||
|
- TypeScript 编译零错误 |
||||
|
- 开发时有完整的类型提示 |
||||
|
- 切换场景后资源正确释放，无内存泄漏 |
||||
|
- 原有示例场景能正常运行 |
||||
@ -1,9 +0,0 @@ |
|||||
export enum EDirection { |
|
||||
Landscape="landscape", |
|
||||
Portrait="portrait", |
|
||||
} |
|
||||
|
|
||||
export enum EP { |
|
||||
Resident, // 常驻场景
|
|
||||
Normal // 普通场景
|
|
||||
} |
|
||||
Loading…
Reference in new issue