【计算机游戏开发】游戏交互界面设计

Alex_Shen
2021-08-10 / 0 评论 / 0 点赞 / 84 阅读 / 1,445 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-06,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

github项目地址

一、实验目的与要求

  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.完成游戏编译

将源代码与素材复制到相对应的文件夹之中,编译运行程序。
在这里插入图片描述 在这里插入图片描述

修改画面大小,可以展示出完成游戏界面
在这里插入图片描述
在这里插入图片描述

2.修改游戏显示名称

修改AppDelegate.cpp中代码
在这里插入图片描述
在这里插入图片描述
发现cocos2dx不支持中文字符,需要通过如下操作完成中文字符的显示。
由于 VisualStudio 的默认编码方式为 GBK 格式,而 cocos2d-x 引擎的默认编码格式为 UTF-8 格式,故中文会出现无法兼容的情况,所以需要将 GBK 编码转为 UTF-8 编码。
通过资料,得到 GBK 转 UTF-8 代码:
在这里插入图片描述
在这里插入图片描述
最终效果:
在这里插入图片描述

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

首先修改操纵杆的返回类型。
源代码只会返回LEFT、RIGHT、STOP。所以如果需要增加上下移动,需要进一步增加返回的数据量。
这里选择返回操纵杆的移动向量,两个参数代表了bean需要移动的xy向量。
在这里插入图片描述
在更新bean的运动状态中,首先判断向量是否为(0,0),如果是说明不移动,否则进行状态更新。
在这里插入图片描述
Bean移动的速度每帧为4,即三角形的斜边长为4,经过简单的换算可以得到x轴、y轴的移动距离如下图所示。
在这里插入图片描述
同时限定了bean的上下左右移动范围,如果超出范围,会将bean重新退回规定区域内。
在这里插入图片描述

4.增加计分板功能

首先添加UI控件label作为得分板。
在这里插入图片描述
添加得分逻辑,每一次碰撞检测成功时说明吃到球了,可以进行加分。根据球的颜色不同,会增加不同的分数。(白球1分,红球2分,绿球3分)
每次得分后更新得分板。
在这里插入图片描述
效果如图所示
在这里插入图片描述

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

首先添加开始的界面
在这里插入图片描述
并且绑定点击效果,即跳转到游戏界面
在这里插入图片描述
在AppDelegate.cpp中将首场景设置为MyFirstScene
在这里插入图片描述
具体效果见视频

6.增加Replay按钮(10分)

Replay条件设置为当得分 > 10分时,游戏挑战成功
实现方式是在update中检查score是否大于10分,如果是,则暂停游戏画面(否则球仍然会下落),并且展示游戏成功的提示。
在这里插入图片描述
接着在游戏底部添加replay按钮,并为其绑定相对应的函数。
在这里插入图片描述
函数部分将分数归零,重置画面并继续游戏画面。
在这里插入图片描述
在这里插入图片描述

7.优化游戏(5分)

  1. 根据摇杆位置更改bean的移动速度。
    首先设置bean的最大移动速度为6
    在这里插入图片描述
    当遥感位置最大(等于半径时),移动速度为最大值,其他情况按比例缩放。
    在这里插入图片描述
    修改bean的移动动画,将默认移动速度修改为由摇杆力度控制
    在这里插入图片描述
    在这里插入图片描述
    (为了方便演示,将成功分数设定为了大于5分)
0

评论区