Loiter 开厅记:240×135 像素的社交宇宙

Loiter 开厅记:240×135 像素的社交宇宙

那台设备到手的时候,我的第一反应是:这也太小了。

M5Stack Cardputer——比信用卡大不了多少,240×135 像素的 LCD 屏,56 个挤在一起的微型按键,一块 1750mAh 的电池。它跑的是 ESP32-S3,一颗主要给洗衣机和电灯泡用的芯片。

我要在上面造一个社交厅。

一个悖论

事情的起因很简单:公司组织线下活动,采购了一批 Cardputer,问我能不能做点什么让大家玩起来。

但这里有一个根本性的悖论——现场的人本来就站在一起。他们能面对面说话,能拍肩膀,能递名片。在一个物理社交已经在发生的空间里,做一个数字社交工具,这不是多此一举吗?

如果只是做个聊天室,那确实多此一举。

但如果你把它想成一层游戏——

想象一个安静的开发者,他不擅长主动搭话,但他能在 240×135 的屏幕上打出一行字,那行字会实时飘到投影大屏上,所有人都看得见。想象一个活泼的产品经理,她发现自己的虚拟形象因为聊天太多,头顶冒出了金色的旋转光芒——SSR 稀有度。想象一个路过的实习生,对着 Cardputer 的小屏幕摇一摇,大屏上他的角色脚下突然爆开一圈樱花。

Loiter 不是取代社交,而是在物理空间之上叠加一层游戏化交互层——让安静的人有出口,让活泼的人有舞台,让所有人有共同的话题。

名字 Loiter(闲逛 / 游荡)精准命名了这个动作:在一个空间里无所事事地晃悠、撞见人、随便聊两句。这不是某个功能,这是社交厅的本质。

口袋里的终端

打开 Cardputer,1.5 秒的金色 LOITER logo 闪过,然后你看到的是一个复古终端界面——绿底黑字,上方状态栏显示你的昵称和当前频道,中间是消息流,底部是输入行。

用 QWERTY 键盘打字,按回车发送。消息通过 MQTT 协议飞到云端服务器,再扇形广播给同一个房间里所有的 Cardputer。延迟几乎感觉不到。

这就是 MVP。但有意思的东西在后面。

三个频道

按 Tab 键切换频道:#main(主厅)、#fishing(摸鱼区)、#help(求助区)。每个频道在 Cardputer 上用不同颜色区分——暖金、青绿、紫色。大屏上,每个人头像外圈的光环颜色也跟着变。

/face —— 32 字节的灵魂

输入 /face cat warrior,你的头像就开始生成了。

服务端调用 Azure gpt-image-1.5,生成一张 1024×1024 的 Q 版国风 chibi 角色——猫耳武士,汉服飘飘。这张图会出现在大屏上,256 像素的精美彩图。

但 Cardputer 的屏幕只有 240×135,MQTT 单包上限 1024 字节。怎么把一张 AI 生成的精美头像塞进去?

答案是 Floyd-Steinberg 抖动。服务端用 Pillow 把 1024px 的彩图缩到 16×16,转灰度,再用误差扩散算法抖动成纯黑白 1-bit 位图。最终结果:32 字节。就是这 32 字节,在 Cardputer 上放大 4 倍显示成 64×64 的像素头像。抖动后的黑白点阵竟然保留了角色的轮廓和神态——猫耳、铠甲的轮廓清晰可辨。

一个 AI 生成的灵魂,压缩到 32 字节,穿越 MQTT 到达一块比信用卡还小的屏幕。

/e spark —— 摇一摇与五种绽放

Loiter 有 5 种表情特效(emote),每一种都是独立的粒子系统:

  • 🌸 bloom:28 粒樱花花瓣旋涡爆发,贝塞尔曲线勾勒花瓣形状
  • ✨ spark:先发射火箭上升减速,到达顶点后 36 粒全色相粒子炸开,拖着余焰尾迹
  • 🍃 wind:20 片树叶横扫而过,正弦波上下摆动
  • 🦊 fox:3 团×8 粒橘黄鬼火,轨道旋转散开
  • 🌈 rain:7 色彩虹弧从角色头顶渐显,配合 12 颗彩色五角星散射

不想打字?摇一摇 Cardputer。机身内置的 BMI270 加速度计检测到超过 2.5g 的晃动,就随机触发一个 emote。3 秒冷却,防止疯狂摇。

大屏上看到有人的角色突然绽放樱花或者炸出烟花,全场会心一笑——但你不知道是谁在摇。

/ask —— 鸟居旁的狐灵

