异类 Space

石器时代客户端重构 — 完整实施方案

2026/6/11 更新于 2026/6/22 2200 字 5 min 阅读 70
石器时代

石器时代客户端重构 — 完整实施方案

Context

原版 C++ 客户端有 64 个核心系统，当前 Cocos 客户端已实现 85 个模块（85/86 完成）。核心游戏循环（登录→移动→战斗→升级）已跑通，但缺少 18 个原版系统，协议只实现 ~20%。分 3 批推进。

已完成（不在本计划中）

改动 状态
SafeArea 组件 + Widget 对齐 ✅
Canvas Widget _alignFlags 修复（45→15） ✅
移动系统重写（速度向量匹配原版 C++） ✅
A* 二叉堆优化 ✅
MapRenderer 脏标记 ✅
CharacterView 平滑渲染（像素坐标） ✅

第一批：P0 — 战斗可玩 + 引擎规范化（1 周）

B1-1: BattleView 3 个 TODO（战斗核心）

目标: 战斗中道具/宠物/技能可用

涉及: BattleView.ts:286/298/310

方案:

  • showItemSelect(): 遍历 this.equipSystem.inventory 中的 consumable 物品，生成选择按钮
  • showPetSelect(): 从 this.battle.allyPets 生成选择按钮
  • showSkillSelect(): 从 SkillTable 查询宠物可用技能

文件: BattleView.ts

B1-2: GameApp 3 个 TODO（一行代码修复）

目标: MainMenu skill 按钮连线、帮助/设置内容

方案:

  • skill: () => { this.skillView?.toggle(); }（SkillView 已初始化在 line 727）
  • 帮助: this.dialogView.show('帮助', '实际帮助内容...')（加载 DataStore 中的帮助文本）
  • 设置: 创建 SettingsView 或接入 dialogView

文件: GameApp.ts

B1-3: ProgressBar 组件 — 替代 Graphics 进度条

目标: StatusView 的 HP/MP/EXP 条用 ProgressBar

方案:

  • StatusView 中 makeBar() 方法改为创建 ProgressBar:
    const progressBar = barNode.addComponent(cc.ProgressBar);
progressBar.barMode = cc.ProgressBar.BarMode.HORIZONTAL;
progressBar.fillRange = 1;
// 刷新时: progressBar.progress = hp / maxHp
  • 保留 Graphics 作为背景轨道，ProgressBar 作为填充层

文件: StatusView.ts

第二批：P1 — 引擎优化 + 核心经济系统（2 周）

B2-1: tween 缓动系统 — UI 面板切换动画

目标: 面板打开/关闭滑入滑出，按钮点击反馈缩放

涉及视图: 全部 34 个面板

方案:

  • 所有面板的 toggle() / show() / hide() 方法中，用 cc.tween 替代直接设置 active
  • 示例 (InventoryView):
    toggleEquip(): void {
  cc.tween(this.node)
    .to(0.2, { scale: cc.v2(1.05, 1.05) })
    .to(0.1, { scale: cc.v2(1, 1) }, { easing: 'quadOut' })
    .start();
  // ... 现有逻辑
}
  • BottomToolbar 按钮的 TOUCH_START/TOUCH_END 用 tween 做缩放反馈

文件: assets/cocos/GameApp.ts + 所有 View

B2-2: ScrollView + Layout 组件 — 长列表滚动 + 自动排列

目标: 聊天/道具/宠物列表支持滚动，装备槽位自动排列

方案:

  • ChatView: 消息容器挂载 ScrollView + ScrollBar，inertia 开启
  • InventoryView: 道具列表挂载 ScrollView，装备面板改用 Layout VERTICAL
  • PetView: 宠物列表改用 Layout + ScrollView
  • MainMenu: 菜单项改用 Layout
  • BattleView: 命令面板改用 Layout HORIZONTAL

文件: ChatView.ts, InventoryView.ts, PetView.ts, MainMenu.ts, BattleView.ts

B2-3: RichText 组件 — 聊天消息格式化

目标: 聊天消息中显示彩色稀有度文字、@提及高亮

方案:

  • ChatView 的 refreshMessages() 中，Label 替换为 RichText
  • 构造 RichText 标签字符串: <color=#ff0000>@玩家:</color> 你好

文件: ChatView.ts, game/ChatSystem.ts

B2-4: 商人摆摊系统（Street Vendor）

目标: 玩家间摆摊交易，20 物品栏

原版参考: systeminc/field.h (Show_Sell_Item, Show_Vendor_Item)，20 个物品上限

方案:

  • 新建 StreetVendorView.ts — 摊位 UI（商品列表 + 价格 + 购买按钮）
  • 新建 game/StreetVendorSystem.ts — 摊位状态管理
  • 协议: STREET_VENDOR 系列协议（创建/浏览/购买/关闭）
  • 集成到 GameApp.ts + GameClient.ts

文件: 新建 2 个文件 + 修改 3 个文件

B2-5: 商城系统（Cash Shop）

目标: 彩币购物车，多页商品浏览

原版参考: system/shop.cpp — 5 页商品文件，购物车 15 件，MD5 校验

方案:

  • 新建 CashShopView.ts — 商品列表 + 购物车 + 结算
  • 新建 game/CashShopSystem.ts — 商品数据 + 购物车状态
  • 协议: 商品列表请求/购买确认/余额查询

文件: 新建 2 个文件 + 修改 2 个文件

B2-6: 宠物图鉴系统（Pet Album）

目标: 570 种宠物收集册，8 个/页

原版参考: systeminc/menu.h (PET_ALBUM, MAX_PET_KIND=570)

