1 游戏中必不可少的 UI 元素
一个成功的游戏离不开友好的用户体验,而用户体验则取决于功能是否合理,界面是否美观等因素,除了游戏的核心玩法之外,游戏中的各种“配置功能”也是必不可缺的,更准确的说,游戏中存在那么些必不可少的 UI 元素。
上图所示是近期非常火爆的游戏《乱斗堂》的截图,内容是其“配置界面”,如果要实现这样一个“配置界面”,如果是你,你该从何下手!首先要有素材(当然请美工制作了),然后我们编写代码,这样一个界面我们可以用一个层来实现,加载各种图片素材,逐一添加至层。其实,这都没什么,只是你需要手动设置坐标,不断的运行调试,才能达到最终想要的效果而已。效果出来了,实现具体的功能,点击操作该如何实现,如果所有显示的图片都是精灵,那么你需要做触摸处理,判断点击有效否,然后可能需要修改精灵图片(不同的点击效果),聪明一点的做法是实用 CCMenu 来实现点击功能,但如此可能会引入其它问题,CCMenu 的触摸优先级别很高,以至于多层 UI 的情况,处理起来变得繁杂。而更聪明一点的做法,就是设计一套 UI 系统,来满足各种需求!
我们在编写游戏之前还需要实现一套自己的 UI 系统?当然不是,即便是 Cocos2d 的第一个 python 版本,也不是一夕而就的,而是开发多个游戏之后总结、规范、封装重用之后的框架,而 UI 系统也符合这么个客观规律。都是为了解决实际开发过程中遇到的问题,重用相同的功能。简化我们的开发。
下面介绍如何使用 CocoStudio 的 UI 编辑器来帮助我们实现这样一个“配置界面”,并且实现其配置功能。
2 使用 CocoStudio UI 编辑器设计配置界面
2.1 首先建立主配置界面:
- 安装好 CocoStudio 程序,并准备好所需要的素材
- 建立新的项目,命名“ChaosFight”,设置分辨率(根据实际需要),这里手动填写分辨率。
- 导入游戏的素材到项目,在界面添加图片框控件,显示背景
- 根据需要添加控件,在这个主界面上我们添加了,一个图片框,下面四个文本按钮,再下面一排四个图片按钮,最下面是两个文本按钮和一个文本框(文本域)。
- 在编辑时,我们需要注意以下几点:
- 设置图片按钮之时,可以设置禁用时显示的图片。所有的可点击操作的控件,需要启用“交互”属性。
- 设置按钮属性 默认图片 与 点击效果图 的图片相同(或者不同,按下效果图如果不设置,实际操作按下也不显示,空白)
- 导出各部分资源文件
3 编写代码控制页面逻辑
#ifndef TestCpp_ChaosFight_h #define TestCpp_ChaosFight_h #include "cocos2d.h" #include "CocosGUI.h" USING_NS_CC; USING_NS_CC_EXT; class ChaosFightUI: public CCLayer{ public: static CCScene* scene(); virtual bool init(); CREATE_FUNC(ChaosFightUI); void tbChangePwdCallback(CCObject* pSender); void tbBindingEmailCallback(CCObject* pSender); void tbChangeRoleCallback(CCObject* pSender); void tbLogoutCallback(CCObject* pSender); void btnSoundEffectCallback(CCObject* pSender); void btnMusicEffectCallback(CCObject* pSender); void btnSavingElectricityCallback(CCObject* pSender); void btnVideoCallback(CCObject* pSender); void tbAboutCallback(CCObject* pSender); void tbClearCacheCallback(CCObject* pSender); void btnXCallback(CCObject* pSender); void tbOkCallback(CCObject* pSender); private: UILayer* ul; UILayer* ulPwd; UIButton* btnX; UITextButton* tbOk; UITextField* tfOldPwd; UITextField* tfNewPwd; UITextField* tfNewPwdConfirm; }; #endif
实现代码
#include "ChaosFight.h" CCScene* ChaosFightUI::scene(){ CCScene* scene = CCScene::create(); CCLayer* layer = ChaosFightUI::create(); scene->addChild(layer); return scene; } bool ChaosFightUI::init(){ bool bRef = false; do{ CC_BREAK_IF(! CCLayer::init()); ul = UILayer::create(); // 设置 UI 层的tag this->addChild(ul, 0, 100); ul->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFight_1/ChaosFight_1.json")); // 获得各个控件,并添加点击事件 UITextButton* tbChangePwd = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbChangePwd")); UITextButton* tbBindingEmail = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbBindingEmail")); UITextButton* tbChangeRole = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbChangeRole")); UITextButton* tbLogout = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbLogout")); UIButton* btnSoundEffect = dynamic_cast<UIButton*>(ul->getWidgetByName("btnSoundEffect")); UIButton* btnMusic = dynamic_cast<UIButton*>(ul->getWidgetByName("btnMusic")); UIButton* btnSavingElectricity = dynamic_cast<UIButton*>(ul->getWidgetByName("btnSavingElectricity")); UIButton* btnVideo = dynamic_cast<UIButton*>(ul->getWidgetByName("btnVideo")); UITextButton* tbAbout = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbAbout")); UITextButton* tbClearCache = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbClearCache")); // 设置字体颜色 tbChangePwd->setTextColor(0, 0, 0); tbBindingEmail->setTextColor(0, 0, 0); tbChangeRole->setTextColor(0, 0, 0); tbLogout->setTextColor(0, 0, 0); tbAbout->setTextColor(0, 0, 0); tbClearCache->setTextColor(0, 0, 0); // 为控件添加处理事件 tbChangePwd->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbChangePwdCallback)); tbBindingEmail->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbBindingEmailCallback)); tbChangeRole->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbChangeRoleCallback)); tbLogout->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbLogoutCallback)); btnSoundEffect->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnSoundEffectCallback)); btnMusic->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnMusicEffectCallback)); btnSavingElectricity->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnSavingElectricityCallback)); btnVideo->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnVideoCallback)); tbAbout->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbAboutCallback)); tbClearCache->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbClearCacheCallback)); bRef = true; }while(0); return bRef; } void ChaosFightUI::tbChangePwdCallback(cocos2d::CCObject *pSender){ // 创建加载修改密码界面 ulPwd 作为类成员属性,以便重用 ulPwd = UILayer::create(); ulPwd->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFightPassword_1/ChaosFightPassword_1.json")); this->addChild(ulPwd); ulPwd->setAnchorPoint(CCPoint(0.5,0.5)); CCSize winSize = CCDirector::sharedDirector()->getWinSize(); ulPwd->setPosition(CCPoint(winSize.width / 2 - 250, winSize.height / 2 - 180)); // 获取点击确定按钮 tbOk = dynamic_cast<UITextButton*>(ulPwd->getWidgetByName("tbOk")); tbOk->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbOkCallback)); tbOk->setTextColor(0, 0, 0); tfOldPwd = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfOldPwd")); tfNewPwd = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfNewPwd")); tfNewPwdConfirm = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfNewPwdConfirm")); tfOldPwd->setColor(ccc3(0, 0, 0)); tfNewPwd->setColor(ccc3(0, 0, 0)); tfNewPwdConfirm->setColor(ccc3(0, 0, 0)); ul->setTouchEnabled(false); } void ChaosFightUI::tbBindingEmailCallback(cocos2d::CCObject *pSender){ CCMessageBox("绑定邮箱", "title"); } void ChaosFightUI::tbChangeRoleCallback(cocos2d::CCObject* pSender){ CCMessageBox("切换角色", "title"); } void ChaosFightUI::tbLogoutCallback(cocos2d::CCObject *pSender){ CCMessageBox("注销", "title"); } void ChaosFightUI::btnSoundEffectCallback(cocos2d::CCObject *pSender){ CCMessageBox("音效", "title"); } void ChaosFightUI::btnMusicEffectCallback(cocos2d::CCObject *pSender){ CCMessageBox("音乐", "title"); } void ChaosFightUI::btnSavingElectricityCallback(cocos2d::CCObject *pSender){ CCMessageBox("省电", "title"); } void ChaosFightUI::btnVideoCallback(cocos2d::CCObject *pSender){ CCMessageBox("片头", "title"); } void ChaosFightUI::tbAboutCallback(cocos2d::CCObject *pSender){ CCMessageBox("关于", "title"); } void ChaosFightUI::tbClearCacheCallback(cocos2d::CCObject *pSender){ CCMessageBox("清楚缓存", "title"); } void ChaosFightUI::btnXCallback(cocos2d::CCObject *pSender){ CCMessageBox("btnX", "title"); } void ChaosFightUI::tbOkCallback(cocos2d::CCObject *pSender){ // 获取文本框值,并且打印 const char* value = tfOldPwd->getStringValue(); CCLog(value); ul->setTouchEnabled(true); this->removeChild(ulPwd); }
- 最后运行效果如下:二级 UI 界面:文本输入框控件:
相关推荐
UI编辑器,很好的工具,开发代码编辑必不可少!
完美国际UI界面编辑器,功能比较强大,可以直接编辑想要的游戏界面
易语言UI界面编辑器源码,UI界面编辑器
cocos2dx3.0 cocostudio UI
使用vue.js和element-ui实现的网页版的JSON编辑器,使用之前需要安装NODE.js和npm,使用之前需要安装NODE.js和npm;非常好的代码示例,开箱即用
UI界面编辑器.rar UI界面编辑器.rar UI界面编辑器.rar UI界面编辑器.rar UI界面编辑器.rar UI界面编辑器.rar
我们有了UI交互、有了动画人物、有了物理模拟,还差最后一步...这次我们使用cocoStudio中的场景编辑器,将先前做过的所有东西都放到一个场景中去。相关博客:http://blog.csdn.net/fansongy/article/details/14544921
CocoStudio是一套基于Cocos2D-X引擎的工具集,包括UI编辑器、动画编辑器、场景编辑器和数据编辑器四个工具。 UI编辑器,主要是便于编辑UI,支持碎图合并,自定义UI; 动画编辑器,可以合并碎图,导入Flash,设置参考...
易语言UI界面编辑器源码。@易语言资源网站。
可以简单的制作出,cocos所需要的自定义图片
Cocos官网上的教程,非常好。实现了Cocos2d-js自动绑定CocostudioUI控件和事件。所有资源来自网络,有侵权请及时提醒。
CocoStudio是一套基于Cocos2D-X引擎的工具集,包括UI编辑器、动画编辑器、场景编辑器和数据编辑器四个工具。 UI编辑器,主要是便于编辑UI,支持碎图合并,自定义UI; 动画编辑器,可以合并碎图,导入Flash,设置...
通过cocostudio中的UI编辑器制作scrollview,在cocos2d-x项目中使用cocostudio导出的文件来实现并显示scrollview,这里是粗糙的介绍一下使用。
整体编辑器的布局 组件的拖放与移动 组件的对齐与多选 Ex_DirectUI代码的简单生成 黑月界面模块代码的简单生成 未完成: 组件的各个属性设置及父子层次 鸣谢:开源:梦,特别帮助:EVA作者(心宇),佬頭 交流群:39110097
CocoStudio是一套基于Cocos2D-X引擎的工具集,包括UI编辑器、动画编辑器、场景编辑器和数据编辑器。UI编辑器和动画编辑器主要面向美术,而场景编辑器和数据编辑器面则面向游戏策划,这四个工具合在一起构成了一套...
python UI可视化设计工具(WxPython可视化编辑器)
实现UI界面随鼠标移动而倾斜,移动UI跟随倾斜,测试感觉效果还可以。
开发环境是CocoStudio 1.4 + Cocos2dx 2.2 把项目文件放到Cocos2dx下的projects目录下即可运行了 压缩包里面包含了 源代码 和资源文件
Python3.x+Pyqt5实现界面和逻辑分离案例01_自己写的,有UI界面源代码(更正之前的错误代码)。