图0
好啦，闲话不多说，让我们开始吧~
图1
这里还是要点名道姓的肯定一下泡菜童鞋，图1中的这部分预设是我刚接手时，搭的，结构如下：
●UI_Shop：整个商店的父物体
●shop_bg:商店的棕色底板背景
●shop_title_bg:横幅商店两个字，包括横幅本身
●shop_head：希娜商店妹子头像
●shop_refresh_Button：刷新按钮
●backbt：返回按钮
●shop_product_bg_00：商品编号00
●shop_product_bg_01：同上
●shop_product_bg_02：同上
●shop_product_bg_03：同上
●shop_product_bg_04：同上
●shop_product_bg_05：同上
没错，不信，我们就来分析商店里的商品需要哪些美术素材。
商品美术素材包括：
品质外框（如 
、 
）
品种图标（如 
、 
、 
、 
）【 
工作量略大】
分类小图标（如 
、 
）
cost图标（如 
、 
）
光搜集这些素材费了哥们儿九牛二虎之力啊，纯爷们儿~这还只是第一步，
接下来，在素材够用的情况下，我们开始搭建预设。
呀，如果Declan老湿没有猜错的话，肯定有细心的小蛮牛会发现：
物品的icon基本是长这样子的————> 
，是四边的。
而诸如“碎片”或者“灵魂石”的品质外框是类似酱紫————> 
，一对角被裁剪的。
“两张图重叠的话，超出外框的部分，该怎么办？”如 
“如果只是缩小物品icon的scale，即使强行不超出外框，但是整个UI看上去会镂空的，怎么办？”如
如果电视机前的观众朋友们...呃，不对...是显示屏前的新手读者们也遇到的类似的问题的话，别担心也无需害怕，那只是因为我们新手由于涉世未深且经验不足，缺少遮罩Mask的概念。
图2
那么，所谓遮罩，在unity里如何实现呢？
图3
如图所示你需要创建一个材质球，并将之着色器选择为我们写的Shader脚本，然后将英雄图标拖到Base项，带Alpha通道的fragment遮罩图标拖到Culling Mask上就可以了。代码如下：
- Shader "Custom/DepthMaskShader" {
- Properties
- {
- _MainTex ("Base (RGB)", 2D) = "white" {}
- _Mask ("Culling Mask", 2D) = "white" {}
- _Cutoff ("Alpha cutoff", Range (0,1)) = 0.1
- }
- SubShader
- {
- Tags {"Queue"="Transparent"}
- Lighting Off
- ZWrite Off
- Blend SrcAlpha OneMinusSrcAlpha
- AlphaTest GEqual [_Cutoff]
- Pass
- {
- SetTexture [_Mask] {combine texture}
- SetTexture [_MainTex] {combine texture, previous}
- }
- }
- }
复制代码
显示效果如4所示
Ok，Shader也并非本篇文章的重点，简单的讲解之后，我们开始言归正传。文章出处【狗刨学习网】
其实Unity新的UI系统——UGUI已经给我们做好了类似的组件，如图5
图5
用法：直接把这组件添加到你需要实现遮罩的带Alpha通道的icon就可以了。
那么，在知晓了遮罩的概念，以及Mask组件的用法之后，我们再来看单个商品预设的层级关系结构就更加思路清晰明了了。如图6
图6
如上图所示，预设层级结构关系为：
●shop_product_bg:是单个商品预设，父物体。
●Goods:是具体物品预设的父物体
●full:是如上图短棍、经验药水之类的完整物品
● chip：是如长笛卷轴碎片之类的碎片或者灵魂石的非完整物品
● chip_mask：除了image组件外还加入了Mask组件
●cardIcon：是具体的物品icon
●kind：是如碎片（黄色）或者灵魂石（紫色）的icon
●count：是本物品的具体数量
●Title：为商品名
●Cost：为购买该商品所花费的具体数值
●Image：为Cost种类（如金币、晶钻等等）
●SoldOutImage：为购买完毕后会显示的售罄icon