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

发布时间：2020-12-14 14:18:12 所属栏目：百科来源：网络整理

导读：上一节我们讲了Cocos2d-x的基本概念，这一节我们来深入讲解Sprite。通过上一节的讲解，你应该对Sprite有了初步的概念。我们知道当创建Sprite时需要指定一个图片镜像，并且我们可以通过改变Sprite的rotation、position、scale、color这些属性来使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