《Cocos2D-x权威指南》——3.5 精灵类

简介: 本节书摘来自华章计算机《Cocos2D-x权威指南》一书中的第3章,第3.5节,作者:满硕泉著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.5 精灵类

精灵类CCSprite是一张二维的图片对象,它可以用一张图片或者一张图片的一块矩形部分来定义。CCSprite和它的子类可以作为精灵批处理类的子项。它的继承关系如图3-23所示。

image

3.5.1 CCSprite类的成员数据及函数
CCSprite类主要保护的成员数据如表3-10所示。
image

这里需要说明的是,纹理贴图集是将我们需要的部分图片放在一张大小固定的图片,可以节约内存。因为OpenGL机制会把单张图处理成相应大小的长宽都是2的n次方的图片,所以把图片放在一起可以节约空间。关于如何制作纹理贴图集,你将会在后面的章节里看到。
3.5.2 贴图类CCTexture2D
贴图类CCTexture2D是关于OpenGL的概念。在OpenGL中称图片为贴图,在Cocos2D-x中CCTexture2D就是图片对象的意思,可以通过它创建精灵等对象。CCTexture2D类的继承关系如图3-24所示。

image


CCTexture2D类的主要函数如表3-12所示。
image

CCTexture2D类是精灵类和其相关类的基础。以下会看到很多类都可以用CCTexture2D类定义。
3.5.3 精灵批处理类CCSpriteBatchNode
当你需要显示两个或两个以上相同的精灵时,如果逐个渲染精灵,每一次渲染都会调用OpenGL的函数,因为当系统在屏幕上渲染一张贴图的时候,图形处理硬件必须首先准备渲染,然后渲染图形,最后完成渲染以后的清理工作。以上是每次渲染固定的开销,这样帧率就会下降15%左右或者更多。
如果将所有需要渲染的同一张贴图只进行一次准备,一次渲染,一次清理就可以解决这个问题了。这时可以使用CCSpriteBatchNode类来批处理这些精灵,比如游戏屏幕中的子弹等就可以这样做。用它作为父层来创建子精灵,并且使用它来管理精灵类,这样可以提高程序的效率。CCSpriteBatchNode类的继承关系如图3-25所示。
可以看到,CCSpriteBatchNode类继承于节点类和贴图协议。
这里需要说明的是,加入CCSpriteBatchNode类的精灵类越多,提高效率的效果就越明显。不过也有一些限制,所有属于同一个CCSpriteBatchNode类的精灵类都有相同的深度值,也就是说,如果需要呈现一个子弹在人物前面、另外一个子弹在人物后面的不同遮挡关系,获得每个子精灵并单独设置和重排序它们,尽管使用的是同一张贴图,但可以把它们理解为不在同一“层”(并不是布景层)。
此外,所有属于同一个CCSpriteBatchNode类控制的精灵类必须使用同一张贴图,但是这并不是一个限制,如果想使用不同的图片,可以把它们放在同一张贴图集当中。
另外还有一些限制,就是CCSpriteBatchNode类设置锯齿/抗锯齿效果时,所有子精灵也同时设置了锯齿/抗锯齿效果,不可以单独设置。同样不能单独设置的还有混合函数(blendfunc)。可以把CCSpriteBatchNode类理解为CCLayer类,只不过CCSpriteBatchNode类只接受CCSprite类和它的子类。下面介绍CCSpriteBatchNode精灵批处理类。
CCSpriteBatchNode类的主要函数见表3-13。
image

创建方法的第一个参数可以是贴图对象,也可以是图片路径。这里主要说明两个创建方法的第二个参数。这个参数是子节点的数量。当然,如果使用第一种方法不显示的定义子节点的数量,系统会使用默认值29,在运行时如果超过空间了,会增加33%的容量。
下面介绍精灵帧类CCSpriteFrame。
3.5.4 精灵帧类CCSpriteFrame
精灵帧的概念是相对于动画而产生的。一个精灵是固定的节点,它可以拥有许多精灵帧(CCSpriteFrame),在它们之间切换就形成了动画。CCSpriteFrame类的继承关系如图3-26所示。

image


CCSpriteFrame类通过贴图定义,也可以是贴图的一部分,可以通过精灵的setDisplayFrame函数来设置当前显示的精灵帧。它的主要函数见表3-14。
image

