当前位置： 首页 > article >正文

【零基础入门unity游戏开发——2D篇】SpriteMask精灵遮罩组件

article 2026/2/11 23:28:35

考虑到每个人基础可能不一样，且并不是所有人都有同时做2D、3D开发的需求，所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。

  • 【C#篇】：主要讲解C#的基础语法，包括变量、数据类型、运算符、流程控制、面向对象等，适合没有编程基础的同学入门。
  • 【unity通用篇】：主要讲解unity的基础通用的知识，包括unity界面、unity脚本、unity资源管理、unity动画、unity摄像机等，适合unity初学者入门。
  • 【unity3D篇】：主要讲解unity3D的知识，unity3D角色、unity3D物理系统、unity3D光照等，适合只想做2D游戏的开发者学习。
  • 【unity2D篇】unity2D篇：主要讲解unity2D的知识，包括unity2D角色、unity2D物理系统、unity2D光照等，适合只想做3D游戏的开发者学习。

这样方便大家按需选择性的去学习，比如有编程基础的大概率可以直接从unity通用篇开始入门，没有编程基础的建议从C#篇开始学习。只想做2D游戏的话，可以直接从unity2D篇开始学习，3D篇大概率就不需要看了，节约学习时间成本。

文章目录

  • 一、SpriteMask精灵遮罩是什么
  • 二、创建SpriteMask精灵遮罩
  • SpriteMask组件参数介绍
    • 1、Sprite 精灵
    • 2、Sprite排序点
    • 3、Alpha Cutoff Alpha修剪
    • 5、Custom Range 自定义范围
  • 三、实战
    • 1、制作圆形头像
    • 2、实现类似相框的效果
    • 3、实现图片背景消融渐变效果
  • 专栏推荐
  • 完结

一、SpriteMask精灵遮罩是什么

SpriteMask是精灵遮罩的意思。它的主要作用就是对精灵图片产生遮罩，制作一些特殊的功能，比如只显示图片的一部分让玩家看到。常常用于制作玩家圆形头像、场景过渡、镂空图。
在这里插入图片描述
一般要和配合使用SpriteRenderer精灵渲染器组件的Mask Interaction 遮罩交互参数配合使用

实战参考：【unity实战】2d血液飞溅喷射到墙上和TileMap上，留下血迹的效果

二、创建SpriteMask精灵遮罩

创建精灵遮罩后在精灵遮罩组件选一个图片。再创建一个2D精灵选择一张图片。把2D精灵调成可以和遮罩交互的模式。可以看到遮罩效果。
在这里插入图片描述

SpriteMask组件参数介绍

在这里插入图片描述

1、Sprite 精灵

遮罩图片。决定了遮罩的轮廓。

2、Sprite排序点

在这里插入图片描述
计算摄像机和精灵之间距离时，使用精灵中心Center还是轴心点Pivot，一般情况下不用修改。

3、Alpha Cutoff Alpha修剪

透明度的分界线。比如设为0.5时：50%透明度以上的区域显示。

下面实战举例会详细介绍如何使用。

5、Custom Range 自定义范围

自定义遮罩范围。可以实现只遮罩影响部分图层。
在这里插入图片描述
只有>=back（背部），且<front（前面）的排序层都会被渲染。比如Back=0, Front=5 时：只影响排序层0-4的对象。

三、实战

1、制作圆形头像

  • 使用SpriteRenderer组件，在场景放置一个2d对象
    在这里插入图片描述
  • 设置SpriteRenderer组件遮罩交互为遮罩中可见
    在这里插入图片描述
  • 新增一个遮罩
    在这里插入图片描述
  • 将遮罩移动到人物头的位置
    在这里插入图片描述
  • 可以选择不同的遮罩图形
    在这里插入图片描述
    在这里插入图片描述
  • 修改SpriteRenderer组件遮罩交互为遮罩外可见
    在这里插入图片描述
    在这里插入图片描述

2、实现类似相框的效果

