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方法中做了很简单的一件事，就是通过

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

获得我们的bmFONT  然后

bmfont->setString(stringtext);

修改当前的文本。

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

总结：

TTF字体的创建

BMFont字体的创建

如何获得指定下标的字体

       计时器的简单使用

如何通过Tag获得节点

        如何修改字体文本

附源码