【深圳大学计算机游戏开发】实验2 游戏交互界面设计

一、实验目的与要求

1.熟悉交互界面设计原理。

2.了解Cocos2d-x中的用户交互、触摸事件、碰撞检测机制。

二、实验内容与方法

1．完成游戏编译 (20分)

仿照实验一“英雄快跑”实验，将教材源码和素材文件复制到自己的项目中，成功编译并运行本次实验----“贪食豆”游戏。

2．修改游戏显示名称 （5分）

通过修改游戏代码，使自己的学号姓名（中文）替换原“MyGame”字样出现在标题栏左上角。

3．增加摇杆上下移动功能 （5分）

修改游戏代码，使贪食豆在屏幕范围内能上下左右移动。

4．增加计分板功能 （5分）

修改游戏代码，增加计分板功能。

5．增加 UI 登录界面（含 Play 按钮） （10分）

请自行下载素材，用Cocos Studio UI Editor设计个性化登录界面（含按钮），并在项目中加载该登录界面，实现开始游戏（Play）功能。

6．增加Replay按钮（5分）

在游戏结束时添加Replay按钮，实现重新开始游戏（Replay）功能。

7. 游戏优化（5分）

自行发挥想象力，检查并优化游戏功能。

8．录制通关视频 （5分）

录制游戏通关视频，上传至BB系统。

9．完成实验报告 （40分）

截图记录关键步骤，分析实验结果，撰写心得体会。

三、实验步骤与过程

1．完成游戏编译

修改源代码和素材文件，注意是在chapter10中

在vs中进行源文件的修改调整，首先修改项目文件。

其次在AppDelegate.cpp文件中修改源文件引用和类的引用

 

修改窗口大小

对代码进行编译运行，发现运行成功

2．修改游戏显示名称

在AppDelegate.cpp文件中修改导演部分，使得左上角标题栏为学号+中文姓名

运行代码发现出现中文乱码问题

查阅资料后，在前面添加转换UTF8格式的GBKToUTF8函数

调用GBKToUTF8函数转换学号和姓名成UTF8格式

运行代码，发现成功输出学号和中文姓名

3．增加摇杆上下移动功能

原先的获取摇杆方向的函数如下，只有left，right，stop三种状态，因此无法上下移动

解决方法：用cocos2d的Vec2向量类替代

（1）修改Joystick.h中的getDirection函数声明类型

（2）修改Joystick.cpp中的getDirection函数

（3）修改HelloWorldScene.cpp中的update函数，获取遥杆当前位置向量后首先判断摇杆是否移动，若移动则分别判断bean的x和y坐标减去bean的一半高度后范围是<0,还是0-200,或是>200，并通过矢量运算得出bean移动的x和y方向的长度

运行代码发现可以进行上下移动，并且移动范围是一个长度为200的正方形

4．增加计分板功能

在HelloWorldScene.h添加HelloWorld类的数据

在HelloWorldScene.cpp添加记分板，并将其放在屏幕左上角

增添碰撞检测内容，使得bean在吃到红球时得1分，吃到绿球时得2分，吃到白球时得3分，并且在得分后更新记分板的分数。

运行代码，界面如下

5．增加 UI 登录界面（含 Play 按钮）

新建首界面Begin类

在AppDelegate.cpp将第一个场景改为Begin

创建实现Begin场景

创建PLAY按钮文字

点击后创建HelloWorld场景并开始游戏

运行代码，界面如下，点击PLAY后会开始游戏

6．增加Replay按钮

在AppDelegate.cpp的update函数中添加分数判断，如果达到20则暂停游戏并显示success

添加replay按钮并将其放置在图层上

在AppDelegate.cpp添加menuReplayCallback函数，分数请0后替换场景开始新游戏

运行代码，界面如下，左边中部有一个replay按钮，点击后会重新开始游戏。分数达到20后，游戏暂停并弹出success提示。

7. 游戏优化

（1）优化一——动态改变小球速度

Bean的速度有点过快了，并且无论摇杆移动多远，速度都没有改变，始终保持最大值。

为了优化游戏中移动摇杆和控制bean的体验，将bean的移动速度改为根据摇杆距离中心的距离而动态变化。

即当摇杆处于中心时，bean的速度为0；当摇杆处于圆周时，bean的速度最大。

首先在Joystick.h的Joystick类中添加最大速度maxspeed，设置为5。

更改Joystick.cpp中的getVelocity函数

更改HelloWorldScene.cpp中的update函数

（2）优化二——增添小球种类

小球的种类只有三种，有一点少了，并且均为得分球，如此只要玩久一点都会赢，没什么游戏体验。因此，增加一种扣分小球——小篮球。

首先在HelloWorldScene.h的HelloWorld类中增添addBall4函数声明

修改HelloWorldScene.cpp的init函数，在调度器中添加第四种小球

实现addball4函数

在update函数中增加扣分规则，为了不出现分数为负数的不合理情况，规定只有在扣分后分数仍大于等于0时才进行扣分。

运行代码，发现成功出现小篮球。

（3）优化三——修改不同小球出现频率

在游戏中，发现小球出现频率不太合理，得分最高的白球出现频率反而最高，而扣分的篮球出现频率极其小，这导致游戏难度极低，没有什么游戏体验。因此，需要调整一下不同小球出现的频率以增加挑战性。

修改HelloWorldScene.cpp中的init函数的调度器部分

运行代码，发现此时各种小球出现的频率较为合理

四、实验结论或心得体会

此次实验基本完成了实验要求，加深了对cocos2d代码的理解和运用，但在修改过程中发现自身仍不太熟练，还需要多加练习。另外就是对CocoStudio的使用不太熟悉，还需要提升。

实验中也有遇到一些问题，好在多次尝试后顺利解决。

在实现中文输出的过程中，原本是打算使用cocos2d-x 自带的 iconv 库实现中文显示，但实操后发现不但仍然要写GBKToUTF8函数，而且还要修改项目属性中的多个路径，倒不如直接写函数便捷。

设置replay按钮图片时出现图片盖住大半个屏幕的现象，意识到图片的输出像素要控制好，修改图片像素后replay按钮显示正常。

（by 归忆）