作品详情／ CASE STUDY · 02

TreeFighter6Tree 个人 IP 小程序

为《街头霸王6》游戏博主「Tree」量身定制的个人 IP 微信小程序——既是粉丝聚拢与接单入口，也是一套完整的角色招式中文数据库。

主视觉截图占位
建议放：角色详情页或首页的小程序界面截图

是什么 · 为什么做

OVERVIEW

Tree 是一位街霸6游戏博主，业务（教学视频、个人赛事、代打私教接单）散落在 B 站、抖音、闲鱼多个平台，缺一个聚拢粉丝、统一引流接单的入口。

这个小程序就是 Tree 的个人 IP 工具——不做开放社区，只做精准服务他生意的工具。同时顺带解决一个真实玩家痛点：街霸6官方招式数据只有英文、查阅不便，于是把 30 个角色的招式与帧数据完整中文化并可视化。

FEATURES

帖子流，视频帖点击直跳 B 站观看，含搜索、下拉刷新、点赞、分享。

季票轮盘切换 4 个季度，3 列角色网格，海报走云存储动态加载。

30 角色的命令列表 / 帧数据 / 图例三大 Tab，支持 Classic / Modern 双操作模式切换。

把抽象帧数据做成血条式三段彩条（前摇 + 持续 + 后摇），含实时搜索。

Tree 介绍、社群二维码、B站/抖音/闲鱼社媒一键复制，服务接单转化。

气泡式评论区、点赞、热度/时间排序、二级回复 @。

功能截图 ①
角色详情三 Tab

功能截图 ②
帧数据彩条

功能截图 ③
雷达图 / 查询页

DEEP DIVE

从官网英文页扒取全部命令列表与帧数据，人工中文化，确立「中英双份数据架构」（英文原文存档、中文版供前端）。还原了搓招指令序列：方向/拳脚图标 + 强度 L/M/H + 派生箭头 + 斗气消耗，按官网原序混排映射到自绘图标。

项目最硬的骨头：Modern 数据藏在官网 JS chunk 里而非 HTML，自带的顺序表还是错位、不可信。我用「Classic 帧值反向匹配 + 双射校验」「skill 字段 slug 映射」精确定位，做到 940+ 招零空名、零未识别图标，且两种模式数据绝不混用。

放弃 30 角色共用静态图，改用脚本按 5 维评分实时渲染 PNG，几何经实测校准对齐底图辐条。整体技术决策处处服务于「先验证再投入」：现阶段近乎零成本运行，收费按三阶段渐进，主包压在 1.5M 内（大数据放分包）。

这个项目还在打磨中

小程序需在微信内打开，上线后会补充体验入口。