一、目标
做出一个可交互的、好看的表盘。
使用我流全栈开发。
二、制作
千万别再用 RGB565 格式了，它会把你的手环变砖！
求稳定那就老实用 ARGB8888。
（一）制作时钟
1.
写了个最简数字时钟做测试，用的是LVGL的Label控件，结果就连最基本的字体，在真机上都会在切换页面时花屏，说明渲染逻辑根本没处理好。
那还说啥了，任何文字直接换成用图片做。
让Codex写了个Python小工具，用来把单字转换成图片，工具带tkGUI，可预览效果。
做了个小入场动画，每次时钟会从顶部降下，同时透明度从透明变成不透明。如何检测入场：检测页面状态如果与上次检测差了2s，就视为全新入场。
后续：想要加上数字纵向稍错位、吊绳效果，简单。
2.
换用 OpenCode 帮我写代码。
依旧是写了个tkGUI工具生成单字图片，比Codex写得好用。贴在此：
特性：
- 生成 ARGB8888 位图，双格式：_sim（LVGL v9）、_device（LVGL v8）
- 可以指定字体、字号、文字颜色
- 可以指定背景颜色（仅预览不写入）、描边宽度和颜色、阴影偏移和颜色
- 可以指定位图尺寸、水平对齐方式
- 可以指定文字序列、输出目录
（二）制作装饰区
时钟下方的区域则是无限可能的装饰区。
我这次最终想要实现的是一个有无限运动背景、可交互的人物行走动画。
1. 制作连续背景
要实现背景无限滚动，则需要背景图是横向连续的（二方连续）。
先在原神几年前的前瞻直播里截了张须弥夏活的live2D背景图，丢给GPT-Image2让它把这张图扩展成一张3:1的横版连续背景图。
当然，Image2生成的图有可能是横向连续的，但是Image2生成的图是横向连续的这件事不太可能。
此时想起了B站一位大佬的视频，视频里的ComfyUI节点实现了纹理贴图的四方连续，当然他那个要高级多了。
当场照搬他的方法，配置了我的第一个ComfyUI工作流：用FLUX.1 Fill Dev模型；拉好电线；照搬提示词；把图片从中间分开（因为中间部分必定连续），然后左右两部分换个位置（这样要重绘的接缝区域就在正中央），作为输入；临时手画一张代表要重绘的中央接缝区域的mask遮罩，丢给模型。重绘出的图非常可用。
至此，背景图已经是横向连续的了。
2.驱动背景
（1）方案#1圆环
我一开始就很想做那种人物在星球背景图上行走的效果，这要求背景图是球形/环形的，绕着屏幕下方一个轴旋转。
于是用PS的滤镜-极坐标，费好大一番功夫把这个横版背景变成了不错的环形星球背景。
然后写Lua程序。
我把圆环的下半部分截掉（因为是重复的），然后在程序中放两个半圆环，拼在一起就形成了完整的圆环。但精度问题有小接缝。
我也试了一整个圆环直接转动，但CodeX就是写不对这个旋转轴逻辑。
而且在模拟器和真机上的性能表现都很糟糕，只有5fps左右。
所以有点想弃用这个方法。
（2）方案#2预渲染帧动画
由于我看过别人做的动态表盘都是帧动画，加上CodeX对我的引导，我真就产生了把这个圆环旋转做成预渲染帧动画的念头。
结果让Codex帮我写了个Python脚本渲染帧，共180帧，15fps，但图片大小令人发指，平均350KB/一张图，这能用就见鬼了。
果断放弃。
（3）方案#3返璞归真
果然还是做最原始的横版滚动吧，这样只用位移不用旋转，旋转毕竟还是太耗了。
5.17 换用 OpenCode 帮我写代码。
把一张横板图从中间拆成两份，一份接在另一份后面进行滚动，节省性能。
效果意外地不错，单纯的滚动很流畅。
3. 制作人物动画
总共做了两个动画。一个是纳西妲走路，一个是纳西妲睡觉，睡觉动画在晚间23~6点播放，届时背景滚动也会停止。
（1）使用 ezgif.com 编辑 Webp 动图
从原神的 Fandom 获取纳西妲的活动小人动图，格式是webp。
在 ezgif 里，首先使用 Effects – Transparency，将动图背景扣除。
然后，Resize 到手环屏幕上的目标大小。
接着，用 Frame 工具，跳过2的倍数的帧，处理完后，再跳过3的倍数的帧。图片质量可以填95左右省空间。
最后，也可以调整一下 Speed。
（2）
让 OpenCode 写了个人物动画状态机逻辑，每个动画的各种属性如位置、帧数等，写到一张数组里头。
发表回复