专栏首页小灰灰cocos2dx-v3.5 2048(三):菜单实现

cocos2dx-v3.5 2048(三):菜单实现

前言


本节主要包括菜单栏的绘制以及添加触发事件,菜单栏又分为两级,如下面两张图,当点击set时,出现模式选择的菜单项。这里主要利用到了 MenuItemLabel进行菜单的实现

设计


对于菜单栏的设计,我们主要从以下两个方面进行:

  • 菜单的绘制
  • 触发事件处理

1. 菜单的绘制

    本处的菜单实际而言仍旧是label的绘制,然后封装到 MenuItemLabel中,为其添加回调事件,Label的创建与绘制前一节已经说明,因此此处主要注意的是布局问题,具体可参考后面贴出的代码

auto label = Label::createWithSystemFont(text, "Airea", 26);
//label->setTextColor(Color4B(120,120,0, 255));

auto item = MenuItemLabel::create(label);
item->setContentSize(size);

    对于set界面的绘制中,可以看到一条白色的线段,同样是调用cocos2dx的API进行绘制,主要是DrawNode对象的相关方法

auto draw = DrawNode::create();
this->addChild(draw);
draw->drawLine(Vec2(10, 20), Vec2(50, 20), Color4F(0, 0, 0, 1));

    drawLine(起点, 终点, 颜色) 绘制一条线段, drawCircle(..)绘制圆形。。。。。。

2. 触发事件处理

    MenuItem有个回调函数setCallBack()可以直接设定点击后的回调函数,如:

resetmenu->setCallback(CC_CALLBACK_1(GameMenuLayer::resetGameFun, this));

    表示当点击resetmenu后,将调用GameMenuLayer::resetGameFun函数,其源码为:

void GameMenuLayer::resetGameFun(Ref* ref)
{
	GameLayer::getInstance()->restartGame();
	log("reset game");
}

3. CC_CALLBACK_1

    cocos2dx定义的宏,广泛应用于回调函数的处理中,其声明为:

// new callbacks based on C++11
#define CC_CALLBACK_0(__selector__,__target__, ...) std::bind(&__selector__,__target__, ##__VA_ARGS__)
#define CC_CALLBACK_1(__selector__,__target__, ...) std::bind(&__selector__,__target__, std::placeholders::_1, ##__VA_ARGS__)
#define CC_CALLBACK_2(__selector__,__target__, ...) std::bind(&__selector__,__target__, std::placeholders::_1, std::placeholders::_2, ##__VA_ARGS__)
#define CC_CALLBACK_3(__selector__,__target__, ...) std::bind(&__selector__,__target__, std::placeholders::_1, std::placeholders::_2, std::placeholders::_3, ##__VA_ARGS__)

    后面跟随的0,1,2,3分别表示回调函数带0,1,2,3个参数,这里利用了c++11的新特性,使用了std::bind函数

    std:: bind函数实现类似函数指针的方法,采用传值传递参数,在对某个函数进行绑定时,可以指定部分参数或全部参数,也可以不指定任何参数,还可以调整各个参数间的顺序。对于未指定的参数,可以使用占位符_1、_2、_3来表示。_1表示绑定后的函数的第1个参数,_2表示绑定后的函数的第2个参数,其他依次类推

bind(callable, arg_list)

    其中的callbale表示函数指针,arg_list表示参数列表

#include <iostream>
#include <functional>
using namespace std::placeholders;
using namespace std;
void nine(int a1, int a2, int a3, int a4, int a5, int a6, int a7, int a8, int a9)
{
cout << "a1 = " << a1 << endl;
cout << "a2 = " << a2 << endl;
cout << "a3 = " << a3 << endl;
cout << "a4 = " << a4 << endl;
cout << "a5 = " << a5 << endl;
cout << "a6 = " << a6 << endl;
cout << "a7 = " << a7 << endl;
cout << "a8 = " << a8 << endl;
cout << "a9 = " << a9 << endl;
}

int main()

