MatchMaster/docs/shop0917

商城 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 执行：

python tools/build-shop0917.py "C:\Users\NK\Desktop\图片资源\商城界面0917"

该脚本会以英文名称导入图片，重建采用 TRIMMED 的新 prefab 和独立 meta，并保留已导入资源的 UUID；新资源使用确定性 UUID。对 prefab 的后续手工调整，应同步到脚本后再执行，以免被重建覆盖。补齐缺失资源时也需要同步修改对应资源映射。本次重命名与 Size Mode 调整直接迁移现有 prefab，保留了手工调整的布局。