配合Sorting Group 组件使精灵遮罩只对自己的子节点起作用

  • 跟前面类似，不过把2d对象变为遮罩的子物体，实现类型相框的作用
    在这里插入图片描述
  • 但是当然没有这么简单，我们复制多个对象看看效果。发现遮罩间会互相产生效果
    在这里插入图片描述
  • 解决方案，为每个对象的父物体，也就是遮罩添加Sorting Group 组件，可以使精灵遮罩只对自己的子节点起作用。Order in Layer可以设置渲染层级（前后遮盖效果）
    在这里插入图片描述
  • 效果
    在这里插入图片描述

3、实现图片背景消融渐变效果

Alpha Cutoff透明度裁剪的使用

  • 随便再网上下载一张封面图
    在这里插入图片描述
  • 导入封面图片到unity，配置基本不需要修改，为了规范可以修改模式为单一图。
    在这里插入图片描述
  • 拖入图片进场景，设置SpriteRenderer组件遮罩交互为遮罩中可见
    在这里插入图片描述
  • 随便在网上下载一张带颜色渐变的图片作为遮图
    在这里插入图片描述
  • 导入图片进unity，设置图片Alpha源为从灰度，将他变成一张【带有透明度的图片】
    在这里插入图片描述
  • 添加遮罩，记得遮罩要覆盖前面的封面图

在这里插入图片描述

  • 修改Alpha Cutoff 值效果

在这里插入图片描述

这就实现了一个简易的消融效果，之前我其实也用Shader Graph制作过一个消融效果：【实现100个unity特效之9】Unity 2D Shader Graph溶解效果教程，对比使用遮罩当然要简单很多，当然效果自然也没那么好。

专栏推荐

地址
【零基础入门unity游戏开发——C#篇】
【零基础入门unity游戏开发——unity通用篇】
【零基础入门unity游戏开发——unity3D篇】
【零基础入门unity游戏开发——unity2D篇】
【制作100个Unity游戏】
【推荐100个unity插件】
【实现100个unity特效】
【unity框架/工具集开发】

完结

好了，我是向宇，博客地址：https://xiangyu.blog.csdn.net，如果学习过程中遇到任何问题，也欢迎你评论私信找我。

赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法，也欢迎评论私信告诉我哦！
在这里插入图片描述

相关文章：

【零基础入门unity游戏开发——2D篇】SpriteMask精灵遮罩组件

考虑到每个人基础可能不一样&#xff0c;且并不是所有人都有同时做2D、3D开发的需求&#xff0c;所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】&#xff1a;主要讲解C#的基础语法&#xff0c;包括变量、数据类型、运算符、…...

编程日记 2026/2/5 17:27:15

Java 枚举类 Key-Value 映射的几种实现方式及最佳实践

Java 枚举类 Key-Value 映射的几种实现方式及最佳实践 前言 在 Java 开发中&#xff0c;枚举(Enum)是一种特殊的类&#xff0c;它能够定义一组固定的常量。在实际应用中&#xff0c;我们经常需要为枚举常量添加额外的属性&#xff0c;并实现 key-value 的映射关系。本文将详细…...

编程日记 2026/2/8 3:41:13

JVM 每个区域分别存储什么数据？

JVM&#xff08;Java Virtual Machine&#xff09;的运行时数据区&#xff08;Runtime Data Areas&#xff09;被划分为几个不同的区域&#xff0c;每个区域都有其特定的用途和存储的数据类型。以下是 JVM 各个区域存储数据的详细说明&#xff1a; 1. 程序计数器 (Program Cou…...

编程日记 2026/2/6 3:52:54

chromem-go + ollama + bge-m3 进行文档向量嵌入和查询

Ollama 安装 https://ollama.com/download Ollama 运行嵌入模型 bge-m3:latest ollama run bge-m3:latestchromem-go 文档嵌入和查询 package mainimport ("context""fmt""runtime""github.com/philippgille/chromem-go" )func ma…...

