在本视频中，我们将学习如何以这种方式制作自定义UI网格蒙版 in this video we're going to learn how to make a custom UI mesh mask this way
我们可以用任何形状制作网格并遮盖用户界面的多个部分，而 we can make a mesh out of any shape and mask out multiple parts of our UI while
仅使用一个面膜，让我们开始 using just a single mask let's begin
[音乐] [Music]
你好，欢迎光临，我是你的代码猴子，这个频道全是关于帮助 hello and welcome I'm your code monkey and this channel is all about helping
您将学习如何使用由某人制作的nf2种子制作自己的游戏 you will learn how to make your own games with nf2 torrents made by a
专业的独立游戏开发商，因此，如果您发现视频有帮助，请考虑 professional indie game developer so if you find the video helpful consider
订阅好，所以这是我遇到问题的那些视频之一 subscribing ok so this is one of those videos where I had a problem I did some
研究，我真的找不到简单的解决方案，所以如果您正在研究 research and I couldn't really find easy solution so if you're researching the
我之前所做的是如何在用户界面中制作网格蒙版 same thing that I was which is how to making a mesh mask in the UI then
希望这段视频现在对您没有帮助，我需要这个，因为我想掩盖 hopefully this video won't help you now I need this because I wanted to mask
UI的多个部分，我希望多行文本且流畅 multiple parts of the UI I wanted to have multiple lines of text and smoothly
揭示它们中的每一个，您可以通过创建添加一个 reveal each of them you can easily make a mask by creating a UI object adding an
图像和蒙版组件，然后将要蒙版的所有内容作为 image and a mask component and then put whatever you want to mask as a child of
该对象，但是以这种方式执行操作，您并不意味着只执行此图像 that object however in doing it this way you don't mean to do just this image you
可以掩盖多个孩子，但您不能掩盖多个父母，因此 can mask multiple children but you cannot mask using multiple parents so
您不能组成多个对象的蒙版，现在一个简单的解决方案是 you cannot compose a mask of multiple objects now one simple solution is to
使用所需形状的Alpha通道制作纹理 make a texture with the Alpha Channel in the shape that you want
因此，使用带有两个正方形和是的纹理可以显示出两个部分 so using this texture with two squares and yep it shows both parts of the
烦人的对象，但是现在我们使用的是这种方法 annoying object however now we using this approach we're working with
纹理，如果我想对此进行动画处理，会使动画变得棘手 textures which makes animation relly tricky if I want to animate this I would
需要使一些遮罩像素平滑可见，这将是一个非常 need to smoothly make some of the mask pixels visible and that would be a very
我正在开发代码猴子蒸汽应用程序的笨拙的工作方式 clunky way of doing things I was working on the code monkey steam app which by
描述中链接的连接方式，可将其添加到您的愿望清单中 the way you can connect on link in the description to add it to your wish list
我想在互动教程上有一些文字，并使用数学来 I wanted to have some text on the interactive tutorials and using math to
随着时间的推移显示它的一部分，所以我需要将网格与自定义形状结合起来 show parts of it over time so I needed to combine a mesh with a custom shape
我可以很容易地制作动画以跟随多个文本行，所以这就是 that I could easily animate to follow multiple text lines ok so here's what
我们将要讨论的是这个文本对象，我们只是进行了一系列测试， we're going to talk over here is this text object we just a buncha tests and
现在在遮罩对象内部，当我按yep键时，您可以看到 it's inside a mask object now as I press point yep there you go you can see that
遮罩对象正在增长，现在可以流畅地显示文本。如果我们暂停，我们可以 the mask object is growing and smoothly showing the text now if we pause we can
看看面具，看是否有正在成长的形状显示文字 look at the mask and if there's the shape growing which shows the text
在它后面，所以我们可以隐藏蒙版图形，是的，看起来就像这样 behind it so we can hide the mask graphic and yep that's how it looks so
只需使用简单的图像即可完成单行工作，但随后 far doing for a single line will work just fine using a simple image but then
问题是我们希望这个面具保持不可见，而我们又不是一个 the issue is we want this mask to stay invisible and we aren't an add an other
这样一来，我们可以继续屏蔽其他各行，因此这里是 one so that we can continue masking out the various other lines so over here is
使用多个四边形在此处制作单个网格蒙版的最终结果 the final result using multiple quads to make a single mesh mask over here you
可以看到最终的畸形是单个网格，它本身由 can see the final misshape which is a single mesh which itself is composed of
三个独立的四边形，因此您可以构建任何网格形状 three separate quads so you can build whatever mesh shape you
想要通过代码或手动构建网格并将其用作遮罩 want either through code or by manually building a mesh and using it as a mask
所以这就是您可以制作自定义网格来遮盖您的用户界面的方法 so this is how you can make a custom mesh to mask out your UI this videos
patreon赞助商是坏冒险坏冒险家是游戏开发二人组 patreon sponsor is bad adventure bad adventurer is a game development duo
目前正在开发他们的第一个游戏Wayfarers edge，这是一个专注于RPG的RPG currently working on their first game Wayfarers edge it's a RPG focused on
在低空幻想和狂野西部探索和解决未知的边境土地 exploring and settling unknown frontier lands in a low fantasy and Wild West
主题在蝙蝠上签出冒险冷静谢谢赞助商 theme check them out at bat Adventure calm thank you to the patreon sponsor
感谢这些出色的支持者制作此视频 and thank you to these awesome supporters for making this video
可能去patreon.com/scishow编码猴子以获得一些津贴和帮助 possible go to patreon.com/scishow to code monkey to get some perks and help
让所有人都可以免费观看视频，所以这个圈子让我们开始吧 keep the videos free for everyone all right so this circle let's get to it
好的，现在我们进入主演场景，让我们进入UI画布 okay so here we are in our starring scene and let's go into the UI canvas
在这里，让我们创建一个文本对象 here and let's create a text object
好了，这是一些基本的文本，我们现在想掩盖它，所以让我们先来看一下 alright so here's some basic text now we want to mask it so let's first look at
基本的UI蒙版如何工作以及我们这样做的方式是创建一个新的UI how a basic UI mask works and the way we do that is we create a new UI let's make
它是一个图像，然后在这里我们添加一个组件，然后添加一个遮罩组件，现在要遮罩 it an image then here we add a component we add a mask component and now to mask
我们只需要使其成为该对象的子对象，然后拖动即可 something we just need to make it a child of this object so just drag that
一个在那里，是的，就像文本现在仅在里面时可见 one on there and yep just like that the text is now only visible whilst inside
现在此图像的形状现在此处的源图像设置为null the shape of this image now right now the source image in here is set to null
所以这显示一个基本的矩形，但是您可以在此处分配任何纹理 so this is displaying a basic rectangle but you can assign any texture in here
因此，例如，让我们使用一个圆圈，然后您就可以进入质量 so for example let's use a circle and there you go now the mass takes on the
圆形的形状，这就是制作基本面膜的方法 shape of a circle so this is how you make a very basic mask you have the
带着图像和面具的父母，然后你有了想要的任何孩子， parent with an image and a mask and then you have whatever children you want and
现在掩盖了孩子们的问题，当我们说要 it masks out the children now the issue comes when let's say that we want to
显示文字的这一部分，然后显示这部分内容，因为遮罩的工作原理是 show this part of the text and then this part as well now since masks works based
在父母的形状上，我们只能有一个面具形状，所以面具 on the shape of the parent we can only have a single mask shape so the mask
可以根据我现在所说的图像现在渲染的方式工作 works based on what this image is rendered now like I said when possible
方法是用您想要的形状制作纹理，所以我在这里 approach is to make a texture with the shape that you want so down here I have
这里的纹理只有两个正方形，其余的是alpha透明的，因此 this texture here just two squares and the rest of it is alpha transparent so
如果相反，我套用这个，然后像是那样掩盖了两部分 if instead I apply this one and yep just like that I am masking out two parts of
因此，如果您的目标只是固定的质量 the underlying object so if your goal is just a fixed mass CheY
那么该方法将无法执行，因为它基于纹理和 then this approach won't do however since this is based on a texture and
它是Alpha通道，因此要修改它非常棘手， it's alpha Channel it makes it very tricky to modify in order to modify it I
必须将这些像素设置为完全不透明，等等 would have to play around with setting these pixels to fully opaque and so and
这样就不是最好的方法，所以让我们创建一个 so on so that would not be the best approach so instead let's create a
自定义蒙版形状，让我们创建一个新的C锐脚本，将其称为“网格蒙版” custom mask shape let's create a new C sharp script call this the mesh mask ey
现在在这里我们要创建自己的自定义遮罩类型 and now here we're going to create our own custom mask type now to do that we
只需要扩展而不是单行为，我们将扩展掩码 just need to extend instead of monobehaviour we're going to extend mask
在内部使用统一引擎点UI的图形上，就这样 upon graphic which is inside using unity engine dot UI so there it is let's just
点击“保存”，现在看这里，让我们删除蒙版和图像组件 hit save and see now here and let's remove the mask and our image component
并发送，让我们添加漂亮的脚本和是，就像已经显示了一些 and send let's add our nice script and yep just like that already shows a few
字段，因此现在就从mask eval图形基类打开这些字段 fields so these are on from the mask eval graphic base class now for now
让我们将所有内容保留为默认设置，仅将颜色更改为漂亮的绿色即可 let's leave everything at default let's just change the color to a nice green to
现在让它在代码中非常明显，以便使我们 make it very visible all right now back in the code here in order to make our
自定义网格，我们将覆盖称为的功能之一 custom mesh we're going to override one of the functions it's called the
现在填充网格，UI系统会自动调用该网格来创建 populate mesh now this one gets called automatically by the UI system to create
蒙版蒙版图形的网格，此函数的参数类型为 the mesh of our mask ammonal graphic and this function has an argument of type
顶点助手，这是一个很好的驼峰类，可以帮助我们现在处理网格形状 vertex helper so it's a nice humper class to help us handle mesh shapes now
我们要做的第一件事是确保您清除当前 the first thing we do is to make sure that you clear whatever the current
网格的形状是这样，所以您要达到顶点舒适度，我们只称 shape of our mesh is so you're going to the vertex comfort and we just call
清除好了，现在我们可以在这里设置自定义形状，所以 clear okay and now it's in here that we can set up our customized shape so let's
从一个非常简单的正方形开始，好吧，我们必须为所有人找到一个位置 start off with a very simple square all right we have to find a position for all
我们的顶点，然后我们只需访问顶点助手即可添加UI顶点四边形 our vertices and then we just access the vertex helper to add a UI vertex quad
好吧，就像这样，现在要在这里做一件事 all right so just like that now one thing here in order for this to actually
工作，如果您只需要添加空白，我们需要给UI顶点添加颜色 work we need to give the UI vertex a color if you only were to add empty it
只是行不通，我不确定为什么，只给它随机的颜色就行了 just won't work I'm not sure why but just give it a random color and it works
所以这就是全部，我们清除当前的形状，然后添加 so this is really all it takes we clear the current my shape and then we add our
自定义顶点，如果我们以任何方式返回编辑器，我们都会看到 custom vertices and if we go back into the editor any for any way we see our
面具的形状，所以这里只有50×50的基本四边形，很好 mask shape so here there is just basic quad with 50 by 50 all right great
所以我们的对象是创建网格并使其男性化，从而使 so our object is creating the mesh and making it masculine and in order to make
它是一个实际的遮罩，我们只需要添加遮罩组件，就像这样 it an actual mask we just need to add the mask component and just like that
是的，现在可以显示或隐藏蒙版图形了，所以现在 yep there it is and we can either show or hide the mask graphic okay so now
让我们看看这如何帮助我们解决戴口罩的原始问题 let's see how this helps us solve the original problem of having a mask with
此处有多个形状，我们可以使另一个UI顶点四边形好，所以我们 multiple shapes down here we can make another UI vertex quad alright so we
有我们原始的四边形和旁边的一个，如果我们回去，如果有的话 have our original quad and one next to it and if we go back and if there is we
有两个视觉四边形，所以我们有一个蒙版父对象，并使用自定义 have our two visual quads so we have a single mask parent and by using a custom
网格，我们可以掩盖基础对象的多个区域，因此 mesh we can mask out multiple areas of our underlying object so there it is
好了，现在我们需要做的就是扩展这个概念 alright awesome now we need to do is really just extend upon this concept so
在这里，让我们尝试制作我们的口罩，让我们随时间增加尺寸 here let's try and making our mask let's just increase the size over time all
就像这样，我们应该看到一个矩形延伸 right just like that we should see a rectangle stretching however when you go
回到这里实际上是行不通的，所以我们的网格形状实际上不是 back here it doesn't actually work so our mesh shape is not actually
增加是因为我们在这里缺少一件事 increasing that is because we are missing one thing which is in here the
UI系统仅在绝对需要您时才调用此函数 UI system only calls this function when it absolutely needs you meaning that it
不会在每个帧上自动调用它，因此如果我们想这样做，我们可以 does not call it automatically on every frame so if we want to do that we can
进行掠夺性更新，在这里我们告诉它更新顶点，所以我们只是 make our predatory update and in here we tell it to update on vertices so we just
设置顶点为肮脏，它们将不会更新，所以就像现在这样 go set vertices as dirty and they won't update so just like that now this should
更新每帧，如果有的话，现在我们有自定义的混乱形状和 update on every frame and if there it is now we have our custom mess shape and
随着时间的推移交配很棒，所以现在您显然可以使用 mating over time awesome all right so now with this you can obviously use
您想要的任何混搭都不必只是一个简单的矩形，因此 whatever mashup you want it doesn't have to be just a simple rectangle so for
例如，您可以制作一个星形的网格，然后旋转 example you could make a mesh in the shape of a star and just rotate around
或实际上任何您想要动画的东西，以及您以任何方式 or really any you want to animate and in any way you
想要好了，所以这是我为代码monkey Steam制作的最终脚本 want alright so here is the final script that I made for the code monkey steam
应用程序，它具有网格网格UI脚本，然后作为其子级，具有相同的文本 app it has the mesh mesh UI script then as a child of it it has the same text
对象，然后在这里，我有一个装有一堆孩子的容器， object and then over here I have a container with a bunch of children and
他们每个人都有一个简单的脚本，只有两个字段，因此只需要折叠即可 each of them has a simple script just with two fields so just a fold for the
开始时间和总时间中的另一个时间，这是永恒的时间 start time and another one for the total time so that's eternal amount of time
该矩形将达到其最终形状，因此该对象具有 that this rectangle will take to reach its final shape so this object has this
形状，它们每个都覆盖一条线，然后它们必须与您啮合 shape and each of them is covering one line and then they must mesh you why
在这里有一个对面膜容器的引用，它只是将那些 over here has a reference to the mask container and it simply applies those
面具让我们看看那里，突然间，是的，你去了那里 masks let's see there it is and all of a sudden yep there you go there's the
随着时间的推移会创建蒙版的形状，因此与游戏和场景有关 masked shape being created over time so here it is with the game and the scene
并排查看，您确实可以看到网格形状不断增长 view side by side and you can indeed see the mesh shape constantly growing so
这是在任何情况下平滑滚动某些文本的好方法 this is a great way to smoothly scroll over some text in any matter you want as
我说我在研究代码猴子Steam应用程序时研究了这个问题 I said I researched this while working on the code monkey steam app if you
尚未，请检查说明中的链接并将其添加到您的 haven't yet then please check the link in the description and add it to your
愿望清单，我正在尝试构建一些非常酷的东西，希望它应该是 wish list I'm trying to build something really cool and it should hopefully be
下个月的某个时间可以播放此视频，这归功于 out sometime next month this video is made possible thanks to
这些出色的支持者可以访问patreon.com/scishow将Monkey编码为 these awesome supporters go to patreon.com/scishow to code monkey to
得到一些好处，并尽可能使所有人免费观看视频 get some perks and help keep the videos free for everyone as always you can
从unity karma com下载实用程序中的项目文件订阅 download the project files in utilities from unity karma com subscribe the
更多的印地语油条，为罪恶广场7缺点的渠道，我会 channel for more Hindi churros for sin square 7 cons and I'll
下次见 see you next time [Music]