ugui制作伸缩菜单


制作一个类似与这种格式的菜单,可以伸缩滑动的。
今天正好项目需要用到类似功能,所以尝试了一下,做出如下的效果

虽然只是一个思路,但是可以扩展。
声明一个object物体,为but,通过GetComponent<RectTransform>().anchoredPosition,将其赋值移动到目标位置
下面是UGUI的cs代码。 
 using UnityEngine;

using System.Collections;

using UnityEngine.UI;

using UnityEngine.EventSystems;

public class UGUI : MonoBehaviour {

public Image image;

public bool image_bool;

public GameObject but;

// Use this for initialization

void Start () {

image_bool = false;

}

// Update is called once per frame

void Update () {

}

public void button()

{

image_bool = !image_bool;

image.gameObject.SetActive(image_bool);

but.GetComponent<RectTransform>().anchoredPosition = new Vector2(27, -85);

}

}

这边button代码
下面注释部分是采用碰撞box collider2D,获取imgage,和下面button(1)碰撞事件,获取rectTransform.anchoredPosition相对的坐标,然后将其挤开,从而实现移动的效果,有兴趣的可以试试下面这种,需要在image和button(1)添加box collider2D盒子碰撞器以及rigidbody 2D事件,另外千万不要忘记了Constranints里面的 freeze position 将x 和y勾选上噢。

下面是完整代码,其余绑定事件什么的我就不贴出来了阿,可以自行网上参考。
using UnityEngine;

using System.Collections;

public class button : MonoBehaviour {

public Vector2 zi_v2;

public bool ziji_bool;

// Use this for initialization

void Start () {

ziji_bool = false;

zi_v2 = new Vector2(GetComponent<RectTransform>().anchoredPosition.x,GetComponent<RectTransform>().anchoredPosition.y);

}

// Update is called once per frame

void Update () {

if (!GameObject.Find("Canvas").GetComponent<UGUI>().image_bool) {

hf();

}

}

public void hf() {

GetComponent<RectTransform>().anchoredPosition = zi_v2;

}

//void OnCollisionEnter2D(Collision2D coll)

//{

//    Debug.Log(coll.gameObject.name);

//    RectTransform coll_name = GameObject.Find(coll.gameObject.name).GetComponent<RectTransform>();

//    //GetComponent<RectTransform>().anchoredPosition = new Vector2(GetComponent<RectTransform>().anchoredPosition.x, coll_name.sizeDelta.y);

//    GetComponent<RectTransform>().anchoredPosition = new Vector2(GetComponent<RectTransform>().anchoredPosition.x, GetComponent<RectTransform>().anchoredPosition.y);

//    ziji_bool = true;

//}

}

时间: 2025-01-07 00:42:32

ugui制作伸缩菜单的相关文章

精通CSS+DIV网页样式与布局--制作实用菜单

在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括:项目列表.无需表格的菜单.菜单的横竖装换,看下面一张思维导图: 首先,我们看项目列表,列表的符号,我们来看例子代码和运行效果: <span style="font-size:18px;"><span style="font-size:18px;"&g

多级伸缩菜单——组合模式

常见的后台管理模板都有一个伸缩菜单,我们可以通过CSS轻松实现,但是如果我们动态的添加菜单,javascript的操作Dom将会变得很繁琐,我们可以应用组合模式来轻松实现. 组合模式用于把一组相似的对象当做一个单一的对象,以树形结构的形式来组合对象,以实现部分和整体的关系.下面的实例通过多级的伸缩菜单实现组合模式,其类图如下: 实现代码: var Menu = Class.extend({ isLeaf:true, subMenu:[], label:'菜单', href:'#', ctor:f

JQ写简单的伸缩菜单(内附效果图和源代码)

效果如图: JQ代码就那么几句, <!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" xml:lang="zh-cn"> <

用UGUI制作手游新手指引

因为这几天工作上的需要,研究了下用UGUI制作新手指引.可以实现这个效果的方法有很多,都用了一遍,最后还是感觉这个方法比较好.我们需要创建一个画布,然后在画布下创建需要新手指引用到的按钮, 然后在需要新手指引的按钮上加2个组件,一个是 Graphic Raycaster 和Canvas ,Graphic Raycaster是用来是否接受可以交互的,Canvas是改变显示的,记得我们这里需要一个遮罩,就用一个Image来做吧 然后我们给这个4个按钮都加上这2个组件,因为这里我是测试所以我需要一运行

一个简洁型伸缩菜单

1 <p>一个简洁型伸缩菜单</p> 2 <style><!-- 3 *{margin:0; padding:0;} 4 body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;} 5 #box{width:700px; border:1px solid #ccc;} 6 .title{ font-size:16px;padding-left:30px; height:3

原生js+css实现二级伸缩菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js实现二级伸缩菜单</title> <style> *{ margin:0; padding:0; } ul,li{ list-style: none; } .closed{ display: block; width: 200px; ba

CSS3背景 制作导航菜单综合练习题

CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用box-shadow实现立体风格 3.制作导航分隔线 提示:使用渐变与伪元素制作 4.删除第一个和最后一个导航分隔线 提示:使用伪元素删除第一个和最后一个分隔线 <!doctype html> <html lang="en"> <head> <me

CSS制作二级菜单时,二级菜单与一级菜单不对齐

效果如图: 部分代码如图: <li><a href="#" target="_blank">关于我们</a> <ul> <li class="top"><a href="#" target="_blank">关于我们</a></li> <li><a href="#" targ

ASP动态网页设计与Ajax技术----制作折叠式菜单

<!doctype html><html><head><meta charset="utf-8"><title>制作折叠式菜单</title></head><style type="text/css"> ul{list-style: none; margin: 0; padding: 0;} #accordion{width: 200px;} #accordion li{