Unity的UI基础第2天之“UGUI”的案例介绍(零基础)

1.Unity中Pivot和Center的区别,以及应用

2.文件添加阴影shadow和轮廓outline

 

一、公告的文本列表滑动案例

1.UI

2、 创建公告的文本列表(滚动条和文本的同步步骤?)注意一个图片透明度的调整

2_1.新建一个Text文本先放上去,把文本的长度,也就是高,调整到文本的底部

2_2.新建一个Image的UI,把Text文本拖拽进去,这个时候Image是白色的背景

2_3.给Image游戏UI,添加组件Scroll Rect,把Text文本拖拽到Content上面,这样就可以对文本进行拖拽效果,然后把水平拖拽去掉,只能进行垂直拖拽,这个时候的文本,是可以看的到整个文本的,没有遮盖

2_4.我们需要添加一个Mask组

2_5.之前不是Image是个白色的背景吗,这个时候,点击Mask组件下面的Show Mask Graphic把对勾去掉,这样白色的背景就没了

2_6.新建一个UI物体Scrollbar,调整它的样式,改为以Boutton To Top,把进度条进行垂直排列

2_7.把UI物体Scrollbar拖拽到Image物体UI上面的组件Scroll Rect上的Vertical Scrollbar,这样就完成了

 

 

二 、 使用Slider进度条控制小球旋转的速度

1.UI的创建

2.代码写入,注意:滚动条跟方块的速度同步起来,是通过代码的动态事件,去执行的

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Rotates : MonoBehaviour
{
    public float speed = 90;
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        transform.Rotate(Vector3.up * Time.deltaTime * speed);
    }

    public void ChangeSpeed(float speedNew)
    {
        this.speed = speedNew;
    }
}

 

三、游戏案例详解

1. 开发开始界面-掌握:给文字添加阴影-按比例进行像素设置比如1280*720、BG背景图锚点按住Alt自适应的设置、shift+ctrl+alt按钮放大是以中心点放大、字体添加阴影

2.开发头像-Image组件的4个模式、用Imgae组件做滑动条步骤?

2_1.先建一个Image,作为背景

2_2.在建一个黑色的小长方形,利用shift+alt和alt,对它进行拉伸

2_3.复制2_2的黑色小长方形,变成蓝色的

2_4.在2_1步骤中的Image物体UI上添加一个叫Slider的组件

2_5,把2_3步骤中的蓝色的小长方形拖拽到这个组件的Fil Rect上面

2_6.在蓝色的小长方形上面,改变Image组件的模式为Filed模式,再调整变大后的蓝色的小长方形

2_7.调整蓝色的小长方形上面的组件的Fil Method为Horizontal水平模式

 

3.开发技能栏-点击触发技能的计时器、字体发光效果的添加、通过定义keycode去自定义点击触发计时器、fillAmount的获取、获取Image组件的方法、Image做个遮罩

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SkillItem : MonoBehaviour
{
    public float coldTime = 2;//冷却时间
    private Image FiledImage;//定义一个类型为Image的组件
    private float timer = 0;//定义一个计时器,从0开始
    private bool isStartTimer = false;//是否进行计时
    public KeyCode keycode;//定义一个Keycod这样就可以在脚本上面去选择

    // Start is called before the first frame update
    void Start()
    {
        FiledImage = transform.Find("FiledImage").GetComponent<Image>();//获取Image组件
       
    }

    // Update is called once per frame
    void Update()
    {
        if (Input.GetKey(keycode)) {
            isStartTimer = true;//是否进行计时
        }
        if (isStartTimer) {
            timer += Time.deltaTime;
            FiledImage.fillAmount = (coldTime - timer) / coldTime;//总的时间-消耗的时间/总的时间 = 剩余比例
            if(timer>= coldTime){//到达冷却时间
                FiledImage.fillAmount = 0;
                timer = 0; 
                isStartTimer = false;//是否进行计时
            }
        }
    }

    public void OnClick() {
        isStartTimer = true;//是否进行计时
    }
}

 4.设计人物属性-利用Toggle控制面板的tab切换并且控制内容的切换

4_1.利用Toggle控制面板的tab切换并且控制内容的切换

给按钮添加事件,把内容1拖拽到事件的上面,再选择GameObject.SetActive

隐藏相应的内容模块,显示默认的就可以了

 4_2.网格自动排序

 4_3. 如果设置Scale的X:-1会90度翻转

5. 关卡选择界面--利用Grid Layout进行排序、Unity中Pivot和Center的区别

5_1.利用Grid Layout进行排序,关于排序的原理是根据长4个200 宽2个150 的个数来定义的,如图:

5_2.Unity中Pivot和Center的区别,以及应用

Pivot指的是轴心,如果选择了场景中的多个物体的话,则坐标是第一个选中的物体的Pivot坐标。
Center指的是中心,是所有物体共同的中心,如果同时选中了多个物体,则坐标是所有模型共同参与计算出来的坐标。

 5_3.用代码写翻页效果和缓动效果(重点)

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;//引用接口
using UnityEngine.UI;

public class LevenbuttonScroll : MonoBehaviour,IBeginDragHandler, IEndDragHandler//需要接口引用,分别是拖拽开始,和拖拽结束
{
    private ScrollRect scrollRet;
    private float targetHorizontalPosition = 0;//添加缓动效果
    private float[] pageArray = new float[] { 0, 0.33333f, 0.66666f, 1 }; //分为4等分 0   0.3333    0.6666    1是4页
    private bool isDraging = false;
    void Start()
    {
        scrollRet = transform.GetComponent<ScrollRect>();
    }