Vix 狐灵——鸟居旁的守护者

大屏的草原背景右侧有一座鸟居(日式神社门),鸟居旁漂浮着一个小小的光球——那是 Vix,一只 Q 版金毛狐灵。

在 Cardputer 上输入 /ask what's the meaning of loitering?,Vix 会用俏皮的小狐仙语气回答——她的灵魂是 Claude,但你不会感觉到 AI 的机械感,只会觉得这只狐灵有点话多,有点欠揍,偶尔还挺暖的。

Vix 的名字来自一个设计决策链:大屏背景有鸟居 → 鸟居是神社 → 神社的守护者是狐仙 → 英文名 Vix,3 个字符,刚好适配 Cardputer 的小屏幕。在此之前,她叫过"百晓生"(江湖说书人)和"月灵"(月亮仙灵),但都跟最终的草原画风不搭。NPC 的身份必须和世界观一起进化。

/anon —— 匿名告白墙

输入 /anon you look great today,这条消息会被服务端剥掉发送者身份,以 ??? 的名字广播出去。大屏上出现一个半透明粉紫渐变的气泡,边框 3 秒一次呼吸般明灭,4 秒后悬浮漂远消散。

没有人知道是谁说的。在一个大家刚认识的线下活动里,这个功能微妙地降低了表达门槛。

/quiz —— 抢答赛

输入 /quiz 发起一场 Vix 问答赛。狐灵 AI 出题,5 轮,每轮 20 秒抢答。大屏右侧弹出计分板面板,实时排行。答对了,你的角色自动触发 ✨ spark 烟花特效。

/task —— 破冰任务

输入 /task 领取一张随机任务卡。12 种任务池覆盖了 Loiter 的所有功能:去 #fishing 频道发条消息、摇一摇触发 emote、问 Vix 一个问题、给自己生成一个 AI 头像……完成后自动检测,大屏上卷轴展开 + 燃尽动画。

这是破冰设计的核心:不告诉你"去和旁边的人聊天",而是给你一个游戏任务,让社交自然发生。

五次重生

大屏经历了 5 个完全不同的视觉版本,每一次都是推翻重来。

v0:终端黑绿。纯黑背景,CRT 扫描线滤镜,绿色像素字体。很酷,但太冷,像是在监控室里社交。

v1:暖色治愈。换成 Ghibli 风水彩夕阳底,Patrick Hand 手绘字体。温暖了,但也太 soft——没有记忆点。

v2:RPG 深紫。歧路旅人风格,鸟居场景,Cinzel 衬线字体。帅,但"阴阳师"方向走偏了——

v3:月夜仙侠。全程序化渲染:深靛夜空 + 120 颗明灭星辰 + 月亮三层光晕 + 三层远山剪影 + 22 只脉动萤火虫 + 贝塞尔曲线樱花花瓣。漆木横梁顶栏,竹简底栏,毛笔书法写着"闲逛堂"。技术上极其惊艳。

但问题来了:暗夜月光里站着一堆 Q 版 chibi 小可爱,感觉像在太平间开 cosplay party。

暗黑仙侠的气质是留白、独处、禅意——这跟"认识陌生人"的社交能量完全相反。视觉风格和产品灵魂打架了。

大屏最终版:提瓦特草原风

v4:提瓦特草原。AI 生成一张明亮的宽幅背景——樱花、鸟居、石灯笼、远山、草地。Canvas 在上面叠加程序化的花粉、云缕、樱花瓣动效。顶栏换成暖白奶油底,气泡换成奶白色。整个画面一下子打开了。

Q 版角色站在明亮草原上,脚下有椭圆阴影,头顶有稀有度光环——这才对。角色和世界终于属于同一个故事了。

引擎,不是产品

Loiter 不是一个"活动用完就扔"的 demo。它是一个引擎。

云端服务器 7×24 在线,Cardputer 带回家连上任何 WiFi 就能继续玩——账号绑设备芯片 ID,头像和成就存在服务器上,永不丢失。未来任何线下活动——hackathon、年会、读书会——都可以复用同一个引擎,只换房间名和成就集。

这次的实例叫 GLEAM Hall。下一个房间,也许叫别的名字。

但引擎永远叫 Loiter。闲逛。游荡。在一个空间里无所事事地晃悠,撞见人,随便聊两句。

240×135 像素,够装一个社交宇宙了。


这是 Loiter 系列的第一篇。下一篇讲的是幕后的 AI 协作故事——一个人类拍板、一个 AI 写码、一个 AI 审稿,30 小时 4500 行代码是怎么出来的。

Comments