学习cocos2dx 3.0 alpha1 + cocostudio UI Editor编辑器

今天，我们来学习如何实现 cocos2dx 3.3 tilemap 的缩放滑动，以及准确点击对象的功能。首先，我们需要搭建一下开发环境，运行结果的截图如下（此处未提供截图，你可根据实际情况添加）。

1. helloworld.h 代码

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
#include "extensions/cocos-ext.h"
#include "cocostudio/CocoStudio.h"
#include "GUI/CocosGUI.h"

class HelloWorld : public cocos2d::Layer
{
public:
cocos2d::LabelTTF * label;

// 静态方法，用于创建场景
static cocos2d::Scene* createScene();

// 初始化方法，返回布尔值
virtual bool init();

// 关闭菜单的回调函数
void menuCloseCallback(cocos2d::Object* pSender);

// 普通按钮事件处理函数
void buttonEvent(cocos2d::Object* obj, gui::TouchEventType eventType);

// 文字按钮事件处理函数
void textButtonEvent(cocos2d::Object * obj, gui::TouchEventType eventType);

// scheduleUpdate() 调用的方法
void update(float delta);

// 滑动条事件处理函数
void percentChangeEvent(Object *pSender, gui::SliderEventType type);

// 多选框事件处理函数
void checkSelectEvent1(Object *pSender, gui::CheckBoxEventType eventtype);
void checkSelectEvent2(Object *pSender, gui::CheckBoxEventType eventtype);

// 输入框事件处理函数
void textFiledEvent(Object *pSender, gui::TextFiledEventType eventtype);

// 翻页事件处理函数
void pageViewEvent(Object *pSender, gui::PageViewEventType eventtype);

// 手动实现静态 create() 方法
CREATE_FUNC(HelloWorld);

private:
int m_count;
gui::UILayer* uiLayer;
gui::UIPageView *uiPageView;
};

#endif // __HELLOWORLD_SCENE_H__

2. helloworld.cpp 代码

#include "HelloWorldScene.h"

USING_NS_CC;
USING_NS_CC_EXT;
using namespace cocostudio;
using namespace gui;

const int UI_BUTTON_START = 2;

// 创建场景的静态方法
Scene* HelloWorld::createScene()
{
// 创建一个自动释放的场景对象
auto scene = Scene::create();

// 创建一个自动释放的 HelloWorld 层对象
auto layer = HelloWorld::create();

// 将层添加到场景中
scene->addChild(layer);

// 返回场景对象
return scene;
}

// 初始化方法
bool HelloWorld::init()
{
// 首先调用父类的初始化方法
if (!Layer::init())
{
return false;
}

// 获取可见区域的大小和原点
Size visibleSize = Director::getInstance()->getVisibleSize();
Point origin = Director::getInstance()->getVisibleOrigin();

// 添加一个关闭图标，点击可退出程序
auto closeItem = MenuItemImage::create(
"CloseNormal.png",
"CloseSelected.png",
CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));

closeItem->setPosition(Point(origin.x + visibleSize.width - closeItem->getContentSize().width / 2,
origin.y + closeItem->getContentSize().height / 2));

// 创建菜单
auto menu = Menu::create(closeItem, NULL);
menu->setPosition(Point::ZERO);
this->addChild(menu, 1);

// 添加一个显示 "Hello World" 的标签
label = LabelTTF::create("Hello World", "Arial", 24);
label->setPosition(Point(origin.x + visibleSize.width / 2,
origin.y + visibleSize.height - label->getContentSize().height));
this->addChild(label, 1);

// 添加 "HelloWorld" 背景图片
auto sprite = Sprite::create("HelloWorld.png");
sprite->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));
this->addChild(sprite, 0);

m_count = 0;

// 创建 UI 层
uiLayer = UILayer::create();
auto myLayout = GUIReader::shareReader()->widgetFromJsonFile("testUI2_2/testUI2.ExportJson");
uiLayer->addWidget(myLayout);
uiLayer->setPosition(ccp(0, 0));
this->addChild(uiLayer, 5);