3.5.5 精灵帧缓存类CCSpriteFrameCache
精灵帧缓存类CCSpriteFrameCache用来存储精灵帧,提前缓存起来有助于提高程序的效率。 CCSpriteFrameCache是一个单例模式,不属于某个精灵,是所有精灵共享使用的。CCSpriteFrameCache类的继承关系如图3-27所示。

image


CCSpriteFrameCache类的主要函数见表3-15。
image
image

学了这么多基础知识,你可能会有些厌倦了,下一节就看看使用的例子。
3.5.6 实例:精灵类及其相关类的使用
tests项目中的SpriteTest目录下是关于精灵类的使用示例。首先是定义CCSprite类的使用方法,SpriteTest.cpp文件中Sprite1类中的addNewSpriteWithCoords函数,如代码清单3-29所示。
代码清单3-29 CCSprite类的使用方法

void Sprite1::addNewSpriteWithCoords(CCPoint p)
{
    int idx = (int)(CCRANDOM_0_1() * 1400.0f / 100.0f);
    int x = (idx%5) * 85;
    int y = (idx/5) * 121;

    CCSprite* sprite = CCSprite::create("Images/grossini_dance_atlas.png", CCRectMake(x,y,85,121) );
    addChild( sprite );

    sprite->setPosition( ccp( p.x, p.y) );
    //后面是动作的定义,这里暂时不讨论,代码省略
    ...
}

这段代码很清晰,首先确定在贴图中取图片的位置,然后根据这个位置选取图片并定义。第一个参数是图片地址,第二个参数是矩形,前两个参数起点为取图的起点横纵坐标,后两个参数为矩形宽高。运行效果如图3-28所示。

image


下面来看新建精灵批处理类CCSpriteBatchNode的示例,出自tests项目,SpriteTest目录下SpriteTest.cpp文件中SpriteBatchNode1类中的构造函数和addNewSpriteWithCoords方法如代码清单3-30所示。
代码清单3-30 新建CCSpriteBatchNode类的示例
SpriteBatchNode1::SpriteBatchNode1()
{
    setTouchEnabled( true );

    CCSpriteBatchNode* BatchNode = CCSpriteBatchNode::create("Images/grossini_dance_atlas.png", 50);
    addChild(BatchNode, 0, kTagSpriteBatchNode);
    
    CCSize s = CCDirector::sharedDirector()->getWinSize();
    addNewSpriteWithCoords( ccp(s.width/2, s.height/2) );
}
void SpriteBatchNode1::addNewSpriteWithCoords(CCPoint p)
{
    CCSpriteBatchNode* BatchNode = (CCSpriteBatchNode*) getChildByTag( kTagSpriteBatchNode );
    
    int idx = CCRANDOM_0_1() * 1400 / 100;
    int x = (idx%5) * 85;
    int y = (idx/5) * 121;
    
    CCSprite* sprite = CCSprite::create(BatchNode->getTexture(), CCRectMake(x,y,85,121));
    BatchNode->addChild(sprite);

    sprite->setPosition( ccp( p.x, p.y) );
    //后面是动作的定义,这里暂时不讨论,代码省略
    ...
}

首先看SpriteBatchNode1的构造函数,定义CCSpriteBatchNode类,第一个参数是贴图路径,第二个参数是预估的CCSprite类个数。在addNewSpriteWithCoords方法中把新建的方法作为子节点加入CCSpriteBatchNode类中,运行效果如图3-29所示。

image


下面分别看一下精灵类和精灵批处理类改变z轴顺序并改变遮挡关系的方法。首先看精灵类改变z轴顺序并改变遮挡关系的方法,如代码清单3-31所示。
代码清单3-31 精灵类改变z轴顺序并改变遮挡关系的方法
void SpriteZOrder::reorderSprite(float dt)
{
    CCSprite* sprite = (CCSprite*)(getChildByTag(kTagSprite1));
    int z = sprite->getZOrder();
    if( z < -1 )
        m_dir = 1;
    if( z > 10 )
        m_dir = -1;
    z += m_dir * 3;
    reorderChild(sprite, z);
}

