- 分享
Cocos2d - x Label 学习笔记教程
- 2025-8-2 18:31:21 @
Cocos2d - x Label 学习笔记教程
一、前言
在 Cocos2d - x 游戏开发中,Label(标签)是用于显示文字的重要组件,可展示游戏标题、提示信息、得分等内容。它支持多种字体类型,方便我们打造丰富的文字显示效果,下面就来详细学习 Label 的使用。
二、Label 支持的字体类型
Cocos2d - x 中 Label 主要支持以下几种字体类型,各有特点,适用不同场景:
1. BMFont(位图字体)
- 特点:由
.fnt
字体描述文件和.png
字体图集文件组成。渲染效率高,适合固定文字显示(如游戏中的固定 UI 文字),但缩放易失真,若要不失真缩放,需提供多种尺寸字体文件。 - 使用场景:游戏中固定不变、对渲染性能要求高的文字,像游戏界面底部固定的功能按钮文字。
2. TTF(TrueTypeFont,TrueType 字体 )
- 特点:使用系统安装的字体文件(
.ttf
格式),使用方便,无需为每种尺寸和颜色单独准备字体文件,可灵活设置文字大小、颜色等,缩放不易失真。 - 使用场景:需要经常改变文字内容、大小、颜色的场景,比如游戏中的聊天信息、动态变化的得分显示等。
3. SystemFont(系统字体 )
- 特点:直接调用设备系统自带字体,无需额外引入字体文件,能适配不同设备系统字体风格,但字体样式受设备系统限制。
- 使用场景:追求与设备系统文字风格一致,且对字体样式自定义要求不高的简单文字显示,像应用内简单的提示文本。
三、Label 的创建与使用步骤
下面结合 Visual Studio 中 Cocos2d - x 项目(以常见的 HelloWorld 场景示例),通过代码演示 Label 不同创建方式及基本设置,代码都有详细注释,方便理解。
(一)前期准备
在 Cocos2d - x 项目的 HelloWorldScene.cpp
文件中操作,先确保包含必要头文件:
#include "HelloWorldScene.h"
// Cocos2d - x 中 Label 相关头文件,不同创建方式可能涉及不同头文件,这里统一包含常用的
#include "cocos2d.h"
USING_NS_CC;
USING_NS_CC;
是为了使用 Cocos2d - x 的命名空间,方便直接调用相关类和方法,不用每次都写 cocos2d::
。
(二)创建 Label 的几种方式
1. 使用系统字体(SystemFont)创建 Label
bool HelloWorld::init()
{
if ( !Scene::init() )
{
return false;
}
// 获取窗口可见大小和原点坐标,用于设置 Label 位置
auto visibleSize = Director::getInstance()->getVisibleSize();
Vec2 origin = Director::getInstance()->getVisibleOrigin();
// 使用系统字体创建 Label
// createWithSystemFont 方法参数:文字内容、字体名称、字体大小
auto label = Label::createWithSystemFont("老九学堂", "微软雅黑", 36);
// 设置锚点,ANCHOR_MIDDLE 表示锚点在中心,这样设置位置时更方便让 Label 居中显示等
label->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
// 设置 Label 位置在屏幕正中心,visibleSize.width / 2 是水平方向中心,visibleSize.height / 2 是垂直方向中心
label->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
// 将 Label 添加到当前场景(HelloWorld 场景)中,这样才能显示出来
this->addChild(label);
return true;
}
解释:
createWithSystemFont
利用系统已有的字体来创建标签,这里用了 “微软雅黑” 字体(不同系统需确保字体存在,在 Windows 系统一般没问题),显示文字 “老九学堂”,字号 36。setAnchorPoint
调整锚点,锚点是控件自身的一个参考点,Vec2::ANCHOR_MIDDLE
就是 (0.5, 0.5) ,即中心位置,后续setPosition
就是基于这个锚点来定位整个 Label 在场景中的位置。addChild
把创建好的 Label 加入场景渲染树,这样引擎才会在运行时绘制它。
2. 使用 TTF 字体创建 Label
bool HelloWorld::init()
{
if ( !Scene::init() )
{
return false;
}
auto visibleSize = Director::getInstance()->getVisibleSize();
Vec2 origin = Director::getInstance()->getVisibleOrigin();
// 使用 TTF 字体创建 Label
// createWithTTF 方法参数:文字内容、字体文件路径(这里假设字体文件和项目资源在合适路径,比如 resource 文件夹下)、字体大小
// 注意:实际使用要确保 "myFont.ttf" 文件存在项目资源目录,且路径正确
auto label = Label::createWithTTF("My Label Text", "myFont.ttf", 20);
label->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
label->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
this->addChild(label);
return true;
}
解释:
createWithTTF
需指定 TTF 字体文件路径,这里假设字体文件myFont.ttf
在项目资源可访问路径(实际开发要把字体文件放到正确资源目录,比如resource
文件夹,并在项目资源加载配置里处理 )。- 后续
setAnchorPoint
、setPosition
、addChild
作用和前面系统字体创建的 Label 一样,就是设置锚点、位置并加入场景显示。
3. 简单快捷创建 Label(类似直接指定字体名称创建,底层适配可用字体 )
bool HelloWorld::init()
{
if ( !Scene::init() )
{
return false;
}
auto visibleSize = Director::getInstance()->getVisibleSize();
Vec2 origin = Director::getInstance()->getVisibleOrigin();
// 简单创建 Label 方式,参数:文字内容、字体名称(系统存在的字体,如 arial)、字体大小
auto label = Label::create("Hello World!", "arial", 72);
label->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
label->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
this->addChild(label);
return true;
}
解释:
Label::create
这种方式相对简洁,直接传入文字内容、字体名称(这里用arial
字体,要确保系统有该字体 )和字号,底层会根据情况适配创建合适的 Label(可能内部根据环境选择是用 TTF 等方式渲染,只要系统有对应字体就能正常显示 )。- 同样通过
setAnchorPoint
调整锚点,setPosition
放屏幕中心,addChild
加入场景显示。
(三)Label 的其他常用设置
除了创建和基本位置设置,Label 还有很多常用属性可调整,让文字显示更符合需求,以下列举一些:
1. 设置文字颜色
// 在创建好 Label 后,可设置文字颜色,Cocos2d - x 中颜色用 RGB 值表示,范围 0 - 255
label->setTextColor(Color4B(255, 0, 0, 255));
// Color4B 四个参数分别是红色、绿色、蓝色、透明度(alpha),这里设置为红色,不透明
这样就能把 Label 文字颜色改成红色,比如游戏中要突出显示的提示文字设为红色等。
2. 设置文字描边
// 设置文字描边效果,参数:描边颜色、描边宽度
label->enableOutline(Color4B(0, 0, 0, 255), 2);
// 这里给文字加黑色、宽度为 2 的描边,让文字在复杂背景下更清晰
在一些游戏标题文字上,加描边能让文字轮廓更明显,提升视觉效果。
3. 设置文字阴影
// 设置文字阴影,参数:阴影颜色、阴影偏移量(x 方向、y 方向)、模糊半径
label->enableShadow(Color4B(0, 0, 0, 128), Size(2, -2), 5);
// 这里设置黑色、半透明阴影,向右下偏移 (2, -2) ,模糊半径 5,让文字有立体效果
给文字添加阴影,能让文字在界面上更有层次感,比如游戏中的说明文字加阴影突出显示。
四、完整示例整合(包含多种创建和设置)
下面把多种 Label 创建方式和常用设置整合到一个 init
函数里,方便参考完整的使用流程(实际项目可根据需求选择其中一种或几种创建逻辑 ):
#include "HelloWorldScene.h"
#include "cocos2d.h"
USING_NS_CC;
bool HelloWorld::init()
{
if ( !Scene::init() )
{
return false;
}
auto visibleSize = Director::getInstance()->getVisibleSize();
Vec2 origin = Director::getInstance()->getVisibleOrigin();
// 方式一:简单创建 Label
auto label1 = Label::create("Hello World!", "arial", 72);
label1->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
label1->setPosition(Vec2(visibleSize.width / 2, visibleSize.height * 0.7)); // 放在屏幕上方 70% 高度位置
label1->setTextColor(Color4B(255, 0, 0, 255)); // 红色文字
this->addChild(label1);
// 方式二:使用系统字体创建 Label
auto label2 = Label::createWithSystemFont("老九学堂", "微软雅黑", 36);
label2->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
label2->setPosition(Vec2(visibleSize.width / 2, visibleSize.height * 0.5)); // 屏幕中间
label2->enableOutline(Color4B(0, 0, 0, 255), 2); // 黑色描边,宽度 2
this->addChild(label2);
// 方式三:使用 TTF 字体创建 Label(假设 myFont.ttf 存在资源目录)
auto label3 = Label::createWithTTF("My Label Text", "myFont.ttf", 20);
label3->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
label3->setPosition(Vec2(visibleSize.width / 2, visibleSize.height * 0.3)); // 屏幕下方 30% 高度位置
label3->enableShadow(Color4B(0, 0, 0, 128), Size(2, -2), 5); // 添加阴影
this->addChild(label3);
return true;
}
// 场景创建的静态方法,Cocos2d - x 框架要求,用于创建 HelloWorld 场景实例
Scene* HelloWorld::createScene()
{
return HelloWorld::create();
}
说明:
- 这里分别用三种方式创建了
label1
、label2
、label3
三个 Label,设置了不同位置和显示效果(颜色、描边、阴影等 )。 - 实际使用 TTF 字体创建时,要保证
myFont.ttf
文件正确放置在项目资源目录,并且 Cocos2d - x 能正确加载到(可能需要在资源加载配置等地方处理,不同项目结构略有不同 )。
五、总结
通过以上学习,我们掌握了 Cocos2d - x 中 Label 的几种常见创建方式(利用系统字体、TTF 字体等 ),以及文字颜色、描边、阴影等常用属性设置。在实际游戏或应用开发中,可根据文字显示需求(比如是否要灵活改变字体、是否追求高性能渲染等 )选择合适的创建方式和样式设置,让文字展示既美观又符合游戏功能需求,快去自己的 Cocos2d - x 项目里试试这些 Label 用法吧,打造独特的文字显示效果!
2 条评论
-
admin SU @ 2025-8-2 20:14:42
/**************************************************************************** Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd. http://www.cocos2d-x.org Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ****************************************************************************/ #include "HelloWorldScene.h" #include "SimpleAudioEngine.h" USING_NS_CC;//USING_NS_CC; 是为了使用 Cocos2d - x 的命名空间,方便直接调用相关类和方法,不用每次都写 cocos2d:: 。 Scene* HelloWorld::createScene() { return HelloWorld::create(); } // Print useful error message instead of segfaulting when files are not there. static void problemLoading(const char* filename) { printf("Error while loading: %s\n", filename); printf("Depending on how you compiled you might have to add 'Resources/' in front of filenames in HelloWorldScene.cpp\n"); } // on "init" you need to initialize your instance bool HelloWorld::init() { ////////////////////////////// // 1. super init first if ( !Scene::init() ) { return false; } //auto visibleSize = Director::getInstance()->getVisibleSize(); //Vec2 origin = Director::getInstance()->getVisibleOrigin(); /////////////////////////////// //// 2. add a menu item with "X" image, which is clicked to quit the program //// you may modify it. //// add a "close" icon to exit the progress. it's an autorelease object //auto closeItem = MenuItemImage::create( // "CloseNormal.png", // "CloseSelected.png", // CC_CALLBACK_1(HelloWorld::menuCloseCallback, this)); //if (closeItem == nullptr || // closeItem->getContentSize().width <= 0 || // closeItem->getContentSize().height <= 0) //{ // problemLoading("'CloseNormal.png' and 'CloseSelected.png'"); //} //else //{ // float x = origin.x + visibleSize.width - closeItem->getContentSize().width/2; // float y = origin.y + closeItem->getContentSize().height/2; // closeItem->setPosition(Vec2(x,y)); //} //// create menu, it's an autorelease object //auto menu = Menu::create(closeItem, NULL); //menu->setPosition(Vec2::ZERO); //this->addChild(menu, 1); /////////////////////////////// //// 3. add your codes below... //// add a label shows "Hello World" //// create and initialize a label //auto label = Label::createWithTTF("Hello World", "fonts/Marker Felt.ttf", 24); //if (label == nullptr) //{ // problemLoading("'fonts/Marker Felt.ttf'"); //} //else //{ // // position the label on the center of the screen // label->setPosition(Vec2(origin.x + visibleSize.width/2, // origin.y + visibleSize.height - label->getContentSize().height)); // // add the label as a child to this layer // this->addChild(label, 1); //} //// add "HelloWorld" splash screen" //auto sprite = Sprite::create("HelloWorld.png"); //if (sprite == nullptr) //{ // problemLoading("'HelloWorld.png'"); //} //else //{ // // position the sprite on the center of the screen // sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y)); // // add the sprite as a child to this layer // this->addChild(sprite, 0); //} //getInstance()获取单例实例的方法,确保一个类只有一个全局访问点 //获取单例实例的方法,确保一个类只有一个全局访问点 //getVisibleSize()获取可见区域大小,返回窗口或屏幕的可见尺寸 auto visibleSize = Director::getInstance()->getVisibleSize(); // // 使用系统字体创建 Label // createWithSystemFont 方法参数:文字内容、字体名称、字体大小 //Label* label = Label::createWithSystemFont("Hello World", "微软雅黑", 46); // 使用 TTF 字体创建 Label // createWithTTF 方法参数:文字内容、字体文件路径 // (这里假设字体文件和项目资源在合适路径,比如 resource 文件夹下)、字体大小 // 注意:实际使用要确保 "myFont.ttf" 文件存在项目资源目录,且路径正确 //Label* label = Label::createWithTTF("My Label Text","fonts/myfont.ttf",50); // // 简单创建 Label 方式,参数:文字内容、字体名称(系统存在的字体,如 arial)、字体大小 //auto label = Label::create("setAnchorPoint","Felt",48); //auto label = Label::create("setAnchorPoint", "微软雅黑", 48); Label* label = Label::createWithTTF("My Label Text", "fonts/myfont.ttf", 50); // 在创建好 Label 后,可设置文字颜色,Cocos2d - x 中颜色用 RGB 值表示,范围 0 - 255 //label->setTextColor(Color4B(255,0,0,255)); // Color4B 四个参数分别是红色、绿色、蓝色、透明度(alpha),这里设置为红色,不透明 label->setTextColor(Color4B(255, 255, 0, 255)); // 设置文字描边效果,参数:描边颜色、描边宽度 label->enableOutline(Color4B::BLUE,3); // 黑色描边,宽度为3 // 这里给文字加黑色、宽度为 2 的描边,让文字在复杂背景下更清晰 // 设置文字阴影,参数:阴影颜色、阴影偏移量(x 方向、y 方向)、模糊半径 label->enableShadow(Color4B(255, 0, 0, 128), Size(-4, -6), 5); // 这里设置黑色、半透明阴影,向右下偏移 (2, -2) ,模糊半径 5,让文字有立体效果 // 设置锚点,ANCHOR_MIDDLE 表示锚点在中心,这样设置位置时更方便让 Label 居中显示等 label->setAnchorPoint(Vec2::ANCHOR_MIDDLE); //设置 Label 位置在屏幕正中心,visibleSize.width / 2 是水平方向中心,visibleSize.height / 2 是垂直方向中心 //label->setPosition(Vec2(visibleSize/2)); label->setPosition(Vec2(visibleSize.width/2, visibleSize.height/2)); // 将 Label 添加到当前场景(HelloWorld 场景)中,这样才能显示出来 this -> addChild(label); return true; } void HelloWorld::menuCloseCallback(Ref* pSender) { //Close the cocos2d-x game scene and quit the application Director::getInstance()->end(); /*To navigate back to native iOS screen(if present) without quitting the application ,do not use Director::getInstance()->end() as given above,instead trigger a custom event created in RootViewController.mm as below*/ //EventCustom customEndEvent("game_scene_close_event"); //_eventDispatcher->dispatchEvent(&customEndEvent); }
-
2025-8-2 18:35:37@
以下是对上述学习笔记教程中出现的英文单词进行的汉字音译和意思整理:
编程相关类、方法及参数等
英文原文 汉字音译 意思 Cocos2d - x
可可丝吐德 埃克斯 一款跨平台的游戏开发框架 Label
雷贝尔 标签,在Cocos2d - x中用于显示文字的组件 HelloWorldScene
哈喽 沃尔德 斯肯 通常是Cocos2d - x项目中的示例场景名,代表“你好世界”场景 init
伊尼特 初始化方法,用于对场景、对象等进行初始设置 Scene
斯肯 场景,游戏中包含各种游戏元素的环境载体 Director
迪雷克托 导演类,在Cocos2d - x中用于管理场景切换、窗口大小获取等核心功能 getInstance
给特 因斯摊斯 获取单例实例的方法,确保一个类只有一个全局访问点 getVisibleSize
给特 维兹布尔 赛斯 获取可见区域大小,返回窗口或屏幕的可见尺寸 getVisibleOrigin
给特 维兹布尔 奥瑞金 获取可见区域原点坐标,即窗口或屏幕可见区域的起始点坐标 Vec2
维克吐 二维向量类,用于表示二维平面上的坐标点或向量 createWithSystemFont
克瑞特 维斯 西斯腾 方特 使用系统字体创建Label的方法 createWithTTF
克瑞特 维斯 TTF(踢踢爱福) 使用TrueTypeFont字体文件创建Label的方法 create
克瑞特 创建Label的通用方法,根据传入参数适配字体类型创建Label setAnchorPoint
赛特 安可 颇恩特 设置锚点,用于指定Label自身的参考点位置 ANCHOR_MIDDLE
安可 米兜 锚点常量,表示中心锚点 setPosition
赛特 坡斯深 设置位置,用于指定Label在场景中的坐标位置 addChild
艾的 柴尔德 将一个节点(如Label)添加到另一个节点(如场景)下,使其成为子节点并参与渲染 setTextColor
赛特 泰克斯 卡勒 设置文字颜色的方法 Color4B
卡勒 佛 比 表示颜色的结构体,包含红、绿、蓝、透明度四个分量 enableOutline
伊内博 奥特莱恩 启用文字描边效果的方法 enableShadow
伊内博 沙兜 启用文字阴影效果的方法 Size
赛斯 用于表示尺寸的类,可存储宽和高信息 其他词汇
英文原文 汉字音译 意思 BMFont
比艾姆 方特 位图字体,由.fnt和.png文件组成 TTF
(TrueTypeFont
)踢踢爱福(楚 太普 方特) TrueType字体,一种常见的字体文件格式 SystemFont
西斯腾 方特 系统字体,直接调用设备系统自带的字体 resource
瑞涩思 资源,在项目中通常指图片、字体、音频等文件所在的目录 menu
麦纽 菜单,游戏中用于提供各种选项和功能入口的界面元素 MenuItem
麦纽 伊特姆 菜单项,菜单中的单个选项 button
巴腾 按钮,用户可点击触发操作的界面元素 schedule
斯chedule(斯该就) 调度,在Cocos2d - x中用于定时执行某个方法 update
阿普代特 更新,通常用于表示数据或界面的刷新操作 click
克里克 点击,用户通过鼠标或触摸等方式对界面元素进行的操作 count
康特 计数,计算数量或次数 这些音译仅为辅助记忆和方便阅读发音,实际在编程交流中,更推荐使用英文原文进行表达 。
- 1