一、实验目的与要求

  1. 熟悉交互界面设计原理。
  2. 了解Cocos2d-x中的用户交互、触摸事件、碰撞检测机制。

二、实验内容与方法

  1. 完成游戏编译 (50分)
    仿照实验一“英雄快跑”实验,将教材源码和素材文件复制到自己的项目中,成功编译并运行本次实验----“贪食豆”游戏。
  2. 修改游戏显示名称 (5分)
    通过修改游戏代码,使自己的学号姓名(中文)替换原“MyGame”字样出现在标题栏左上角。
  3. 增加摇杆上下移动功能 (10分)
    修改游戏代码,使贪食豆在屏幕范围内能上下左右移动。
  4. 增加计分板功能 (10分)
    修改游戏代码,增加计分板功能。
  5. 增加 UI 登录界面(含 Play 按钮) (10分)
    请自行下载素材,用Cocos Studio UI Editor设计个性化登录界面(含按钮),并在项目中加载该登录界面,实现开始游戏(Play)功能。
  6. 增加Replay按钮(10分)
    在游戏结束时添加Replay按钮,实现重新开始游戏(Replay)功能。
  7. 优化游戏(5分)
    自行发挥想象力,寻找BUG,检查并优化游戏功能,录制游戏通关视频,上传至BB系统。

三、实验步骤与过程

1.完成游戏编译

将源代码与素材复制到相对应的文件夹之中,编译运行程序。

Javascript交互界面设计结论_摇杆

Javascript交互界面设计结论_登录界面_02

修改画面大小,可以展示出完成游戏界面

Javascript交互界面设计结论_Javascript交互界面设计结论_03


Javascript交互界面设计结论_Javascript交互界面设计结论_04

2.修改游戏显示名称

修改AppDelegate.cpp中代码

Javascript交互界面设计结论_UI_05


Javascript交互界面设计结论_登录界面_06


发现cocos2dx不支持中文字符,需要通过如下操作完成中文字符的显示。

由于 VisualStudio 的默认编码方式为 GBK 格式,而 cocos2d-x 引擎的默认编码格式为 UTF-8 格式,故中文会出现无法兼容的情况,所以需要将 GBK 编码转为 UTF-8 编码。

通过资料,得到 GBK 转 UTF-8 代码:

Javascript交互界面设计结论_Javascript交互界面设计结论_07


Javascript交互界面设计结论_UI_08


最终效果:

Javascript交互界面设计结论_Javascript交互界面设计结论_09

3.增加摇杆上下移动功能 (10分)

首先修改操纵杆的返回类型。

源代码只会返回LEFT、RIGHT、STOP。所以如果需要增加上下移动,需要进一步增加返回的数据量。

这里选择返回操纵杆的移动向量,两个参数代表了bean需要移动的xy向量。

Javascript交互界面设计结论_摇杆_10


在更新bean的运动状态中,首先判断向量是否为(0,0),如果是说明不移动,否则进行状态更新。

Javascript交互界面设计结论_登录界面_11


Bean移动的速度每帧为4,即三角形的斜边长为4,经过简单的换算可以得到x轴、y轴的移动距离如下图所示。

Javascript交互界面设计结论_登录界面_12


同时限定了bean的上下左右移动范围,如果超出范围,会将bean重新退回规定区域内。

Javascript交互界面设计结论_UI_13

4.增加计分板功能

首先添加UI控件label作为得分板。

Javascript交互界面设计结论_UI_14


添加得分逻辑,每一次碰撞检测成功时说明吃到球了,可以进行加分。根据球的颜色不同,会增加不同的分数。(白球1分,红球2分,绿球3分)

每次得分后更新得分板。

Javascript交互界面设计结论_登录界面_15


效果如图所示

Javascript交互界面设计结论_摇杆_16

5.增加 UI 登录界面(含 Play 按钮) (10分)

首先添加开始的界面

Javascript交互界面设计结论_摇杆_17


并且绑定点击效果,即跳转到游戏界面

Javascript交互界面设计结论_摇杆_18


在AppDelegate.cpp中将首场景设置为MyFirstScene

Javascript交互界面设计结论_登录界面_19


具体效果见视频

6.增加Replay按钮(10分)

Replay条件设置为当得分 > 10分时,游戏挑战成功

实现方式是在update中检查score是否大于10分,如果是,则暂停游戏画面(否则球仍然会下落),并且展示游戏成功的提示。

Javascript交互界面设计结论_UI_20


接着在游戏底部添加replay按钮,并为其绑定相对应的函数。

Javascript交互界面设计结论_UI_21


函数部分将分数归零,重置画面并继续游戏画面。

Javascript交互界面设计结论_UI_22


Javascript交互界面设计结论_摇杆_23

7.优化游戏(5分)

  1. 根据摇杆位置更改bean的移动速度。
    首先设置bean的最大移动速度为6

    当遥感位置最大(等于半径时),移动速度为最大值,其他情况按比例缩放。

    修改bean的移动动画,将默认移动速度修改为由摇杆力度控制