cocos2d-x中的精灵细说

cocos2d-x中的精灵细说,第1张

概述什么是精灵? 精灵是一个2D图像,通过改变它的旋转角度、位置、尺寸、颜色等属性可以使其运动或者变换。 创建精灵 创建精灵的方式有多种,使用哪种则取决于你的需要。你可以通过不同的图片格式(包括PNG,JPEG,TIFF,以及其他格式)创建精灵(Sprite)。接下来我们就将一起来讨论这些创建精灵的方法。 创建一个精灵 使用指定图片创建一个Sprite: auto mySprite = Sprite: 什么是精灵?

精灵是一个2D图像,通过改变它的旋转角度、位置、尺寸、颜色等属性可以使其运动或者变换。

创建精灵

创建精灵的方式有多种,使用哪种则取决于你的需要。你可以通过不同的图片格式(包括PNG,JPEG,TIFF,以及其他格式)创建精灵(Sprite)。接下来我们就将一起来讨论这些创建精灵的方法。

创建一个精灵

使用指定图片创建一个Sprite:

auto mySprite = Sprite::create("mysprite.png");

上述代码中使用“mysprite.png”图片文件创建了一个Sprite。而结果表明,该方法所创建的Sprite使用了整张图片。Sprite与“mysprite.png”图片的尺寸相同。也就是说,如果“mysprite.png”图片的尺寸是200200,那么所创建的Sprite也是200200。

使用矩形创建一个Sprite

上述例子中所创建的精灵与原始图片的尺寸相同。如果你想要创建一个只显示一张图片特定部分的Sprite,那么你可以使用Rect

Rect有四个值:origin x,origin y,wIDthheight,既原点x,原点y,宽,以及高。

auto mySprite = Sprite::create("mysprite.png",Rect(0,40,40));

Rect从左上角开始创建,这与从左下角开始布局的屏幕坐标相反。所以,这个Sprite只是图像的一部分。在这个例子中,Sprite的尺寸是左上角40*40的部分。

如果你没有一个特定的Rect,Cocos2d-x将自动使用指定的整张图片的长和宽。看一看下面的例子,如果我们使用200*200尺寸的图片,下面的语句中实现的效果是相同的。

auto mySprite = Sprite::create("mysprite.png");auto mySprite = Sprite::create("mysprite.png",200,200));
使用Sprite Sheet创建一个精灵

Sprite Sheet是一个将多个精灵合并到一个文件的方法。相对于把每个精灵放在单独的文件夹中,这种方式减小了整个文件的大小。这意味着你将很大程度地减少内存的使用、文件大小和加载时间。

另外,为了通过批处理来实现更好的性能,我们必须使用Sprite Sheet。更多内容请查看高级篇中的内容。

当使用Sprite Sheet时,首先将其加载到SpriteFrameCache中。SpriteFrameCache是一个保存SpriteFrame,以便我们能很快访问到SpriteFrame的缓存类。SpriteFrame是一个包含了图像名和特定精灵尺寸(Rect)的对象。

SpriteFrameCache可以避免多次加载SpriteFrameSPriteFrame只加载一次,并被保存到SpriteFrameCache中。

下面是一个Sprite Sheet的例子:

我们来仔细分析一下:

正如我们在Sprite Sheet中所看到的,它减小了不必要的空间,并将所有精灵整合到了同一个文件中。

让我们把这些联系在一起!

加载一个Sprite Sheet

将Sprite Sheet加载到SpriteFrameCache中,或许是在AppDelegate中:

// load the Sprite Sheetauto spritecache = SpriteFrameCache::getInstance();// the .pList file can be generated with any of the tools mentioned belowspritecache->addSpriteFramesWithfile("Sprites.pList");

我们已经把一个Spritesheet加载到了SpriteFrameCache中,现在利用它就可以创建一个Sprite对象了。

从SpriteFrameCache中创建一个精灵

下面从SpriteFrameCache中创建一个精灵。

auto mysprite = Sprite::createWithSpriteFramename("mysprite.png");

从SpriteFrame中创建一个精灵

另一种创建精灵的方式是从SpriteFrameCache中获取SpriteFrame,然后使用SpriteFrame创建精灵,例如:

    // this is equivalent to the prevIoUs example,// but it is created by retrIEving the spriteframe from the cache.    auto newspriteFrame = SpriteFrameCache::getInstance()->getSpriteFrameByname("mysprite.png");    auto newSprite = Sprite::createWithSpriteFrame(newspriteFrame);

