1. 项目概述当代码成为猫薄荷作为一个在游戏开发行业摸爬滚打了十多年的老程序员我发现自己对两样东西毫无抵抗力一是优雅的代码二是毛茸茸的猫咪。可惜现实是残酷的繁忙的加班和频繁的出差让我这个“云铲屎官”只能对着手机里的猫片望梅止渴。直到有一天我看着Unity编辑器里那些漫天飞舞的粒子特效一个念头突然冒了出来既然养不起真猫为什么不能用代码“画”一只出来吸呢这个想法听起来有点无厘头但仔细一想却充满了技术上的浪漫和挑战。我们平时用粒子系统Particle System做什么爆炸、火焰、烟雾、魔法光效……这些动态的、充满随机性的视觉效果。而一只猫是静态的、有具体形态的。用动态的“点”去构建静态的“形”这本身就是一种有趣的矛盾。更具体地说这个项目的核心是利用Unity的粒子系统通过精确控制数以万计粒子的位置、颜色、生命周期和运动轨迹在三维或二维空间中“绘制”出一只猫咪的轮廓乃至细节并赋予其某种动态的生命感比如呼吸般的起伏、尾巴的轻微摆动或者仅仅是粒子自身优雅的流动。它不是什么严肃的商业项目更像是一个技术宅的浪漫实验。但它能解决什么问题呢首先它是对粒子系统高级特性的一次深度探索和炫技能极大地锻炼你对粒子发射、形状、速度、颜色随时间变化等模块的控制力。其次这种“粒子画”技术本身就有应用场景比如游戏中的动态Logo、特殊的UI背景、或者叙事过场中充满艺术感的意象表达。最后也是最重要的它好玩它能让你在枯燥的编码之外找到一种创造“生命”的乐趣哪怕这个生命是由0和1构成的。所以无论你是想深入学习Unity粒子系统寻找独特的视觉表现手法还是单纯想和我一样在代码世界里拥有一只永不掉毛、永不捣乱的电子宠物这篇内容都值得你往下看。我会从设计思路拆解开始一直讲到具体的实现步骤和踩过的坑手把手带你用代码“吸”上这只独一无二的猫。2. 核心思路如何用“沙”堆砌出“猫”用粒子画猫听起来像用沙子堆城堡或者用乐高拼雕像。关键在于我们不能真的让粒子像画笔一样去“画线”而是要让巨量的粒子自发地、或是在我们引导下汇聚成我们想要的形状。这里有几个核心的设计思路需要先理清。2.1 从“形”到“点阵”图像数据的采样与映射最直接的思路就是把一张猫咪的剪影或线稿当作蓝图。我们需要将这个二维图像信息转化为三维空间中的一系列坐标点这些点就是未来粒子应该出现的位置。1. 采样源的选择黑白剪影图这是最简单也是效果最直观的。图像只有纯黑和纯白或透明白色区域是我们想要粒子出现的地方。我们可以通过编程读取这张图片的像素数据。灰度图可以利用灰度值0-255来控制粒子的密度或大小。比如猫咪眼睛、鼻子等深色区域用更密集或更大的粒子表示毛发边缘等浅色区域用稀疏或更小的粒子。彩色图复杂度飙升但潜力巨大。我们可以将RGB颜色通道映射到粒子的不同属性上比如用R通道控制初始速度G通道控制粒子大小B通道控制生命周期。这能创造出极具层次感和动态感的“粒子画”。2. 采样算法我们不能对图片上的每一个像素都生成一个粒子那会导致粒子数量爆炸一张1024x1024的图就是一百多万个粒子。常用的方法是随机采样或均匀间隔采样。随机采样在图像有效区域如白色部分内随机生成坐标。优点是分布自然有手绘的随机感缺点是可能遗漏一些细小的关键轮廓。泊松圆盘采样这是一种更高级的采样算法它能保证采样点之间保持一个最小距离从而让粒子分布既均匀又随机效果非常好是很多专业粒子艺术工具的基础。在Unity中我们可以自己实现或寻找相关算法库。注意采样阶段直接决定了最终“猫形”的准确度和粒子数量。粒子太少形状模糊粒子太多性能堪忧。需要在效果和性能间找到一个平衡点。我的经验是对于一只中等复杂度的猫咪剪影2000到10000个粒子通常能取得不错的效果。3. 坐标映射采样得到的二维图像坐标UV坐标0到1的范围需要映射到三维世界空间。这里就涉及到你想要的猫咪是“贴在”一个平面上还是具有三维体积感。平面映射最简单。设定一个宽度和高度比如10个单位宽10个单位高然后将UV坐标线性映射到这个矩形区域内。worldPos.x uv.x * width; worldPos.y uv.y * height; worldPos.z 0;这样猫咪就是一张“粒子画”。曲面/体积映射为了增加立体感我们可以引入Z轴深度的偏移。例如根据采样点的灰度值来微调Z坐标让猫咪的身体中心微微凸起边缘凹陷。或者我们可以用多个不同深度的“层”来叠加模拟简单的体积。2.2 粒子系统的角色静态陈列 vs. 动态模拟确定了粒子的“出生地”后接下来要决定这些粒子以何种状态存在。这里有两种主要流派1. 静态陈列派目标是让粒子尽可能“钉”在它们初始的位置上形成一幅稳定的画。这需要速度为零将粒子的初始速度Start Speed设为0。关闭外力重力Gravity Modifier设为0避免粒子下坠。极长的生命周期将起始生命周期Start Lifetime设为一个非常大的值比如999秒或者使用ParticleSystem.NoiseModule的strength为0确保粒子不会因为模拟而漂移。渲染模式使用Mesh渲染模式并为每个粒子指定一个极小的面片如Quad这样即使粒子不动也能通过密集的粒子群呈现出形状。或者使用Stretched Billboard模式但需要仔细调整。这种方式的优点是稳定、精确像一幅点彩画。缺点是略显呆板缺乏“粒子感”。2. 动态模拟派允许粒子在其初始位置附近进行有限度的运动比如轻微的布朗运动、缓慢的旋转或者受控的流动。这更像是一幅“活”的画。施加可控的力场这是精髓所在。我们可以使用Velocity over Lifetime模块给粒子一个非常缓慢的、可能随机的速度。或者使用Force over Lifetime模块施加一个微弱的力。巧用噪声模块Unity粒子系统的Noise模块是创造有机运动的神器。通过设置一个很小的strength比如0.01到0.1并调整frequency可以让粒子产生非常自然、微弱的抖动仿佛猫咪的毛发在随风轻拂或者猫咪本身在呼吸。限制运动范围不能让粒子飞得太远否则猫形就散了。可以通过Inherit Velocity设为0并结合Noise模块的damping属性或者使用自定义脚本将粒子的运动约束在一个以初始位置为中心的小球体内。动态模拟的难度更高但效果也更有灵气。它让这只代码猫有了“生命迹象”。2.3 视觉风格的塑造材质、颜色与光照粒子本身只是一个点它的视觉表现完全依赖于渲染。这里有几个关键选择1. 粒子材质Material默认粒子材质Unity自带的Particles/Standard Unlit或Particles/Standard Surface。Unlit不受场景光照影响颜色鲜艳Surface受光照影响可以有明暗变化更立体。自定义Shader为了获得独特效果比如毛茸茸的边缘、发光、颜色渐变等编写自定义的粒子Shader是终极手段。例如一个简单的软边缘Soft Particle和屏幕空间叠加Additive混合的Shader能让粒子重叠时产生柔和的光晕效果非常适合营造梦幻感。2. 颜色控制统一颜色所有粒子使用同一个颜色比如橘色、灰色形成单色剪影。根据位置/速度渐变使用Color over Lifetime或Color by Speed模块让粒子的颜色随着其生命周期或运动速度变化。比如猫咪中心的粒子是温暖的橙色边缘的粒子是浅黄色模拟光晕。采样纹理颜色如果源图像是彩色的我们可以将采样到的RGB值直接赋给对应粒子的起始颜色startColor。这样就能还原出彩色的猫咪图案但需要脚本控制。3. 光照与后期场景光照如果使用受光材质一盏方向光Directional Light就能勾勒出粒子群的体积感。后期处理Post-Processing加上一点点泛光Bloom能让发光的粒子猫咪看起来更加梦幻和不真实。运动模糊Motion Blur则能强化动态粒子的流动轨迹。景深Depth of Field可以虚化背景让粒子猫成为视觉焦点。3. 实战构建从图片到会呼吸的粒子猫理论说得再多不如动手做一遍。下面我将以一个“动态模拟派”的平面粒子猫为例详细拆解每一步操作。我们的目标是用一张黑白猫咪剪影生成5000个左右的粒子让它们微微抖动并带有从中心向边缘的颜色渐变。3.1 第一步准备与采样1. 资源准备在Unity中创建一个新项目或场景。准备一张清晰的猫咪剪影PNG图片背景透明猫咪主体为白色。将其导入Unity记得在导入设置中确保Read/Write Enabled被勾选这样脚本才能读取像素数据并根据需要设置纹理类型比如Sprite (2D and UI)或Default。2. 创建粒子系统在场景中创建一个空物体命名为ParticleCat然后为其添加一个Particle System组件。我们先不进行任何参数设置因为所有粒子都将由脚本生成。3. 编写采样与发射脚本创建一个C#脚本命名为ParticleCatGenerator挂载到ParticleCat物体上。using UnityEngine; using System.Collections.Generic; public class ParticleCatGenerator : MonoBehaviour { public Texture2D catSilhouette; // 拖入你的猫咪剪影图 public int maxParticles 5000; // 目标粒子数 public float spawnWidth 10f; public float spawnHeight 10f; public float spawnDepth 0f; // 平面映射深度为0 private ParticleSystem particleSys; private ParticleSystem.Particle[] particlesArray; void Start() { particleSys GetComponentParticleSystem(); if (catSilhouette null) { Debug.LogError(请指定猫咪剪影纹理); return; } GenerateCatParticles(); } void GenerateCatParticles() { // 1. 初始化粒子数组 particlesArray new ParticleSystem.Particle[maxParticles]; int particleCount 0; // 2. 获取纹理像素数据注意性能建议在Start中做一次 Color[] pixels catSilhouette.GetPixels(); int texWidth catSilhouette.width; int texHeight catSilhouette.height; // 3. 随机采样算法 // 为了效率我们采用简单的随机采样并利用alpha值判断是否在猫咪区域内 while (particleCount maxParticles) { // 在纹理坐标内随机一个点 float u Random.Range(0f, 1f); float v Random.Range(0f, 1f); // 将UV坐标转换为像素坐标 int pixelX Mathf.FloorToInt(u * texWidth); int pixelY Mathf.FloorToInt(v * texHeight); int pixelIndex pixelY * texWidth pixelX; // 检查该像素的alpha值我们的剪影图猫咪区域alpha0 if (pixelIndex 0 pixelIndex pixels.Length pixels[pixelIndex].a 0.5f) { // 命中这是一个有效的采样点 Vector3 particlePos new Vector3( (u - 0.5f) * spawnWidth, // 让猫咪中心对齐物体中心 (v - 0.5f) * spawnHeight, spawnDepth ); particlesArray[particleCount].position particlePos; // 初始速度设为0我们后面用其他模块控制运动 particlesArray[particleCount].velocity Vector3.zero; // 初始颜色设为白色后续用渐变 particlesArray[particleCount].startColor Color.white; // 设置一个较大的生命周期 particlesArray[particleCount].startLifetime 100f; particlesArray[particleCount].remainingLifetime 100f; // 设置粒子大小可以根据离中心的距离稍作变化 float distanceFromCenter new Vector2(u-0.5f, v-0.5f).magnitude; particlesArray[particleCount].startSize Mathf.Lerp(0.08f, 0.05f, distanceFromCenter*2); particleCount; } // 如果随机点不在猫咪区域内就继续循环 } // 4. 将粒子数组设置到粒子系统中 particleSys.SetParticles(particlesArray, particleCount); Debug.Log($成功生成 {particleCount} 个粒子构成猫咪形状。); } }代码解析与注意事项GetPixels()会获取整个纹理的像素数组对于大图可能比较耗内存。对于更复杂的项目可以考虑使用Texture2D.GetPixel(x, y)在采样循环中按需读取或者使用Texture2D.GetRawTextureData()进行更低级别的操作。采样循环使用while和随机数效率不是最高。如果maxParticles很大或者图片有效区域猫咪占比很小可能会循环很多次。在实际项目中可以考虑预计算所有有效像素点然后从中随机选取或者使用更高效的泊松采样算法。我们将粒子的初始位置映射到了以物体为中心、宽高为spawnWidth和spawnHeight的矩形区域内。(u - 0.5f)是为了将UV坐标原点(0,0)从左下角移动到中心。运行脚本你应该能看到粒子系统发射出5000个粒子但它们会立刻按照默认参数运动并消失。别急我们还需要配置粒子系统本身。3.2 第二步配置粒子系统模块现在我们需要在Unity编辑器中详细配置Particle System组件让这些静态的粒子“活”起来。初始化模块Main ModuleDuration: 设为 100或其他大于粒子生命周期的值确保系统持续发射。Looping: 勾选。Start Lifetime: 设为 100。与我们脚本中设置的一致。Start Speed: 设为0。这是关键我们不希望粒子一出生就飞出去。Start Size: 可以保留一个值但我们的脚本已经覆盖了每个粒子的初始大小。Start Color: 设为白色脚本已覆盖。Max Particles: 设为至少5000或更大确保能容纳我们生成的所有粒子。Play On Awake: 勾选。Emission模块完全关闭因为我们是通过脚本一次性设置所有粒子而不是持续发射。将Rate over Time和Rate over Distance都设为0。形状模块Shape Module关闭。因为我们不需要从某个形状发射粒子粒子的位置已由脚本完全指定。生命周期内速度模块Velocity over Lifetime可以保持关闭或者给一个非常非常小的值如XYZ在 -0.01 到 0.01 之间制造极其缓慢的基底流动。限制速度模块Limit Velocity over Lifetime如果你启用了速度可以打开此模块将Speed设为一个很小的上限如0.02Dampen设为1这样粒子速度一旦超过这个上限就会被阻尼减速防止它们跑远。噪声模块Noise Module - 核心动态来源勾选Enabled。Strength: 这是控制抖动强度的关键。设为 (0.03, 0.03, 0.03)。三个值可以略有不同让抖动更自然。这个值非常小因为我们只需要微弱的呼吸感。Frequency: 设为0.2。降低频率可以让抖动看起来更平滑、缓慢像缓慢的脉搏而不是高频震动。Scroll Speed: 设为0.1。让噪声场缓慢变化这样粒子的抖动模式不是静止的而是随时间缓慢演变。Damping: 勾选。这会让粒子在试图远离其初始位置时受到一个拉回的力是保持猫形不散的关键。Octaves,Octave Multiplier,Octave Scale: 可以保持默认增加细节复杂度但也会增加计算量。对于我们的需求默认值通常足够。生命周期内颜色模块Color over Lifetime勾选Enabled。双击颜色条打开渐变编辑器。我们可以设置一个从中心出生到边缘死亡的渐变。例如左侧0.0设置为偏暖的橙色 (RGB: 255, 200, 100)。中间0.5设置为亮黄色 (RGB: 255, 255, 150)。右侧1.0设置为偏冷的淡蓝色或淡紫色 (RGB: 180, 220, 255)。这样随着粒子“生命”的流逝虽然生命周期很长但颜色模块会按比例应用猫咪整体会呈现出从内到外的冷暖色渐变更具立体感和艺术感。渲染器模块Renderer ModuleRender Mode: 选择Billboard。这是最通用的模式粒子始终面向相机。Material: 创建一个新的材质Shader选择Particles/Standard Unlit。这样猫咪的颜色不受场景光影响完全由我们控制。可以在材质上赋予一个简单的粒子纹理比如一个软边缘的圆形贴图让每个粒子看起来更柔和。配置完成后运行游戏。你应该能看到一只由粒子构成的、轮廓清晰的猫咪并且这些粒子在非常缓慢、柔和地抖动颜色也从中心向边缘发生渐变。恭喜你你的第一只代码猫诞生了4. 性能优化与高级技巧当粒子数量上去之后比如超过1万性能就会成为一个需要关注的问题。同时基础的抖动和渐变可能无法满足你更艺术化的追求。4.1 性能优化要点粒子数量是性能的第一杀手在满足形状辨识度的前提下尽可能减少粒子数量。可以通过调整采样算法在轮廓边缘密集采样在内部稀疏采样。简化粒子渲染使用最简单的Shader如Particles/Simple Lit或Unlit。关闭粒子的投射和接收阴影Cast Shadows, Receive Shadows。减小粒子纹理尺寸。利用GPU Instancing确保你的粒子材质启用了Enable GPU Instancing。这能极大地提升大量相同材质粒子的渲染效率。分批与LOD如果猫咪是场景中的背景元素可以考虑根据相机距离动态调整粒子数量LOD。距离远时用更少的粒子采样同一张图生成一个低精度版本。脚本优化GetPixels()和SetParticles()都是比较耗时的操作尽量避免在Update中每帧调用。我们的生成脚本只在Start中运行一次是很好的实践。如果需要动态变化考虑使用ParticleSystem.GetParticles和SetParticles来更新部分粒子属性而不是全部重新生成。4.2 让猫咪更“活”高级动态技巧分区模拟为什么不只让猫咪的尾巴或胡须动呢我们可以在采样时为每个粒子打上“区域标签”。例如根据其UV坐标的Y值判断处于图像底部的粒子可能是尾巴赋予更强的Noise Strength或一个特定的Velocity over Lifetime让它摆动得更明显。响应式交互通过编写脚本让粒子猫能够响应鼠标或玩家的靠近。void Update() { // 获取当前所有粒子 int numParticlesAlive particleSys.GetParticles(particlesArray); Vector3 mouseWorldPos Camera.main.ScreenToWorldPoint(new Vector3(Input.mousePosition.x, Input.mousePosition.y, 10f)); for (int i 0; i numParticlesAlive; i) { Vector3 dirToMouse particlesArray[i].position - mouseWorldPos; float distance dirToMouse.magnitude; // 当鼠标靠近时给粒子一个轻微的排斥力 if (distance 3f) { Vector3 repelForce dirToMouse.normalized * (3f - distance) * 0.01f; particlesArray[i].velocity repelForce; } } particleSys.SetParticles(particlesArray, numParticlesAlive); }这样当你用鼠标靠近猫咪时周围的粒子会像受惊一样微微散开又恢复互动感十足。多系统叠加不要试图用一个粒子系统完成所有事。可以创建两个甚至三个粒子系统层叠在一起。底层使用较大的、颜色较暗的粒子负责构成猫咪的主体轮廓和体积感运动缓慢。中层使用中等大小、颜色明亮的粒子负责勾勒关键线条如眼睛、鼻子轮廓可以有独立的、稍快的噪声运动。顶层使用非常小的、高亮或发光Additive Shader的粒子稀疏地分布在轮廓边缘或高光处做快速、随机的闪烁运动模拟毛发尖端的光泽或魔法微粒。 通过分层你可以创造出极其丰富和立体的视觉效果而且每个层的粒子数可以控制性能也更优。5. 常见问题与排查实录在实际操作中你肯定会遇到各种各样的问题。下面是我在制作过程中踩过的一些坑和解决方案。问题1生成的猫咪形状不清晰边缘毛糙。原因粒子数量不足或者采样算法过于随机导致轮廓关键点缺失。排查首先在脚本的while循环后打印出particleCount确认是否真的生成了预期的粒子数。如果数量足够可能是采样点分布问题。解决增加maxParticles。改进采样算法。可以尝试先遍历所有像素将有效像素坐标存入一个列表然后从这个列表中随机抽取maxParticles个点。这能保证采样点全部落在猫咪区域内效率也更高。对于轮廓边缘可以额外进行一轮“边缘增强”采样。使用图像处理算法如Sobel算子检测边缘像素对这些像素进行更高权重的采样。问题2猫咪形状很快就散了粒子乱飞。原因粒子受到过大的力或速度且没有约束。排查检查粒子系统模块Main模块的Start Speed是否为0Velocity over Lifetime是否开启了且数值过大Noise模块的Strength是否设置得太大对于保持形状通常应小于0.1解决确保Start Speed为0。将Velocity over Lifetime的值调至非常小接近0或直接关闭。确保Noise模块的Damping已勾选这是防止粒子漂移的“橡皮筋”。可以开启Limit Velocity over Lifetime模块设置一个很小的最大速度限制。问题3粒子颜色没有显示我设置的渐变全是白色。原因脚本中为每个粒子设置的startColor覆盖了粒子系统模块的Color over Lifetime效果。排查在脚本GenerateCatParticles方法中我们为每个粒子设置了startColor Color.white。解决将脚本中设置startColor的那一行注释掉或删除。让粒子的颜色完全由粒子系统模块来控制。如果你希望通过脚本控制颜色就不要开启Color over Lifetime模块而是在脚本中根据粒子的位置或其他属性计算颜色并赋值。问题4运行起来帧率FPS很低。原因粒子数量过多或粒子Shader/材质过于复杂。排查使用Unity的Profiler窗口Window - Analysis - Profiler查看Rendering和Scripts部分的耗时。解决在保证形状的前提下减少maxParticles。将粒子渲染器的材质换成更简单的Shader如Particles/Unlit。检查并确保材质开启了GPU Instancing。如果使用了自定义脚本在Update中更新粒子确保更新是必要的并尽量优化算法比如使用平方距离比较代替开方运算。问题5我想让猫咪的形态随时间缓慢变化比如从坐姿变成站姿。思路这是更高级的应用。你需要准备两张或多张不同形态的猫咪剪影图序列帧。核心思路是粒子寻的Particle Target。实现简述和之前一样采样第一张图坐姿生成粒子并记录其初始位置startPos。采样第二张图站姿为每个粒子计算一个目标位置targetPos。这里需要一个匹配算法最简单的是根据UV坐标匹配即同一UV坐标的粒子移动到新图的对应位置但这要求两张图猫咪部位大致对齐。更复杂的是使用最近邻搜索等算法为每个旧位置找一个新位置。在Update中使用ParticleSystem.GetParticles获取当前粒子然后根据一个时间因子t(0到1)将粒子的position从startPos线性插值Lerp到targetPos。使用ParticleSystem.SetParticles写回。当t达到1后可以将targetPos设为新的startPos并加载下一张目标图实现连续变形。这个过程对性能要求较高且需要仔细处理粒子与目标的匹配但实现后的效果会非常惊艳仿佛一只真正的粒子猫在动。从一张简单的图片到一群拥有生命感的粒子这个过程充满了探索的乐趣。我个人的体会是参数调整往往比写代码更花时间。Noise模块的Strength和FrequencyColor over Lifetime的渐变条这些细微的调整对最终气质的影响是决定性的。多试试不同的组合你可能会创造出完全出乎意料的效果——也许不是一只温顺的猫而是一只燃烧的、流动的或者星空构成的猫。这就是代码与艺术交织的魅力。最后一个小技巧试着把你的粒子猫放到一个暗黑的环境加上强烈的Bloom后期效果你会得到一只仿佛由星尘构成的梦幻之猫这才是“吸”代码猫的正确姿势。