编程日记 2026/2/10 18:26:34

PyTorch中卷积层torch.nn.Conv2d

在 PyTorch 中&#xff0c;卷积层主要由 torch.nn.Conv1d、torch.nn.Conv2d 和 torch.nn.Conv3d 实现&#xff0c;分别对应一维、二维和三维卷积操作。以下是详细说明&#xff1a; 1. 二维卷积 (Conv2d) - 最常用 import torch.nn as nn# 基本参数 conv nn.Conv2d(in_channe…...

编程日记 2026/2/5 10:59:34

GO语言学习（16）Gin后端框架

目录 ☀️前言 1.什么是前端&#xff1f;什么是后端&#xff1f;&#x1f300; 2.Gin框架介绍 &#x1f337; 3.Gin框架的基本使用 -Hello&#xff0c;World例子&#x1f337; &#x1f33f;入门示例 - Hello&#xff0c;World &#x1f4bb;补充&#xff08;一些常用的网…...

编程日记 2026/2/5 17:27:15

RAG 在 AI 助手、法律分析、医学 NLP 领域的实战案例

RAG&#xff08;Retrieval-Augmented Generation&#xff0c;检索增强生成&#xff09;是一种结合信息检索和生成模型的技术&#xff0c;广泛应用于 AI 助手、法律分析、医学 NLP 等领域。 以下是具体的实战案例和技术实现。 1. AI 助手中的 RAG 应用 案例 1&#xff1a;企业…...

编程日记 2026/2/11 4:07:26

大模型-提示词（Prompt）技巧

1、什么是提示词&#xff1f; 提示词&#xff08;Prompt&#xff09;是用户发送给大语言模型的问题、指令或请求&#xff0c;用来明确地告诉模型用户想要解决的问题或完成的任务&#xff0c;是大语言模型理解用户需求并据此生成相关、准确回答或内容的基础。对于大语言模型来说…...

编程日记 2026/2/5 17:27:30

RNN模型与NLP应用——（9/9）Self-Attention（自注意力机制）

声明&#xff1a; 本文基于哔站博主【Shusenwang】的视频课程【RNN模型及NLP应用】&#xff0c;结合自身的理解所作&#xff0c;旨在帮助大家了解学习NLP自然语言处理基础知识。配合着视频课程学习效果更佳。 材料来源&#xff1a;【Shusenwang】的视频课程【RNN模型及NLP应用…...

编程日记 2026/2/5 17:27:19

硬件与软件的边界-从单片机到linux的问答详解

硬件与软件的边界——从单片机到 Linux 设备驱动的问答详解 在嵌入式开发和操作系统领域&#xff0c;经常会有人问&#xff1a; “如果一个设备里没有任何代码&#xff0c;硬件是不是依然会工作&#xff1f;例如&#xff0c;数据收发、寄存器数据存储、甚至中断触发&#xff…...

编程日记 2026/2/5 15:56:57

5.实现 Channel 类，Reactor 模式初步形成

目录 由联合体epoll_data引出类Channel 结构体epoll_data_t Channel类 Channel类的使用 Epoll类的改变 由联合体epoll_data引出类Channel 在之前使用epoll时&#xff0c;有使用到一个结构体epoll_event // 这是联合体&#xff0c;多个变量共用同一块内存 typedef union…...

编程日记 2026/1/8 12:47:30

深度剖析：U盘打不开难题与应对之策

一、引言 在数字化办公与数据存储的浪潮中&#xff0c;U盘凭借其小巧便携、大容量存储等优势&#xff0c;成为了人们日常数据传输与备份的得力助手。然而&#xff0c;当我们急需调用U盘中的关键数据时&#xff0c;却常常遭遇U盘打不开的棘手状况。U盘打不开不仅会影响工作进度&…...

编程日记 2026/2/5 17:27:21

洛谷题单3-P5721 【深基4.例6】数字直角三角形-python-流程图重构