创建Sprite Sheet的方法

创建Sprite Sheet是一个复杂的过程。幸运的是可以使用一些工具自动创建它们。这些工具还可以提供更多的参数,通过调整参数你可以优化Sprite Sheet。这里提供几个工具:

Cocos Studio Texture Packer Zwoptex 控制精灵

创建完一个精灵之后,我们可以通过设置它的多个属性来控制它。
如下:

 

锚点和位置 锚点

锚点是一个定点,设置精灵位置的时候可以通过锚点来指定使用精灵的哪个部分。
锚点只影响可以修改的属性,包括scale、rotation和skew,不包含color和opacity。锚点使用左下角坐标系统。这意味着当设置X、Y坐标值时你需要确保是从左下角开始计算。默认情况下,所有节点对象的锚点都是(0.5,0.5)。
设置锚点很简单:

    // DEFAulT anchor point for all Sprites    mySprite->setAnchorPoint(0.5,0.5);    // bottom left    mySprite->setAnchorPoint(0,0);    // top left    mySprite->setAnchorPoint(0,1);    // bottom right    mySprite->setAnchorPoint(1,0);    // top right    mySprite->setAnchorPoint(1,1);

如下图所示:

被锚点影响的精灵属性

锚点只影响可以改变的属性,包括scale,rotation和skew。

位置(position)

锚点作为起始点时就会影响精灵的位置。如下图中的红线,为精灵位置的参考线。当改变锚点值时,精灵的位置就发生了改变。需要注意的是,这些变化都是因为改变了锚点值。在这里不使用setposition()函数:

还有更多其他的方式可以设置位置。使用特定的setposition()语句也可以设置精灵对象。

    // position a sprite to a specific position of x = 100,y = 200.    mySprite->setposition(Vec2(100,200);
角度(Rotation)

通过增加或减少角度来使精灵旋转。增加角度值使精灵顺时针旋转,减少角度值使精灵逆时针旋转。默认值为0。

    // rotates sprite by +20    mySprite->setRotation(20.0f);    // rotates sprite by -20    mySprite->setRotation(-20.0f);    // rotates sprite by +60    mySprite->setRotation(60.0f);    // rotates sprite by -60    mySprite->setRotation(-60.0f);

缩放(Scale)

改变X值、Y值或者同时改变X、Y值可以缩放精灵。X、Y的默认值都为1.0。

    // increases X and Y size by 2.0 uniformly    mySprite->setScale(2.0);    // increases just X scale by 2.0    mySprite->setScaleX(2.0);    // increases just Y scale by 2.0    mySprite->setScaleY(2.0);

倾斜(Skew)

改变X值、Y值或者同时改变X、Y值可以使精灵倾斜。X、Y的默认值都为1.0。

    // adjusts the X skew by 20.0    mySprite->setSkewX(20.0f);    // adjusts the Y skew by 20.0    mySprite->setSkewY(20.0f);

不被锚点影响的精灵属性

有一些精灵对象的属性是不被锚点所影响的。为什么呢?因为这些属性只改变表面特征,如颜色和透明度。

颜色

向color3B对象中传递相应的值即可改变精灵的颜色。color3B对象代表RGB颜色值。我们目前还没有用到过color3B,但这很简单,color3B就是一个定义RGB颜色的对象。RGB颜色值即0-255之间的值。Cocos2d-x还提供预定义颜色供开发者选择。由于这些颜色是预定义所以用起来会快一点,如下为color3B::White和color3B::Red的例子:

    // set the color by passing in a color3B object.    mySprite->setcolor(color3B(255,255,255));    // set the color by passing in a pre-defined color3B object.    mySprite->setcolor(color3B::White);

透明度

通过特定的值来改变精灵的透明度。取值范围为(2~255),默认值为255(不透明)

    // set the opacity by passing in a value    mySprite->serOpacity(30);

总结

以上是内存溢出为你收集整理的cocos2d-x中的精灵细说全部内容,希望文章能够帮你解决cocos2d-x中的精灵细说所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1043774.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-24
下一篇 2022-05-24

发表评论

登录后才能评论

评论列表(0条)

保存