Unity页面按钮,以及对于游戏页面设计的详细操作

以下为初学者一步一步的操作,希望对您有所帮助

Button按钮的认识

Button有两个组件,Image组件可以给按钮添加背景图片

Button组件可以设置动画效果,和按键时的效果;

NormalColor按键正常时的颜色

HighlightedColor 鼠标放在按钮上后的颜色

PressedColor 鼠标按下时的颜色

DisabledColor 禁用后的颜色,没反应时的颜色

 

给按钮添加动画效果

创建一个Button按钮,找到Button组件中的Transition,打开找到Animation

组件下面有一个Auto Genrtate Animation选项,点击保存。Ctrl+6点击Addproperty找到

Scale。找到刚保存的位置点击Button,将HighlightedPressed中的Loop Time取消对勾

 

血条制作 Button按钮系列

先创建一个Button按钮,删除Text中的文字,在Source Image上添加一个全红色的图片

在调整Image Type选择Filled 调整Fill Method为Horizontal水平

在调整Fill Origin 为Left 挂入脚本即可,写入程序可以模拟血量减少过程

 

publicclassEvent : MonoBehaviour {

    publicImage image;

    float timer = 0;

         // Use this for initialization

         void Start () {

        

         }

        

         // Update is called once per frame

         void Update () {

        timer += Time.deltaTime;

        if (timer>2)

        {

            image.fillAmount -= 0.2f;

            timer -= 2;

 

        }

         }

}

 

给按钮添加案件顺序

开启导航 是按钮互相之间产生连线箭头  Visualiza

设置Navigation中的Explicit  根据英文和自己需要适当调整按钮位置以便按键

 

选择男女,一次只能勾选一个

创建一个Toggle,修改Lable可修改显示内容,如:男女,创建一个空物体改名字

Gender,把做好的男女两个Toggle放入空物体中作为子物体,给空物体添加Toggle

Grounp组件,在子物体中找到Group选项添加空物体,两个Toggle中有一个勾选

Is On 就行。

 

页面滚动

①  建立一个Image图片拉长但不要超过Ganvas边界

②  添加Scroll Rect 组件点掉竖直选项;

③  在图片上建立空物体,拉长左边与图片对齐,右边拉出边框

④  在空物体中创建图片,给图片添加背景并调整位置左边不要超出

⑤  适当复制图片  把空物体拖拽到挂载Scroll Rect组件的图片中,放在Content中完成滚动

⑥  消除Image框外的图片,在Image上挂载Mask组件  点掉对勾背景透明

拓展:在图片下方放一个滚动条

创建一个Scrobar,将建好的Scrobar拖入Image图片中Scroll Rect组件中的Horizontal Scrollbar   也可把滚动条竖立起来

 

选择男女,只选一个

创建一个空物体,给空物体添加Toggle Grounp组件,在空物体中创建两个Toggle,修改Lable可修改显示的内容,Background可修改按键背景颜色,Checkmark可把对勾修改成其他标识。

注:记住密码,和此操作大同小异,不做详细解析;

 

切换界面操作

①  创建一个空物体,挂载Toggle Group组件

②  在空物体中创建一个Toggle,删除Backgroud下的checkmark,得到一个空白的按键

③  创建三个不同颜色,等大小等位置的图片,用来模拟三个不同的界面,分别放入三个Toggle中的Backgroud

④  ToggleGraphic挂入刚创建的图片,Group挂入空物体;

⑤  Is On按钮三个Toggle有一个勾选即可;


你可能感兴趣的:(Unity,unity)