1前台界面与交互.PDF

WEB 严肃游戏项目 设计 1 前台 ：界面与交互 1.1登录界面 登录界面用于为用户提供输入用户名及密码的界面。 界面上有两个输入框 ：用户名输入框，密码输入框 两个按钮：登录，注册 图 1.登陆界面 在登录界面输入好用户名和密码之后 ，如果符合规范 ，单击登录将会进入开始游戏界面。 如果用户没有注册过，单击注册 ，跳转至注册界面。 1.2 注册界面 界面显示“用户注册”，有三个输入框：用户名 ，密码，邮箱（可在图中多增加一项确认 密码 ）。下方有个按钮：“I am ready for being a dream maker!”。 1 / 17 WEB 严肃游戏项目 图 2.用户注册界面 在注册界面完成相应信息填写后，如果符合规范，单击“I am ready for being a dream maker!”按钮，将会跳转至新手模式界面。新手模式不断单击下一页，至到尾页（此时 假设用户已经对游戏的操作有了一定的理解） ，点击“进入游戏”，跳转至开始游戏界面。 1.3 开始游戏界面 开始游戏界面有四个按钮，上面两个按钮显示任务模式和自由模式，下面为游戏设置和新 手教程。在游戏设置的弹出框里，用户可以设置音乐的开关 （单选框：MUSIC-ON/MUSIC- OFF ），以及可以选择“注销用户”按钮。 2 / 17 WEB 严肃游戏项目 图 3.开始游戏界面 用户点击任务模式，将跳转至任务模式界面 ，点击自由模式，将进入自由模式界面。 用户单击设置游戏，将出现弹出框，框内选择 MUSIC-ON 没有操作，MUSIC-OFF 将 关闭音乐文件。单击注销用户将跳转到登录界面。 1.4新手模式界面 新手模式界面（即新手教程）将给出游戏的操作的方法。由图片（或者视频）组成。教 程结束时出现按钮“进入游戏”。 1.5 自由模式界面 ①进入自由模式后，首先弹出的是一个欢迎界面，如图 1 ，在这个对话框中我们有多个 场景模版可供选择，任意选择一个，单击 “下一步”继续操作。 3 / 17 WEB 严肃游戏项目 图4. Welcome Dialog Box ②成功选择一个模版后，The Dream 会进入游戏界面，并在左上角显示模版场景，如图 4 ， 5 所示。 图 5. Scene View 4 / 17 WEB 严肃游戏项目 图 6. Start scene, Code Editor 这里，我们把这个 Start scene 分成四个 panel ：左上角为预览窗Scene View ；左下角 为 Method Panel ，记录了object 的属性和方法；右上部分为 Code Editor Panel ；右下部分 为 Control Panel ，控制方法的运行顺序。 ③点击 Scene View 里的 Set Up 按钮，就可以进入场景编辑页面，如图 7。场景编辑页 面由两个 panel 组成： Scene Setup Panel 和 Gallery Panel. 这个编辑器的主要目的就是通 过添加、摆放 Object 来构造一个虚拟世界。在 Gallery 里包含了许多物体的模型，我们这里按 照继承关系