UGUI

拼搏现实的明天。 2022-04-04 03:17 261阅读 0赞

**图集制作Atlas**  
精灵图集 ![在这里插入图片描述][2018121415241297.png]\-> ![在这里插入图片描述][20181214152423715.png]  
制作图集：

1.  ![在这里插入图片描述][20181214152431652.png]
2.  ![在这里插入图片描述][20181214152437979.png]
3.  选择需要的图片
4.  点击Create即可形成图集

**按钮制作**

1.  创建Sprite，选择Sprite，鼠标右键选择Attach，添加BoxCollider![在这里插入图片描述][20181214152536483.png]
2.  选择Sprite，鼠标右键选择Attach，添加ButtoneScript![在这里插入图片描述][20181214152550521.png]  
    注意：如果是通过在unity中AddComponent，将BoxCollider勾选 (自动适应UI大小)![在这里插入图片描述][20181214152606399.png]  
    is trigger勾选![在这里插入图片描述][20181214152654750.png]  
    **实现按钮点击事件**  
    找到按钮![在这里插入图片描述][20181214152733905.png]\-> 把带有脚本的物体放到 ![在这里插入图片描述][20181214152741124.png]  
    \->在Method找到要调用的方法![在这里插入图片描述][20181214152747564.png]。

**精灵Type**  
sliced 可以使图片在缩放时中间部分拉伸,边框保持不变.  
Tiled 平铺,图片若太小会自动放置多个.  
Filled 填充,逐渐出来例如血条效果,技能冷却效果.  
Advance 高级 可在图片9宫格设置不同效果

**NGUI中文字体**：  
NGUI字体:须先制作预制件　  
步骤:　创建空物体  添加NGUI font组件 --> dynamic --> 拖拽字体 --> 制作预制件  
unity字体:直接拖拽到Font组件处即可

**2D精灵动画**

1.  创建2D精灵unity 2D sprite
2.  添加 UI2D Sprite Animation组件
3.  将图片设置为精灵模式，并且为可切割的![在这里插入图片描述][20181214153005703.png]
4.  ![在这里插入图片描述][20181214153012627.png]到 ->![在这里插入图片描述][20181214153019871.png] ,将图片切割好，Apply。
5.  最后到 ![在这里插入图片描述][20181214153027153.png]将精灵依次给到相应位置即可。可通过![在这里插入图片描述][20181214153034275.png] 调节速度。

**开关制作**

1.  创建精灵->Attach BoxCollider-> ![在这里插入图片描述][20181214153112928.png]
2.  ![在这里插入图片描述][20181214153122541.png]在子集中创建精灵（选择点击开关时显示的图片）
3.  将子集精灵拖到父级相应位置，  
    ![在这里插入图片描述][20181214153132823.png]
4.  StartState是指开关的初始状态。

**滑竿制作**

1.  创建Sprite，给深度值较高的精灵，添加BoxCollider，再添加 ![在这里插入图片描述][20181214153203979.png]。
2.  创建Sprite作为子集  
    ![在这里插入图片描述][20181214153221144.png]  
    Foreground前景图（此处当鼠标拖拽滑竿时，会有伸缩效果）  
    Background背景图(固定不动)  
    Thum(此处创建一个精灵拖到此处，可形成游标效果显示  
    )
3.  Direction滑竿方向

**滑竿数值百分比显示**

1.  找到滑动条组件![在这里插入图片描述][20181214153347614.png]， ，将创建的UILable拖拽到 ![在这里插入图片描述][20181214153355445.png]
2.  调用UILable.SetCurrentPercent方法

**下拉菜单制作**

1.  在背景精灵中添加BoxCollider ,以及 组件![在这里插入图片描述][20181214153604298.png]
2.  ![在这里插入图片描述][20181214153616358.png]将需要的下拉菜单选项输入Options中
3.  将Lable拖拽到![在这里插入图片描述][20181214153629936.png] ，（作用：弹出菜单选择的内容将显示在Lable中）。
4.  ![在这里插入图片描述][20181214153644634.png]默认按钮Labe内容。  
    ![在这里插入图片描述][20181214153654673.png]设置菜单按钮自动，向上，向下弹出。

**UIPlayerTween组件使用**

1.  创建一个精灵，给精灵添加碰撞，并添加PlayTweenScript组件。
2.  录制一组Tween动画，录制好后，将Tween动画组件隐藏（之后会通过点击精灵控制这组动画的播放）。
3.  将需要控制Tween动画的UI放到PlayTweenScript组件的![在这里插入图片描述][20181214154348216.png] 位置
4.  PlayTweenScript组件中 ![在这里插入图片描述][20181214154402711.png]为触发动画的方式，设置成 ![在这里插入图片描述][20181214154411150.png]为点击触发。
5.  ![在这里插入图片描述][20181214154435940.png]动画播放的方向：![在这里插入图片描述][20181214154440736.png] 来回方向播放，![在这里插入图片描述][20181214154449627.png] 正常方向播放， ![在这里插入图片描述][20181214154454492.png]相反方向播放。