首先通过getZOrder方法获得目前的z轴值,然后改变后父节点调用reorderChild函数,第一个参数是精灵对象,第二个参数是设置的z轴值。
下面来看精灵批处理类改变z轴顺序并改变遮挡关系的方法,如代码清单3-32所示。
代码清单3-32 精灵批处理类改变z轴顺序并改变遮挡关系的方法

void SpriteBatchNodeZOrder::reorderSprite(float dt)
{
    CCSpriteBatchNode* batch= (CCSpriteBatchNode*)(getChildByTag( kTagSpriteBatchNode ));
    CCSprite* sprite = (CCSprite*)(batch->getChildByTag(kTagSprite1));
    int z = sprite->getZOrder();
    if( z < -1 )
        m_dir = 1;
    if( z > 10 )
        m_dir = -1;
    z += m_dir * 3;
    batch->reorderChild(sprite, z);
}

两者的区别就是,这次父节点就是精灵批处理类调用reorderChild函数。运行效果如图3-30所示。

image

精灵类设置锯齿和抗锯齿的方法,如代码清单3-33所示,出自tests项目中的SpriteTest目录下SpriteTest.cpp文件中的SpriteAliased类中的onEnter和onExit函数。
代码清单3-33 精灵类设置锯齿和抗锯齿的方法

void SpriteAliased::onEnter()
{
    SpriteTestDemo::onEnter();
    CCSprite* sprite = (CCSprite*)getChildByTag(kTagSprite1);
    sprite->getTexture()->setAliasTexParameters();
}
void SpriteAliased::onExit()
{
    CCSprite* sprite = (CCSprite*)getChildByTag(kTagSprite1);
    sprite->getTexture()->setAntiAliasTexParameters();
    SpriteTestDemo::onExit();
}

首先精灵类通过getTexture获得贴图,分别调用setAliasTexParameters设置锯齿,调用setAntiAliasTexParameters设置抗锯齿。
提示 为什么要设置抗锯齿呢?因为受分辨率的制约,在渲染物体时,被绘制的物体边缘总会或多或少地呈现三角形的锯齿,抗锯齿对图像边缘进行柔化处理,使图像边缘看起来更平滑,更接近实物的物体。因为默认是抗锯齿,所以抗锯齿不用设置,锯齿需要在进入和出场景时设置。
运行效果如图3-31所示,左边的是锯齿,右边的是抗锯齿。二者的区别可以在相对较低分辨率的设备上明显看到。

image

代码清单3-34是定义和使用CCSpriteFrameCache类的函数,出自tests项目,是SpriteTest目录下SpriteTest.cpp文件中的SpriteFrameTest类中的onEnter函数。
代码清单3-34 定义和使用CCSpriteFrameCache类的方法

CCSpriteFrameCache* cache = CCSpriteFrameCache::sharedSpriteFrameCache();
    cache->addSpriteFramesWithFile("animations/grossini.plist");
    cache->addSpriteFramesWithFile("animations/grossini_gray.plist", "animations/grossini_gray.png");
    cache->addSpriteFramesWithFile("animations/grossini_blue.plist", "animations/grossini_blue.png");
    m_pSprite1 = CCSprite::createWithSpriteFrameName("grossini_dance_01.png");
    m_pSprite1->setPosition( ccp( s.width/2-80, s.height/2) );
    CCSpriteBatchNode* spritebatch = CCSpriteBatchNode::create("animations/grossini.png");
    spritebatch->addChild(m_pSprite1);
    addChild(spritebatch);

    CCArray* animFrames = CCArray::create(15);

    char str[100] = {0};
    for(int i = 1; i < 15; i++) 
    {
        sprintf(str, "grossini_dance_%02d.png", i);
        CCSpriteFrame* frame = cache->spriteFrameByName( str );
        animFrames->addObject(frame);
    }

首先是通过贴图集的plist文件和图的路径传入addSpriteFramesWithFile函数定义,然后通过spriteFrameByName传入图片名称获得精灵帧缓存类CCSpriteFrameCache对象。要在onExit函数中删除这些精灵帧缓存,如代码清单3-35所示。
代码清单3-35 删除精灵帧缓存

