能戳，能揉，还能拖着走。
我用 Codex 给自己做的鸿蒙应用「宝贝日程表」加了一群小宠物。选一只放在页面里，看课表的时候，它也在旁边。
从一个可以揉捏的网页玩具开始
这个想法来自 Softie，一个开源的网页解压玩具。打开页面，中间是一只半透明的史莱姆：按住会凹下去，拖动可以把它拉长，松手后又晃着弹回来。旁边还能调颜色、软硬和阻尼。
我喜欢这种软乎乎、可以顺手捏两下的手感，想把它放进宝贝日程表。于是让 Codex 先把项目跑起来，再评估手机上的接入方式。
接入之外，我还希望重新设计角色，让 App 有自己的宠物。
最初的接入讨论，后面根据实际体验调整了入口和呈现方式。
Softie 原版使用 WebGPU，接入时需要先确认鸿蒙设备能否支持这套渲染方式。最终采用 Three.js 与 WebGL2，通过鸿蒙的 Web 组件加载互动场景。页面、脚本和角色素材随应用打包，不需要再打开外部网站。项目中也保留了所用 Softie、Three.js 的许可文件。
接入示意：资源随应用打包，互动场景通过 Web 组件显示在原生浮层里。
第一张概念稿叫“小晴团”：杏桃色身体、花瓣小手、奶油色额纹，画出了正常、压扁和拉伸的样子。Codex 照着它用代码搭出角色网格，放进一个独立互动页，从首页点进去玩。
小晴团概念稿（左）与早期网页原型（右）。
上手机以后，我觉得太粗糙了。还要专门打开一个页面去玩，也和我想要的感觉不一样。我希望看日程时就能见到它，把它放在 App 右下角。
宠物于是改成了主页面上的浮层，可以用手拖到别的位置。放在日程旁边以后，触摸范围和显示时机也得跟着调整，免得挡住课程或影响表单编辑。
泡泡看起来像一块淡蓝色塑料
后来，我又让 Codex 扩充角色，做出了桃桃、小青团、星露和泡泡，放进宠物管理页供用户选择。我想要的是柔软、透明、有光泽的质感。
四只宠物的原画，共用一套互动逻辑。
原画做出来了，运行时的角色却和它对不上。泡泡的差距很明显：原画有卷起来的水滴尖、细小高光和深浅变化，页面里动的那个却像一块淡蓝色塑料。
Codex 起初尝试调整材质、灯光和轮廓。比了几轮之后，差距仍然明显：原画里的细节没有进入模型，只调灯光很难补回来。
最后换了渲染方式，把原画作为贴图放到可变形网格上。轮廓、颜色、表情和光泽沿用原画，按压或拉伸时，网格带着画面一起变形，松手后再弹回来。管理页里的预览图和实际互动的角色终于用上了同一份素材。
原理示意：同一份原画贴在网格上，随网格一起按压、拉伸和回弹。
真机截图局部，分别放大。
这种做法接近一张能被捏动的浮雕，属于 2.5D 表现。光影来自原画，不能把角色转到背面看。
放在日程旁边，也别挡住日程
宠物要在日程页面里活动，我最在意的是别妨碍原来的操作。
在主页面上叠加一层 ArkUI 原生浮层，里面用透明背景的 Web 组件显示宠物。手指拖动时，原生层移动浮层；轻点时，互动模块让宠物弹起来。触摸区域收在宠物附近，周围仍然可以滚动列表、点击课程。进入编辑页后不显示宠物，系统弹出的表单也在它上方。
连续轻点时，宠物会跳得更高，随后落回原处。你把它拖到哪里，它弹完就回到哪里。
宠物位置按页面可用区域的比例保存，页面尺寸变化后再换算坐标。选中的角色、大小、音效和显示状态也会保存，切换页面或重新打开 App 后仍然保留。
管理入口放在“我的”，旁边有“显示宠物”总开关。进入管理页，可以选择角色、直接体验互动，再往下调整音效和大小。大小范围是 60% 到 120%，默认 80%。
把素材和互动一起装进 App
最初四张角色原画转成透明 WebP 后，总大小从约 4.59 MB 降到 0.73 MB，减少约 84%。选择图和互动角色共用这四份素材，由原生层读取后传给渲染页。
点击、揉捏和回弹时的短音通过 Web Audio 合成，可以在宠物管理里单独关闭。动画在互动时绘制，静止后停止连续绘制；页面隐藏或 App 退到后台时，动画和声音一起暂停，回到前台再继续。
现在，宠物管理页里已经有八只宠物。除了最初的四只，又增加了兔子、大象、猪和长颈鹿。
桃桃、小青团、星露、泡泡，以及后来加入的四只动物。
新版默认显示宠物，音效也默认开启。想换一只，可以到“我的”里的“宠物管理”选择，也可以调整大小或关闭音效。不想显示时，在“我的”里关掉“显示宠物”就好。
下一只宠物，你来提
群里有位朋友说，女儿喜欢小白兔，想给她做一只宠物。我答应把兔子加进 App。
后来，我让 Codex 一起补上兔子、大象、猪和长颈鹿，沿用已有的果冻风格和互动方式。
宠物还可以继续新增。你或孩子想要哪一种，可以告诉我，也可以发来喜欢的样子，我来加进宝贝日程表。