题目描述 给出 n n n&#xff0c;请输出一个直角边长度是 n n n 的数字直角三角形。所有数字都是 2 2 2 位组成的&#xff0c;如果没有 2 2 2 位则加上前导 0 0 0。 输入格式 输入一个正整数 n n n。 输出格式 输出如题目要求的数字直角三角形。 输入输出样例 输入…...

编程日记 2026/1/3 0:35:09

一起学大语言模型-通过ollama搭建本地大语言模型服务

文章目录 Ollama的github地址链接安装下载需求配置更改安装目录安装更改下载的模型存储位置Ollama一些目录说明日志目录 运行一个模型测试下测试下更改服务监听地址和端口号 Ollama的github地址链接 https://github.com/ollama/ollama 安装 下载 mac安装包下载地址&#xff1…...

编程日记 2025/11/18 11:56:22

AllData数据中台商业版发布版本1.2.9相关白皮书发布

文章末尾网盘链接获取白皮书，本资源通过星球社群不定时更新，加入星球后，请联系市场同事获取相关知识星球社群信息。 一、总体介绍 主要介绍了AllData商业版产品的整体情况，包括产品定位、核心优势、灵活性和扩展性等，已有150个客户使用，社区发展良好。同时，详细解析了…...

编程日记 2025/11/21 1:55:57

uni-app 框架 调用蓝牙，获取 iBeacon 定位信标的数据，实现室内定位场景

背景&#xff1a;最近需要对接了一个 叫 iBeacon 定位信标 硬件设备&#xff0c;这个设备主要的作用是&#xff0c;在信号不好的地方&#xff0c;或者室内实现定位&#xff0c;准确的找到某个东西。就比如 地下停车场&#xff0c;商城里&#xff0c;我们想知道这个停车场的某个…...

编程日记 2026/2/7 10:54:04

leetcode-热题100(3)

leetcode-74-搜索二维矩阵 矩阵最后一列升序排序&#xff0c;在最后一列中查找第一个大于等于target的元素 然后在该元素所在行进行二分查找 bool searchMatrix(int** matrix, int matrixSize, int* matrixColSize, int target) {int n matrixSize;int m matrixColSize[0];in…...

编程日记 2026/2/11 22:59:02

汇编学习结语

一天之内挑战计划太乐观了&#xff0c; 不过还好&#xff0c;这次我总共用了三天完成了系列汇编指令的学习&#xff0c;有的指令也深入进行了验证&#xff0c;输出了系列文章&#xff0c;收获颇多。 接下来我将开启一个专栏&#xff0c;用于记录学习OllyDbg的使用。 OllyDbg使用…...

编程日记 2025/12/6 10:37:59

C++ I/O 流通俗指南

1. std::ostream 是什么&#xff1f; 定义&#xff1a;std::ostream 是 C 标准库中的输出流类&#xff0c;负责将数据输出到各种目标&#xff08;如屏幕、文件、网络等&#xff09;。你可以把 std::ostream 想象成一根“数据水管”&#xff1a; 数据从 C 代码流进 std::ostrea…...

编程日记 2026/1/27 7:41:48

基于python的电影数据分析及可视化系统

一、项目背景 随着电影行业的快速发展&#xff0c;电影数据日益丰富&#xff0c;如何有效地分析和可视化这些数据成为行业内的一个重要课题。本系统旨在利用Python编程语言&#xff0c;结合数据分析与可视化技术&#xff0c;为电影行业从业者、研究者及爱好者提供一个便捷的电…...

编程日记 2026/2/5 17:27:25

【NLP 面经 5】

难以承受的东西只会让我在下一次更平静的面对 —— 25.4.2 一、NER任务&#xff0c;CRF模型改进 命名实体识别&#xff08;NER&#xff09;任务中&#xff0c;你使用基于条件随机场&#xff08;CRF&#xff09;的模型&#xff0c;然而模型在识别嵌套实体和重叠实体时效果不佳&a…...

编程日记 2025/8/9 22:23:34

