Unity 2020.2 + ShaderGraph 10.3.2 实战：从涂鸦到刮刮乐，一个RenderTexture搞定两种交互效果

Unity ShaderGraph 交互效果设计：RenderTexture 的涂鸦与刮刮乐双场景实战

在游戏开发中，交互效果直接影响用户体验。本文将深入探讨如何利用 Unity 的 ShaderGraph 和 RenderTexture 实现两种看似不同但原理相通的交互效果：涂鸦和刮刮乐。通过对比分析，帮助开发者掌握图形学原理在实际项目中的灵活应用。

1. RenderTexture 作为通用画布的核心原理

RenderTexture 是 Unity 中的一种特殊纹理，可以实时渲染并存储图像数据。在交互效果设计中，它充当了一个动态的画布角色，记录用户的每一次操作。

1.1 基础属性设置

无论是涂鸦还是刮刮乐效果，RenderTexture 的初始设置都至关重要：

// 创建RenderTexture的基本参数 RenderTexture rt = new RenderTexture(512, 512, 0, RenderTextureFormat.ARGB32); rt.filterMode = FilterMode.Bilinear; rt.wrapMode = TextureWrapMode.Clamp;

关键参数对比：

1.2 坐标转换系统

两种效果都需要精确的屏幕坐标到纹理坐标的转换：

Vector2 ScreenToUV(Vector2 screenPos, RectTransform rt, Camera cam) { Vector2 localPos; RectTransformUtility.ScreenPointToLocalPointInRectangle( rt, screenPos, cam, out localPos); // 转换为UV坐标(0-1) Vector2 uv = new Vector2( (localPos.x + rt.rect.width/2) / rt.rect.width, (localPos.y + rt.rect.height/2) / rt.rect.height); return uv; }

2. ShaderGraph 中的混合逻辑设计

ShaderGraph 是实现视觉效果的核心，不同的混合方式会产生截然不同的交互体验。

2.1 涂鸦效果的Shader实现

涂鸦效果通常采用加法混合：

ShaderGraph节点连接： MainTexture(RGB) → Multiply → Output(RGB) BrushTexture(A) → Add → Output(A)

关键参数：

• 笔刷颜色：可自定义
• 混合模式：One OneMinusSrcAlpha
• 写入通道：RGBA

2.2 刮刮乐效果的Shader实现

刮刮乐效果则需要反转逻辑：

ShaderGraph节点连接： MainTexture(RGB) → Multiply → Output(RGB) RenderTexture(A) → OneMinus → Multiply → Output(A)

特殊处理：

• 初始状态：RenderTexture全黑(Alpha=1)
• 刮擦区域：变为透明(Alpha=0)
• 混合模式：SrcAlpha OneMinusSrcAlpha

3. 交互逻辑的代码实现差异

虽然底层都是基于RenderTexture的绘制，但两种交互在代码实现上有明显区别。

3.1 涂鸦系统的核心代码

void UpdateDoodle(Vector2 uv) { // 激活RenderTexture RenderTexture.active = doodleRT; // 设置绘制矩阵 GL.PushMatrix(); GL.LoadPixelMatrix(0, doodleRT.width, doodleRT.height, 0); // 计算绘制位置 Rect brushRect = new Rect( uv.x * doodleRT.width - brushSize/2, (1-uv.y) * doodleRT.height - brushSize/2, brushSize, brushSize); // 执行绘制 Graphics.DrawTexture(brushRect, brushTexture); GL.PopMatrix(); RenderTexture.active = null; }

3.2 刮刮乐系统的特殊处理

刮刮乐需要额外的初始化步骤：

void InitializeScratchCard() { RenderTexture.active = scratchRT; GL.PushMatrix(); GL.LoadPixelMatrix(0, scratchRT.width, scratchRT.height, 0); // 用黑色初始化整个RT Graphics.DrawTexture( new Rect(0, 0, scratchRT.width, scratchRT.height), blackTexture); GL.PopMatrix(); RenderTexture.active = null; }

4. 性能优化与进阶技巧

在实际项目中，性能往往是关键考量因素。以下是针对不同场景的优化建议。

4.1 分辨率适配方案

根据设备性能动态调整RenderTexture分辨率：

int CalculateOptimalRTSize(Screen screen) { float scale = Mathf.Clamp(screen.dpi / 120f, 0.5f, 2f); int baseSize = 512; return Mathf.ClosestPowerOfTwo((int)(baseSize * scale)); }

4.2 笔刷优化技巧

1. 预生成笔刷贴图：避免运行时生成
2. 多级缓存：为不同压力/速度准备不同尺寸的笔刷
3. GPU加速：使用ComputeShader进行大规模绘制

// ComputeShader绘制示例 void GPUDraw(RenderTexture rt, Vector2[] positions) { computeShader.SetTexture(0, "Result", rt); computeShader.SetVectorArray("Positions", positions); computeShader.Dispatch(0, positions.Length / 64 + 1, 1, 1); }

4.3 混合模式进阶应用

通过修改ShaderGraph的混合节点，可以实现更多效果：

5. 实战案例：从涂鸦到刮刮乐的项目迁移

假设我们已经完成了一个涂鸦系统，现在需要扩展刮刮乐功能。以下是关键改造步骤。

5.1 共享组件改造

创建可配置的RenderTexture控制器：

public class RenderTexturePainter : MonoBehaviour { public enum Mode { Doodle, Scratch } public Mode paintMode; public RenderTexture rt; public Texture brushTexture; public void DrawAtPosition(Vector2 uv) { if(paintMode == Mode.Doodle) DrawDoodle(uv); else DrawScratch(uv); } private void DrawDoodle(Vector2 uv) { /*...*/ } private void DrawScratch(Vector2 uv) { /*...*/ } }

5.2 ShaderGraph参数化设计

创建可切换的ShaderGraph：

[Toggle] IS_SCRATCH_MODE → Branch → 选择混合路径

5.3 效果切换的UI实现

public void SwitchToScratchMode() { painter.paintMode = Mode.Scratch; material.SetFloat("_IsScratchMode", 1); painter.InitializeRT(blackTexture); }

6. 常见问题与调试技巧

开发过程中会遇到各种问题，这里分享一些实用解决方案。

6.1 视觉异常排查表

6.2 RenderTexture内存管理

重要注意事项：

• 及时释放不再使用的RenderTexture
• 避免每帧创建新RT
• 使用RenderTexture.GetTemporary

void OnDisable() { if(rt != null) { RenderTexture.ReleaseTemporary(rt); rt = null; } }

6.3 移动端适配要点

1. 测试不同GPU架构下的表现
2. 注意OpenGL ES版本限制
3. 考虑使用ES2兼容的Shader变体

在最近的一个商业项目中，我们使用这套技术实现了游戏内的签名收集系统。玩家可以在不同场景留下涂鸦，而特殊关卡则采用刮刮乐机制揭示隐藏内容。这种技术组合大幅提升了游戏的互动性和趣味性。