UGUI（二）【唐老狮】组合组件，图集制作

组合控件

• Button
  • 参数
    • 是否接受输入
    • 状态变化
      • 颜色，动画，图片
    • 导航模式
    • OnClick事件

          #region 知识点三 代码控制
          Button btn = this.GetComponent<Button>();
          btn.interactable = true;
          btn.transition = Selectable.Transition.None;
  
          Image img = this.GetComponent<Image>();
  
          #endregion
  
          #region 知识点四 监听点击事件的两种方式
          //点击事件 是 在按钮区域抬起按下一次 就算一次点击
  
          //1.拖脚本
  
          //2.代码添加
          btn.onClick.AddListener(ClickBtn2);
          btn.onClick.AddListener(() => {
              print("123123123");
          });
  
          btn.onClick.RemoveListener(ClickBtn2);
          btn.onClick.RemoveAllListeners();
          #endregion
  

  • Button练习
    • 功能需求
      • 点击按钮，对象发射子弹
    • 实现思路
      • 创建对象，子弹预制体
      • 对象脚本：创建子弹
      • 子弹脚本：前进，固定时间销毁
      • 设置Canvas：渲染模式，参考分辨率，横竖屏match
      • 面板脚本，获取按钮，注册监听事件，调用对象脚本中的方法
• Toggle
  • 参数
    • 可交互，导航模式，过渡效果，过度方式
    • isOn开关状态
    • 选中状态图片Graphic
    • 单选框分组
      • 关联Toggle Group组件
    • OnValueChanged事件
  • 脚本编写

  #region 知识点三 代码控制
      Toggle tog = this.GetComponent<Toggle>();
      tog.isOn = true;
      print(tog.isOn);
  
      ToggleGroup togGroup = this.GetComponent<ToggleGroup>();
      togGroup.allowSwitchOff = false;
  
      //可以遍历提供的迭代器 得到当前处于选中状态的 Toggle
      foreach (Toggle item in togGroup.ActiveToggles())
      {
          print(item.name + " " + item.isOn);
      }
      #endregion
  
      #region 知识点四 监听事件的两种方式
      //1.拖脚本，注意选择动态函数
      //2.代码添加
      tog.onValueChanged.AddListener(ChangeValue2);
      tog.onValueChanged.AddListener((b) =>
      {
          print("代码监听 状态改变" + b);
      });
      #endregion
  }
  
  public void ChangValue(bool isOn)
  {
      print("状态改变" + isOn);
  }    
  
  private void ChangeValue2(bool v)
  {
      print("代码监听 状态改变" + v);
  }
  

  • Toggle开关控件练习题
    • 需求
      • 发射子弹有音效，通过Toggle控制音效开关
    • 实现
      • 音效资源
      • 静态变量：音效开关状态
      • 玩家脚本：根据音效开关状态，判断射击时音效播放
      • 面板脚本：根据Toggle组中toggle激活值，设置音效开关状态
• Input
  • 参数
    • TextComponent关联显示输入的文本组件
    • Text起始默认值
    • 输入长度限制
    • 类型限制：密码，字母数字...
    • 行类型：换行
    • 监听事件
      • 值改变
      • 输入结束(回车键触发)
  • 脚本编写

  #region 知识点三 代码控制
      InputField input = this.GetComponent<InputField>();
      print(input.text);
      input.text = "123123123123";
      #endregion
  
      #region 知识点四 监听事件的两种方式
      //1.拖脚本
      //2.代码添加
      input.onValueChanged.AddListener((str) =>
      {
          print("代码监听 改变" + str);
      });
  
      input.onEndEdit.AddListener((str) =>
      {
          print("代码监听 结束输入" + str);
      });
      #endregion
  }
  
  public void ChangeInput(string str)
  {
      print("改变的输入内容" + str);
  }
  
  public void EndInput(string str)
  {
      print("结束输入时内容" + str);
  }
  

  • 练习题
    • 需求
      • 左上角显示姓名，右侧改名按钮，弹出改名窗口，输入点击确认改名，窗口关闭
    • 实现
      • 改名面板：输入框，确认按钮
      • 主面板：显示文本，改名按钮
      • 主面板脚本监听改名按钮点击事件：弹出改名面板
      • 改名面板脚本监听确认按钮，获取输入框值，修改主面板显示文本
      • 面板脚本对象设为静态方便互相交流调用
• Slider
  • 参数
    • 进度条图形，滑动块图形，滑动方向
    • 最大小值，value当前值
    • whole numbers整型约束
    • OnvalueChanged事件监听
  • 脚本

  #region 知识点三 代码控制
      Slider s = this.GetComponent<Slider>();
      print(s.value);
  
      #endregion
  
      #region 知识点四 监听事件的两种方式
      //1.拖脚本
      //2.代码添加
      s.onValueChanged.AddListener((v) =>
      {
          print("代码添加的监听" + v);
      });
      #endregion
  }
  
  public void ChangeValue(float v)
  {
      print(v);
  }
  

  • 练习题
    • 需求
      • 当前场景添加一个滑动条，控制音效的音量大小
    • 实现
      • 主面板添加滑动条
      • 主面板脚本添加滑动条监听事件，改变音效大小
      • 使用静态Volume变量作为依据
