（个人）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界面的设计还是充满好奇心的，希望能在这次实训中能更深入的学习。