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

本文链接：https://blog.csdn.net/crygjb/article/details/131690972

本文详细介绍了使用Cocos2d-x开发“贪食豆”游戏的过程，包括游戏编译、窗口大小和显示名称的修改、摇杆上下移动功能的增加、计分板的实现、UI登录界面设计、游戏结束机制、摇杆力度控制角色速度、难度设置和游戏模式的优化。实验中还涉及到了碰撞检测、自定义字体、CocosStudio的UI编辑以及游戏逻辑的编写。

摘要由CSDN通过智能技术生成

前言

这门课的所有实验都挺简单的，但是我估摸着混了个A+，不写白不写，本次实验可能会有我没有发现的错误或者仍需完善的内容，但整体上是没有问题的，得分也不低。

一、实验目的与要求

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

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

二、实验内容与方法

1．完成游戏编译

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

2．修改游戏显示名称

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

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

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

4．增加计分板功能

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

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

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

6．增加Replay按钮

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

7. 游戏优化

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

三、实验步骤与过程

1．完成游戏编译

仿照实验一“英雄快跑”实验，将教材源码和素材文件复制到自己的项目中，详细步骤见我的实验1的文章。

2. 修改窗口大小和游戏显示名称

（1）向右移动摇杆，发现主角bean会移出屏幕，这说明窗口大小不够，无法显示完整内容。因此我在AppDelegate.cpp中，将变量designResolutionSize改为cocos2d::Size(960, 640)，这样就能将窗口大小改为960x640。

static cocos2d::Size designResolutionSize = cocos2d::Size(960, 615);

（2）在AppDelegate.cpp中，使用GLViewImpl类的createWithRect函数创建游戏窗口，如果将第一个参数改为学号和姓名，这样就能将游戏显示名称改为学号和姓名，但是此时会出现中文乱码。

（3）这是因为 VisualStudio 的默认编码方式为 GBK 格式，而 cocos2d-x 引擎的默认编码格式为 UTF-8 格式，故中文会出现无法兼容的情况。创建一个UTF-8格式的xml文件，将学号和名称添加进该文件，在cocos2d-x中读取文本即可显示中文。

在resources文件夹中创建一个xml文件CN_Name.xml，添加一个dict标签，在其中添加key标签将键值设置为str，对应的字符串为“学号-姓名”。

（4）使用Dictonary类的createWithContentsOfFile函数创建实例，将刚刚创建的xml文件作为参数，然后使用objectForKey函数通过键值“str”获取学号和名字的字符串内容，再使用getCString函数将其转换为char类型，最后把其作为createWithRect函数的第一个参数。

bool AppDelegate::applicationDidFinishLaunching() {
    // initialize director
    auto director = Director::getInstance();
    auto glview = director->getOpenGLView();
    auto* Cn_Name = Dictionary::createWithContentsOfFile("CN_Name.xml");
    const char* My_Name = ((String*)Cn_Name->objectForKey("str"))->getCString();
    if(!glview) {
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32) || (CC_TARGET_PLATFORM == CC_PLATFORM_MAC) || (CC_TARGET_PLATFORM == CC_PLATFORM_LINUX)
        glview = GLViewImpl::createWithRect(My_Name,
            cocos2d::Rect(0, 0, designResolutionSize.width, designResolutionSize.height));
#else
        glview = GLViewImpl::create(My_Name);
#endif
        director->setOpenGLView(glview);
    }

（5）尝试运行程序，如下图所示，成功将窗口大小改为960x640，游戏显示名称是我的学号和姓名。

3. 增加摇杆的上下移动功能

（1）在Joystick.h文件的枚举类型Joystick_dir中，添加向上和向下的摇杆方向_UP和_DOWN。

enum Joystick_dir
{
	_LEFT,
	_RIGHT,
	_STOP,
	_UP,
	_DOWN
};

（2）修改Joystick.cpp文件中的getDirection函数的内容，定义二维变量m_direction，其值为摇杆当前位置m_currentPoint减去摇杆中心位置m_centerPoint的二维向量，表示摇杆的方向。判断摇杆在x方向还是y方向移动的距离更多，如果是y方向移动的距离更多，则根据这个y值大于或者小于0，返回_UP或者_DOWN。

如果是x方向移动的距离更多，或者距离相等，则根据这个x值大于或者小于0，返回_RIGHT或者_LEFT。如果x方向和y方向的距离都为零，则返回_STOP，表示不移动。

// 获取摇杆当前方向
Joystick_dir Joystick::getDirection()
{
	auto m_direction = m_currentPoint - m_centerPoint;
	//判断x和y方向哪个移动距离更大
	if (abs(m_direction.y) > abs(m_direction.x))
	{
		if (m_direction.y > 0)
		{
			return Joystick_dir::_UP;
		}
		else if (m_direction.y < 0)
		{
			return Joystick_dir::_DOWN;
		}
	}
	else {
		if (m_direction.x > 0)
		{
			return Joystick_dir::_RIGHT;
		}
		else if (m_direction.x < 0)
		{
			return Joystick_dir::_LEFT;
		}
	}
	return Joystick_dir::_STOP;
}

（3）在HelloWorldScene.cpp的update函数中，根据getDirection函数函数返回的值来决定角色向哪个方向移动。如果返回值为_RIGHT，而且角色的最右端不超出游戏区域，则调用setPositionX方法将角色在X正方向移动speed；如果返回值为_LEFT，而且角色的最左端不超出游戏区域，则调用setPositionX方法将角色在X负方向移动speed。

如果返回值为_UP，而且角色的最上端不超出游戏区域，则调用setPositionY方法将角色在Y正方向移动speed；如果返回值为_DOWN，而且角色的最下端不超出游戏区域，则调用setPositionY方法将角色在Y负方向移动speed；如果返回值为_STOP，角色位置不变。

// 控制角色移动
	//角色速度
	int bean_speed =(int)m_joystick->getVelocity()/10+2;
	//左右
	if (m_joystick->getDirection() == Joystick_dir::_RIGHT
		&&bean->getPositionX()+bean->getContentSize().width/2<=680)
	{
		bean->setPositionX(bean->getPositionX()+ bean_speed);
	}
	else if (m_joystick->getDirection() == Joystick_dir::_LEFT
		&&bean->getPositionX()-bean->getContentSize().width/2>=200)
	{
		bean->setPositionX(bean->getPositionX() - bean_speed);
	}
	//上下
	else if (m_joystick->getDirection() == Joystick_dir::_UP
		&& bean->getPositionY() + bean->getContentSize().height / 2 <= visibleSize.height)
	{
		bean->setPositionY(bean->getPositionY() + bean_speed);
	}
	else if (m_joystick->getDirection() == Joystick_dir::_DOWN
		&& bean->getPositionY() - bean->getContentSize().height / 2 >= 0)
	{
		bean->setPositionY(bean->getPositionY() - bean_speed);
	}
	else if (m_joystick->getDirection() == Joystick_dir::_STOP)
	{
		bean->setPositionX(bean->getPositionX());
	}