方案:

  • 新建 PetAlbumView.ts — 分页网格显示，已收集/未收集状态
  • 新建 game/PetAlbumSystem.ts — 收集记录 + 解锁条件
  • 复用 DataStore.enemyBase 数据

文件: 新建 2 个文件 + 修改 1 个文件

第三批：P2 — 完整复刻 + 引擎升级（2-3 周）

B3-1: 拍卖行系统（Auction）

目标: NPC 拍卖，出价/一口价/查看

原版参考: systeminc/lssproto_cli.h — EDEN_AUCTION 协议

方案:

  • 新建 AuctionView.ts — 拍卖列表 + 出价界面
  • 新建 game/AuctionSystem.ts — 拍卖状态管理

B3-2: 签到系统（Sign-In）

目标: 月历签到奖励

原版参考: systeminc/CharSignDay.h — 30 天月历 UI

方案:

  • 新建 SignInView.ts — 月历网格 + 领取按钮
  • 新建 game/SignInSystem.ts — 签到记录

B3-3: 转盘抽奖系统（Turntable）

目标: 10 格转盘动画 + 奖品

原版参考: systeminc/Turntable.h — 指针旋转 + 速度控制

方案:

  • 新建 TurntableView.ts — Canvas 绘制转盘 + tween 旋转动画
  • 新建 game/TurntableSystem.ts — 奖品配置 + 结果处理

B3-4: 法宝合成系统（Magic Item）

目标: 3 格合成界面 + 光环效果

原版参考: systeminc/magicitem.h — 3-slot combination

方案:

  • 新建 MagicItemView.ts — 合成槽 + 结果预览
  • 复用 ItemCrafting.ts 合成逻辑

B3-5: 师徒系统（Teacher）

目标: 师徒关系 + 专属 UI

原版参考: systeminc/lssproto_cli.h — TEACHER_SYSTEM 协议

方案:

  • 新建 TeacherView.ts — 师徒列表 + 任务进度
  • 新建 game/TeacherSystem.ts — 关系管理

B3-6: 家族进阶功能

目标: 家族纹章 + 庄园挑战 + 家族银行扩展

原版参考: systeminc/pc.h — FAMILYBADGE, MANOR 系统

方案:

  • 扩展 GuildView.ts — 纹章展示 + 庄园入口
  • 扩展 GuildSystem.ts — 庄园挑战逻辑

B3-7: Animation 组件 — 角色/UI 平滑过渡

目标: 角色动作间平滑切换

方案:

  • CharacterView.ts 用 tween 做 sprite 透明度交叉淡入淡出
  • 后续如需完整动画系统再引入 Animation Clip

B3-8: ParticleSystem2D — 特效升级

方案:

  • BattleAnim.ts 伤害数字升级为 ParticleSystem2D
  • WeatherSystem.ts / MapEffects.ts 接入引擎粒子

B3-9: AudioSource — 音频现代化

方案:

  • SoundSystem.ts 改用 AudioSource 组件
  • 统一 BGM/SFX 管理

关键文件清单

优先级 改动文件 改动内容
P0 BattleView.ts 3 个 TODO 实现（道具/宠物/技能）
P0 GameApp.ts 3 个 TODO 修复（技能/帮助/设置）
P0 StatusView.ts ProgressBar 替代 Graphics 条
P1 GameApp.ts + 所有 View toggle/show/hide 加 tween 动画
P1 ChatView.ts, InventoryView.ts, PetView.ts ScrollView + Layout
P1 ChatView.ts, game/ChatSystem.ts RichText 聊天格式化
P1 新建 StreetVendorView.ts, StreetVendorSystem.ts 商人摆摊
P1 新建 CashShopView.ts, CashShopSystem.ts 商城
P1 新建 PetAlbumView.ts, PetAlbumSystem.ts 宠物图鉴
P2 新建 AuctionView.ts, AuctionSystem.ts 拍卖行
P2 新建 SignInView.ts, SignInSystem.ts 签到
P2 新建 TurntableView.ts, TurntableSystem.ts 转盘
P2 新建 MagicItemView.ts 法宝合成
P2 新建 TeacherView.ts, TeacherSystem.ts 师徒
P2 扩展 GuildView.ts, GuildSystem.ts 家族进阶
P2 CharacterView.ts tween 透明度过渡
P2 SoundSystem.ts AudioSource 接入
P2 BattleAnim.ts, WeatherSystem.ts ParticleSystem2D

执行顺序与并行度

Session 1: P0 — BattleView TODO + GameApp TODO + ProgressBar（1 周）
  └── 验证: 战斗中道具/宠物/技能可用，进度条正确显示

Session 2: P1-A — tween + ScrollView + Layout + RichText（1 周）
  └── 验证: 面板切换有动画，列表可滚动，聊天彩色文字

Session 3: P1-B — 商人摆摊 + 商城 + 宠物图鉴（1 周，可并行）
  └── 验证: 摆摊交易可用，商城浏览购买，图鉴收集

Session 4: P2-A — 拍卖行 + 签到 + 转盘 + 法宝 + 师徒（1-2 周）
  └── 验证: 各系统独立可用

Session 5: P2-B — 家族进阶 + Animation + Particle + Audio（1 周）
  └── 验证: 引擎组件全部接入

完成度预估

当前: ████████████████████░░░░░░░░░░ 75%

第一批后: ██████████████████████████░░░░ 85%  ← 可玩 MVP
第二批后: █████████████████████████████░ 95%  ← 功能完整
第三批后: ██████████████████████████████ 100% ← 完整复刻

评论

评论功能即将上线，敬请期待。