Cocos2d-x开发教程 第三节 深入Sprite

概述       上一节我们讲了Cocos2d-x的基本概念，这一节我们来深入讲解Sprite。通过上一节的讲解，你应该对Sprite有了初步的概念。我们知道当创建Sprite时需要指定一个图片镜像，并且我们可以通过改变Sprite的rotation、position、scale、color这些属性来使Sprite动态改变，最终使我们的游戏动起来。首先我们来讲一下创建Sprite的方式。      

上一节我们讲了Cocos2d-x的基本概念，这一节我们来深入讲解Sprite。通过上一节的讲解，你应该对Sprite有了初步的概念。我们知道当创建Sprite时需要指定一个图片镜像，并且我们可以通过改变Sprite的rotation、position、scale、color这些属性来使Sprite动态改变，最终使我们的游戏动起来。首先我们来讲一下创建Sprite的方式。

最简单创建Sprite的方式就是

auto dirs = Director::getInstance()->getRunningScene();auto newSprite = Sprite::create("Blue_Front1.png");newSprite->setposition(100,256);newSprite->setname("sprite1");newSprite->setAnchorPoint(Vec2(0.5,0.5));dirs->addChild(newSprite,1);

这种创建方式直接指定图片镜像，创建出来的Sprite尺寸和图片尺寸相同，创建结果如下

在创建Sprite的时候我们还可以指定图片镜像上的区域，这时我们需要传递一个Rect类型变量来指定选定区域的位置和大小，代码如下

