如果你第一次在Scratch的外观模块里找打码功能看到下拉菜单里的马赛克三个字时大概率会以为这就是给角色画面打上模糊方块的特效。我第一次带学生做项目时也这么干过拖一块将 马赛克 ▼ 特效设定为 (10)点下绿旗结果角色没有变模糊反倒是像被复制了几十份密密匝匝铺满了整个角色区域像一堵瓷砖墙。那一刻我才意识到Scratch里的马赛克特效指令和常规认知里的马赛克完全是两码事。这篇博文就把这个容易被误解的指令彻底讲透它在哪、真实效果是什么、数值怎么控制、有哪些实战玩法和容易踩的坑。1. 先认清门牌号指令在哪、全名是什么1.1 积木的位置与两种写法在Scratch的积木区里点开外观类别往下滑到特效这一组就能看到三块基础积木将 颜色 ▼ 特效设定为 (0)将 颜色 ▼ 特效增加 (0)清除图形特效把鼠标移到第一块积木的颜色下拉箭头上展开的列表里会有颜色、鱼眼、旋转、像素化、马赛克、亮度、虚像。选中马赛克之后积木会变成将 马赛克 ▼ 特效设定为 (0)。旁边那块将 马赛克 ▼ 特效增加 (0)也同理。这两块积木看起来只有一字之差用途完全不同。设定为是把当前特效直接指定到一个数值适合做初始化和静态装饰增加是在现有数值基础上加上一个增量适合放循环里做动态变化。比如想让马赛克效果从稀疏慢慢变密集就用将 马赛克 ▼ 特效增加 (1)每帧加1画面会像瓷砖慢慢铺开一样逐渐丰富起来。有一点容易被忽略特效的数值是有记忆的。如果脚本运行中途停了或者角色被隐藏又重新显示之前设定的马赛克效果不会被自动清掉。下次再给角色换其他特效时如果没清零会看到好几个效果叠在一起画面变得很难预测。所以养成习惯在绿旗积木后面第一行放清除图形特效再写你要的特效指令这样每次点击绿旗才是干净状态。1.2 中文翻译留下的马赛克误会马赛克这个译名坑过很多人。英文原版里这个特效叫 Mosaic不是我们常说的马赛克打码。Mosaic 的本意是镶嵌画、瓷砖拼贴画用无数小色块拼成图案比如欧洲老教堂里的彩色玻璃壁画或者浴室墙面贴的小块瓷砖。Scratch 的 Mosaic 特效取的正是这层意思。而真正把我们熟悉的打码模糊功能做出来的特效英文叫 Pixelate中文翻译成像素化。Pixelate 的效果才是把画面切成一个个大色块数值越大色块越大越看不清楚。也就是说在中文版 Scratch 里想要隐私处理、画面打码应该去找像素化而马赛克是一个装饰性很强的视觉特效跟遮挡隐私基本没关系。这个翻译撞车造成的混乱几乎每个初学者都会遇到一次。我自己也翻过车后来在讲外观模块时开场就先给学生们打预防针想要模糊打码找像素化想要复制拼接找马赛克名字容易骗人动手之前先想清楚你要的是哪种效果。1.3 真实效果它其实是瓷砖拼贴卸下打码的预期之后我们来看马赛克的真实表现。拿默认的小猫角色做实验把将 马赛克 ▼ 特效设定为 (2)拖进脚本点击绿旗小猫会变成4只更小的猫排成2行2列。设定为5时变成25只排列成5行5列。设定为10时变成100只非常细密。关键细节在于不是把小猫剪成碎块而是每个格子里都放了一只完整的小猫。想验证很简单换一个箭头造型方向性很强。设定马赛克值之后你会看到每个小格子里的箭头方向完全一致整整齐齐排列。这意味着马赛克特效做的事是重复绘制完整图案而不是切割图案分块展示。观察下来它就像一面贴满同款瓷砖的墙只不过瓷砖的图案全部来自角色当前造型。这也是为什么该特效特别适合做装饰性背景、万花筒、群体视觉这类需求因为它的核心能力就是低成本复制出大量图案。2. 数值规律与视觉边界从2到100舞台发生了什么2.1 参数不是模糊度而是行列数马赛克特效的数值到底怎么理解一句话它指的是横向和纵向切割的份数。设定为5就是画面被分成5行5列共25个小格子。设定为10就是10行10列共100个格子。数值越大格子越多每个格子越小图案排列也越密集。我用默认小猫做了几组设置把视觉效果整理成下表方便你直接参考设定值行列数格子里的小图数量实际观感01×11完全正常没有变化11×11和0一样没有变化22×24四格瓷砖还能看清完整角色55×525出现明显的网格拼贴感1010×10100格子细密像装饰壁纸2020×20400细节变小开始考验屏幕分辨率3030×30900视觉上接近碎钻质感5050×502500低配置设备容易卡顿100100×10010000多数设备会明显掉帧甚至花屏所以把数值理解为每边被分成几份比复制多少个更准确。0和1都等于没效果这一点很多人会忽略。以前有个学生上来就把马赛克改成0发现角色没变化转头问我是不是电脑坏了其实就是这个原因。还要注意马赛克的行列数跟角色大小没有关系。角色放大时格子会跟着变大但行列数还是那个数字。做装饰背景的时候先用将大小设为把角色调到合适尺寸再设马赛克值才能让格子密度跟舞台比例匹配不然要么格子太大显得稀疏要么格子太密看不清图案。2.2 高数值的极限与渲染压力马赛克数值看着很爽但别高估设备的承受能力。这个特效在渲染每一帧时需要把角色造型重复绘制 N×N 次。N等于30时一帧要做900次小图绘制N等于50时是2500次N等于100时一帧要画一万个小图。角色越大每个小图的像素面积越大渲染压力也成倍上涨。我实测过在普通配置的电脑上N为20以内基本流畅N到30拖动角色已经能感觉到延迟N到50整个项目明显发飘N到100浏览器基本卡成幻灯片。手机端和平板上的表现更差数字减半都不一定扛得住。所以做项目时要分工大面积密集纹理的装饰背景尽量用造型编辑器自己画或者用绘图角色提前处理不要全交给马赛克硬抗真正需要实时效果时把数值控制在10到20之间视觉上已经足够华丽。想在课堂上演示极限的话最多让全班试试30到50的卡顿感顺便讲一讲渲染性能的概念超过100的玩法我建议直接放弃纯属自讨苦吃。2.3 设定与增加的区别静态装饰还是动态特效设定为和增加的配合是玩好马赛克的关键。设定为适合把效果固定到某个起点增加适合在循环里制造连续变化。一个常见的动态脚本是这样的当绿旗被点击 清除图形特效 将 马赛克 ▼ 特效设定为 (2) 重复执行 将 马赛克 ▼ 特效增加 (1)这样马赛克值会从2一路加下去格子越来越多直到设备卡到跑不动为止。更好的做法是加一个上限判断到了目标值就停下来或者跳回0重新开始当绿旗被点击 清除图形特效 重复执行 将 马赛克 ▼ 特效增加 (1) 如果 将 马赛克 ▼ 特效值 (20) 那么 等待 (2) 秒 将 马赛克 ▼ 特效设定为 (1) end end注意Scratch没有一个积木能直接读出当前马赛克数值你只能自己维护一个变量来记录循环次数或者用将 马赛克 特效设定为直接跳到指定值。教学时我会让学生用变量存当前值每次增加后把变量同步上去既方便判断也能显示在舞台上作为视觉反馈。另外想单独重置马赛克用将 马赛克 ▼ 特效设定为 (0)就够了。要注意它不会清除颜色、鱼眼、虚像等其他特效。只有清除图形特效才是把所有外观特效一次性归零。这两者之间的区别是后面排查问题的主要线索。3. 三个可以直接抄的实战脚本3.1 万花筒旋转颜色马赛克马赛克最经典的搭档是旋转特效和颜色特效。选中一个有对称美感、颜色丰富的角色比如花朵、星星、蝴蝶然后搭这样一个脚本当绿旗被点击 清除图形特效 将 马赛克 ▼ 特效设定为 (12) 重复执行 将 旋转 ▼ 特效增加 (1) 将 颜色 ▼ 特效增加 (1)点击绿旗后整个马赛克拼贴会像一面大转盘一样缓缓旋转颜色从红到蓝、从绿到紫连续变化每个小格子里的图案也跟着转视觉效果非常接近那种复古万花筒。这类效果最适合用在全屏过场动画或者舞台背景的氛围渲染里。我在实际项目里通常会把速度后面乘一个变量方便随时调节旋转快慢。比如将 旋转 ▼ 特效增加 (速度)速度在1到5之间取整数。如果想做出加速旋转-减速停止的感觉可以把速度变量用移到滑杆或重复执行直到来控制逻辑会更复杂一些但出来的观感相当好。值得注意一个细节Scratch里的特效会按固定管线叠加渲染旋转特效作用于整体画面因此马赛克拼贴的网格结构会整体转动而不是每个格子独立转动。换句话说旋转的是整面瓷砖墙不是每一块瓷砖。想做出每个格子独立旋转的效果靠外观特效做不到那需要导入序列帧图片或改用舞台上的克隆体思路。3.2 水晶碎面马赛克虚像缩放另一个实用的组合是马赛克加虚像。虚像特效控制透明度数值越大角色越透明。把两者合在一起马赛克拼贴会呈现一种半透明水晶玻璃的感觉很适合做破碎、消散、梦境类转场。脚本可以这样写当绿旗被点击 清除图形特效 将 马赛克 ▼ 特效设定为 (8) 将 虚像 ▼ 特效设定为 (30) 重复执行 (20) 次 将 虚像 ▼ 特效增加 (3) 将 大小增加 (2)运行效果是角色先变成一个半透明的8×8格子阵列然后慢慢变得更透明同时整体放大像一块水晶玻璃逐渐融化在空气里。如果把这个脚本放在广播消息游戏失败后面就是一个很有质感的结束动画。有朋友问过我能不能用马赛克真正做出碎片飞散的效果。诚实说做不到。因为马赛克每个格子里都是完整个角色不是撕裂的碎片碎片飞散最好还是用造型切换或者克隆体。马赛克适合的是规则、重复、拼贴的秩序美感而不是杂乱、破裂的无序感。理解了这一点选型就清楚了。3.3 分身鱼群马赛克与克隆体的分工做海底世界场景时很多人都想放一群鱼。新手的第一反应往往是用克隆体复制10条、20条、50条结果克隆一多角色列表和脚本执行都变得很卡。实际上如果你只是想营造鱼很多的背景氛围并不需要它们各自游动那马赛克是更好的选择。一条鱼角色把大小调小马赛克设定为10画面里立刻出现100条视觉小鱼整齐排列成网格。它们不会独立运动但作为海底背景的鱼群团块完全够用而且几乎不消耗额外的运行资源。对比一下方案副本数量独立运动资源消耗适用场景马赛克特效可达100不支持低静态装饰、背景氛围克隆体建议30以内支持高需要独立行为的角色这个对比可以写进教案克隆体适合做每个个体都有自己逻辑的群组比如每只鱼都朝着鼠标游动马赛克适合做纯视觉的密度层比如远处密密麻麻的鱼群剪影、星空里的一堆星星。两者还可以叠用用3到5个克隆体每个克隆体再挂不同的马赛克数值和透明度制造出前中后三个层次画面立体感立刻出来。3.4 素材选择与中心点调整的细节马赛克的效果和素材质量强相关。最容易翻车的操作是随便选了一个造型结果绘图区里图案只占了很小一角剩下全是空白。马赛克之后每个小格子里的图案也带大块空白视觉上就像一大片空瓷砖里嵌着一小粒图案拼贴感被稀释殆尽。正确做法是在造型编辑器里把画面尽量铺满绘图区。如果是圆形或对称图案就把中心点放在图案正中间。中心点位置会直接影响旋转特效的旋转轴心也影响万花筒旋转时的观感。中心点偏了旋转时整个马赛克网格会像偏心陀螺一样晃动有时候这种晃动是意外惊喜但更多时候大家想要的是稳定的同心旋转变换。还有个容易被忽略的点角色如果有多套造型切造型前要保证各造型的绘图区和中心点一致不然运行中切换造型马赛克尺度会突然跳变。这个问题我在一次过场动画里踩过角色先说一句话用造型A然后切换到造型B做后续动画结果B造型的绘图区域比A大一倍马赛克值没变视觉上格子突然变粗、图案突然变大画面一下就破功了。4. 课堂与调试中积累的排错清单4.1 特效没清干净图形特效的叠加污染排查过很多次画面花得莫名其妙的问题最后多半都指向同一件事老特效没清干净。具体场景是这样的学生在角色A上设了马赛克10后来觉得不需要直接把将 马赛克 特效设定为(10)删了或者把数值改成0就认为问题解决了。但在某个角落可能还留着将 颜色 特效设定为(40)的旧代码或者之前某个循环里用过将 马赛克 特效增加没有停止导致数值一直累加。更隐蔽的一种情况是角色A和角色B是两个不同角色但学生把同一个广播消息发给了两个角色两个角色都执行了马赛克相关脚本。结果A有特效、B也有特效观众看起来整个舞台都脏脏的。我的排查顺序是这样的先点一下积木区的清除图形特效积木或者临时给绿旗脚本加一行清除再运行看效果。如果画面恢复正常说明问题出在某个旧特效没被重置逐个角色检查它们的绿旗脚本和广播接收脚本。如果清除后依然花屏那就要检查是不是造型本身的问题比如造型里混入了不该存在的隐藏色块或者半透明像素。4.2 造型切换与中心点错位导致的花屏马赛克特效是基于角色当前造型实时计算出来的任何改变造型区域大小的操作都会直接影响结果。最常见的问题有两个造型尺寸不一致、中心点不在理想位置。造型尺寸不一致的典型表现是运行中角色从造型A切到造型B马赛克格子数量没变但每个格子里的图案比例明显变了看起来像镜头突然拉近或者拉远。要解决只能在造型编辑器里把所有造型的尺寸统一。比如小猫形象的两帧造型宽度高度尽量一致四条腿的位置也尽量对齐否则切换时连图案本身都在抖。中心点偏移的典型表现是给角色设置旋转特效加马赛克结果整个拼贴网格一边重一边轻旋转时像逆时针画圈。把中心点调回图案正中就能恢复稳定。如果确实想做出偏离中心的旋转效果那就创建一个专门的造型把图案画在自带偏移的绘图区上这样中心点仍然居中但图案本身偏了视觉上一样有偏移效果运行还稳定。4.3 高性能消耗低端设备上的卡顿与闪退马赛克值太高导致的卡顿我在不同设备上都复现过。低端笔记本、老旧平板、配置一般的办公电脑三者对马赛克的承受力差别很大。同一个项目在主力机上马赛克30流畅换到教室的旧设备上马赛克15就开始掉帧。所以写项目时尽量按最低配置做预案。保守做法是装饰用马赛克值不超过10动态万花筒不超过15课堂演示不超过20。如果项目发布后别人反馈卡第一反应不是换设备而是把所有马赛克值整体降一档再观察画面是否还能接受。特效的华丽度和流畅度之间需要做取舍这一点在图形化编程里也是一样的。另外要注意网页版和离线版的表现差异。浏览器里跑Scratch受标签页后台优化影响切走再切回来偶尔会掉帧离线客户端相对稳定但也更吃本机硬件。我一般建议测试以上面两种方式各跑一遍确认数值边界后再写进正式项目。4.4 真·打码用谁像素化指令实操最后把打码这件事单独拎出来因为需求太常见了。如果你做的是一个隐私保护主题的项目或者想在角色脸上盖一个模糊光斑千万别再用马赛克了请用像素化特效。当绿旗被点击 清除图形特效 将 像素化 ▼ 特效设定为 (20)像素化特效会把角色画面切成大块的色块20左右就很明显30以上基本看不出原图细节。如果只想在某些部位打码比如遮住眼睛那应该先用黑色或白色圆形角色放在眼睛位置再对那个圆形角色使用像素化或者直接调整它的虚像值做成光斑效果。这样既能遮挡隐私又不影响主体角色的其他部位。理解马赛克拼贴、像素化打码这个对照关系以后外观模块的很多困惑都会迎刃而解。5. 外观特效的组合设计思路5.1 特效组合创意速查表马赛克单独用效果有限但和其他外观特效组合能做出的视觉类型很丰富。我整理了一份速查表做项目时可以拿来直接选组合方式视觉效果推荐场景马赛克 旋转万花筒、转动的瓷砖墙过场动画、舞台背景马赛克 虚像水晶玻璃、半透明拼贴梦镜、消散、幽灵氛围马赛克 颜色霓虹变色重复图案音乐节、派对主题马赛克 像素化双重压碎感图案更抽象故障艺术、抽象的爆炸效果马赛克 鱼眼哈哈镜式的方格球化搞笑、猎奇角色出场马赛克 亮度暗光、逆光、剪影化拼贴夜晚场景、电影开场需要特别说明的是Scratch内部对各特效有一套固定的叠加管线我们没办法手动调整各个特效的计算顺序只能通过控制数值大小来改变最终观感。所以做组合效果时建议两个特效的数值都从小往大试不要一开始就拉满不然很难判断哪个特效贡献了哪种视觉元素。5.2 课堂任务的三层梯度设计我带的外观模块课程通常把马赛克相关任务分成三层阶梯每一层的考察点不一样。基础层让学生把同一个角色分别设定马赛克为0、3、10、20分别截图或口头描述画面变化。这个任务考察的是对数值决定行列数的理解以及能否区分马赛克和像素化。进阶层要求用滑杆变量控制马赛克值让角色从1×1逐步变成10×10再回到1×1循环往复。考察的是变量同步、循环边界判断、以及对实时渲染性能的感知。滑杆拖动时如果卡顿学生自然会体会数值越大性能消耗越大这个知识点。挑战层规定主题比如星空转场梦境碎片海底群像让学生自己选择角色素材、特效组合和动画节奏最终做出一个15秒以内的完整效果。这类任务综合考察造型绘制、中心点设置、特效叠加、性能控制比单纯找积木复杂得多。5.3 滑杆变量做一个实时马赛克调节器最后分享一个我几乎每个项目都会用的小工具实时马赛克调节器。在角色变量区新建一个变量叫马赛克值然后把它的显示方式从正常显示改成滑杆范围设成1到30。接着写三行脚本当绿旗被点击 清除图形特效 重复执行 将 马赛克 ▼ 特效设定为 (马赛克值)运行时拖动舞台上的滑杆马赛克效果会即时变化像调音量一样直观。这个工具的价值在于不需要反复停掉绿旗去改积木参数一边拖滑杆一边看画面很快就能找到最适合当前项目的数值。做装饰背景时我一般调到8到12做万花筒时12到15做群像背景时15到20具体看素材大小。调节器还可以扩展成多滑块面板一个滑杆控制马赛克值一个滑杆控制虚像值一个滑杆控制旋转速度三个配合就是一台外观特效合成台。把这个思路交给学生他们常常能组合出连我都没预想到的视觉效果。我个人至今还保留一个习惯凡是涉及特效的项目第一段代码永远是清除图形特效。不管后来怎么写这个起步动作能帮我隔离掉八成以上的灵异画面。马赛克这个东西弄懂它并不难难的是别被名字带偏以及在合适的场景里用合适的数值。希望这篇把指令背后那层瓷砖拼贴的逻辑讲清楚之后你在Scratch项目里的各种格子画面都能变成真正的加分项。
