cocos2dx网游选服界面制作二:选服界面制作
首页 > cocos2dx专栏 > cocos2dx学习    作者:闭眼就天黑   2016年8月1日 11:29 星期一   热度:4564°   百度已收录  
时间:2016-8-1 11:29   热度:4564° 

开始实现选服界面了,首先我们创建一个选服场景类XuanQuLayer,继承Scene。

 

XuanQuLayer.h文件

#ifndef _XUAN_QU_LAYER_
#define _XUAN_QU_LAYER_
#include "cocos2d.h"
#include "myLabel/MyLabel.h"
#include "myUI/MyButton.h"
#include "ui/UIWidget.h"
#include "ui/CocosGUI.h"
#include "cocos-ext.h"
#include <vector>
 
USING_NS_CC;
USING_NS_CC_EXT;
using namespace cocos2d::ui;
 
 
class XuanQuLayer : public Layer
{
public:
XuanQuLayer();
~XuanQuLayer();
public:
static Scene* createScene();
virtual bool init();
 
CREATE_FUNC(XuanQuLayer);
Public:
Vec2 vecpoint;//
};
#endif

 

 

这是一个场景类最基本的创建,然后我们实现cpp文件。

#include "XuanQuLayer.h"
XuanQuLayer::XuanQuLayer()
{
}
 
 
XuanQuLayer::~XuanQuLayer()
{
}
 
Scene* XuanQuLayer::createScene()
{
auto scene = Scene::create();
auto layer = XuanQuLayer::create();
scene->addChild(layer);
return scene;
}
 
bool XuanQuLayer::init()
{
if (!Layer::init())
{
return false;
}
 
auto callback = [](cocos2d::Touch *, cocos2d::Event *)
{
return true;
};
MySimpleLandingInterface::openNewLogin(this);//封装后的背景动画
//屏蔽触摸穿透
auto listener = cocos2d::EventListenerTouchOneByOne::create();
listener->onTouchBegan = callback;
listener->setSwallowTouches(true);
_eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);
 
vecpoint = cocos2d::Director::getInstance()->getVisibleSize();
 
 
return true;
}

 

这样我们场景就创建好了,下面开始实现界面的创建。

创建选服的背景,我们在头文件添加一个方法用来创建背景。

void initBg();//场景背景

 

然后需要的几个控件定义。

MyButton* ButOk;//确定
MyButton* ButClose;//关闭
cocos2d::Sprite* lishidenglu;//历史登陆
cocos2d::Sprite* xuanzequfu;//选择区服
cocos2d::Sprite* sprite_bg;//背景

然后在cpp来实现这个方法。

void XuanQuLayer::initBg()
{
//创建选服背景
sprite_bg = cocos2d::Sprite::create("myui/login/fu_bg.png");
sprite_bg->setPosition(0.5f * vecpoint);
this->addChild(sprite_bg);
 
//新服推荐
auto sprite_jian = cocos2d::Sprite::create("myui/login/xinfutuijian.png");
sprite_jian->setPosition(Vec2(sprite_bg->getPosition() + Vec2(0, sprite_bg->getContentSize().height / 2 - 50)));
sprite_jian->setScale(1.2f);
this->addChild(sprite_jian);
 
 
//历史登陆
lishidenglu = cocos2d::Sprite::create("myui/login/lishidenglu.png");
lishidenglu->setPosition(Vec2(sprite_bg->getPosition() + Vec2( - sprite_bg->getContentSize().width/4, 100)));
lishidenglu->setScale(1.2f);
this->addChild(lishidenglu);
 
 
//选择区服
xuanzequfu = cocos2d::Sprite::create("myui/login/xuanzequfu.png");
xuanzequfu->setPosition(Vec2(sprite_bg->getPosition() + Vec2(sprite_bg->getContentSize().width / 4, 100)));
xuanzequfu->setScale(1.2f);
this->addChild(xuanzequfu);
 
//关闭按钮
ButClose = MyButton::create("myui/sect_name/my_ui_name_back.png");
ButClose->setPosition(0.5f * vecpoint + cocos2d::Vec2(sprite_bg->getContentSize().width / 2 - 30, sprite_bg->getContentSize().height / 2 - 30));
ButClose->addTouchEventListener(CC_CALLBACK_2(XuanQuLayer::CloseEvent, this));
ButClose->setScale(1.2f);
this->addChild(ButClose);
 
//确定按钮
ButOk = MyButton::create("myui/sect_name/my_ui_name_but_01.png");
ButOk->setPosition(0.5f * vecpoint + cocos2d::Vec2(0, - sprite_bg->getContentSize().height / 2 + 60));
ButOk->addTouchEventListener(CC_CALLBACK_2(XuanQuLayer::QueDingEvent, this));
this->addChild(ButOk);
}

 

这样基本的界面都实现了。可以参照设计图。下面我们开始用listview来实现滑动列表了。

 

同样我们在头文件创建一个方法用来实现listview区域。