**聊天**

1.  创建输入区域以及显示区域 ![在这里插入图片描述][20181214154516376.png]
2.  给输入区域添加ChatInput组件 ![在这里插入图片描述][20181214154521964.png]
3.  给聊天显示区域添加UITextList组件 ![在这里插入图片描述][2018121415453945.png]
4.  若需要滑动条，可放到ScrollBar位置。

**定制滑动区域**

1.  创建背景精灵。
2.  创建 ![在这里插入图片描述][20181214154551395.png]（可滑动区域）作为背景精灵子集（利于管理）。
3.  创建物品精灵，作为滑动区域的子集。
4.  给物品精灵添加BoxCollider以及可在滑动区域滑动组件![在这里插入图片描述][20181214154624985.png]

若也需要拖拽滑动区域背景时有滑动效果，也可给背景添加碰撞以及滑动区域拖拽滑动组件

**滑竿控制滑动效果**

1.  将滑竿拖到场景中 ![在这里插入图片描述][20181214154652758.png]
2.  将垂直/水平滑竿放到 ![在这里插入图片描述][20181214154702719.png]组件中相应的属性中 ![在这里插入图片描述][20181214154714146.png]（若只需要水平/垂直，只拖拽一种即可）
3.  若既想实现水平，也想垂直拖拽，不要忘记设置 ![在这里插入图片描述][20181214154730393.png]任意方向滑动。Custom 是自定义滑动方向及偏移量。

**精灵拖拽效果**

1.  给物品精灵添加BoxCollider,添加拖拽组件 ![在这里插入图片描述][20181214154847967.png]
2.  若需要拖拽的精灵在所有UI最前方显示，创建深度值较高的panel并添加![在这里插入图片描述][20181214154854176.png]

**拖拽的物品栏排序**

1.  创建Grid（并注意形成父子关系）,然后右键execute![在这里插入图片描述][20181214154931580.png] 。
2.  设置Grid为平行布置还是垂直布置 ![在这里插入图片描述][20181214154936866.png]  
    3.![在这里插入图片描述][2018121415494698.png] 设置物品栏之间间隔。
3.  ![在这里插入图片描述][20181214154953260.png]如何排序。
4.  ![在这里插入图片描述][20181214155009749.png]对齐方式。
5.  ![\*\*][20181214155017566.png]是否有平滑动画

**留在某个精灵背景上**  
将背景精灵添加拖拽容器组件 ![在这里插入图片描述][20181214155058245.png]。

**将停留的物品进行排序**

1.  创建Grid,并拖到容器组件的![在这里插入图片描述][20181214155113684.png] 位置。
2.  设置Grid位置以及间隔距离。

滑动条和开关

using UnityEngine;
    using System.Collections;
    
    public class UIManager : MonoBehaviour {
        public UISprite backSprite;//背景精灵
        public AudioSource audio;
    
        /// <summary>
        /// 滑动条
        /// </summary>
        public void SliderFunc()
        {
            audio.volume = UISlider.current.value;//控制音量大小
            print("滑动条数值 ： " + UISlider.current.value);
        }
        /// <summary>
        /// 开关
        /// </summary>
        public void ToggleFunc()
        {
            audio.mute = !UIToggle.current.value;//控制背景音效静音/正常播放切换
            print("开关效果 ： " + UIToggle.current.value);
        }
    	public void Red () {
            backSprite.color = Color.red;
    	}
    	public void Blue () {
            backSprite.color = Color.blue;
    	}
    }

**背包拖拽排序**

using UnityEngine;
    using System.Collections;
    
    public class MyDrag : UIDragDropItem 
    {
        //拖拽结束时
        //surface拖拽结束时碰到的精灵
        protected override void OnDragDropRelease(GameObject surface)
        {
            base.OnDragDropRelease(surface);
            Transform releaseParent = transform.parent;
            if (surface != null)
            {
                if (surface.tag == "Back"){
                    transform.parent = surface.transform;
                    transform.localPosition = Vector3.zero;
                }
                else if (surface.tag == "Obj"){
                    Transform surfaceParent = surface.transform.parent;
                    transform.parent = surfaceParent;
                    transform.localPosition = Vector3.zero;
    
                    surface.transform.parent = releaseParent;
                    surface.transform.localPosition = Vector3.zero;
                }
            }
            else
                transform.localPosition = Vector3.zero;
        }
    
    }