• Scrollball滚动条
  • 参数
    • value值
    • size滚动块比例大小
    • number of steps滚动次数
    • OnValueChanged值改变监听事件
  • 脚本

  #region 知识点三 代码控制
      Scrollbar sb = this.GetComponent<Scrollbar>();
      print(sb.value);
      print(sb.size);
      #endregion
  
      #region 知识点四 监听事件的两种方式
      //1.拖脚本
      //2.代码添加
      sb.onValueChanged.AddListener((v) => {
          print("代码监听的函数" + v);
      });
      #endregion
  }
  
  public void ChangeValue(float v)
  {
      print(v);
  }
  

• ScrollView->ScrollRect
  • 参数
    • Content显示内容的父物体
    • 水平垂直滚动锁定
    • 回弹效果movement type
    • Inertia移动惯性效果
      • 减速率
    • 滚动灵敏度
    • 视口对象view port显示内容的窗口
    • 水平，垂直滚动块对象
    • spacing滚动块与视口间距
    • 值改变监听事件
  • 脚本

  #region 知识点三 代码控制
      ScrollRect sr = this.GetComponent<ScrollRect>();
      //改变内容的大小 具体可以拖动多少 都是根据它的尺寸来的
      //sr.content.sizeDelta = new Vector2(200, 200);
  
      sr.normalizedPosition = new Vector2(0, 0.5f);
      #endregion
  
      #region 知识点四 监听事件的两种方式
      //1.拖脚本
      //2.代码添加
  
      sr.onValueChanged.AddListener((vec) =>
      {
          print(vec);
      });
      #endregion
  }
  
  public void ChangeValue(Vector2 v)
  {
      print(v);
  }
  

  • 练习
    • 需求
      • 点击背包按钮，打开背包面板
      • 使用滚动视图显示背包里道具
    • 实现
      • 新建背包按钮
      • 新建背包面板，新建滚动视图
      • 滚动视图内动态显示道具，准备道具预制体
      • 滚动式图脚本：
        • 算位置，新建道具项显示出来
        • 设置content大小
• Dropdown下拉列表
  • 参数
    • Template关联下拉列表
    • 选中选项，列表中选项，文本or图片
    • value所选索引值
    • 淡入淡出速度
    • options现有选项列表
  • 脚本

  #region 知识点三 代码控制
      Dropdown dd = this.GetComponent<Dropdown>();
  
      print(dd.value);
  
      print(dd.options[dd.value].text);
  
      dd.options.Add(new Dropdown.OptionData("123123123"));
      #endregion
  
      #region 知识点四 监听事件的两种方式
      //1.拖脚本
      //2.代码添加
      dd.onValueChanged.AddListener((index) => {
  
          print(index);
      });
      #endregion
  }
  
  // Update is called once per frame
  void Update()
  {
      
  }
  
  public void ChangeValue(int value)
  {
      print(value);
  }
  

  • 练习
    • 需求
      • 使用下拉列表实现场景白天黑夜切换
    • 实现
      • 新建下拉列表
      • dd脚本：值改变，控制Light

图集制作

• 基本概念

#region 知识点一 为什么要打图集
        //UGUI和NGUI使用上最大的不同是 NGUI使用前就要打图集
        //UGUI可以再之后再打图集

        //打图集的目的就是减少DrawCall 提高性能
        //具体DrawCall是什么在NGUI课程中已经详细讲解
        //该节课是免费课 即使没有购买 也可以前往观看

        //简单回顾DrawCall
        //DC就是CPU通知GPU进行一次渲染的命令
        //如果DC次数较多会导致游戏卡顿
        //我们可以通过打图集，将小图合并成大图，将本应n次的DC变成1次DC来提高性能
        #endregion

        #region 知识点二 在Unity中打开自带的打图集功能
        //在工程设置面板中打开功能
        //Edit——>Project Setting——>Editor
        //Sprite Packer(精灵包装器，可以通过Unity自带图集工具生成图集)
        //Disabled：默认设置，不会打包图集

        //Enabled For Builds（Legacy Sprite Packer）：Unity仅在构建时打包图集，在编辑模式下不会打包图集
        //Always Enabled（Legacy Sprite Packer）：Unity在构建时打包图集，在编辑模式下运行前会打包图集

        //Legacy Sprite Packer传统打包模式 相对下面两种模式来说 多了一个设置图片之间的间隔距离
        //Padding Power:选择打包算法在计算打包的精灵之间以及精灵与生成的图集边缘之间的间隔距离
        //              这里的数字 代表2的n次方

        //Enabled For Build：Unity进在构建时打包图集，在编辑器模式下不会打包
        //Always Enabled：Unity在构建时打包图集，在编辑模式下运行前会打包图集
        #endregion

        #region 知识点三 打图集参数注意

        #endregion

        #region 知识点四 代码加载
        //加载图集 注意：需要引用命名空间
        SpriteAtlas sa = Resources.Load<SpriteAtlas>("MyAlas");
        //从图集中加载指定名字的小图
        sa.GetSprite("bk");
        #endregion

• 2020版本创建图集
  • project setting打开图集选项
  • package manager导入2d sprite包
  • create->2d->sprite atals
• 打图集效果
  • 降低drawcall
  • 若同一图集元素在渲染时有其他元素遮挡，也会导致分开drwacall