void initFuWuQiList();//服务器列表
//选择当前区服列表事件
void selectedItemCallEvent(cocos2d::Ref* sender, cocos2d::ui::ListView::EventType type);
static FuWuQiBase* tmp_fwqItem;//临时选中区服暂存
    static std::string tmp_new_ip_and_port;//包装ip和端口号
    static int tmp_server_net_stage;//服务器网络状态
cocos2d::ui::ListView* selv;//选择区服listview

 

然后在cpp实现用法。

//选服列表
void XuanQuLayer::initFuWuQiList()
{
if (nullptr == sprite_bg)
{
return;
}
 
selv = cocos2d::ui::ListView::create();
selv->setDirection(ui::ScrollView::Direction::VERTICAL);//设置方向为垂直方向
selv->setContentSize(cocos2d::Size(440, 300));//设置view区
selv->setPosition(Vec2(510, 130));
selv->setInnerContainerSize(Size(440, 800));
selv->setInertiaScrollEnabled(false);
selv->setClippingEnabled(true);
selv->setBackGroundImageColor(Color3B(245, 252, 124));//背景颜色
selv->addEventListener((ui::ListView::ccListViewCallback)CC_CALLBACK_2(XuanQuLayer::selectedItemCallEvent, this));
//服务器列表的单例
auto ite4 = FUWUQILISTMANAGER.m_map_server_list.begin();
int seq = 0;//
for (; FUWUQILISTMANAGER.m_map_server_list.end() != ite4; ++seq, ++ite4)
{
std::string _serverName = ite4->second.GetServerName();//服务器名称
std::string _serverHost = ite4->second.GetServerIp();//服务器Ip
int _serverPort = ite4->second.GetServerPort();//服务器端口号
int _serverStaus = ite4->second.getServerStatus();//服务器状态
int _serverUserCount = ite4->second.GetServerUserCount();
auto ssss = FuWuQiBase::createFuWuQiSprite(seq, false, _serverName, _serverHost, _serverPort, _serverStaus, _serverUserCount);
_Sxzqf.pushBack(ssss);//添加进
 
Layout* default_item = Layout::create();
default_item->setTouchEnabled(true);
default_item->setContentSize(Size(415,67));
ssss->setPosition(Vec2(40, default_item->getContentSize().height / 2.0f));
 
default_item->addChild(ssss);
 
selv->addChild(default_item);
}
sprite_bg->addChild(selv);
}
 
//在此我们已经实现了选服的listview区域,里面也包含了我们的服务器列表了,下面我们来看看selectedItemCallEvent这个事件回调。
void XuanQuLayer::selectedItemCallEvent(cocos2d::Ref* sender, cocos2d::ui::ListView::EventType type)
{
switch (type)
{
case cocos2d::ui::ListView::EventType::ON_SELECTED_ITEM_START:
{
ListView* listView = static_cast<ListView*>(sender);
CC_UNUSED_PARAM(listView);
CCLOG("select child start index = %ld", listView->getCurSelectedIndex());
if (tmp_fwqItem != nullptr)
{
//获取被点击项
if (tmp_fwqItem != _Sxzqf.at(listView->getCurSelectedIndex()))//选择其他服务器
{
tmp_fwqItem->callBackStatusOff();//非选择
}
}
 
//获取被点击项
//if (listView->getCurSelectedIndex())
{
tmp_fwqItem = _Sxzqf.at(listView->getCurSelectedIndex());
tmp_fwqItem->callBackStatus();//选中
             XuanQuLayer::tmp_new_ip_and_port = tmp_fwqItem->getServerIpPort();
             XuanQuLayer::tmp_server_net_stage = tmp_fwqItem->getServerNetStage();
}
 
 
break;
}
case cocos2d::ui::ListView::EventType::ON_SELECTED_ITEM_END:
{
ListView* listView = static_cast<ListView*>(sender);
CC_UNUSED_PARAM(listView);
CCLOG("select child end index = %ld", listView->getCurSelectedIndex());
break;
}
default:
break;
}
}

 

同理,推荐服务器和历史服务器的listview这里就不介绍了。注意数据的初始化。

 

Listview我到时候抽出去专门写博客整理下。



二维码加载中...
本文作者:闭眼就天黑      文章标题: cocos2dx网游选服界面制作二:选服界面制作
本文地址:https://www.byjth.com/biji/80.html
版权声明:若无注明,本文皆为“闭眼就天黑专栏_技术博客_个人学习总结”原创,转载请保留文章出处。
相关文章

版权所有:《闭眼就天黑专栏_技术博客_个人学习总结》 => 《cocos2dx网游选服界面制作二:选服界面制作
本文地址:https://www.byjth.com/biji/80.html
除非注明,文章均为 《闭眼就天黑专栏_技术博客_个人学习总结》 原创,欢迎转载!转载请注明本文地址,谢谢。

返回顶部    首页    手机版本    版权所有:闭眼就天黑专栏_技术博客_个人学习总结
    站长: 闭眼就天黑    搜索cocos2dx主题 技术支持:闭眼就天黑   皖ICP备14007736号-1  

皖公网安备 34132102000107号

   sitemap