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获得节点

怎样改动字体文本

附源代码

时间: 2025-01-10 07:02:23

Cocos2D-X2.2.3学习笔记5(UI系统)的相关文章

stm32学习笔记之win8系统下,keil4出现黑块的解决方法

前不久,笔者安装keil4启动会出现黑块,如图所示 当时询问了不少技术群都没有找到解决办法,并且还在百度贴吧发贴,最终都无果而终 这是当时发贴地址 http://tieba.baidu.com/p/3176578044 后来重做了个系统,才勉强能使用.直至今天又出现了同样的状况.在此之间笔者发现当keil4出现黑块,win8自带的记事本也会出现未响应状况,于是上网找解决方法,最终网友 oafaq给了我思路 这是他的原文地址 http://blog.sina.com.cn/key9928 .原来我

20151221jquery学习笔记---日历UI

妹的,这几天真是无语了,参加了一个无聊的比赛,简直浪费时间,好几天没学jquery啊,今天学了一点,不过快要期末考试了,估计得攒到寒假了啊. 日历(datepicker) UI, 可以让用户更加直观的. 更加方便的输入日期, 并且还考虑不同国家的语言限制,包括汉语.一. 调用 datepicker()方法 $('#date').datepicker(); 二. 修改 datepicker()样式日历 UI 的 header 背景和对话框 UI 的背景采用的是同一个 class,所以,在此之前已经

IOS 开发学习笔记-基础 UI(10)九宫格布局,块动画,字典转模型,Xib使用

大概如下图示:九个应用图标的样子 功能分析 (1)以九宫格的形式展示应用信息 (2)点击下载按钮后,做出相应的操作 步骤分析 (1)加载应用信息 (2)根据应用的个数创建对应的view (3)监听下载按钮点击 思路整理 要在支持文件夹里,放入 plist 文件,且拖拽素材到 supporting files,注意勾选的项目的区别: 大多数情况,往项目中拖拽素材时,通常选择 Destination, Folders:选择第一项:创建组,这样 xcode 导航显式的是黄色文件夹,要知道,Xcode中

Linux学习笔记(三):系统运行级与运行级的切换

1.Linux系统与其他的操作系统不同,它设有运行级别.该运行级指定操作系统所处的状态.Linux系统在任何时候都运行于某个运行级上,且在不同的运行级上运行的程序和服务都不同,所要完成的工作和所要达到的目的也都不同. 2.Linux(Red Hat 9.0)设置了7个不同的运行级,系统可以在这些运行级别之间进行切换以完成不同的工作. 3.接下来简单介绍7个系统运行级: (1).运行级0:关闭计算机. (2).运行级1:单用户模式. (3).运行级2:多用户模式(不带网络文件系统NFS支持功能).

Linux学习笔记:Linux系统的进程调度(任务调度)

今天我们学习了Linux系统的进程调度,进程调度是为了在未来某个时间点,让系统自动执行我们事先编写好的命令或脚本的列表,从而使得即使用户不在计算机旁边也可以按时完成任务.这样有利于我们更好的进行任务计划以及在需要执行任务的时候自动完成我们设定好的命令,从而完成任务. 当然为了能够进行进程调度,就必须要有一种机制能够识别事件发生的时间并且能够运行用户所预期的命令:这种机制在Linux中是通过特定的守护进程来实现的.这类的进程有: atd:将预先编写好的命令在未来某个时间点执行一次. crond:

Linux学习笔记(三):系统执行级与执行级的切换

1.Linux系统与其它的操作系统不同,它设有执行级别.该执行级指定操作系统所处的状态.Linux系统在不论什么时候都执行于某个执行级上,且在不同的执行级上执行的程序和服务都不同,所要完毕的工作和所要达到的目的也都不同. 2.Linux(Red Hat 9.0)设置了7个不同的执行级,系统能够在这些执行级别之间进行切换以完毕不同的工作. 3.接下来简介7个系统执行级: (1).执行级0:关闭计算机. (2).执行级1:单用户模式. (3).执行级2:多用户模式(不带网络文件系统NFS支持功能).

Hadoop 学习笔记五 ---Hadoop系统通信协议介绍

本文约定: DN: DataNode TT: TaskTracker NN: NameNode SNN: Secondry NameNode JT: JobTracker 本文介绍Hadoop各节点和Client之间通信协议. Hadoop的通信是建立在RPC的基础上,关于RPC的详解介绍大家可以参照 "hadoop rpc机制 && 将avro引入hadoop rpc机制初探" Hadoop中节点之间的通信是比较复杂的一个网络,若可以把它们之间的通信网络了解清楚,那么

学习笔记1-安卓系统架构

四层组成. 1.      红色最底层是Linux. 2.      绿色第三方应用库(C语言). 3.      黄色虚拟机,谷歌针对Java开发的虚拟机.(dx→.class→.dex) 4.      蓝色Java语言开发 待补充 ...

python学习笔记(日志系统实现)

博主今天在自己的接口自动化框架中添加了日志系统 基于python自带的logging库.包括日志主函数.生成日志文件: 1 # -*- coding: utf-8 -*- 2 # 日志系统 3 # 时间:2017-08-31 4 # 姓名:xx 5 6 import logging 7 import os 8 from datetime import datetime 9 10 11 class MainLog: 12 def __init__(self): 13 pass 14 15 @sta