CocoStuido sample----DemoMap 源代码地址
https://github.com/chukong/CocoStudioSamples
大家可以预先下载这个源代码, 等下要用到里面的图片资源哦
一 目标
在本教程里, 我们学习下如何使用CocoStudio来制作一幅可以拖动的地图.
我们使用的cocos2d-x的版本是即将发布的2.2.3(即github上cocos2d-x的master分支较新版本), CocoStudio的版本是1.2.0.1. 不同的版本, 功能上会有差异, 大家学习时, 最好采用对应的版本.
二 创建项目并导入资源
大家可以在下载到的源代码的DemoMap\DemoMap_editor\Resources 目录下找到我们需要的资源.
我们首先打开UI编辑器, 并创建一个新的项目.
然后大家可以在资源面板点击导入文件按钮, 导入这些资源文件
三构建界面
我们将要做的Map的Demo包含三个大层, 提示框层, 界面框层, 地图层.
提示框层是处于最前, 但默认不显示. 下面是界面框层, 接着是地图层.
让我们先来制作地图层吧.
我们从工具栏中拖动一个滚动层到渲染区域.
在渲染区中, 我们可以移动滚动层的位置, 缩放, 旋转, 如下图所示.
我们可以在菜单中, “视图” => “属性”, 打开属性面板.
在属性中, 我们修改下名字为"DragPanel", 尺寸, 坐标.
滑动方向有四个选项, None(无滑动效果), Vertical(垂直滑动), Horizontal(水平滑动), Vertical_Horizontal(双向滑动).
我们这里选择双向滑动.
然后我们再拖动一个图片控件到渲染区, 并作为DragPanel的子节点.
我们修改其名字为map_ImageView, 并设置其文件属性为map.png. 位置和DragPanel重合.
我们接下来再反过来看下DrapPanel的滚动区域宽度, 高度属性.
我们需要把滚动区域宽度高度属性设置成与map_ImageView一样的大小, 即需要滚动的大小.
尺寸大小则应该和我们接下来要做的界面框的大小, 即需要显示的大小.
接下来大家可以按照源代码中的例子, 再继续给DragPanel添加一个层容器button_Panel层,
并为其添加purple_Button, bluestar_Button, orange_Button, blueball_Button几个按钮建筑.
接下来大家打开DragPanel的模拟裁切属性, 这样我们就只看到了需要显示的大小, 便于我们接下来的继续设计.
然后, 大家可以继续添加alert_Panel, box_Panel, 我们这里就不再赘述. 有问题大家可以继续在CocoaChina论坛的CocoStudio专区继续交流哈.
添加好的对象结构面板如下.
四 导出资源
用快捷键Ctrl+E打开导出对话框, 选择导出的路径, 按默认配置导出. 我们稍后会用到这些文件.
五 在cocos2d-x工程中添加导出后的资源
想必各位看官都已经熟练掌握了cocos2d-x工程的创建, 我这里就不再啰嗦了.
创建完工程之后, 需要将我们上面用CocoStudio导出的几个文件拷贝到cocos2d-x工程的Resources文件夹下.
六 代码实现
我们在工程中添加一个CocosGUIExamplesMapScene的类, 我们先来看下CocosGUIExamplesMapScene.h类的声明部分.
//添加头文件#include “cocos2d.h”#include “cocos-ext.h”
//定义一个tag的值#define MAP_BUTTON_TAG 1000
class CocosGUIExamplesMapScene : public cocos2d::CCScene{public : virtual void onEnter(); virtual void onExit(); protected : //游戏关闭按钮回调 void menuCloseCallback(cocos2d:: CCObject* pSender, cocos2d::ui:: TouchEventType type); //地图层初始化函数 void MapInit(); void buildTouchEvent(cocos2d:: CCObject* pSender, cocos2d::ui:: TouchEventType type); //提示框层初始化函数 void MapAlertInit(); //提示框层关闭回调函数 void MapAlertClose(cocos2d:: CCObject* pSender, cocos2d::ui:: TouchEventType type); protected : cocos2d::ui::TouchGroup* m_pUILayer; //layer对象};
我们再来看下CocosGUIExamplesMapScene.cpp, 类的实现部分.
#include “CocosGUIExamplesMapScene.h”
USING_NS_CC ;USING_NS_CC_EXT ;using namespace ui;
//图片路径const char * buildPngPaths ={ “cocosgui/gui_examples/DemoMap/purple_ball1.png” , “cocosgui/gui_examples/DemoMap/blue1.png”, “cocosgui/gui_examples/DemoMap/orange1.png”, “cocosgui/gui_examples/DemoMap/blue_ball1.png”,};
//地图上建筑节点名称const char * buildNames ={ “purple”, “blue star”, “orange”, “blue ball”,};
void CocosGUIExamplesMapScene ::onEnter(){ CCScene::onEnter(); m_pUILayer = TouchGroup::create(); m_pUILayer->scheduleUpdate(); addChild(m_pUILayer); MapInit();//初始化地图层 MapAlertInit();//初始化提示框层}
//退出时清理资源void CocosGUIExamplesMapScene ::onExit(){ m_pUILayer->removeFromParent(); SceneReader::sharedSceneReader()->purge(); GUIReader::shareReader()->purge(); cocos2d::extension:: ActionManager ::shareManager()->purge(); CCScene::onExit();}
//游戏关闭按钮回调void CocosGUIExamplesMapScene ::menuCloseCallback(CCObject* pSender, TouchEventType type ){ if (type == TOUCH_EVENT_ENDED) { CCDirector::sharedDirector()->end(); #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS ) exit(0);#endif }}
void CocosGUIExamplesMapScene ::MapInit(){ //加载数据 Layout* map_root = static_cast <Layout >(GUIReader ::shareReader()->widgetFromJsonFile(“cocosgui/gui_examples/DemoMap/DemoMap.json”)); m_pUILayer->addWidget(map_root); //获取建筑按钮层 Layout button_layout = static_cast< Layout*>( UIHelper::seekWidgetByName(map_root, “button_Panel” )); //获取每个建筑 for (int i = 0; i < button_layout->getChildren()->count(); ++i) { Button* build_button = static_cast <Button >(button_layout->getChildren()->objectAtIndex(i)); //获取建筑 build_button->setTag( MAP_BUTTON_TAG + i);//设置tag //添加点击回调 build_button->addTouchEventListener( this, toucheventselector (CocosGUIExamplesMapScene ::buildTouchEvent)); } //获取返回按钮 Button back_button = static_cast <Button >(m_pUILayer->getWidgetByName(“back_Button”)); //关闭按钮绑定点击回调 back_button->addTouchEventListener( this, toucheventselector (CocosGUIExamplesMapScene ::menuCloseCallback)); }
//当建筑被点击时void CocosGUIExamplesMapScene ::buildTouchEvent(CCObject pSender, TouchEventType type ){ //点击结束事件 if (type == TOUCH_EVENT_ENDED) { //被点击的建筑对象 Button build_button = dynamic_cast< Button>( pSender); //获取提示框层 Layout* alert_panel = dynamic_cast <Layout >(m_pUILayer->getWidgetByName(“alert_Panel”)); alert_panel->setVisible( true); //提示框层上的图片 ImageView alert_imageview = dynamic_cast <ImageView >(alert_panel->getChildByName(“alert_ImageView”)); int index = build_button->getTag() - MAP_BUTTON_TAG ;//获取当前被点击建筑的Index alert_imageview->loadTexture(buildPngPaths); //更新提示框层上的图片 //获取提示框层上的文本 Label alert_label = dynamic_cast <Label >(alert_panel->getChildByName(“alert_Label”)); alert_label->setColor(ccBLACK); alert_label->setTextHorizontalAlignment( kCCTextAlignmentCenter );//设置文字水平居中对齐 alert_label->setTextVerticalAlignment( kCCVerticalTextAlignmentCenter );//设置文字垂直居中对齐 alert_label->setText(buildNames); //更新提示框文字 //获取地图滚动层, 并设置不接收触摸事件 ScrollView dragPanel = static_cast <ScrollView >(m_pUILayer->getWidgetByName(“DragPanel”)); dragPanel->setTouchEnabled( false); //不接收触摸事件 //获取地图层上的建筑, 并设置不接收触摸事件 Layout button_layout = static_cast <Layout >(m_pUILayer->getWidgetByName(“button_Panel”)); CCObject obj = NULL; CCARRAY_FOREACH (button_layout->getChildren(), obj) { Button* build_button = static_cast< Button*>(obj); build_button->setTouchEnabled( false); //不接收触摸事件 } }}
//初始化void CocosGUIExamplesMapScene ::MapAlertInit(){ //获取提示框层 Layout* alert_panel = static_cast <Layout >(m_pUILayer->getWidgetByName(“alert_Panel”)); //获取提示框层关闭按钮 Button close_button = static_cast <Button >(alert_panel->getChildByName(“close_Button”)); //添加关闭按钮点击事件绑定 close_button->addTouchEventListener( this, toucheventselector (CocosGUIExamplesMapScene ::MapAlertClose));}
//当点击了提示框关闭按钮void CocosGUIExamplesMapScene ::MapAlertClose(CCObject pSender, TouchEventType type ){ if (type == TOUCH_EVENT_ENDED) //点击结束时 { //获取提示框层 Layout* map_alert_root = static_cast <Layout >(m_pUILayer->getWidgetByName(“alert_Panel”)); map_alert_root->setVisible( false); //隐藏提示框 //获取地图层并恢复接收触摸事件 ScrollView dragPanel = static_cast <ScrollView >(m_pUILayer->getWidgetByName(“DragPanel”)); dragPanel->setTouchEnabled( true); //获取地图层建筑并恢复接收触摸事件 Layout button_layout = static_cast <Layout >(m_pUILayer->getWidgetByName(“button_Panel”)); CCObject obj = NULL; CCARRAY_FOREACH (button_layout->getChildren(), obj) { Button* build_button = static_cast< Button*>(obj); build_button->setTouchEnabled( true); } }}
然后我们在AppDelegate.cpp中, 添加引用.
#include"CocosGUIExamplesMapScene.h"
修改AppDelegate::applicationDidFinishLaunching函数, 使用CocosGUIExamplesUIAnimationScene启动.
CocosGUIExamplesMapScene *pScene = new CocosGUIExamplesMapScene (); pScene->autorelease(); pDirector->runWithScene(pScene);
好啦, 快运行下吧!
cocos2dx版本是2.2.3，cocostudio版本是1.3.0.1，万分感谢！！