    // Update is called once per frame
    void Update()
    {
        if(!isDraging)
        //这段是否达到目标值,需要添加一个判断,只能是在按住的时候执行1次,
        scrollRet.horizontalNormalizedPosition = Mathf.Lerp(scrollRet.horizontalNormalizedPosition,targetHorizontalPosition,Time.deltaTime*4);//缓动效果添加
    }


    //最终的效果是,如果拖动一点点,就不会翻页,只有拖动多的时候,才会翻页,没有缓动效果
    //注意:有缓动的效果的写法
    public void OnEndDrag(PointerEventData eventData)//拖拽开始
    {
        isDraging = false;
        //滚动列表拖拽到哪个位置
        //Vector2 temp = scrollRet.normalizedPosition; // 返回的是二维向量
        float posX = scrollRet.horizontalNormalizedPosition;//返回的是个浮点数值是0-1的值  
        int index = 0;//默认第一页最近
        float offset = Mathf.Abs(pageArray[index] - posX);//数组的值 - 当前值   //如果当前的数值离数组中的哪个接近

        for (int i = 1; i < pageArray.Length; i++)
        {
            float offsetTemp = Mathf.Abs(pageArray[i] - posX);//数组的值 - 当前值   //如果当前的数值离数组中的哪个接近

            if (offsetTemp < offset)
            {
                index = i;
                offset = offsetTemp;
            }
        }

        //scrollRet.horizontalNormalizedPosition = pageArray[index];

        targetHorizontalPosition = pageArray[index];//添加缓动效果的写法
    }

    public void OnBeginDrag(PointerEventData eventData)//拖拽结束
    {
        isDraging = true;
    }


}

5_4.关于页码与翻页同步的效果(重点)

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;//引用接口
using UnityEngine.UI;

public class LevenbuttonScroll : MonoBehaviour,IBeginDragHandler, IEndDragHandler//需要接口引用,分别是拖拽开始,和拖拽结束
{
    private ScrollRect scrollRet;
    public Toggle[] toggleArray;//当下按钮存储为数组  -- toggle同步的处理
    private float targetHorizontalPosition = 0;//添加缓动效果
    private float[] pageArray = new float[] { 0, 0.33333f, 0.66666f, 1 }; //分为4等分 0   0.3333    0.6666    1是4页
    private bool isDraging = false;
    
    void Start()
    {
        scrollRet = transform.GetComponent<ScrollRect>();
    }

    // Update is called once per frame
    void Update()
    {
        if(!isDraging)
        //这段是否达到目标值,需要添加一个判断,只能是在按住的时候执行1次,
        scrollRet.horizontalNormalizedPosition = Mathf.Lerp(scrollRet.horizontalNormalizedPosition,targetHorizontalPosition,Time.deltaTime*4);//缓动效果添加
    }


    //最终的效果是,如果拖动一点点,就不会翻页,只有拖动多的时候,才会翻页,没有缓动效果
    //注意:有缓动的效果的写法
    //注意:toggle同步的处理
    public void OnEndDrag(PointerEventData eventData)//拖拽开始
    {
        isDraging = false;
        //滚动列表拖拽到哪个位置
        //Vector2 temp = scrollRet.normalizedPosition; // 返回的是二维向量
        float posX = scrollRet.horizontalNormalizedPosition;//返回的是个浮点数值是0-1的值  
        int index = 0;//默认第一页最近
        float offset = Mathf.Abs(pageArray[index] - posX);//数组的值 - 当前值   //如果当前的数值离数组中的哪个接近

        for (int i = 1; i < pageArray.Length; i++)
        {
            float offsetTemp = Mathf.Abs(pageArray[i] - posX);//数组的值 - 当前值   //如果当前的数值离数组中的哪个接近

            if (offsetTemp < offset)
            {
                index = i;
                offset = offsetTemp;
            }
        }
        
        //scrollRet.horizontalNormalizedPosition = pageArray[index];
        targetHorizontalPosition = pageArray[index];//添加缓动效果的写法
        toggleArray[index].isOn = true;//与toggle进行同步
    }

    public void OnBeginDrag(PointerEventData eventData)//拖拽结束
    {
        isDraging = true;
    }

    public void MoveToPage1(bool isOn) {
        if (isOn) {
            targetHorizontalPosition = pageArray[0];
        }
    }
    public void MoveToPage2(bool isOn)
    {
        targetHorizontalPosition = pageArray[1];
    }

    public void MoveToPage3(bool isOn)
    {
        targetHorizontalPosition = pageArray[2];
    }

    public void MoveToPage4(bool isOn)
    {
        targetHorizontalPosition = pageArray[3];
    }

}

6.任务列表、垂直排序VerticalLayout的使用

 

6_1.使用VerticalLayout和ScrollRect控制任务列表的滑动

7. 开发设置界面--代码控制开关(重要)

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Mytoggle : MonoBehaviour
{
    public GameObject OnObject;//开
    public GameObject OffObject;//关

    private Toggle toggle;//组件


    // Start is called before the first frame update
    void Start()
    {
        toggle = GetComponent<Toggle>();
        OnOffChange(toggle.isOn);//调用,初始false
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void OnOffChange(bool isOn) {
        Debug.Log(isOn);
        OnObject.SetActive(isOn);//false
        OffObject.SetActive(!isOn);//true
    }
}

 8.游戏登录界面

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值