void SpriteFrameTest::onExit()
{
    SpriteTestDemo::onExit();
    CCSpriteFrameCache *cache = CCSpriteFrameCache::sharedSpriteFrameCache();
    cache->removeSpriteFramesFromFile("animations/grossini.plist");
    cache->removeSpriteFramesFromFile("animations/grossini_gray.plist");
    cache->removeSpriteFramesFromFile("animations/grossini_blue.plist");
}

调用removeSpriteFramesFromFile删除即可。
下面来看精灵帧类的使用方法。首先是创建精灵帧类,如代码清单3-36所示,出自tests项目中SpriteTest目录下SpriteTest.cpp文件中SpriteAnimationSplit类中的构造函数。
代码清单3-36 创建精灵帧类

CCSpriteFrame *frame0 = CCSpriteFrame::create(texture, CCRectMake(132*0, 132*0, 132, 132));
    CCSpriteFrame *frame1 = CCSpriteFrame::create(texture, CCRectMake(132*1, 132*0, 132, 132));
    CCSpriteFrame *frame2 = CCSpriteFrame::create(texture, CCRectMake(132*2, 132*0, 132, 132));
    CCSpriteFrame *frame3 = CCSpriteFrame::create(texture, CCRectMake(132*3, 132*0, 132, 132));
    CCSpriteFrame *frame4 = CCSpriteFrame::create(texture, CCRectMake(132*0, 132*1, 132, 132));
    CCSpriteFrame *frame5 = CCSpriteFrame::create(texture, CCRectMake(132*1, 132*1, 132, 132));
    CCSprite* sprite = CCSprite::create(frame0);

函数通过create函数创建,并用第0帧创建精灵类。删除无用的精灵帧如代码清单3-37所示,出自SpriteAnimationSplit类的onExit函数。
代码清单3-37 删除无用的精灵帧

void SpriteAnimationSplit::onExit()
{
    SpriteTestDemo::onExit();
    CCSpriteFrameCache::sharedSpriteFrameCache()->removeUnusedSpriteFrames();
}

获得精灵帧缓存单例,并调用removeUnusedSpriteFrames就可以删除无用的精灵帧。下一节介绍Cocos2D-x中的摄像机类。

相关文章
|
6月前
|
编解码 前端开发 UED
CocosCreator 面试题(十一)Cocos Creator 屏幕适配
CocosCreator 面试题(十一)Cocos Creator 屏幕适配
260 0
|
6月前
|
计算机视觉
CocosCreator 面试题(十九) Cocos Creator 材质 shader 分别是什么?
CocosCreator 面试题(十九) Cocos Creator 材质 shader 分别是什么?
237 0
|
JavaScript Android开发 C++
【Cocos2d-x】开发基础-第一个Cocos2d-x游戏
【Cocos2d-x】开发基础-第一个Cocos2d-x游戏
229 0
|
缓存 JavaScript 前端开发
《Cocos2D权威指南》——3.6 CCSprite精灵类
本节书摘来自华章计算机《Cocos2D权威指南》一书中的第3章,第3.6节,作者:王寒,屈光辉,周雪彬著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1231 0
|
存储 缓存 JavaScript
《Cocos2D权威指南》——3.5 CCTexture纹理类
本节书摘来自华章计算机《Cocos2D权威指南》一书中的第3章,第3.5节,作者:王寒,屈光辉,周雪彬著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1409 0
|
容器
《Cocos2D-x权威指南》——3.6 摄像机类
本节书摘来自华章计算机《Cocos2D-x权威指南》一书中的第3章,第3.6节,作者:满硕泉著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1252 0
|
JavaScript 前端开发
《Cocos2D-x权威指南》——3.9 绘制图形
本节书摘来自华章计算机《Cocos2D-x权威指南》一书中的第3章,第3.9节,作者:满硕泉著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1190 0
|
JavaScript
《Cocos2D权威指南》——3.3 CCScene场景类
本节书摘来自华章计算机《Cocos2D权威指南》一书中的第3章,第3.3节,作者:王寒,屈光辉,周雪彬著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1140 0
|
缓存 前端开发 JavaScript
《Cocos2D-x权威指南》——3.3 场景类
本节书摘来自华章计算机《Cocos2D-x权威指南》一书中的第3章,第3.3节,作者:满硕泉著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1277 0