鸿蒙NEXT小游戏开发：猜小球

1. 引言 “猜小球”是一个经典的益智游戏&#xff0c;通常由一名表演者和多名参与者共同完成。表演者会将一个小球放在一个杯子下面&#xff0c;然后将三个杯子快速地交换位置&#xff0c;参与者则需要猜出最终哪个杯子下面有小球。本文将介绍如何使用HarmonyOS NEXT技术&…...

编程日记 2025/12/16 4:08:51

[NCTF2019]Fake XML cookbook [XXE注入]

题目源代码 function doLogin(){var username $("#username").val();var password $("#password").val();if(username "" || password ""){alert("Please enter the username and password!");return;}var data "…...

编程日记 2026/2/5 17:28:01

Android 防抖和节流

文章目录 Android 防抖和节流概述工具类使用源码下载 Android 防抖和节流 概述 防抖&#xff08;Debounce&#xff09;&#xff1a; 防抖是指在事件被触发后&#xff0c;等待一段时间&#xff0c;如果在这段时间内没有再触发事件&#xff0c;才执行处理函数。如果在这段时间内…...

编程日记 2026/1/14 11:48:57

安徽京准：NTP时间同步服务器操作使用说明

安徽京准&#xff1a;NTP时间同步服务器操作使用说明 3.1 连接天线 天线连接到“ANT”口。 3.2 连接电源 将220V电源线连到AC220V座上或将电源适配器&#xff08;7.5V~12V&#xff09;接到DC口上。也可以同时接上&#xff0c;提高供电可靠性。 3.3 LAN网口 网线连接到NTP…...

编程日记 2026/1/28 1:38:37

【学习记录】pytorch载入模型的部分参数

需要从PointNet网络框架中提取encoder部分的参数&#xff0c;然后赋予自己的模型。因此&#xff0c;需要从一个已有的.pth文件读取部分参数&#xff0c;加载到自定义模型上面。做了一些尝试&#xff0c;记录如下。 关于模型保存与载入 torch.save(): 使用Python的pickle实用程…...

编程日记 2026/2/5 3:41:24

Ubuntu Wayland启动腾讯会议并实现原生屏幕共享

Intro 众所周知&#xff0c;长期以来&#xff0c;由于腾讯会议项目组的尸位素餐、极度不作为&#xff0c;在Wayland成为Ubuntu 24.04 LTS的默认窗口环境下&#xff0c;仍然选择摆烂&#xff0c;甚至还“贴心”地在启动脚本下增加检测Wayland退出的代码&#xff1b;并且即使使用…...

编程日记 2026/1/30 10:23:48

写Prompt的技巧和基本原则

一.基本原则 1.一定要描述清晰你需要大模型做的事情&#xff0c;不要模棱两可 2.告诉大模型需要它做什么&#xff0c;不需要做什么 改写前: 请帮我推荐一些电影 改写后: 请帮我推荐2025年新出的10部评分比较高的喜剧电影&#xff0c;不要问我个人喜好等其他问题&#xff…...

编程日记 2026/2/5 17:27:21

前端Material-UI面试题及参考答案

目录 Material-UI 的设计理念与 Material Design 规范的关系是什么？ 如何通过 npm/yarn/pnpm 安装 Material-UI 的核心依赖？ Material-UI 的默认主题系统如何实现全局样式管理？ 如何在项目中配置自定义字体和颜色方案？ 什么是 emotion 和 styled-components，它们在 Ma…...

编程日记 2026/2/2 0:40:51

29、web前端开发之CSS3（六）

13. 多列布局&#xff08;Multi-column Layout&#xff09; 多列布局&#xff08;Multi-column Layout&#xff09;是一种通过CSS实现的布局方式&#xff0c;允许将内容组织成多列&#xff0c;类似于报纸或杂志的排版方式。这种布局方法能够有效地利用页面空间&#xff0c;提升…...

编程日记 2026/2/11 9:16:34