[2018121415241297.png]: https://img-blog.csdnimg.cn/2018121415241297.png
[20181214152423715.png]: /images/20220404/3a80985a12e248f48822745916b0fc60.png
[20181214152431652.png]: /images/20220404/e856d478f0c04c70809c96eb8477cea8.png
[20181214152437979.png]: /images/20220404/24856a66f09a4fd8983bd37d671c34e2.png
[20181214152536483.png]: /images/20220404/c68ccf5e5774401da534f5a4cc0e7454.png
[20181214152550521.png]: /images/20220404/5ca5e9b6a8114c0dada66a3804363cf1.png
[20181214152606399.png]: /images/20220404/6a6800b2a17d4283bc8d7ebd9a0048d6.png
[20181214152654750.png]: /images/20220404/951977dd8dbb4a3b8b3b2275dc01569a.png
[20181214152733905.png]: https://img-blog.csdnimg.cn/20181214152733905.png
[20181214152741124.png]: /images/20220404/9ea49cde18fe42b1859b5d73da009927.png
[20181214152747564.png]: /images/20220404/15fca1428d484015ae44c61b91eb1b77.png
[20181214153005703.png]: /images/20220404/590eed752b0e4592a9d567e733b17679.png
[20181214153012627.png]: https://img-blog.csdnimg.cn/20181214153012627.png
[20181214153019871.png]: /images/20220404/282bfefb67dd4f5bba25ba36f5126fb9.png
[20181214153027153.png]: https://img-blog.csdnimg.cn/20181214153027153.png
[20181214153034275.png]: /images/20220404/3f3af0143871482f8ae42e98c41575e0.png
[20181214153112928.png]: /images/20220404/26d9ee8c4cfe4a4e8d589b28b55c2e38.png
[20181214153122541.png]: /images/20220404/f0273c3bdfbd40cb9abed1d732048f79.png
[20181214153132823.png]: /images/20220404/b70444ae8d614c60bcb8ac56ab491e2f.png
[20181214153203979.png]: /images/20220404/56fc566a941f4a92aabfebe20fcc7732.png
[20181214153221144.png]: /images/20220404/2c2e2826bd514407b69b82eff04fef51.png
[20181214153347614.png]: https://img-blog.csdnimg.cn/20181214153347614.png
[20181214153355445.png]: /images/20220404/65542a9599564080b2e1ffcfa93d9277.png
[20181214153604298.png]: /images/20220404/1f3a1477c2b542f2b17ba313d9cfbf8d.png
[20181214153616358.png]: /images/20220404/c0283ea86aff41a19aec7fc6e31b8711.png
[20181214153629936.png]: /images/20220404/45568212570d4b2b99a8e2822fa27c83.png
[20181214153644634.png]: /images/20220404/01f4a03acc2b408598052a9ae7781400.png
[20181214153654673.png]: /images/20220404/f48b74155801412a89f6609e19e2b300.png
[20181214154348216.png]: /images/20220404/5b52ed78c25a4856b1b11e04480175d7.png
[20181214154402711.png]: https://img-blog.csdnimg.cn/20181214154402711.png
[20181214154411150.png]: /images/20220404/a961f3b6ec244277b0a976741de3cd7a.png
[20181214154435940.png]: https://img-blog.csdnimg.cn/20181214154435940.png
[20181214154440736.png]: https://img-blog.csdnimg.cn/20181214154440736.png
[20181214154449627.png]: https://img-blog.csdnimg.cn/20181214154449627.png
[20181214154454492.png]: /images/20220404/f8ab05b682a34a34acee7933c075ba74.png
[20181214154516376.png]: /images/20220404/fb27b37be39f43fa8238a09c14e9c215.png
[20181214154521964.png]: /images/20220404/fcb28c42514a428bac495b050c0c9b07.png
[2018121415453945.png]: /images/20220404/3ac82500697d4cfeb8f2968eb0b6387b.png
[20181214154551395.png]: /images/20220404/4ddda01230124fcb93f4147b3d39d663.png
[20181214154624985.png]: /images/20220404/1c69accd1c114961848766fb9dabd276.png
[20181214154652758.png]: /images/20220404/f94b7adf8cfb47b794cb517ebe9b85c2.png
[20181214154702719.png]: https://img-blog.csdnimg.cn/20181214154702719.png
[20181214154714146.png]: /images/20220404/fdd490f44d304d5eaab60257f529efd4.png
[20181214154730393.png]: /images/20220404/87229640b4cf46bcb1b5f2558dbdcf06.png
[20181214154847967.png]: /images/20220404/aae01538a33746d0a108c208ac0a298c.png
[20181214154854176.png]: /images/20220404/71cd9d33620b40c498900d2717128608.png
[20181214154931580.png]: /images/20220404/61346afdd41d433c9787d6625d709b32.png
[20181214154936866.png]: /images/20220404/cbe002efb3fb432e8ef79edb81852387.png
[2018121415494698.png]: /images/20220404/dfeaf8e5b6bf4b0e9d66d9faf55451db.png
[20181214154953260.png]: /images/20220404/78368afbfef845dc8b960a836ebc3eb0.png
[20181214155009749.png]: /images/20220404/e4588740821f429d8f50b28324847f7a.png
[20181214155017566.png]: /images/20220404/5f75d7ba273146ee910e6126e550e44f.png
[20181214155058245.png]: /images/20220404/9c09da49f6514fdebed9088206f4df0b.png
[20181214155113684.png]: /images/20220404/014ee416b6f54d8ebc7dcbdc2730c89b.png