auto dirs = Director::getInstance()->getRunningScene();auto newSprite = Sprite::create("Blue_Front1.png",Rect(0,50,50));newSprite->setposition(250,256);newSprite->setname("sprite2");newSprite->setAnchorPoint(Vec2(0.5,1);

我们可以看到，和上一种方式唯一的区别就是create函数增加了一个参数来指定选择区域，结果如下

我们可以看到，创建出来的Sprite只有图片的左上部分，这时因为我们传递了Rect(0,50)，代表选取了从图片左上角开始长和宽都为50的矩形区域来生成Sprite。

我们还可以通过Sprite Sheet创建Sprite。这是一种什么方式呢？简单来说就是我们通过专用工具把多个图片文件制作成一个.pList文件，在创建Sprite的时候我们只需要动态的从.pList文件中提取出之前加入的文件就好了。那我们为什么要通过这种方式创建Sprite呢？这时因为，当把多个图片文件制作成一个.pList文件后.pList文件的大小要比多个图片总共的大小小的多。这就意味着，通过这种方式创建Sprite时可以显著的节省存储器的占用空间，并且可以缩短加载时间。创建方式如下

auto dirs = Director::getInstance()->getRunningScene();auto spritecache = SpriteFrameCache::getInstance();spritecache->addSpriteFramesWithfile("Sprites.pList");auto newSprite = Sprite::createWithSpriteFramename("Blue_Front1.png");newSprite->setposition(400,256);newSprite->setname("sprite3");newSprite->setAnchorPoint(Vec2(0.5,1);

2、3行代码把Sprites.pList文件加载到SpriteFrameCache中，第4行代码根据图片镜像名称从SpriteFrameCache中提取图片并创建Sprite，创建结果如下

下面我们来讲一下可以对Sprite进行的 *** 作。

Anchor Point是一个当你指定Sprite的Postion需要用到的点。通过下面的代码和执行情况你可以很容易理解Anchor Point的概念。

auto dirs = Director::getInstance()->getRunningScene();   auto newSprite00 = Sprite::create("Blue_Front1.png");newSprite00->setposition(100,256);newSprite00->setname("sprite9");newSprite00->setAnchorPoint(Vec2(0,0));dirs->addChild(newSprite00,1);        auto point00 = Sprite::create("dot.png");point00->setname("point00");point00->setposition(newSprite00->getposition());dirs->addChild(point00,2);        auto newSprite01 = Sprite::create("Blue_Front1.png");newSprite01->setposition(250,256);newSprite01->setname("sprite10");newSprite01->setAnchorPoint(Vec2(0,1));dirs->addChild(newSprite01,1);        auto point01 = Sprite::create("dot.png");point01->setname("point01");point01->setposition(newSprite01->getposition());dirs->addChild(point01,2);        auto newSprite10 = Sprite::create("Blue_Front1.png");newSprite10->setposition(400,256);newSprite10->setname("sprite11");newSprite10->setAnchorPoint(Vec2(1,0));dirs->addChild(newSprite10,1);        auto point10 = Sprite::create("dot.png");point10->setname("point10");point10->setposition(newSprite10->getposition());dirs->addChild(point10,2);        auto newSprite11 = Sprite::create("Blue_Front1.png");newSprite11->setposition(550,256);newSprite11->setname("sprite12");newSprite11->setAnchorPoint(Vec2(1,1));dirs->addChild(newSprite11,1);        auto point11 = Sprite::create("dot.png");point11->setname("point11");point11->setposition(newSprite11->getposition());dirs->addChild(point11,2);        auto newSprite22 = Sprite::create("Blue_Front1.png");newSprite22->setposition(700,256);newSprite22->setname("sprite13");newSprite22->setAnchorPoint(Vec2(0.5,0.5));dirs->addChild(newSprite22,1);        auto point22 = Sprite::create("dot.png");point22->setname("point22");point22->setposition(newSprite22->getposition());dirs->addChild(point22,2);

上图中的红点代表各个Sprite的Anchor Point，结合Sprite位置就可以容易的理解Anchor Point的概念了。

Rotation是Sprite的旋转属性，设置方式如下

auto dirs = Director::getInstance()->getRunningScene();        auto newSprite = Sprite::create("Blue_Front1.png");newSprite->setposition(100,256);newSprite->setname("sprite17");newSprite->setAnchorPoint(Vec2(0.5,0.5));dirs->addChild(newSprite,1);        auto point00 = Sprite::create("dot.png");point00->setname("point00");point00->setposition(newSprite->getposition());dirs->addChild(point00,2);        auto newSpriteRotateP20 = Sprite::create("Blue_Front1.png");newSpriteRotateP20->setposition(250,256);newSpriteRotateP20->setname("sprite18");newSpriteRotateP20->setAnchorPoint(Vec2(0.5,0.5));newSpriteRotateP20->setRotation(20.0f);dirs->addChild(newSpriteRotateP20,1);        auto pointP20 = Sprite::create("dot.png");pointP20->setname("pointP20");pointP20->setposition(newSpriteRotateP20->getposition());dirs->addChild(pointP20,2);        auto newSpriteRotateN20 = Sprite::create("Blue_Front1.png");newSpriteRotateN20->setposition(400,256);newSpriteRotateN20->setname("sprite19");newSpriteRotateN20->setAnchorPoint(Vec2(0.5,0.5));newSpriteRotateN20->setRotation(-20.0f);dirs->addChild(newSpriteRotateN20,1);        auto pointN20 = Sprite::create("dot.png");pointN20->setname("pointN20");pointN20->setposition(newSpriteRotateN20->getposition());dirs->addChild(pointN20,2);        auto newSpriteRotateP60 = Sprite::create("Blue_Front1.png");newSpriteRotateP60->setposition(550,256);newSpriteRotateP60->setname("sprite20");newSpriteRotateP60->setAnchorPoint(Vec2(0.5,0.5));newSpriteRotateP60->setRotation(60.0f);dirs->addChild(newSpriteRotateP60,1);        auto pointP60 = Sprite::create("dot.png");pointP60->setname("pointP60");pointP60->setposition(newSpriteRotateP60->getposition());dirs->addChild(pointP60,2);        auto newSpriteRotateN60 = Sprite::create("Blue_Front1.png");newSpriteRotateN60->setposition(700,256);newSpriteRotateN60->setname("sprite21");newSpriteRotateN60->setAnchorPoint(Vec2(0.5,0.5));newSpriteRotateN60->setRotation(-60.0f);dirs->addChild(newSpriteRotateN60,1);        auto pointN60 = Sprite::create("dot.png");pointN60->setname("pointN60");pointN60->setposition(newSpriteRotateN60->getposition());dirs->addChild(pointN60,2);

向setRotation函数传递正数使Sprite顺时针旋转，传递负数使Sprite逆时针旋转，结果如下

Scale是Sprite的缩放属性，用法如下

auto dirs = Director::getInstance()->getRunningScene();auto newSprite = Sprite::create("Blue_Front1.png");newSprite->setposition(100,256);newSprite->setname("sprite5");newSprite->setAnchorPoint(Vec2(0.5,1);auto point00 = Sprite::create("dot.png");point00->setname("point00");point00->setposition(newSprite->getposition());dirs->addChild(point00,2);auto newSpritescaleXY = Sprite::create("Blue_Front1.png");newSpritescaleXY->setposition(300,256);newSpritescaleXY->setname("sprite6");newSpritescaleXY->setAnchorPoint(Vec2(0.5,0.5));newSpritescaleXY->setScale(2.0f);dirs->addChild(newSpritescaleXY,1);auto pointXY = Sprite::create("dot.png");pointXY->setname("pointXY");pointXY->setposition(newSpritescaleXY->getposition());dirs->addChild(pointXY,2);auto newSpritescaleX = Sprite::create("Blue_Front1.png");newSpritescaleX->setposition(500,256);newSpritescaleX->setname("sprite7");newSpritescaleX->setAnchorPoint(Vec2(0.5,0.5));newSpritescaleX->setScaleX(2.0f);dirs->addChild(newSpritescaleX,1);auto pointX = Sprite::create("dot.png");pointX->setname("pointX");pointX->setposition(newSpritescaleX->getposition());dirs->addChild(pointX,2);auto newSpritescaleY = Sprite::create("Blue_Front1.png");newSpritescaleY->setposition(800,256);newSpritescaleY->setname("sprite8");newSpritescaleY->setAnchorPoint(Vec2(0.5,0.5));newSpritescaleY->setScaleY(2.0f);dirs->addChild(newSpritescaleY,1);auto pointY = Sprite::create("dot.png");pointY->setname("pointY");pointY->setposition(newSpritescaleY->getposition());dirs->addChild(pointY,2);

setScale同时设置Sprite的X轴、Y轴缩放比例，setScaleX设置Sprite的X轴比例，setScaleY设置Sprite的Y轴比例。设置结果如下

Skew是Sprite的倾斜属性，用法如下

auto dirs = Director::getInstance()->getRunningScene();        auto newSprite = Sprite::create("Blue_Front1.png");newSprite->setposition(100,256);newSprite->setname("sprite14");newSprite->setAnchorPoint(Vec2(0.5,1);auto pointN = Sprite::create("dot.png");pointN->setname("pointN");pointN->setposition(newSprite->getposition());dirs->addChild(pointN,2);auto newSpriteskewX = Sprite::create("Blue_Front1.png");newSpriteskewX->setposition(250,256);newSpriteskewX->setname("sprite15");newSpriteskewX->setAnchorPoint(Vec2(0.5,0.5));newSpriteskewX->setSkewX(20.0f);dirs->addChild(newSpriteskewX,1);auto pointX = Sprite::create("dot.png");pointX->setname("pointX");pointX->setposition(newSpriteskewX->getposition());dirs->addChild(pointX,2);auto newSpriteskewY = Sprite::create("Blue_Front1.png");newSpriteskewY->setposition(400,256);newSpriteskewY->setname("sprite16");newSpriteskewY->setAnchorPoint(Vec2(0.5,0.5));newSpriteskewY->setSkewY(20.0f);dirs->addChild(newSpriteskewY,1);auto pointY = Sprite::create("dot.png");pointY->setname("pointY");pointY->setposition(newSpriteskewY->getposition());dirs->addChild(pointY,2);

setSkewX设置Sprite根据X轴倾斜，setSkewY设置Sprite根据Y轴倾斜，设置结果如下

color是Sprite的颜色属性，用法和设置结果如下

auto dirs = Director::getInstance()->getRunningScene();        auto newSprite = Sprite::create("Blue_Front1.png");newSprite->setposition(100,256);newSprite->setname("sprite30");newSprite->setAnchorPoint(Vec2(0.5,1);auto newSprite2 = Sprite::create("Blue_Front1.png");newSprite2->setposition(200,256);newSprite2->setname("sprite31");newSprite2->setAnchorPoint(Vec2(0.5,0.5));newSprite2->setcolor(color3B(155,200,50));dirs->addChild(newSprite2,1);auto newSprite3 = Sprite::create("Blue_Front1.png");newSprite3->setposition(300,256);newSprite3->setname("sprite32");newSprite3->setAnchorPoint(Vec2(0.5,0.5));newSprite3->setcolor(color3B(10,230,100));dirs->addChild(newSprite3,1);auto newSprite4 = Sprite::create("Blue_Front1.png");newSprite4->setposition(400,256);newSprite4->setname("sprite33");newSprite4->setAnchorPoint(Vec2(0.5,0.5));newSprite4->setcolor(color3B(100,101,230));dirs->addChild(newSprite4,1);

color3B函数内为RGB三原色。

Opacity为Sprite的不透明度属性，设置方法如下

auto dirs = Director::getInstance()->getRunningScene();        auto newSprite = Sprite::create("Blue_Front1.png");newSprite->setposition(100,256);newSprite->setname("sprite34");newSprite->setAnchorPoint(Vec2(0.5,0.5));newSprite->setopacity(0.0f);dirs->addChild(newSprite,256);newSprite2->setname("sprite35");newSprite2->setAnchorPoint(Vec2(0.5,0.5));newSprite2->setopacity(99);dirs->addChild(newSprite2,256);newSprite3->setname("sprite36");newSprite3->setAnchorPoint(Vec2(0.5,0.5));newSprite3->setopacity(89);dirs->addChild(newSprite3,256);newSprite4->setname("sprite37");newSprite4->setAnchorPoint(Vec2(0.5,0.5));newSprite4->setopacity(79);dirs->addChild(newSprite4,1);

setopacity函数设置的不透明度范围为0到255，0代表完全透明，255代表完全不透明，设置结果如下

至此，我们已经把Sprite的常用属性讲解完毕了。

下一节我们将讲解Action。

总结

以上是内存溢出为你收集整理的Cocos2d-x开发教程 第三节 深入Sprite全部内容，希望文章能够帮你解决Cocos2d-x开发教程 第三节 深入Sprite所遇到的程序开发问题。

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