Unity3D实现导航效果

介绍:

unity界面开发,会用到很多导航的按钮,他们是公共的,单击其中一个按钮,显示对应的界面。

unity中,UGUI自带Toggle组件,NGUI也有Toggle复选框,都方便了开发者的开发。但是只有合适自己才是王道。

今天,就用普通的按钮组建,来编写自己的导航。

导航的组成:

  • 总控制
  • 按钮组
  • 面板组

步骤:

编写脚本:<NavigationButton>  控制按钮的高亮,动画等。
编写脚本:<NavigationPanel>   控制面板的显示和关闭。
编写脚本:<NavigationGroup>  控制整个导航按钮的逻辑。
编写脚本:  <MainManager>     控制导航栏的逻辑。

NavigationButton:

控制每一个Button的高亮,动画,挂载到每一个NavigationButton上。

public class NavigationButton: MonoBehaviour {

 Awake(){ }

 //按钮被选中时
 public void Select()
 {
  //transform.DOScale(new Vector3(1.75f, 1.75f, 0), 0.3f).SetId(transform.name);
 }
 //按钮未被选中时
 public void UnSelect()
 {
  //DOTween.Kill(transform.name);
  //transform.DOScale(new Vector3(1.0f, 1.0f, 0), 0.3f).SetId(transform.name);
 }
}

NavigationPanel:

控制面板的显示和隐藏,挂载到每一个NavigationPane上。

public class NavigationPanel : MonoBehaviour {
 //显示
 public void Show() {
  transform.gameObject.SetActive(true);
 }
 //隐藏
 public void Hide() {
  transform.gameObject.SetActive(false);
 }
}

NavigationGroup:

具体逻辑,挂载到NavigationGroup上,拖入button和panel。

public class NavigationGroup: MonoBehaviour {

 public NavigationButton[] navBtns; //按钮组
 public NavigationPanel[] navPans;  //面板组

 public int index; //索引
 public int length; //长度

 private void Awake()
 {
  index = -1;
  length = navBtns.Length;

  for (int i = 0; i < length; i++) {
   navBtns[i].UnSelect();
   navPans[i].Hide();
  }
 }

 //通过索引来显示被选中后状态和对应panel
 private void OnSelectByIndex() {
  for (int i = 0; i < length; i++)
  {
   if (i == index)
   {
    navBtns[i].Select();
    navPans[i].Show();
   }
   else
   {
    navBtns[i].UnSelect();
    navPans[i].Hide();
   }
  }
 }

 //点击按钮事件
 public void OnClickNavBtn(int value)
 {
  if (index != value) {
   index = value;
   OnSelectByIndex();
  }
 }

 //初始被选中的按钮
 public void BeginShow(int values = -1) {
  index = values;
  OnSelectByIndex();
 }

 //**********************************************
 //附加:滑动屏幕切换页面
 //**********************************************

 private Vector2 beginPos=new Vector2(0,0);
 private Vector2 endPos=new Vector2(0,0);
 private float maxDistance=100;

 private void Update()
 {
  //获取鼠标滑动起始坐标和终点坐标
  if (Input.GetMouseButtonDown(0)) {
   beginPos =new Vector2(Input.mousePosition.x, Input.mousePosition.y);
  }
  if (Input.GetMouseButtonUp(0))
  {
   endPos = new Vector2(Input.mousePosition.x, Input.mousePosition.y);
   SlipDirection();
  }
 }
 //判断滑的方向
 public void SlipDirection() {
  if (Mathf.Abs(beginPos.y - endPos.y) < (Mathf.Abs(beginPos.x - endPos.x))) {
   if (Mathf.Abs(beginPos.x - endPos.x) > maxDistance) {
    if (beginPos.x > endPos.x)
    {
     Next();
    }
    else {
     Prev();
    }
   }
  }
 }
 //向前滑动屏幕
 public void Prev()
 {
  if (index > 0)
  {
   index--;
   OnSelectByIndex();
  }
 }
 //向后滑动屏幕
 public void Next()
 {
  if(index<length-1)
  {
   index++;
   OnSelectByIndex();
  }
 }

}

MainManager:

总控制。

public class MainManager: MonoBehaviour {

 public NavigationGroup navGroup;

 Start()
 {
  Begin();
 }
 //调用初始方法
 public void Begin()
 {
  navGroup.BeginShow(0);
 }

 //**************************************
 //长时间没交互,返回待机界面
 //**************************************

 public void ReturnStandBy() {
  navGroup.BeginShow(0);
 }

 private void Update()
 {
  if (Input.GetMouseButtonDown(0)) {
   Invoke("ReturnStandBy", 60.0f);
  }
 }
}

以上,基本导航完成。

可以添加导航界面出现和关闭时的动画,在Navigation里添加两个函数: NavShow() ,NavHide()

