用MakeCode与Circuit Playground Express制作《宇宙小子》掌中宝石:从图形化编程到红外联动
1. 项目概述当《宇宙小子》遇见创客硬件如果你和我一样既是《宇宙小子》的粉丝又对用硬件把动画里的酷炫道具带到现实世界充满兴趣那么这个项目绝对会让你兴奋。今天要聊的就是如何用一块小小的Adafruit Circuit Playground Express开发板后面简称CPX通过微软的MakeCode图形化编程工具亲手制作出剧中石榴的掌中宝石——就是那个能代表红宝石和蓝宝石融合、发出炫目光芒的玩意儿。这不仅仅是一个简单的LED灯项目。它的核心在于复现“融合”这一关键动画情节通过按下板载按钮触发一段色彩旋转变换的动画最终定格在石榴标志性的品红色光芒上并且还能用另一颗“宝石”同步互动。整个过程涉及图形化编程逻辑设计、NeoPixel环形灯的高级色彩与动画控制、简单的音乐合成以及利用红外通信实现双设备协同。对于刚接触嵌入式开发或STEAM教育的朋友来说这是一个绝佳的入门项目它把抽象的编程概念和电子原理包装成了一个看得见、摸得着、还能玩的流行文化产物。你不需要事先精通C或Python只需要拖拽积木块就能见证代码如何驱动硬件创造出魔法般的视觉效果。2. 核心硬件与工具选型解析2.1 为什么是Circuit Playground Express在开始动手前我们得先搞清楚手头的“武器”。Adafruit Circuit Playground Express是这个项目的绝对核心。选择它而非其他更基础的开发板如Arduino Uno或更复杂的如ESP32是基于几个非常实际的考量首先高度集成与开箱即用。CPX在一块圆形的板子上集成了项目所需的所有关键部件10颗可独立编程的RGB NeoPixel LED组成一个环形灯、两个实体按键标记为A和B、一个红外发射接收器、一个蜂鸣器用于播放音乐以及多种传感器。这意味着你不需要为了点亮LED而去焊接电阻和LED也不需要为了播放声音而外接复杂的音频模块。所有东西都已经就位大大降低了硬件搭建的复杂度和出错概率让你能专注于编程逻辑和创意实现。其次对MakeCode的完美支持。CPX是微软MakeCode平台官方深度支持的硬件之一。这意味着在MakeCode的在线编辑器中你可以直接找到为CPX所有功能量身定制的图形化积木块从控制每一颗NeoPixel的颜色到发送红外信号再到播放自定义旋律都只需要拖拽即可完成。这种软硬件的高度整合为教育场景和快速原型开发提供了无与伦比的便利性。最后供电与便携性。CPX可以通过Micro-USB接口供电也可以使用外接的3节AAA电池盒。后者对于“掌中宝石”这样的可穿戴项目至关重要。电池盒搭配一个简单的腕带或表带就能轻松将设备固定在手掌上实现真正的可穿戴互动而不是一个必须连着电脑的演示品。2.2 项目物料清单与备选方案根据项目需求你需要准备以下核心物料Adafruit Circuit Playground Express开发板至少一块。如果想实现双宝石互动则需要两块。这是项目的大脑和心脏。3xAAA电池盒带开关和JST插头为CPX提供移动电源。务必选择带开关的型号方便随时断电。JST插头能与CPX的电池接口完美对接。AAA碱性电池3节为电池盒供电。Micro-USB数据线用于连接电脑和CPX进行程序烧录。CPX专用保护外壳可选但推荐一个塑料或硅胶外壳能保护板载元件免受刮擦和静电损伤同时也让成品看起来更精致、更像一个“宝石”。腕带或固定带用于将宝石固定在手掌上。可以是手表带、弹力绳甚至自己用丝带DIY。注意在采购CPX时请确保你拿到的是“Express”版本而不是早期的“Classic”版本。Express版本功能更强大且对MakeCode的支持更好。Adafruit官网是可靠的购买渠道。如果手头没有CPX是否有替代方案理论上任何支持NeoPixel和MakeCode的开发板都可以尝试例如Adafruit的Circuit Playground Bluefruit或者某些基于ATSAMD21芯片的板子。但CPX的生态最完善教程和社区支持也最丰富对于首次尝试者来说它能帮你避开许多兼容性“坑”。3. 开发环境搭建与MakeCode入门3.1 初识MakeCode从积木块到机器码MakeCode的核心设计哲学是“可视化编程”。它将复杂的代码语句如变量声明、循环控制、函数调用封装成一块块色彩鲜明、形状各异的“积木”。用户通过鼠标拖拽这些积木并进行拼接就像搭乐高一样构建程序逻辑。这对于编程初学者、艺术家、教育工作者来说极大地降低了心理门槛和技术壁垒。其背后的技术原理可以简单理解为MakeCode编辑器是一个运行在浏览器中的集成开发环境。当你完成积木拼接后编辑器会将这些图形化逻辑实时编译翻译成底层微控制器能够识别的机器代码对于CPX通常是C代码并最终编译为ARM机器码然后打包成一个.uf2格式的二进制文件。当你将CPX通过USB连接到电脑并进入启动加载模式Bootloader后电脑会将其识别为一个名为CPLAYBOOT的U盘你只需将生成的.uf2文件拖入这个“U盘”程序便会自动烧录到CPX的闪存中。整个过程无需安装复杂的编译器或驱动非常友好。3.2 第一步访问编辑器与连接硬件打开MakeCode for Adafruit在浏览器中访问https://makecode.adafruit.com/。这是Adafruit定制的MakeCode版本预置了所有CPX及其他Adafruit板卡的专属积木块。创建新项目点击“新建项目”为你的项目起个名字比如“Garnet‘s Gem”。连接硬件用Micro-USB线将CPX连接到电脑。首次连接时电脑可能需要一点时间来安装驱动。进入Bootloader模式这是关键一步。为了烧录程序你需要让CPX进入编程模式。找到板子上的“重置”按钮Reset。快速双击它。此时板子上的所有LED会变成红色然后变为绿色最后电脑会弹出一个名为CPLAYBOOT的新驱动器。这表明CPX已准备好接收新程序。实操心得双击“重置”按钮的速度要快间隔最好在半秒内。如果没成功多试几次。成功进入Bootloader模式后CPX会断开与MakeCode编辑器的模拟器连接这是正常现象。烧录完成后再次单击“重置”按钮程序就会开始运行。4. 单宝石融合特效的代码实现4.1 项目初始化与灯光基础设置任何程序都需要一个起点。在MakeCode中这个起点是当开机时积木块。所有只需要执行一次的初始化设置都应该放在这里。首先我们从“循环”类别中拖出当开机时积木块到编辑区。接下来我们要设置宝石的初始状态一半红宝石红色一半蓝宝石蓝色。设置亮度从“灯光”类别中找到设置亮度为 255积木块拖入当开机时块内。亮度值范围是0-255255最亮。但为了省电和眼睛舒适我们一开始不用全亮。将数值改为30这是一个温和且足够清晰的亮度。设置环形灯颜色从“灯光”类别中找到显示环形灯颜色为 红积木块。这个积木块下方有10个小圆圈代表板子上的10颗NeoPixel。点击每个小圆圈可以单独设置其颜色。我们的目标是左边5颗灯从顶部顺时针数大约位置设为红色Ruby右边5颗灯设为蓝色Sapphire。操作方法用鼠标依次点击左边5个圆圈在颜色选择器里点选红色再依次点击右边5个圆圈选择蓝色。技巧你可以先点击第一个圆圈选红色然后按住鼠标从第一个拖到第五个可以快速填充一片区域。现在你的初始化代码应该看起来像这样当开机时 设置亮度为 30 显示环形灯颜色为 [红红红红红蓝蓝蓝蓝蓝]点击编辑器左下角的“模拟器”按钮你应该能看到一个虚拟的CPX其环形灯呈现红蓝各半的效果。这验证了我们的基础设置是正确的。4.2 按钮交互与融合动画逻辑接下来是实现核心功能按下B键触发从红蓝到品红石榴色的融合动画。创建按钮事件从“输入”类别中拖出当按钮 A 被按下积木块。点击积木上下拉菜单将A改为B。这个积木块定义了一个“事件监听器”当B键被单击时块内的所有代码会按顺序执行。添加融合动画从“灯光”类别中找到显示动画 彩虹 持续 500 毫秒积木块拖入当按钮 B 被按下块内。点击彩虹下拉菜单选择彗星动画。这个动画效果是灯光像彗星一样旋转非常适合表现能量汇聚、融合的过程。将持续时间从500毫秒改为1500毫秒即1.5秒。这给了动画足够的时间来营造戏剧效果。设定融合后颜色动画结束后宝石应该稳定在石榴的品红色。在动画积木块下方再添加一个显示环形灯颜色为 红积木块。这次点击颜色选择器选择一个明亮的品红色Magenta并将所有10个灯圈都设置为这个颜色。增加闪光特效为了增强融合的瞬间感我们可以在变色后加入一个快速的亮度闪烁。添加设置亮度为 255积木块将值设为120一个很高的亮度。从“循环”类别添加暂停ms 100积木块将暂停时间改为500毫秒。这会让高亮度保持半秒。再添加一个设置亮度为 255积木块将值改回30。这样在短暂的闪耀后亮度恢复常态留下品红色的宝石光芒。至此融合的代码逻辑就完成了。你可以点击模拟器里的B按钮或者将代码下载到实体的CPX上测试效果。按下B键你应该看到红蓝灯光开始旋转然后瞬间变为品红色并伴随一次闪光。4.3 解融合与音乐功能的添加有融合自然要有解融合。解融合的代码逻辑与融合类似但过程相反。复用代码块在MakeCode编辑器中右键点击刚才创建的当按钮 B 被按下积木块选择“复制区块”。将复制出来的块拖到旁边。修改事件与内容将新块的按钮从B改为A。现在这个块用来响应A键单击即解融合。调整动画与颜色删除块内最后三个关于亮度闪烁的积木块设置高亮、暂停、设置低亮我们解融合时不需要闪光。将彗星动画改为闪烁动画持续时间改为300毫秒。这模拟了宝石分离时的星光闪烁效果。将最后的显示环形灯颜色为积木块中的颜色重新设置为初始的红蓝各半状态。加入主题音乐让宝石在融合或解融合时播放《宇宙小子》的主题曲片段体验更沉浸。我们使用“音乐”类别下的积木。设置节奏在当开机时块内添加将节奏设为bpm 120积木块。BPM每分钟节拍数控制音乐播放速度120是一个中等偏快的节奏可以根据喜好调整。创建音乐函数为了代码整洁我们将较长的乐谱封装成一个“函数”。点击编辑器底部的“高级”展开后点击“函数”然后选择“创建一个函数...”。将其命名为themeSong。编写乐谱在新建的函数 themeSong块内从“音乐”类别拖入演奏音符 中音C 持续 半拍积木块。通过复制、修改音符和时长逐步构建出主题曲的旋律。例如一个简单的开头可以是C1/6拍、G1/6拍、C1/6拍、休止符1/4拍…… 你可以根据网上找到的简谱或通过听音来还原。调用函数在当按钮 B 被按下块内在闪光特效之后或之前根据你想要的效果从“函数”类别拖入调用 themeSong积木块。这样每次融合时都会播放这段音乐。注意事项蜂鸣器音量可能较大且音质比较电子化。你可以通过设置音量 127积木块在“音乐”类别来调整音量。同时播放音乐时会短暂阻塞其他代码执行直到播完所以动画和灯光变化最好在音乐开始前完成设置。5. 双宝石红外联动方案剖析单宝石版本已经很有趣但双宝石互动才是真正还原剧中“融合”概念的精髓。我们需要让两颗宝石即两块CPX板能够无线通信同步它们的状态。5.1 红外通信原理与限制CPX板载了一个红外发射器和接收器可以像电视遥控器一样发送和接收简单的数字信号。在这个项目中我们用它来传递按钮按下的消息。工作原理发送端当一块CPX的按钮被按下时它通过红外LED发射一串调制过的光信号信号中编码了一个我们预设的数字比如按B键发送数字1。接收端另一块CPX的红外接收器检测到这串光信号将其解码还原成数字1。响应接收端CPX根据收到的数字1执行对应的操作播放融合动画。当前限制根据项目原文提示在撰写本文时MakeCode中存在一个已知问题红外通信功能与部分音乐播放功能可能冲突。如果同时使用可能导致程序运行不稳定或红外失灵。因此在双宝石版本中我们通常建议暂时移除或简化音乐部分优先保证红外同步的可靠性。这是一个典型的软硬件开发中遇到的“坑”需要在功能间做出权衡。5.2 双机同步代码改造我们从单宝石版本的代码不含音乐部分为佳开始改造目标是让两块CPX运行完全相同的程序并能通过红外互相“对话”。发送红外信号在当按钮 A 被按下解融合的积木块内从“网络”类别找到红外发送数字 0积木块添加进去。这意味着按下A键时除了执行自身的解融合动画还会向外发射一个数字信号“0”。同理在当按钮 B 被按下融合的积木块内添加红外发送数字 1积木块。接收并处理红外信号这是实现同步的关键。从“网络”类别拖出当红外接收到数字积木块。这个块是一个事件监听器专门等待接收红外信号。我们需要判断接收到的数字是0还是1然后执行相应的操作。这需要用到“逻辑”判断。从“逻辑”类别拖出如果为 true 则...否则...条件积木块放入当红外接收到数字块内。再从“逻辑”类别拖出0 0比较积木块用它来替换如果为后面的true。将比较积木的第一个0拖入红外接收到的数字变量它会在当红外接收到数字块上自动出现一个可拖拽的变量第二个0保持为数字0。现在这个逻辑的意思是如果接收到的数字等于0那么执行“则”部分的代码即解融合动画否则执行“否则”部分的代码即融合动画。填充条件分支将原来当按钮 A 被按下块内除了红外发送之外的所有积木块动画和设置灯光复制到如果为的“则”部分。将原来当按钮 B 被按下块内除了红外发送之外的所有积木块复制到“否则”部分。至此完整的逻辑闭环形成当你按下宝石1的B键它自己执行融合动画并发出信号“1”宝石2收到“1”因为“1不等于0”所以执行“否则”部分的融合动画。两颗宝石便同步完成了融合。解融合过程同理。实操心得在给两块CPX烧录完全相同的程序后测试时请确保它们的红外发射/接收窗板子边缘的一个小透明塑料件大致相对且距离不要太远一米内效果较好。中间避免有强光直射或深色物体阻挡。如果同步失败尝试调整角度和距离。6. 外壳组装与可穿戴化实战代码烧录成功后你得到的是一个功能完整的电子核心。但要成为“掌中宝石”还需要进行物理封装和佩戴设计。6.1 使用官方外壳进行组装Adafruit官方出品的CPX保护外壳是首选方案。它由上下两片扣合而成预留了所有按钮、传感器和充电口的开孔并且边缘有专门用于穿绳的槽口。穿入腕带在合上外壳前先将你选择的腕带、弹力绳或丝带穿过外壳侧面的槽口。建议使用宽度适中的扁平尼龙表带既牢固又舒适。放入CPX将CPX主板小心地放入下半部分外壳中确保所有按钮和端口都与外壳的开孔对齐。USB口和电池接口应朝向穿带子的另一侧这样佩戴时线材不会硌手。合盖与固定盖上上半部分外壳轻轻按压四周直至卡扣完全扣合。现在CPX已经被安全地包裹在内。连接电源将3xAAA电池盒的JST插头插入CPX的电池接口。注意接口有防呆设计不要用蛮力。佩戴将电池盒用魔术贴或额外的扎带固定在腕带背面或手腕上然后将腕带像戴手表一样固定在手掌背部。你可以调整位置让宝石CPX位于掌心或手背中央。6.2 供电管理与续航优化电源开关务必使用带开关的电池盒。在项目不演示时关闭开关以节省电量防止误触。亮度与续航NeoPixel全亮度运行尤其是10颗同时亮白色时耗电较大。我们在代码中将默认亮度设为30这是一个在视觉效果和续航间很好的平衡点。如果发现电池消耗过快可以尝试进一步降低亮度值。电池选择使用质量可靠的碱性AAA电池。可充电的镍氢电池也是环保经济的选择但其电压略低1.2V vs 1.5V可能导致整体亮度稍有下降。6.3 创意扩展与个性化基础版本完成后你可以发挥创意进行个性化改造外观装饰使用丙烯颜料在外壳上涂装《宇宙小子》的其他元素或用热熔胶粘贴一些仿宝石的树脂配件进行点缀。灯光模式扩展修改代码增加更多的灯光模式。例如长按A键切换不同的静态颜色或者让宝石在待机时进行缓慢的呼吸灯效果。加入传感器利用CPX上的加速度计实现“挥动手臂触发融合”的体感操作。使用当晃动时事件块替代按钮事件体验会更魔幻。双人互动游戏为两颗宝石编写不同的角色代码如一颗代表红宝石一颗代表蓝宝石只有当他们通过红外“相遇”接收到彼此信号时才会共同融合成石榴色。这可以设计成一个简单的双人互动游戏。7. 常见问题排查与调试技巧即使按照步骤操作也可能会遇到一些小问题。这里汇总了一些常见情况及解决方法。7.1 程序烧录与硬件响应问题问题现象可能原因解决方案点击“下载”后没有出现CPLAYBOOT盘符。1. CPX未正确进入Bootloader模式。2. USB线或电脑USB口故障。3. 驱动未正确安装。1.快速双击重置按钮观察所有LED是否变红再变绿。2. 更换USB线和USB端口试试。3. 尝试在另一台电脑上操作。程序已下载但CPX无任何反应灯不亮。1. 电池盒开关未打开或电池没电。2. 程序逻辑错误当开机时块内没有设置灯光。3. 硬件损坏较少见。1. 检查电池盒开关更换电池。连接USB线测试USB供电优先级高于电池。2. 回看MakeCode代码确保当开机时块内有设置亮度和显示环形灯积木。3. 用MakeCode内置模拟器测试代码逻辑是否正确。模拟器工作正常但实物效果不对。1. 代码下载到了错误的硬件上如有多个CPX。2. 实物按钮接触不良。1. 确保每次只连接一块CPX到电脑进行下载。2. 按下按钮时仔细听是否有轻微的“咔哒”声确保按到位。7.2 红外通信同步失败问题问题现象可能原因解决方案按下宝石1的按钮只有自己响应宝石2无反应。1. 两块CPX的红外窗没有对准。2. 距离太远或环境光干扰太强。3. 两块板子的程序不一致。1. 将两块板子的红外窗小透明窗口面对面距离在10-50厘米内测试。2. 在室内光线均匀的环境下测试避免阳光或强LED灯直射红外窗。3.确保两块CPX烧录了完全相同的、包含红外收发逻辑的程序。这是最常见的原因。红外通信时灵时不灵。1. 电池电量不足导致红外发射功率下降。2. 代码中存在冲突如同时尝试播放复杂音乐。1. 更换新电池。2. 简化代码移除双宝石版本中的音乐播放功能优先保证红外通信稳定。7.3 MakeCode编程逻辑问题动画播放不完整或卡顿检查显示动画 ... 持续 ... 毫秒积木块后面的代码。在MakeCode中这个动画是在“后台”播放的其后的代码如设置灯光会立即执行可能会中断动画。如果你希望动画播放完再执行下一步需要利用暂停ms积木块暂停时间至少等于动画持续时间。灯光颜色显示不正确MakeCode模拟器显示的颜色可能与实物NeoPixel显示的颜色有细微差异这是正常的。模拟器主要用于验证逻辑。如果实物颜色明显错误如红色显示为绿色请检查代码中颜色选择是否正确或者尝试重置CPX并重新烧录程序。函数调用无效确保你使用了调用 functionName积木块来执行函数而不是仅仅定义了一个函数块放在那里。函数定义后必须被调用才会运行。这个项目从创意到实现完整地走了一遍基于图形化编程的嵌入式开发流程。它最让我有成就感的地方在于用如此直观的方式将动画里的幻想变成了可以握在手中的现实。过程中遇到的每一个小问题比如红外同步的调试、灯光时序的调整都是对硬件理解和编程思维的一次锻炼。对于想要入门硬件编程的朋友我强烈建议从这样的项目开始——它有明确的目标、可视化的反馈和丰富的扩展可能性。当你按下按钮看到自己编写的代码让灯光如约亮起、动画流转时那种“造物”的快乐是纯软件编程难以替代的。不妨动手试试创造出属于你自己的那颗宝石。