{
	int i = 5;
	cout << "i == 5?" << (i==5) << endl;
	int i1=1,i2=2,i3=3,i4=4,i5=5,i6=6,i7=7,i8=8,i9=9;
	bind(nine, _9, _8, _7, _6, _5,_4,_3,_2,_1)(i1, i2, i3, i4,i5,i6,i7,i8, i9);
	bind(nie, i1, i2, i3, i4, i5, i6, _1, _2, _1)(i9, i7);
	return 0;


}

    输出结果为:

实现


    菜单栏的实现主要涉及到GameMenuLayer, MenuButton, SetMenu三个文件

  1.         MenuButton: 生成MenuItemLabel项并返回
  2.         GameMenuLayer: 则包含显示三个主菜单reset, undo, set,并实现对应的回调函数
  3.         SetMenu: 则显示set子菜单项目,并实现对应的回调函数(即模式切换)

所有的代码均托管在: ttps://github.com/liuyueyi/2048

MenuButton.cpp

#include "MenuButton.h"

bool MenuButton::init()
{
	if(!Node::init())
		return false;
	else
		return true;
}

MenuItem* MenuButton::getMenuItem(const std::string& text, const Size& size)
{
	auto label = Label::createWithSystemFont(text, "Airea", 26);
	//label->setTextColor(Color4B(120,120,0, 255));

	auto item = MenuItemLabel::create(label);
	item->setContentSize(size);

	return item;
}

GameMenuLayer.cpp

#include "GameMenuLayer.h"
#include "MenuButton.h"
#include "GameLayer.h"
#include "GameScene.h"
#include "SetMenu.h"

USING_NS_CC;

GameMenuLayer* GameMenuLayer::_instance = nullptr;
GameMenuLayer* GameMenuLayer::getInstance()
{
	if(_instance == nullptr)
		_instance = create();
	return _instance;
}

bool GameMenuLayer::init()
{
	if(!Layer::init())
		return false;

	this->setContentSize(Size(300, 30));
	this->setPosition(Vec2(10, 370));

	auto menuButton = MenuButton::create();
	auto resetBg = LayerColor::create(Color4B(143, 122, 101, 255), 100, 30);
	this->addChild(resetBg);
	auto resetmenu = menuButton->getMenuItem("Restart", Size(100, 30));
	resetmenu->setPosition(55, 17);
	resetmenu->setCallback(CC_CALLBACK_1(GameMenuLayer::resetGameFun, this));
	
	auto setBg = LayerColor::create(Color4B(143, 122, 101, 255), 50, 30);
	setBg->setPosition(250, 0);
	this->addChild(setBg);
	auto setmenu = menuButton->getMenuItem("Set", Size(40, 30));
	setmenu->setPosition(275, 17);
	setmenu->setCallback(CC_CALLBACK_1(GameMenuLayer::setGameFun, this));
	
	auto undoBg = LayerColor::create(Color4B(143, 122, 101, 255), 60, 30);
	undoBg->setPosition(180, 0);
	this->addChild(undoBg);
	auto undomenu = menuButton->getMenuItem("Undo", Size(60, 30));
	undomenu->setPosition(213, 17);
	undomenu->setCallback(CC_CALLBACK_1(GameMenuLayer::undoGameFun, this));

	auto menu = Menu::create(resetmenu, undomenu, setmenu, NULL);
	//menu->alignItemsHorizontally();
	menu->setPosition(0,0);

	this->addChild(menu);
	return true;
}

void GameMenuLayer::resetGameFun(Ref* ref)
{
	GameLayer::getInstance()->restartGame();
	log("reset game");
}

void GameMenuLayer::setGameFun(Ref* ref)
{
	auto layer = static_cast<GameScene*>(this->getParent());
	auto setmenu = layer->getChildByName("setlayer");
	if(setmenu->isVisible())
		setmenu->setVisible(false);
	else
		setmenu->setVisible(true);
	log("start game");
}

void GameMenuLayer::undoGameFun(Ref* ref)
{
	GameLayer::getInstance()->undoGame();
	log("back to last stat");
}

此处对于void GameMenuLayer::setGameFun(Ref* ref) 进行简单说明, 这次设计中没有将SetMenu设置为单例模式,添加到父节点的是SetMenu的一个对象,这样的情况下,可以通过getChildByName, getChindByTag函数来获取该对象,然后进行相应的修改

