1 00:00:00,030 --> 00:00:04,000 在本视频中，我们将学习如何以这种方式制作自定义UI网格蒙版 in this video we're going to learn how to make a custom UI mesh mask this way 2 00:00:04,200 --> 00:00:07,988 我们可以用任何形状制作网格并遮盖用户界面的多个部分，而 we can make a mesh out of any shape and mask out multiple parts of our UI while 3 00:00:08,189 --> 00:00:12,320 仅使用一个面膜，让我们开始 using just a single mask let's begin 4 00:00:13,189 --> 00:00:16,320 [音乐] [Music] 5 00:00:17,350 --> 00:00:20,910 你好，欢迎光临，我是你的代码猴子，这个频道全是关于帮助 hello and welcome I'm your code monkey and this channel is all about helping 6 00:00:21,109 --> 00:00:24,330 您将学习如何使用由某人制作的nf2种子制作自己的游戏 you will learn how to make your own games with nf2 torrents made by a 7 00:00:24,530 --> 00:00:27,600 专业的独立游戏开发商，因此，如果您发现视频有帮助，请考虑 professional indie game developer so if you find the video helpful consider 8 00:00:27,800 --> 00:00:32,070 订阅好，所以这是我遇到问题的那些视频之一 subscribing ok so this is one of those videos where I had a problem I did some 9 00:00:32,270 --> 00:00:35,729 研究，我真的找不到简单的解决方案，所以如果您正在研究 research and I couldn't really find easy solution so if you're researching the 10 00:00:35,929 --> 00:00:39,449 我之前所做的是如何在用户界面中制作网格蒙版 same thing that I was which is how to making a mesh mask in the UI then 11 00:00:39,649 --> 00:00:43,619 希望这段视频现在对您没有帮助，我需要这个，因为我想掩盖 hopefully this video won't help you now I need this because I wanted to mask 12 00:00:43,820 --> 00:00:47,849 UI的多个部分，我希望多行文本且流畅 multiple parts of the UI I wanted to have multiple lines of text and smoothly 13 00:00:48,049 --> 00:00:52,320 揭示它们中的每一个，您可以通过创建添加一个 reveal each of them you can easily make a mask by creating a UI object adding an 14 00:00:52,520 --> 00:00:56,159 图像和蒙版组件，然后将要蒙版的所有内容作为 image and a mask component and then put whatever you want to mask as a child of 15 00:00:56,359 --> 00:01:00,659 该对象，但是以这种方式执行操作，您并不意味着只执行此图像 that object however in doing it this way you don't mean to do just this image you 16 00:01:00,859 --> 00:01:04,528 可以掩盖多个孩子，但您不能掩盖多个父母，因此 can mask multiple children but you cannot mask using multiple parents so 17 00:01:04,728 --> 00:01:08,698 您不能组成多个对象的蒙版，现在一个简单的解决方案是 you cannot compose a mask of multiple objects now one simple solution is to 18 00:01:08,899 --> 00:01:11,549 使用所需形状的Alpha通道制作纹理 make a texture with the Alpha Channel in the shape that you want 19 00:01:11,750 --> 00:01:15,269 因此，使用带有两个正方形和是的纹理可以显示出两个部分 so using this texture with two squares and yep it shows both parts of the 20 00:01:15,469 --> 00:01:19,349 烦人的对象，但是现在我们使用的是这种方法 annoying object however now we using this approach we're working with 21 00:01:19,549 --> 00:01:23,340 纹理，如果我想对此进行动画处理，会使动画变得棘手 textures which makes animation relly tricky if I want to animate this I would 22 00:01:23,540 --> 00:01:27,209 需要使一些遮罩像素平滑可见，这将是一个非常 need to smoothly make some of the mask pixels visible and that would be a very 23 00:01:27,409 --> 00:01:31,500 我正在开发代码猴子蒸汽应用程序的笨拙的工作方式 clunky way of doing things I was working on the code monkey steam app which by 24 00:01:31,700 --> 00:01:34,019 描述中链接的连接方式，可将其添加到您的愿望清单中 the way you can connect on link in the description to add it to your wish list 25 00:01:34,219 --> 00:01:38,099 我想在互动教程上有一些文字，并使用数学来 I wanted to have some text on the interactive tutorials and using math to 26 00:01:38,299 --> 00:01:42,179 随着时间的推移显示它的一部分，所以我需要将网格与自定义形状结合起来 show parts of it over time so I needed to combine a mesh with a custom shape 27 00:01:42,379 --> 00:01:46,259 我可以很容易地制作动画以跟随多个文本行，所以这就是 that I could easily animate to follow multiple text lines ok so here's what 28 00:01:46,459 --> 00:01:50,278 我们将要讨论的是这个文本对象，我们只是进行了一系列测试， we're going to talk over here is this text object we just a buncha tests and 29 00:01:50,478 --> 00:01:55,500 现在在遮罩对象内部，当我按yep键时，您可以看到 it's inside a mask object now as I press point yep there you go you can see that 30 00:01:55,700 --> 00:01:59,700 遮罩对象正在增长，现在可以流畅地显示文本。如果我们暂停，我们可以 the mask object is growing and smoothly showing the text now if we pause we can 31 00:01:59,900 --> 00:02:03,209 看看面具，看是否有正在成长的形状显示文字 look at the mask and if there's the shape growing which shows the text 32 00:02:03,409 --> 00:02:06,659 在它后面，所以我们可以隐藏蒙版图形，是的，看起来就像这样 behind it so we can hide the mask graphic and yep that's how it looks so 33 00:02:06,859 --> 00:02:10,770 只需使用简单的图像即可完成单行工作，但随后 far doing for a single line will work just fine using a simple image but then 34 00:02:10,969 --> 00:02:15,330 问题是我们希望这个面具保持不可见，而我们又不是一个 the issue is we want this mask to stay invisible and we aren't an add an other 35 00:02:15,530 --> 00:02:19,710 这样一来，我们可以继续屏蔽其他各行，因此这里是 one so that we can continue masking out the various other lines so over here is 36 00:02:19,909 --> 00:02:24,330 使用多个四边形在此处制作单个网格蒙版的最终结果 the final result using multiple quads to make a single mesh mask over here you 37 00:02:24,530 --> 00:02:28,350 可以看到最终的畸形是单个网格，它本身由 can see the final misshape which is a single mesh which itself is composed of 38 00:02:28,550 --> 00:02:31,560 三个独立的四边形，因此您可以构建任何网格形状 three separate quads so you can build whatever mesh shape you 39 00:02:31,759 --> 00:02:35,880 想要通过代码或手动构建网格并将其用作遮罩 want either through code or by manually building a mesh and using it as a mask 40 00:02:36,080 --> 00:02:40,830 所以这就是您可以制作自定义网格来遮盖您的用户界面的方法 so this is how you can make a custom mesh to mask out your UI this videos 41 00:02:41,030 --> 00:02:45,210 patreon赞助商是坏冒险坏冒险家是游戏开发二人组 patreon sponsor is bad adventure bad adventurer is a game development duo 42 00:02:45,409 --> 00:02:49,590 目前正在开发他们的第一个游戏Wayfarers edge，这是一个专注于RPG的RPG currently working on their first game Wayfarers edge it's a RPG focused on 43 00:02:49,789 --> 00:02:53,490 在低空幻想和狂野西部探索和解决未知的边境土地 exploring and settling unknown frontier lands in a low fantasy and Wild West 44 00:02:53,689 --> 00:02:58,050 主题在蝙蝠上签出冒险冷静谢谢赞助商 theme check them out at bat Adventure calm thank you to the patreon sponsor 45 00:02:58,250 --> 00:03:00,689 感谢这些出色的支持者制作此视频 and thank you to these awesome supporters for making this video 46 00:03:00,889 --> 00:03:05,310 可能去patreon.com/scishow编码猴子以获得一些津贴和帮助 possible go to patreon.com/scishow to code monkey to get some perks and help 47 00:03:05,509 --> 00:03:09,050 让所有人都可以免费观看视频，所以这个圈子让我们开始吧 keep the videos free for everyone all right so this circle let's get to it 48 00:03:09,250 --> 00:03:13,800 好的，现在我们进入主演场景，让我们进入UI画布 okay so here we are in our starring scene and let's go into the UI canvas 49 00:03:14,000 --> 00:03:18,789 在这里，让我们创建一个文本对象 here and let's create a text object 50 00:03:24,699 --> 00:03:29,370 好了，这是一些基本的文本，我们现在想掩盖它，所以让我们先来看一下 alright so here's some basic text now we want to mask it so let's first look at 51 00:03:29,569 --> 00:03:34,710 基本的UI蒙版如何工作以及我们这样做的方式是创建一个新的UI how a basic UI mask works and the way we do that is we create a new UI let's make 52 00:03:34,909 --> 00:03:40,290 它是一个图像，然后在这里我们添加一个组件，然后添加一个遮罩组件，现在要遮罩 it an image then here we add a component we add a mask component and now to mask 53 00:03:40,490 --> 00:03:43,050 我们只需要使其成为该对象的子对象，然后拖动即可 something we just need to make it a child of this object so just drag that 54 00:03:43,250 --> 00:03:47,550 一个在那里，是的，就像文本现在仅在里面时可见 one on there and yep just like that the text is now only visible whilst inside 55 00:03:47,750 --> 00:03:52,080 现在此图像的形状现在此处的源图像设置为null the shape of this image now right now the source image in here is set to null 56 00:03:52,280 --> 00:03:56,400 所以这显示一个基本的矩形，但是您可以在此处分配任何纹理 so this is displaying a basic rectangle but you can assign any texture in here 57 00:03:56,599 --> 00:04:00,509 因此，例如，让我们使用一个圆圈，然后您就可以进入质量 so for example let's use a circle and there you go now the mass takes on the 58 00:04:00,709 --> 00:04:04,500 圆形的形状，这就是制作基本面膜的方法 shape of a circle so this is how you make a very basic mask you have the 59 00:04:04,699 --> 00:04:08,280 带着图像和面具的父母，然后你有了想要的任何孩子， parent with an image and a mask and then you have whatever children you want and 60 00:04:08,479 --> 00:04:12,390 现在掩盖了孩子们的问题，当我们说要 it masks out the children now the issue comes when let's say that we want to 61 00:04:12,590 --> 00:04:17,250 显示文字的这一部分，然后显示这部分内容，因为遮罩的工作原理是 show this part of the text and then this part as well now since masks works based 62 00:04:17,449 --> 00:04:21,389 在父母的形状上，我们只能有一个面具形状，所以面具 on the shape of the parent we can only have a single mask shape so the mask 63 00:04:21,589 --> 00:04:25,439 可以根据我现在所说的图像现在渲染的方式工作 works based on what this image is rendered now like I said when possible 64 00:04:25,639 --> 00:04:29,730 方法是用您想要的形状制作纹理，所以我在这里 approach is to make a texture with the shape that you want so down here I have 65 00:04:29,930 --> 00:04:34,860 这里的纹理只有两个正方形，其余的是alpha透明的，因此 this texture here just two squares and the rest of it is alpha transparent so 66 00:04:35,060 --> 00:04:39,509 如果相反，我套用这个，然后像是那样掩盖了两部分 if instead I apply this one and yep just like that I am masking out two parts of 67 00:04:39,709 --> 00:04:43,209 因此，如果您的目标只是固定的质量 the underlying object so if your goal is just a fixed mass CheY 68 00:04:43,408 --> 00:04:47,169 那么该方法将无法执行，因为它基于纹理和 then this approach won't do however since this is based on a texture and 69 00:04:47,369 --> 00:04:51,160 它是Alpha通道，因此要修改它非常棘手， it's alpha Channel it makes it very tricky to modify in order to modify it I 70 00:04:51,360 --> 00:04:54,910 必须将这些像素设置为完全不透明，等等 would have to play around with setting these pixels to fully opaque and so and 71 00:04:55,110 --> 00:04:58,419 这样就不是最好的方法，所以让我们创建一个 so on so that would not be the best approach so instead let's create a 72 00:04:58,619 --> 00:05:04,959 自定义蒙版形状，让我们创建一个新的C锐脚本，将其称为“网格蒙版” custom mask shape let's create a new C sharp script call this the mesh mask ey 73 00:05:05,158 --> 00:05:10,329 现在在这里我们要创建自己的自定义遮罩类型 and now here we're going to create our own custom mask type now to do that we 74 00:05:10,528 --> 00:05:13,778 只需要扩展而不是单行为，我们将扩展掩码 just need to extend instead of monobehaviour we're going to extend mask 75 00:05:13,978 --> 00:05:22,959 在内部使用统一引擎点UI的图形上，就这样 upon graphic which is inside using unity engine dot UI so there it is let's just 76 00:05:23,158 --> 00:05:27,609 点击“保存”，现在看这里，让我们删除蒙版和图像组件 hit save and see now here and let's remove the mask and our image component 77 00:05:27,809 --> 00:05:31,718 并发送，让我们添加漂亮的脚本和是，就像已经显示了一些 and send let's add our nice script and yep just like that already shows a few 78 00:05:31,918 --> 00:05:35,799 字段，因此现在就从mask eval图形基类打开这些字段 fields so these are on from the mask eval graphic base class now for now 79 00:05:35,999 --> 00:05:39,459 让我们将所有内容保留为默认设置，仅将颜色更改为漂亮的绿色即可 let's leave everything at default let's just change the color to a nice green to 80 00:05:39,658 --> 00:05:44,139 现在让它在代码中非常明显，以便使我们 make it very visible all right now back in the code here in order to make our 81 00:05:44,338 --> 00:05:47,410 自定义网格，我们将覆盖称为的功能之一 custom mesh we're going to override one of the functions it's called the 82 00:05:47,610 --> 00:05:54,069 现在填充网格，UI系统会自动调用该网格来创建 populate mesh now this one gets called automatically by the UI system to create 83 00:05:54,269 --> 00:05:58,239 蒙版蒙版图形的网格，此函数的参数类型为 the mesh of our mask ammonal graphic and this function has an argument of type 84 00:05:58,439 --> 00:06:02,709 顶点助手，这是一个很好的驼峰类，可以帮助我们现在处理网格形状 vertex helper so it's a nice humper class to help us handle mesh shapes now 85 00:06:02,908 --> 00:06:05,499 我们要做的第一件事是确保您清除当前 the first thing we do is to make sure that you clear whatever the current 86 00:06:05,699 --> 00:06:08,949 网格的形状是这样，所以您要达到顶点舒适度，我们只称 shape of our mesh is so you're going to the vertex comfort and we just call 87 00:06:09,149 --> 00:06:14,769 清除好了，现在我们可以在这里设置自定义形状，所以 clear okay and now it's in here that we can set up our customized shape so let's 88 00:06:14,968 --> 00:06:22,359 从一个非常简单的正方形开始，好吧，我们必须为所有人找到一个位置 start off with a very simple square all right we have to find a position for all 89 00:06:22,559 --> 00:06:29,598 我们的顶点，然后我们只需访问顶点助手即可添加UI顶点四边形 our vertices and then we just access the vertex helper to add a UI vertex quad 90 00:06:35,110 --> 00:06:39,509 好吧，就像这样，现在要在这里做一件事 all right so just like that now one thing here in order for this to actually 91 00:06:39,709 --> 00:06:44,249 工作，如果您只需要添加空白，我们需要给UI顶点添加颜色 work we need to give the UI vertex a color if you only were to add empty it 92 00:06:44,449 --> 00:06:47,939 只是行不通，我不确定为什么，只给它随机的颜色就行了 just won't work I'm not sure why but just give it a random color and it works 93 00:06:48,139 --> 00:06:52,319 所以这就是全部，我们清除当前的形状，然后添加 so this is really all it takes we clear the current my shape and then we add our 94 00:06:52,519 --> 00:06:57,509 自定义顶点，如果我们以任何方式返回编辑器，我们都会看到 custom vertices and if we go back into the editor any for any way we see our 95 00:06:57,709 --> 00:07:02,399 面具的形状，所以这里只有50×50的基本四边形，很好 mask shape so here there is just basic quad with 50 by 50 all right great 96 00:07:02,598 --> 00:07:07,019 所以我们的对象是创建网格并使其男性化，从而使 so our object is creating the mesh and making it masculine and in order to make 97 00:07:07,218 --> 00:07:11,069 它是一个实际的遮罩，我们只需要添加遮罩组件，就像这样 it an actual mask we just need to add the mask component and just like that 98 00:07:11,269 --> 00:07:15,540 是的，现在可以显示或隐藏蒙版图形了，所以现在 yep there it is and we can either show or hide the mask graphic okay so now 99 00:07:15,740 --> 00:07:19,169 让我们看看这如何帮助我们解决戴口罩的原始问题 let's see how this helps us solve the original problem of having a mask with 100 00:07:19,369 --> 00:07:31,679 此处有多个形状，我们可以使另一个UI顶点四边形好，所以我们 multiple shapes down here we can make another UI vertex quad alright so we 101 00:07:31,879 --> 00:07:35,850 有我们原始的四边形和旁边的一个，如果我们回去，如果有的话 have our original quad and one next to it and if we go back and if there is we 102 00:07:36,050 --> 00:07:40,889 有两个视觉四边形，所以我们有一个蒙版父对象，并使用自定义 have our two visual quads so we have a single mask parent and by using a custom 103 00:07:41,088 --> 00:07:45,389 网格，我们可以掩盖基础对象的多个区域，因此 mesh we can mask out multiple areas of our underlying object so there it is 104 00:07:45,588 --> 00:07:49,949 好了，现在我们需要做的就是扩展这个概念 alright awesome now we need to do is really just extend upon this concept so 105 00:07:50,149 --> 00:07:58,588 在这里，让我们尝试制作我们的口罩，让我们随时间增加尺寸 here let's try and making our mask let's just increase the size over time all 106 00:07:58,788 --> 00:08:02,429 就像这样，我们应该看到一个矩形延伸 right just like that we should see a rectangle stretching however when you go 107 00:08:02,629 --> 00:08:06,359 回到这里实际上是行不通的，所以我们的网格形状实际上不是 back here it doesn't actually work so our mesh shape is not actually 108 00:08:06,559 --> 00:08:10,379 增加是因为我们在这里缺少一件事 increasing that is because we are missing one thing which is in here the 109 00:08:10,579 --> 00:08:14,429 UI系统仅在绝对需要您时才调用此函数 UI system only calls this function when it absolutely needs you meaning that it 110 00:08:14,629 --> 00:08:18,929 不会在每个帧上自动调用它，因此如果我们想这样做，我们可以 does not call it automatically on every frame so if we want to do that we can 111 00:08:19,129 --> 00:08:23,910 进行掠夺性更新，在这里我们告诉它更新顶点，所以我们只是 make our predatory update and in here we tell it to update on vertices so we just 112 00:08:24,110 --> 00:08:28,829 设置顶点为肮脏，它们将不会更新，所以就像现在这样 go set vertices as dirty and they won't update so just like that now this should 113 00:08:29,028 --> 00:08:33,179 更新每帧，如果有的话，现在我们有自定义的混乱形状和 update on every frame and if there it is now we have our custom mess shape and 114 00:08:33,379 --> 00:08:38,128 随着时间的推移交配很棒，所以现在您显然可以使用 mating over time awesome all right so now with this you can obviously use 115 00:08:38,328 --> 00:08:42,838 您想要的任何混搭都不必只是一个简单的矩形，因此 whatever mashup you want it doesn't have to be just a simple rectangle so for 116 00:08:43,038 --> 00:08:45,688 例如，您可以制作一个星形的网格，然后旋转 example you could make a mesh in the shape of a star and just rotate around 117 00:08:45,889 --> 00:08:48,818 或实际上任何您想要动画的东西，以及您以任何方式 or really any you want to animate and in any way you 118 00:08:49,019 --> 00:09:07,899 想要好了，所以这是我为代码monkey Steam制作的最终脚本 want alright so here is the final script that I made for the code monkey steam 119 00:09:08,100 --> 00:09:13,269 应用程序，它具有网格网格UI脚本，然后作为其子级，具有相同的文本 app it has the mesh mesh UI script then as a child of it it has the same text 120 00:09:13,470 --> 00:09:16,808 对象，然后在这里，我有一个装有一堆孩子的容器， object and then over here I have a container with a bunch of children and 121 00:09:17,009 --> 00:09:21,308 他们每个人都有一个简单的脚本，只有两个字段，因此只需要折叠即可 each of them has a simple script just with two fields so just a fold for the 122 00:09:21,509 --> 00:09:24,909 开始时间和总时间中的另一个时间，这是永恒的时间 start time and another one for the total time so that's eternal amount of time 123 00:09:25,110 --> 00:09:28,719 该矩形将达到其最终形状，因此该对象具有 that this rectangle will take to reach its final shape so this object has this 124 00:09:28,919 --> 00:09:32,169 形状，它们每个都覆盖一条线，然后它们必须与您啮合 shape and each of them is covering one line and then they must mesh you why 125 00:09:32,370 --> 00:09:36,068 在这里有一个对面膜容器的引用，它只是将那些 over here has a reference to the mask container and it simply applies those 126 00:09:36,269 --> 00:09:39,998 面具让我们看看那里，突然间，是的，你去了那里 masks let's see there it is and all of a sudden yep there you go there's the 127 00:09:40,198 --> 00:09:43,508 随着时间的推移会创建蒙版的形状，因此与游戏和场景有关 masked shape being created over time so here it is with the game and the scene 128 00:09:43,708 --> 00:09:47,738 并排查看，您确实可以看到网格形状不断增长 view side by side and you can indeed see the mesh shape constantly growing so 129 00:09:47,938 --> 00:09:51,459 这是在任何情况下平滑滚动某些文本的好方法 this is a great way to smoothly scroll over some text in any matter you want as 130 00:09:51,659 --> 00:09:55,448 我说我在研究代码猴子Steam应用程序时研究了这个问题 I said I researched this while working on the code monkey steam app if you 131 00:09:55,649 --> 00:09:58,029 尚未，请检查说明中的链接并将其添加到您的 haven't yet then please check the link in the description and add it to your 132 00:09:58,230 --> 00:10:01,419 愿望清单，我正在尝试构建一些非常酷的东西，希望它应该是 wish list I'm trying to build something really cool and it should hopefully be 133 00:10:01,620 --> 00:10:04,659 下个月的某个时间可以播放此视频，这归功于 out sometime next month this video is made possible thanks to 134 00:10:04,860 --> 00:10:08,919 这些出色的支持者可以访问patreon.com/scishow将Monkey编码为 these awesome supporters go to patreon.com/scishow to code monkey to 135 00:10:09,120 --> 00:10:12,308 得到一些好处，并尽可能使所有人免费观看视频 get some perks and help keep the videos free for everyone as always you can 136 00:10:12,509 --> 00:10:15,998 从unity karma com下载实用程序中的项目文件订阅 download the project files in utilities from unity karma com subscribe the 137 00:10:16,198 --> 00:10:19,209 更多的印地语油条，为罪恶广场7缺点的渠道，我会 channel for more Hindi churros for sin square 7 cons and I'll 138 00:10:19,409 --> 00:10:26,950 下次见 see you next time [Music]