show的时候记得调用BeginShow(); 在外面调用 show 和 hide 即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Unity制作小地图和方向导航

    一.unity方向导航制作 设计要求是方向导航随着鼠标旋转转换方向,效果图如下: 具体的实现方法主要有两个步骤,分别为UI设计和脚本编写.我的设计思路是这个控件分为两层,第一层为东西南北指示层,第二层为图标指示层,这里我的图标采用圆形图标,方向指示这里采用控制图标旋转的方式实现,层级关系如下: 首先创建父节点1,然后在父节点下创建子节点2,3:最后调整好位置. 第二步脚本编写,脚本如下: using UnityEngine; using System.Collections; using Uni

  • Unity3D实现导航效果

    介绍: unity界面开发,会用到很多导航的按钮,他们是公共的,单击其中一个按钮,显示对应的界面. unity中,UGUI自带Toggle组件,NGUI也有Toggle复选框,都方便了开发者的开发.但是只有合适自己才是王道. 今天,就用普通的按钮组建,来编写自己的导航. 导航的组成: 总控制 按钮组 面板组 步骤: 编写脚本:<NavigationButton>  控制按钮的高亮,动画等. 编写脚本:<NavigationPanel>   控制面板的显示和关闭. 编写脚本:<

  • jQuery实现带滚动线条导航效果的方法

    本文实例讲述了jQuery实现带滚动线条导航效果的方法.分享给大家供大家参考.具体分析如下: 最早见到这种导航是在魅族的官网,当时(去年)觉得挺不错的但自己不会JavaScript,因此那时"可望而不可及".今日去手机QQ for Android官网,又发现类似这样的导航,反正自己也没啥事,所以就尝试用jQuery做出这样的效果. 效果如下: 首页 说说 日志 相册     CSS: body,ul,li{margin:0;padding:0;} #testnav{;height:80

  • jQuery实现带滚动导航效果的全屏滚动相册实例

    本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: $(function() { //加载时的图片 var $loader= $('#st_loading'); //获取的ul元素 var $list= $('#st_nav'); //当前显示的图片 var $currImage = $('#st_main').children('img:first'); //加载当前的图片 //同时显示导航的项 $('<img>')

  • jQuery实现背景弹性滚动的导航效果

    本文实例讲述了jQuery实现背景弹性滚动的导航效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • jquery实现的横向二级导航效果代码

    本文实例讲述了jquery实现的横向二级导航效果代码.分享给大家供大家参考.具体如下: 这是一款灰色和黑色共同搭配做出的水平横向网站菜单,网页横向菜单代码,包括二级子菜单,使用了几张图片,用的朋友自己顺路径另存为吧.本菜单兼容性不错,而且设计清新.漂亮.简约,鼠标移动到主菜单上,即可下滑出二级子菜单项. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-black-bg-nav-menu-style-codes/ 具体代码如下:

  • jQuery实战之仿淘宝商城左侧导航效果

    希望对大家有用. 下面是效果图: 效果实现基于jq的 .html()方法.大大简化了对DOM的操作. 下面是代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type"

  • jQuery动态添加.active 实现导航效果代码思路详解

     代码思路: 页面4: 页面5: 代码思路: 通过jq获取你打开页面的链接  window.location.pathname: 在HTML中给自己的li加入一个ID id的命名与网址链接中的href相同 通过jq包含方法找到相对应的li给他加入active类名 然后..就没有然后了... jq代码: $(function () { var li = $(".title_ul").children("li"); for (var i = 0; i < li.l

  • vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)

    先给大家展示下效果图,感觉还不错请参考实现代码: 使用技术:vue2.0 webpack vue-touch 一些简单的javascript; (注意:vue-touch 使用的是2.0.0版本 需要与vue2.0.0兼容) vue-touch(地址:https://github.com/vuejs/vue-touch 注意是next 分支) 左侧导航可滑动(右侧视图窗因为和左逻辑一样 就没写) var VueTouch = require('vue-touch') Lib.Vue.use(Vu

  • JS利用cookie记忆当前位置的防刷新导航效果

    本文实例讲述了JS利用cookie记忆当前位置的防刷新导航效果.分享给大家供大家参考.具体如下: 这里演示利用cookie记忆当前位置的防刷新导航条,主要向大家展示如何在Js中使用Cookies技术,用好了Cookies,会使你的Js技术更上一层楼.这个菜单就感觉不错,当你鼠标点击之后,重新刷新页面后它仍然是保留在原位置,好像带有记忆功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cookie-nav-pos-menu-demo/

  • JS实现自动切换文字的导航效果代码

    本文实例讲述了JS实现自动切换文字的导航效果代码.分享给大家供大家参考.具体如下: 这里介绍支持自动切换文字的导航菜单效果,实际上看上去并不像菜单,猛一看倒像是一个Select下拉框,两侧带有箭头控制按钮,点击左侧则向上切换菜单文字,点击右侧则切换到一个菜单项内容,也可自动切换,鼠标不点击的时候菜单会自动变化文字. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-cha-font-nav-style-codes/ 具体代码如下:

随机推荐