对应的将SetMenu加入场景的代码在GameScene的init函数内:

auto setLayer = SetMenu::create();
	setLayer->setName("setlayer");
	setLayer->setVisible(false);
	this->addChild(setLayer);

 SetMenu.cpp

#include "SetMenu.h"
#include "Grid.h"
#include "GameTool.h"
#include "GameLayer.h"
#include "DataConf.h"

bool SetMenu::init()
{
	if(!Layer::init())
		return false;

	this->setContentSize(Size(120, 180));
	this->setPosition(Vec2(195, 185));

	auto bg = LayerColor::create(Color4B(30, 30, 30, 200), 120, 180);
	this->addChild(bg);

	auto draw = DrawNode::create();
	this->addChild(draw);
	//draw->drawLine(Vec2(10, 20), Vec2(50, 20), Color4F(0, 0, 0, 1));

	auto classic = Label::createWithSystemFont(Grid::G2U("经典模式"), "Arial", 25);
	auto soldier = Label::createWithSystemFont(Grid::G2U("小兵模式"), "Arial", 25);
	auto color = Label::createWithSystemFont(Grid::G2U("纯色模式"), "Arial", 25);
	auto sound = Label::createWithSystemFont(Grid::G2U("声音"), "Arial", 25);

	auto item01 = MenuItemLabel::create(classic, CC_CALLBACK_1(SetMenu::classicCallFunc, this));
	item01->setPosition(60, 135 + 22.5f);
	draw->drawLine(Vec2(5, 135), Vec2(115, 135), Color4F(1,1,1,1));
	auto item02 = MenuItemLabel::create(soldier, CC_CALLBACK_1(SetMenu::soldierCallFunc, this));
	item02->setPosition(60, 90 + 22.5f);
	draw->drawLine(Vec2(5, 90), Vec2(115, 90), Color4F(1, 1, 1,1));
	auto item03 = MenuItemLabel::create(color, CC_CALLBACK_1(SetMenu::colorCallFunc, this));
	item03->setPosition(60, 45 + 22.5f);
	draw->drawLine(Vec2(5, 45), Vec2(115, 45), Color4F(1, 1, 1,1));
	auto item04 = MenuItemLabel::create(sound, CC_CALLBACK_1(SetMenu::soundCallFunc, this));
	item04->setPosition(60, 22.5f);
	//draw->drawLine(Vec2(5, 22.5f), Vec2(115, 157.5f), Color4F(0,0,0,1));

	auto menu = Menu::create(item01, item02, item03, item04, nullptr);
	//menu->alignItemsVertically();
	menu->setPosition(0, 0);
	this->addChild(menu);
	return true;
}

void SetMenu::classicCallFunc(Ref* ref)
{
	changeType(1);
}

void SetMenu::soldierCallFunc(Ref* ref)
{
	changeType(0);
}

void SetMenu::colorCallFunc(Ref* ref)
{
	changeType(2);
}

void SetMenu::soundCallFunc(Ref* ref)
{

}

void SetMenu::changeType(int newType)
{
	auto type = Grid::getType();
	if(type == newType) // do not change the game model
		return;
	// do change, then save the game stat and restart new game model
	DataConf::getInstance()->dumpData(type); 
	GameLayer::getInstance()->clearGrids();
	Grid::changeType(newType);
	this->setVisible(false);
}

Label中文显示以及直接添加点击事件


1. 中文显示

    Label创建时,直接赋值中文时,会出现问题(不显示内容,或者乱码),主要是编码格式的问题造成的,其解决方法有从xml,json中读取中文,然后传入;或者直接采用下面函数对中文重新编码

char* Grid::G2U(const char* gb2312)
{
	int len = MultiByteToWideChar(CP_ACP, 0, gb2312, -1, NULL, 0);
	wchar_t* wstr = new wchar_t[len+1];
	memset(wstr, 0, len+1);
	MultiByteToWideChar(CP_ACP, 0, gb2312, -1, wstr, len);
	len = WideCharToMultiByte(CP_UTF8, 0, wstr, -1, NULL, 0, NULL, NULL);
	char* str = new char[len+1];
	memset(str, 0, len+1);
	WideCharToMultiByte(CP_UTF8, 0, wstr, -1, str, len, NULL, NULL);
	if(wstr) delete[] wstr;
	return str;
}