// 获取开始按钮并添加触摸事件监听器
UIButton* startBtn = dynamic_cast<UIButton*>(uiLayer->getWidgetByName("Button_22"));
if (startBtn == nullptr)
CCLog("———-%s", startBtn);
startBtn->addTouchEventListener(this, toucheventselector(HelloWorld::buttonEvent));

// 获取滑动条并添加事件监听器
gui::UISlider * pSlider = dynamic_cast<UISlider*>(uiLayer->getWidgetByTag(7));
pSlider->setTouchEnabled(true);
pSlider->addEventListenerSlider(this, sliderpercentchangedselector(HelloWorld::percentChangeEvent));

// 时间条设置
gui::UILoadingBar *pLoadingBar = dynamic_cast<UILoadingBar*>(uiLayer->getWidgetByName("LoadingBar_26"));
pLoadingBar->setPercent(0);

gui::UILoadingBar *pScale9LoadingBar = dynamic_cast<UILoadingBar*>(uiLayer->getWidgetByName("LoadingBar_91"));
pScale9LoadingBar->setScale9Enabled(true);
pScale9LoadingBar->setCapInsets(cocos2d::Rect(2, 5, 10, 2));
pScale9LoadingBar->setPercent(0);

// 启动更新调度
scheduleUpdate();

// 文字按钮设置
gui::UIButton * pButton = dynamic_cast<UIButton*>(uiLayer->getWidgetByName("TextButton_34"));
pButton->setTouchEnabled(true);
pButton->addTouchEventListener(this, toucheventselector(HelloWorld::textButtonEvent));

// 多选框设置
gui::UICheckBox * pCheckBox1 = dynamic_cast<UICheckBox*>(uiLayer->getWidgetByName("CheckBox_35"));
pCheckBox1->setTouchEnabled(true);
pCheckBox1->addEventListenerCheckBox(this, checkboxselectedeventselector(HelloWorld::checkSelectEvent1));

gui::UICheckBox * pCheckBox2 = dynamic_cast<UICheckBox*>(uiLayer->getWidgetByName("CheckBox_36"));
pCheckBox2->setTouchEnabled(true);
pCheckBox2->addEventListenerCheckBox(this, checkboxselectedeventselector(HelloWorld::checkSelectEvent2));

// 输入框设置
gui::UITextField * pTextField = dynamic_cast<UITextField*>(uiLayer->getWidgetByName("TextField_41"));
pTextField->setTouchEnabled(true);
pTextField->setPasswordEnabled(true);
pTextField->addEventListenerTextField(this, textfieldeventselector(HelloWorld::textFiledEvent));

// 拖动场景 scroll view 设置
gui::UIScrollView *pScrollView = dynamic_cast<UIScrollView*>(uiLayer->getWidgetByName("ScrollView_45"));
float fwidth = pScrollView->getSize().width;
float fhight = pScrollView->getSize().height;
pScrollView->setInnerContainerSize(Size(400, 400));
pScrollView->setDirection(SCROLLVIEW_DIR_BOTH);

// 拖拽层设置
gui::UIScrollView *pDragView = dynamic_cast<UIScrollView*>(uiLayer->getWidgetByName("DragPanel_80"));
pDragView->setBackGroundColor(cocos2d::Color3B::GREEN);
pDragView->setTouchEnabled(true);
pDragView->setInnerContainerSize(Size(250, 250));
pDragView->scrollToPercentBothDirection(Point(50, 50), 1, true);
pDragView->setBackGroundColorType(LAYOUT_COLOR_SOLID);

// 获取层容器
Size widgetSize = CCDirector::getInstance()->getWinSize();
gui::UILayout * background = dynamic_cast<UILayout*>(uiLayer->getWidgetByName("Panel_53"));
background->setSize(Size(300, 300));
background->setPosition(ccp(visibleSize.width / 2, visibleSize.height / 2));

// 翻页设置
UIPageView* pageView = UIPageView::create();
pageView->setTouchEnabled(true);
pageView->setSize(Size(240, 130));
Size backgroundSize = background->getContentSize();
pageView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2 +
(backgroundSize.width - pageView->getSize().width) / 2,
(widgetSize.height - backgroundSize.height) / 2 +
(backgroundSize.height - pageView->getSize().height) / 2));

