（个人）AR电子书系统创新实训期中汇报

从开题到现在，我们的创新实训已经做了一个多月了，我负责整个应用流程的界面开发，包括UI界面设计、UI功能按钮响应等。在这段时间，我学会了许多，也完成了部分工作。接下来我将对我这段时间的工作做一个简单的总结。

1、摸索阶段

• 刚开始的时候，我并不太了解开发一个完整的app需要什么样的流程，所以我先明确了app开发前期的流程，包括用户需求分析、产品功能设计、UI视觉设计、数据库搭建、Android客户端开发、app程序测试以及最终的app成品。

• 之后，我通过书籍以及网上的一些资料简要学习了使用unity制作UI界面的一些基本组件。原本想用NGUI插件来设计的，后来才发现unity4.6及以上版本中对UI系统进行了大规模的改动，且不支持NGUI插件，UI插件变为UGUI。我电脑的unit版本是5.3的没办法使用NGUI插件，所以我只能放弃使用NGUI插件改为UGUI。UGUI是unity官方的插件，所以可以在menu->GameObject->UI中找到各种UI控件，如下图：
  
  UGUI中提供了许多UI控件，视觉组件包括Text、Image、Raw Image等，交互组件包括Button、Toggle、Slider、Scrollbar等，这些组件分别课进行多种不同的设置，而且它们都是基于Canvas的，每个Canvas会自动生成Event System。

2、demo阶段

• 在了解了这些组件之后，我使用学习到的技能制作了一个小demo，该demo中实现了页面的切换、开始界面的文字效果、开始界面的消失、HUD显示、按钮控制、倒计时功能。如下图：
  

• demo的画布控件如下图：
  

• demo的控制代码（GameState.cs）如下：

public class GameState : MonoBehaviour {
    public bool gameRunning = false;

    public void startGame()
    {
        gameRunning = true;
    }
}

• demo的倒计时功能代码（Timer.cs）如下：

public class Timer : MonoBehaviour {
    public float currentTimer;
    public float startTimer = 10f;
    public float timePercent;

    private Image image;
    private GameState gameState;

    // Use this for initialization
    void Awake () {
        currentTimer = startTimer;
        image = GetComponent<Image>();
        gameState = GameObject.Find("GameState").GetComponent<GameState>();
    }

    // Update is called once per frame
    void Update () {
        if (gameState.gameRunning)
        {
            currentTimer -= Time.deltaTime;
            timePercent = currentTimer / startTimer;
            image.fillAmount = timePercent;
        }

    }
}

3、UI功能设计
对unity 3d的界面设计有了一定的了解，我就正式开始app的界面设计。

• 我先对UI界面的功能进行了策划。当我们打开app时，首先进入摄像头界面，先扫描不同的宣传册对应的二维码，先进行宣传册相关内容的提取；在提取宣传册界面之后，app进入对应宣传册的主界面，在我们这次实验中就是济宁宣传册的主界面；在这个界面中，包括三个按钮：宣传片、扫描、操作说明；点击宣传片按钮，app将进入宣传片的播放界面，在屏幕的上方有退出键，可以随时点击退出；点击扫描按钮，app将进入我们应用的核心部分，及扫描不同的图片进行不同的AR交互操作，在屏幕的上方有退出键，可以随时点击退出；点击操作说明按钮，app将进入应用的使用说明界面，在弹窗上方有退出键，可以点击退出弹窗界面进入开始界面。

• 按照这个流程我设计了UI逻辑，如下图：
  

• UI的Canvas控件如下：
  

• “设置”弹窗及按钮的代码实现

//SettingsPopup.cs
public class SettingsPopup : MonoBehaviour {

    public void Open()
    {
        gameObject.SetActive(true);
    }
    public void Close()
    {
        gameObject.SetActive(false);
    }

//UIController.cs
public class UIController : MonoBehaviour
{
    private bool button = false;
    [SerializeField]
    private SettingsPopup settingsPopup;//弹窗槽
    [SerializeField]
    private SettingUsePopup settingsPopup2;//弹窗槽
    void Start()
    {
        settingsPopup.Close();//默认关闭弹窗
    }

    public void OnOpenSettings()
    {
        if(button == false)
        {
            settingsPopup.Close();
            button = true;
        }else
        {
            settingsPopup.Open();
        }
        button = false;

    }
    public void OnOpenSettings2()
    {
        settingsPopup2.Open();//使用弹出窗口的方法替换调试文字
    }
}

• 播放宣传片功能的代码实现

public class Video : MonoBehaviour
{
    public GameObject hud;    
    public GUI set;
    public GUI back;
    //电影纹理
    public MovieTexture movTexture;
    void Start()
    {   //设置电影纹理播放模式为循环
        movTexture.loop = false;

    }
    void OnGUI()
    {
        if (AppController.appState == AppState.AdvertisingVideo)
        {            
          //绘制电影纹理
            GUI.DrawTexture(new Rect(0, 0, Screen.width, Screen.height), movTexture, ScaleMode.StretchToFill);
            hud.SetActive(true);          
            if (GUILayout.Button("播放"))
            {
                //播放/继续播放视频
                if (!movTexture.isPlaying)
                {
                    movTexture.Play();
                }
            }
            if (GUILayout.Button("暂停播放"))
            {
                //暂停播放
                movTexture.Pause();
            }
            if (GUILayout.Button("停止播放"))
            {
                //停止播放
                movTexture.Stop();
                hud.SetActive(false);               
                AppController.appState = AppState.Menu;
            }
        }     
    }

4、界面设计
在这一块我设计的图片可能看起来很容易，但实际上渐变、阴影、大小、颜色等等这些东西想要调出一个和谐的整体不是一件很容易的事，渐变深一点、阴影多大、大小多大、不同按钮选择什么样的颜色等，都需要多尝试、多想才能达到较为满意的效果。

• 后台的界面设计，如下图：
  

• 开始界面与扫描页的界面设计，如下图：
  

5、总结
经过这段时间的学习，我深刻体会到设计、创造自己喜欢的东西是有多么的幸福！而且我进一步理解“程序与美工是相辅相成的”这句话。如果美工能了解一点程序，那么设计出的图片就能更好的符合交互；同样的，程序员如果美术修养比较高的话，写出的东西也不至于太丑。
我对于unity的UI界面的设计还是充满好奇心的，希望能在这次实训中能更深入的学习。