2. 事件绑定

    直接在Label上绑定事件,利用EventListenerTouchOneByOne来实现绑定

auto label = Label::createWithSystemFont("label", "Arial", 40);
this->addChild(label);
label->setPosition(100, 100);
auto listener = EventListenerTouchOneByOne::create();
listener->onTouchBegan = [label](Touch* touch, Event* e){
	log("entered”);
	if(label->getBoundingBox().containsPoint(touch->getLocation()))
		log("truly clicked");
	return false;
};
Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, label);

注意:

  • TouchBegan调用的函数内部的if语句,表示当确切的点击到label时,才会执行相应的代码,也因此需要将具体的逻辑判断写在if语句内
  • 注册listener,除了上面的方法外也可以用_eventDispatcher直接进行,两者效果相同(?)
    • _eventDispatcher->addEventListenerWithSceneGraphPriority(listener, label);
  • 直接绑定和用MenuItem的区别:具体的原理没有去详细研究,就表观而言,MenuItem点击时,会有明显的标签字体放大的动画效果,而直接绑定触发事件时没有相应动画效果,其次就便捷性而言,MenuItem编程实现更加方便

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 人工智能的语言-PYTHON

    1989年的圣诞节33岁的荷兰人Guido van Rossum很是无聊,看完《Monty Python飞行马戏团》后,思绪便信马由缰地乱跑起来,脑子有一个声音...

    企鹅号小编
  • C语言怎么学习?以C语言模拟登录为例,学C语言该当如此方可成

    好了不用看了,看直了也不会有妹子,看题了: C语言编写代码实现,模拟用户登录------看着是不是很简单?,是不是很轻松?,是不是就有这样的代码? (小编随便百...

    企鹅号小编
  • 指针数组和数组指针

    指针数组 :就是指针的数组,数组的元素是指针;  数组指针:就是指向数组的指针。 简单举例说明:     int *p1[10];    声明了一个数组,数组的...

    lpxxn
  • JNI基础

    JNI基础 将java中的字符串转换成C中字符串的工具方法 char* Jstring2CStr(JNIEnv* env, ...

    xiangzhihong
  • 一步一步提高C+编程的方法和步骤!

    门外汉:如果你还是刚刚接触c++,那么你应该先去买一本《C++编程思想》,这本书讲解非常详细,而且通俗易懂,当你将这些代码敲完之后,升级为菜鸟级别了 ? 菜鸟级...

    企鹅号小编
  • Androidstudio编译c/c++jni方法

    开发环境:Androidstudio2.3 开发目的:在Androidstudio上编译c/c++jni并自动生成so库,在java类中引用。 开发过程...

    fanfan
  • SQLite虚拟机

    1 前言 本文主要介绍SQLite虚拟机VDBE,为了更好地了解SQLite虚拟机,文中也加入了一些Lua虚拟机内容来对比学习,更好地了解不同虚拟机之间的异同...

    微信终端开发团队
  • 2017年10大主流编程语言最新排行榜出炉

    前言 据美国科技公司Gizmodo报道,截至2014年9月24日,全世界采用IT操作系统的设备数量已经达到10亿台,IT推动中国移动互联网进入高速发展期,成为所...

    企鹅号小编
  • Python入门讲解

    谢谢大家支持,可以让有兴趣的人关注这个公众号。让知识传播的更加富有活力,谢谢各位读者。 很多人问博主为什么每次的头像是奥黛丽赫本,因为她是博主女神,每天看看女...

    量化投资与机器学习微信公众号
  • C加加是否到了生死存亡的时刻?不,C加加仍然在编程界任是不可替代的

    C++是否逐步被取代 C++最能考察一个人对计算机知识掌握的能力。windows使用C、C++写的,现在又有qt、codeblocks等跨平台开发工具。可以这样...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券