for (int i = 0; i < 3; ++i)
{
UILayout* layout = UILayout::create();
layout->setSize(Size(240, 130));

UIImageView* imageView = UIImageView::create();
imageView->setTouchEnabled(true);
imageView->setScale9Enabled(true);
imageView->loadTexture("cocosgui/scrollviewbg.png");
imageView->setSize(Size(240, 130));
imageView->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));
layout->addChild(imageView);

UILabel* label = UILabel::create();
label->setText(CCString::createWithFormat("page %d", (i + 1))->getCString());
label->setFontSize(30);
label->setColor(Color3B(192, 192, 192));
label->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));
layout->addChild(label);

pageView->addPage(layout);
}

pageView->addEventListenerPageView(this, pagevieweventselector(HelloWorld::pageViewEvent));
uiLayer->addWidget(pageView);

return true;
}

// 普通按钮事件处理函数
void HelloWorld::buttonEvent(Object* obj, TouchEventType eventType)
{
switch (eventType)
{
case TouchEventType::TOUCH_EVENT_BEGAN:
label->setString("button down");
break;
case TouchEventType::TOUCH_EVENT_MOVED:
label->setString("button move");
break;
case TouchEventType::TOUCH_EVENT_ENDED:
label->setString("button release");
break;
case TouchEventType::TOUCH_EVENT_CANCELED:
label->setString("button cancel");
break;
default:
break;
}
}

// 滑动条事件处理函数
void HelloWorld::percentChangeEvent(Object *pSender, gui::SliderEventType type)
{
if (type == SLIDER_PERCENTCHANGED)
{
UISlider * pSlider = dynamic_cast<UISlider*>(pSender);
int percent = pSlider->getPercent();
label->setString(CCString::createWithFormat("percent %d", percent)->getCString());
}
}

// 定时更新方法
void HelloWorld::update(float delta)
{
++m_count;
if (m_count > 100)
{
m_count = 0;
}

UILoadingBar* pLoadingBar = dynamic_cast<UILoadingBar*>(uiLayer->getWidgetByName("LoadingBar_26"));
pLoadingBar->setPercent(m_count);

gui::UILoadingBar *pScale9LoadingBar = dynamic_cast<UILoadingBar*>(uiLayer->getWidgetByName("LoadingBar_91"));
pScale9LoadingBar->setPercent(m_count);
}

// 文字按钮事件处理函数
void HelloWorld::textButtonEvent(cocos2d::Object * obj, gui::TouchEventType eventType)
{
gui::UILabelBMFont * pLabelIBMFont = dynamic_cast<UILabelBMFont*>(uiLayer->getWidgetByName("LabelBMFont_23"));
gui::UILabel * PTextArea = dynamic_cast<UILabel*>(uiLayer->getWidgetByName("TextArea_40"));
gui::UITextField *pTextField = dynamic_cast<UITextField*>(uiLayer->getWidgetByName("TextField_41"));
auto str = pTextField->getStringValue();

switch (eventType)
{
case TouchEventType::TOUCH_EVENT_BEGAN:
pLabelIBMFont->setText("began");
break;
case TouchEventType::TOUCH_EVENT_MOVED:
pLabelIBMFont->setText("moved");
break;
case TouchEventType::TOUCH_EVENT_ENDED:
pLabelIBMFont->setText("ended");
PTextArea->setText(str);
break;
case TouchEventType::TOUCH_EVENT_CANCELED:
pLabelIBMFont->setText("canceled");
break;
default:
break;
}
}

// 多选框事件处理函数
void HelloWorld::checkSelectEvent1(Object *pSender, gui::CheckBoxEventType eventtype)
{
gui::UILabelAtlas * pLabelAtlas = dynamic_cast<UILabelAtlas *>(uiLayer->getWidgetByName("LabelAtlas_38"));
// 此处代码未完整，可根据实际需求补充
}

以上代码实现了 cocos2dx 3.3 中 tilemap 的缩放滑动和准确点击对象的功能，同时包含了各种 UI 控件的事件处理。你可以根据实际需求对代码进行调整和扩展。