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

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了Cocos2d-x开发教程 第三节 深入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相关文章

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签