71 lines
6.2 KiB
Markdown
71 lines
6.2 KiB
Markdown
# 商城 0917 改版
|
||
|
||
- 新 prefab：`assets/shop/prefab/shop0917.prefab`。
|
||
- 独立图片：`assets/shop/redesign0917/texture/`，共 144 张切片，使用独立 UUID。原商城 prefab 和图片保留。
|
||
- 新版资源的文件夹、图片及配套 meta 文件名均使用英文/数字；资源清单保留原始中文来源路径，便于追溯。重命名保留已有 UUID，图片内容不变。
|
||
- 新版 prefab 的 226 个 Sprite 及运行时生成的图片数字统一使用 `TRIMMED`。布局节点保留按钮、子节点和 Widget；图片放在 `SpriteVisual` 子节点，按原图尺寸缩放到设计尺寸。头像/月卡按钮换图、圆点状态和背景适配也使用这一方式。
|
||
- 展示脚本：`assets/shop/script/Shop0917View.ts`。商品支付、发货、月卡入口继续由原 `shop.ts` 处理。
|
||
- 首页预加载、首页打开商城、局内商城已切到 `prefab/shop0917`。
|
||
- prefab 文件名独立，但根节点保留 `shop`，兼容既有 `Canvas/shop` 发货与月卡刷新回调。
|
||
|
||
## 页面组织
|
||
|
||
设计宽度 1080，编辑器画布高度 2340。顶部信息栏和活动轮播固定，占设计稿前 1005 像素；下方仅礼包和金币共用一个纵向 ScrollView，按屏幕实际高度调整视口。4000 像素效果图仅作为商品排布坐标参考，没有把实际页面做成长屏。
|
||
|
||
三档礼包、六档金币、商品价格、折扣、奖励数量、首充加赠数量、所有商城主体标题和 HUD 数字/倒计时均由 Sprite 图片构成。长金币数值会缩放至信息栏宽度，不截断数字。
|
||
|
||
活动支持定时切换、横向跟手拖动及圆点选择。拖动位移按轮播本地坐标计算，松手后用 0.16～0.32 秒缓动吸附；不足 90 设计像素时回到原位。三张横幅支持连续首尾循环，两张时边缘有阻尼回弹，只有一张时保持固定并隐藏圆点。自动切换和圆点点击也使用平滑过渡，动画中再次按住可直接接手；手动交互后重新计时 5 秒再自动切换。已过期/已购买的新手礼包、不满足原有开放条件的 Jungle 活动会隐藏。横向拖动不会触发横幅购买按钮。
|
||
|
||
活动图片对应关系：`starter_pack` 打开 `NewbieGift` 幸运礼包，使用 `lucky_banner.png`（原“幸运礼包小图”）；Jungle 小鱼干活动使用 `starter_banner.png`（原“小鱼干小兔”，英文文件名沿用导入时名称）。两者的显示条件、购买/领取按钮及入口各自绑定，避免按旧资源名推断活动类型。
|
||
|
||
## 仍需补充的图片
|
||
|
||
以下前三类已经临时复制旧图放入独立目录，但旧图与效果图样式不同，不能视为最终一致：
|
||
|
||
| 效果图所需素材 | 当前临时处理 | 新版位置 |
|
||
| --- | --- | --- |
|
||
| 棕色描边的 `1小时`、`2小时`、`4小时`，不带前置加号 | 旧图是黑色描边的 `+1小时`、`+2小时`、`+4小时` | `texture/shared/hours_1.png`、`hours_2.png`、`hours_4.png` |
|
||
| 红色关闭按钮 | 旧图为橙色按钮 | `texture/shared/close.png` |
|
||
| 顶部头像的棕色细边框 | 旧图为黑色边框；实际头像继续显示玩家头像 | `texture/shared/kuang_1_c2b141f2.png` |
|
||
|
||
此外，为保留原支付异常处理，`ConfirmBox` 暂时沿用旧文字组件。要把这个异常弹窗也全部改为图片，还需要下列文案图（可以按整段出图）：
|
||
|
||
1. `商城充值`。
|
||
2. `网络异常\n请重新登录小游戏\n领取充值奖励`。
|
||
3. `网络异常\n请检查网络连接后\n再次领取`。
|
||
4. `确定`。
|
||
|
||
未从效果图截字，也未用系统字体生成替代图片。主页面已使用图片；上述异常弹窗在图片补齐前仍是明确的未完成项。
|
||
|
||
项目中找到了爪印金币、棕色描边的乘号和价格“元”字，已无损复制/从图集中导出。其他图片来源记录在相邻的 `../shop0917-resource-manifest.json` 中。
|
||
|
||
## 验证
|
||
|
||
- `node --test tools/test-shop0917.cjs tools/test-monthly-card-lifecycle.cjs`：31/31 通过，其中商城测试 13 项，覆盖活动图片与入口对应关系、英文路径、TRIMMED 尺寸、换图适配、拖动位移、短拖回弹、首尾循环、边缘阻尼、多指隔离、动画接手及关闭后清理。
|
||
- Cocos Creator 2.4.15 预览引擎：成功反序列化新 prefab；验证九个购买按钮的真实鼠标点击、固定顶部与商品滚动、首充/月卡状态、图片数值刷新、横幅拖动不误触、1080×1920 和 1080×2340 视口。
|
||
- 浏览器验证拦截了购买回调，仅核对商品 ID，没有发起真实支付。头像/服务器状态使用测试桩，因此预览图的头像内容为空，运行游戏时由原头像逻辑加载。
|
||
- 跟手效果另经 Cocos 2.4.15 实际鼠标事件验证：松手前检查到连续位移，松手后检查到中间动画位置；从横幅图案开始拖动也可跨首尾切换，拖动不购买，拖动结束后正常点击仍生效。
|
||
- TRIMMED 调整后再经 Cocos 2.4.15 预览引擎验证：包含动态数字的 232 个 Sprite 均保持 TRIMMED 和原图尺寸；640×480 头像适配、月卡换图、轮播拖动及月卡按钮点击通过。原布局属性、资源引用与 144 张图片哈希均核对一致。
|
||
- 本次前端 TypeScript 检查有 18 个项目既有诊断，`Shop0917View.ts` 和 `shop.ts` 无诊断。项目全量 `tsc` 另有既存的 `server/laf-cloud/functions/drawHead.ts` 语法错误。
|
||
- 入口测试 `tools/test-first-game-entry.cjs`：63/73 通过；10 个失败均在 HEAD 基线复现，主要是既存测试桩缺少 `isRainbowWinStreak`、`destroyPropGuideMask` 等方法。
|
||
|
||
### 引擎预览
|
||
|
||
固定顶部与礼包区域：
|
||
|
||
|
||
|
||
向下滚动后的金币区域（顶部位置不变）：
|
||
|
||
|
||
|
||
## 资源重建
|
||
|
||
用安装 Pillow 的 Python 执行：
|
||
|
||
```powershell
|
||
python tools/build-shop0917.py "C:\Users\NK\Desktop\图片资源\商城界面0917"
|
||
```
|
||
|
||
该脚本会以英文名称导入图片，重建采用 TRIMMED 的新 prefab 和独立 meta，并保留已导入资源的 UUID；新资源使用确定性 UUID。对 prefab 的后续手工调整，应同步到脚本后再执行，以免被重建覆盖。补齐缺失资源时也需要同步修改对应资源映射。本次重命名与 Size Mode 调整直接迁移现有 prefab，保留了手工调整的布局。
|