概要
要实现面板下拉其实只需要移动panel就可以了,方法简单很好理解,要点就是注意控制方向。大佬们轻喷。
整体预览
先创建一个panel下面放上按钮然后搞一点点装饰,类似于这样
谋面的背景是Panel
锁链是Image
武器是Button
其余的自由发挥
后面加上声音之后整体来看效果就像这样
实现面板下拉
看似简单的效果实则真的很简单。
技术细节
- 代码控制面板移动
第一、由于在移动收回的时候是将面板移出Canvas
有的时候屏幕可能会放大或者缩小,所以知道它最上沿的位置至关重要。
注:Canvas的RenderMode我用的是Screen-Space-Overlay
定义一个最上沿和最下沿的y轴坐标,并进行赋值。赋值的关键就是在canvas面板显示的基础上参考屏幕高度进行调整:
//最上沿
upmax = canvas.transform.position.y / Screen.height + Screen.height*1.338f;
//最下沿
downmax= canvas.transform.position.y / Screen.height+Screen.height/1.5f;
第二、移动的时候关于移动方向的判断
transform.Translate
提供的方法中第一个参数就是方向和速度,在这里可以通过乘以+/-1控制方向,-1为向下移动,+1为向上移动。(主打的就是用最最最直观且简单的笨办法实现效果)
代码如下:
if (this.transform.position.y >= downmax)
{
delat = -1;
this.transform.Translate(Vector3.up * speed * delat * Time.deltaTime, Space.Self);
}
if (this.transform.position.y <= upmax)
{
delat = 1;
this.transform.Translate(Vector3.up * speed * delat * Time.deltaTime, Space.Self);
}
- 按钮控制拉出和收回
声明一个bool变量用于判断背包的拉出和收回。点击按钮的时候改变这个bool值。改变值的方法有很多种,比如通过SendMessage或者声明一个函数。这里选择声明函数(简便快捷)。
public void ChangeVisable()
{
isVisable = !isVisable;
}
然后把脚本挂在那个面板上按钮上加上点击事件:
最后需要的话可以加上声音,在点击按钮的时候播放:
小结
这种方法应该是最容易想到的了,没有那些高级的插件或者方法都是最基础的判断和移动。嗯!就这样吧。