Cocos2D-X2.2.3学习笔记5(UI系统)

前言:

1.字体

2.标签

3.菜单

4.进度条

5.计时器

Cocos2d-x中得UI控件没有几个。在游戏制作的过程中也不须要什么UI。即使有些复杂的UI，那都得我们自己来封装的。比方。关卡选择。

它不像做IOS或Android。winform一大堆的UI控件

以下我们来介绍一下比較经常使用的UI

1.字体

Cocos2d-x中有三种字体。TTF/BMFNT/Arial,

它们都是CCLable下得一个子类，CCLable看名字当然知道是标签了，所以我们把标签和字体一起来解说

OK，我们先来看看TTF的字体，CCLableTTF。

我们在C/windows/fonts文件夹下能够看到非常多TTF的字体，这是我们windows系统中自带的字体。苹果手机也有，这样的字体我个人赶脚(感觉)是非常丑，我比較喜欢BMFont的字体，这个我们就高速的过一下吧，知道这么创建即可了、

我们新建一个项目，把INIT函数中多余的代码删了，然后写上我们自己的代码

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }

    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
	CCLabelTTF* ttf= CCLabelTTF::create("Hello Cocos2d-x","fonts/Marker Felt.ttf",21);
	ttf->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
	this->addChild(ttf);

    return true;
}

执行,OK 我们输出了Hello Cocos2d-x在屏幕中心,这个TTF字体的Create静态函数有四个重载。我们就用最简单的第四个就能够了，

看形參名字相信都应该知道每一个參数相应什么吧。这里不解释。。。

。

以下我们来看看另外一种字体。也是我比較喜欢的一种CCLableBMFont

我们换成例如以下代码

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }

    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
	CCLabelBMFont* bmfont=CCLabelBMFont::create("FontTest","fonts/boundsTestFont.fnt");
	bmfont->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
	this->addChild(bmfont);
#pragma region TTF
	/*CCLabelTTF* ttf= CCLabelTTF::create("Hello Cocos2d-x","fonts/Marker Felt.ttf",21);
	ttf->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
	this->addChild(ttf); */
#pragma endregion

    return true;
}

OK。美丽吧？？你们执行报错？？好吧。忘了还有资源文件没拷进去。待会源代码和资源我会打包上传的。

这里我们也是有最简单的方式创建。第二个參数是Resources\fonts目录以下的一个fnt格式的文件。它相应一张图片，打开图片看看，这就是我们执行显示的字体，大家不用纠结fnt这么制作的，它有相应的工具生成。当然，图片还是的相关的美工来做。

我们在看看例如以下代码来制作点效果

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }

    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
	CCLabelBMFont* bmfont=CCLabelBMFont::create("FontTest","fonts/boundsTestFont.fnt");
	bmfont->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
	this->addChild(bmfont);
	CCActionInterval* jump = CCJumpBy::create(0.5f, CCPointZero, 30, 1);
    CCAction* jump_Rever = CCRepeatForever::create(jump);
	bmfont->getChildByTag(0)->runAction(jump_Rever);

    return true;
}

这里CCJumpBy和后面这行看不懂没关系，这是制作一个跳跃的动画。我们后面的章节会解说动画的，我们仅仅要来看看getChildByTag的方法，这表示获得Tag为0的一个精灵，我们在创建字体的时候系统已经帮我们把每一个字母依照先后顺序加上了Tag，这个有点像数组哈，这里我们得到字母F，然后让他运行跳跃的动作

今天有点晚了，我们加高速度。介绍计时器，明天在介绍菜单和进度条

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::CCLayer
{
public:
	HelloWorld();
    // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
    virtual bool init();  

    // there's no 'id' in cpp, so we recommend returning the class instance pointer
    static cocos2d::CCScene* scene();
	void setstring(float ptime);
    // implement the "static node()" method manually
    CREATE_FUNC(HelloWorld);
private:
	float        m_time;
};

#endif // __HELLOWORLD_SCENE_H__

HelloWorldScene.cpp

#include "HelloWorldScene.h"

USING_NS_CC;

CCScene* HelloWorld::scene()
{
    // 'scene' is an autorelease object
    CCScene *scene = CCScene::create();

    // 'layer' is an autorelease object
    HelloWorld *layer = HelloWorld::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }

    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
	CCLabelBMFont* bmfont=CCLabelBMFont::create("FontTest","fonts/boundsTestFont.fnt");
	bmfont->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
	this->addChild(bmfont,0,0);
	CCActionInterval* jump = CCJumpBy::create(0.5f, CCPointZero, 30, 1);
    CCAction* jump_Rever = CCRepeatForever::create(jump);
	bmfont->getChildByTag(0)->runAction(jump_Rever);
	this->schedule(schedule_selector(HelloWorld::setstring),1);

    return true;
}
void HelloWorld::setstring(float ptime)
{
	m_time+=ptime;
	char stringtext[25] = {0};
    sprintf(stringtext, "%2.2f FontTest", m_time);
	CCLabelBMFont* bmfont=(CCLabelBMFont*)this->getChildByTag(0);
	bmfont->setString(stringtext);
}
HelloWorld::HelloWorld()
{
	m_time=0;
}

以下我们来分析一下，首先我们添加了

this->schedule(schedule_selector(HelloWorld::setstring),1);

这就是计时器，表示1秒钟运行一次HelloWorld类中的setstring方法，

我们在setstring方法中做了非常easy的一件事，就是通过

CCLabelBMFont* bmfont=(CCLabelBMFont*)this->getChildByTag(0);

获得我们的bmFONT  然后

bmfont->setString(stringtext);

改动当前的文本。

计时器还有些重载的方法，不会的问问度娘吧，今晚就介绍到这，明天接着

总结：

TTF字体的创建

BMFont字体的创建

怎样获得指定下标的字体

计时器的简单使用

怎样通过Tag获得节点

怎样改动字体文本

附源代码