同一种效果，不同技术的区别

围绕微信小游戏常见的结算、奖励、卡牌、背包与角色界面，先约定相同的画面与输入，再比较实现路线。能做得一样，不代表改起来一样；默认画面不同，也可能只是素材不同。 本页分析可选方案，示例属于浏览器原理演示，微信适配与真机表现需在目标工程中验证。

前三项提供可操作的 并排对照，使用本站原创的小游戏风格素材。其他三项链接基础实验与教程。

弹窗：整图缩放与九宫格

以签到奖励或关卡结算框为例，先把内容、装饰和按钮拆开。操作 弹窗对照，把面板由窄变宽。

维度	整图缩放	九宫格背景 + 独立内容
看得见的区别	圆角、边框、文字和装饰一起拉伸	角保留尺寸，边与中心按规则延展，内容单独排版
可调维度	整体宽高、透明度	内容宽高、边距、背景尺寸可分别变化
素材成本	固定尺寸快；变体多时可能重复出图	需要正确切分，装饰不可误入拉伸区域
CPU／GPU	少量绘图几何，文本若烘焙便失去动态性	增加布局与几何；九块不等于必然九次 GPU 绘制
维护与微信	换文案、语言、长内容容易返工	切分、最小尺寸、字体与目标引擎合批条件需测试

面板很小或固定比例时，整图方案也可能合适。九宫格解决背景延展，不自动解决换行与多语言。详见 九宫格、弹窗案例。

卡面流光：预烘焙图片与实时 Shader

以小游戏的图鉴卡片、装备稀有度流光为例，操作 卡面对照，暂停后缓慢拖动时间轴，观察预制帧与连续材质计算的区别。

维度	预烘焙图片／序列帧	实时 Shader
看得见的区别	能保留指定帧的细节；慢放可能显露步进	参数可连续变化；效果受实际算法和采样限制
可调维度	选帧、速度、整体颜色与透明度	流光位置、角度、颜色、遮罩与时间等输入
素材成本	帧数、分辨率、方向和款式可能相乘	纹理与程序；复杂效果仍可能依赖多张贴图
CPU／GPU	更新帧索引与纹理绘制，主要注意纹理内存	更新参数及 GPU 计算；采样数、面积和叠加决定成本
维护与微信	换外观可要求重新输出；核对纹理格式	需维护材质与引擎接入，核对图形接口和手机表现

卡牌浮起属于位置变化，不能代替卡面内部流光。不要为几张卡的固定演出直接更换引擎；先判断是否真的需要连续参数。详见 Shader。

奖励金币：Canvas 2D 与 WebGL

金币对照 让同一类轨迹进入不同绘制路径。先比较数量和覆盖范围，再讨论提交方式；不同美术、不同轨迹或不同分辨率的 FPS 不能直接排名。

维度	Canvas 2D	WebGL 批次绘制
看得见的区别	贴图与混合相同时，结果可以很接近	不是自动更精致，主要改变绘制组织与材质能力
可调维度	数量、寿命、轨迹、缩放、透明度	同样参数，也可扩展实例数据或 Shader 表达
素材成本	原始图片、可选图集	纹理、顶点／实例数据和材质代码
CPU／GPU	粒子更新和逐项 API 提交可能累积	同样在 CPU 更新时并不消除逻辑；可组织合批，但仍有 GPU 叠加成本
维护与微信	需自行维护对象池、输入与资源	另需维护缓冲区、纹理与上下文；按平台接口验证

不把某台电脑上的结果写成手机阈值。粒子数之外，大面积半透明覆盖同样重要。对应 粒子、性能验证。

角色：序列帧与 Spine 骨骼

以小游戏关卡角色的待机、攻击和换装为例，操作 动画结构实验。该实验是自绘原理示意，未集成 Spine。

维度	序列帧	骨骼运行库
视觉与参数	轮廓和透视可逐帧完全变化，播放可选帧	部件连续变换，换装和动作复用更灵活；转身仍需素材
素材	动作 × 方向 × 帧数 × 款式累积	贴图、骨骼、附件、网格与关键帧
CPU／GPU	选帧与绘制，注意解码纹理成本	动画求值与可能的网格变形，具体由运行库决定
维护与微信	美术修改可能影响许多帧，核对图集预算	制作工具、引擎和运行库版本需匹配，复杂度与实例数需测试

背包：纯代码与引擎／FairyGUI

以小游戏的背包、装备列表和道具提示为例，操作 列表实验。它比较真实节点创建数量，不实现完整占格背包。

维度	纯代码绘制	引擎 UI／FairyGUI
视觉与参数	可以实现同样的网格、图标与提示，布局规则自己写	编辑器组织组件、状态、滚动与皮肤，规则仍需代码
素材	图片、字体、坐标和样式约定	图片、字体以及组件／UI 包与对应 SDK
CPU／GPU	自行处理裁剪、命中、可见项与绘制	节点与布局存在运行成本，合批受材质与遮罩等条件影响
维护与微信	复杂排版和输入持续增长时维护压力增加	视觉迭代更直观，但要固定引擎、SDK 与构建链路

UI 编辑器不会自动判断“长剑占三格，旋转后可否放入”。数据模型和显示对象需要分开，参见 输入。

空间：分层贴图与实时三维

小游戏主界面的角色展示、建筑装饰和转盘，可以采用固定视角贴图，也可以使用实时三维。先明确是否允许连续转动视角。适配实验 只解释二维坐标转换，不是三维旋转演示。

维度	分层贴图／预渲染	实时三维 + 二维 UI
视觉与参数	固定镜头可很精细；只能展示准备过的角度	相机、物体和光照能连续改变，需保持几何与遮挡
素材	图片层与固定演出帧，增加视角常需再制作	模型、贴图、绑定、材质与相机设置
CPU／GPU	二维组织与透明叠加，资源仍可能很大	场景更新、几何、着色及可选渲染通道
维护与微信	固定方案易交付，交互扩展受视角约束	制作链路更长，需验证三维构建、图形接口和设备预算

最后写下你的限定条件：固定还是自由视角、固定还是动态文案、少量还是大量实例、谁负责迭代、目标手机是什么。有了这些条件，技术差异才会转化成可执行的选择。继续使用 选型方法。