02_登录窗口

新建场景

重命名为GameRoot

双击GameRoot进入新场景

同样摄像机清除格式

删除平行光并关闭渲染灯光的天空盒

新建空节点重命名为GameRoot

GameRoot为游戏的根节点 在整个游戏中都不会被删除

在游戏的根节点下创建UI的根节点Canvas

创建一个空节点 作为UI根节点下的 登录场景UI

重命名为LoginWnd（登陆窗口）

接下来在LoginWnd下创建登录窗口的公告按钮

在Art文件夹中添加以下资源 并设置为精灵模式后保存

将资源图片拖拽至Source Image

调整按钮的大小尺寸并删除文本子物体

开启编辑器界面的2D模式

双击BtnNotice准确找到BtnNotice对象

鼠标滚轮后滚拉远距离，鼠标右键调整位置

选择移动道具将BtnNotice对象移动至左下角

创建空文件夹命名为Scripts

创建脚本

命名脚本为BackImageHideAndDisplay

双击打开脚本 - 编写内容如下：

using UnityEngine;
using UnityEngine.UI;
public class BackImageHideAndDisplay : MonoBehaviour{
    public GameObject image1;
    public GameObject image2;
    int clickCount = 0;
    void Start(){
        Button btn = gameObject.GetComponent<Button>();
        btn.onClick.AddListener(DisplayAndHide);
    }
    void DisplayAndHide() {
        clickCount++;
        bool showImage = clickCount % 2 == 1;
        image1.SetActive(showImage);
        image2.SetActive(!showImage);
    }
}

创建两个Image

在Art文件夹中导入以下两个图像资源

点击其中一个图像资源按住Shift键再次点击另一个双选这两张图片

设置为精灵模式并保存

设置Image1

设置Image2

挂载 "显示和隐藏图像" 脚本

将两个Image对象分别拖拽至脚本框选

双选两个Image对象后点击隐藏

运行后点击公告奇数次显示

点击公告偶数次

介绍按钮组件Button的Transition的四种选择变化状态

第一种无状态 点击不发生任何效果

第二种颜色变化 

设置颜色为 赤 - 橙 - 黄 - 绿 - 灰

当不使用鼠标按键时 为默认红色

当鼠标悬停在按钮上显示橙色

当鼠标左键按下时显示黄色

当鼠标左键按下松开时显示绿色

第二种切换精灵图

添加的五张图片也代表，默认，悬停时，鼠标左键点击时，鼠标左键点击松开时，鼠标左键点击后

当开启禁用时，按钮图片会显示Disabled Sprite的图片并且悬停或点击不会产生效果

第三种动画变换

按钮选择动画变换后 需要创建动画

在窗口中找到 动画 界面

将该窗口拖拽至编辑器视口旁

然后选中需要设置动画的对象

点击创建

创建前在Assets下创建一个Animations文件夹用来存放项目重所有动画

选中需要增加动画的对象后点击创建

打开动画选择需要增加动画的对象

点击开始录制

设置关键帧

设置好颜色后暂停录制动画点击播放

点击播放后就能看见按钮随着设置的帧进行颜色变化

接着我们再在这个对象身上创建另外一个动画

命名为不产生改变的动画

选择新创建的动画状态进行设置

同样方法 1.开启录制

2.设置帧

3.关闭录制 点击播放

最后利用动画控制器 创建变量 来控制 按钮的动画切换

双击打开动画控制器

创建变量

选择触发器

名字粘贴按钮的动画变换的悬停 名字

右键创建线

连接线

设直线

创建反向线

连线

创建按钮的默认变量 - 复制该名字

创建变量

设直线

其余三种同样方法设置按钮的动画变换

接着创建一个文字作为游戏名字

创建Image作为输入账号的背景板

调整长与宽

添加提示账号信息文本

添加输入文本

调整位置

设置提示词

设置输入账号字体大小

Ctrl + d 复制一个组合账号 作为密码 并修改文本信息

因为密码是不想其他人看见的所以设置文本类型

创建一个按钮作为进入游戏

设置按钮的文本字体大小

End.