cocos2dx学习之路（七）——精灵、精灵旋转、淡入、水平翻转、自由移动、九宫格精灵

理解精灵的含义
学会创建一个精灵
掌握对精灵的控制
了解九宫格精灵及其应用

Sprite在2D游戏场景设计中指的就是像素图可以移动可以控制

1、通过图片路径创建精灵
Sprite* sprite = Sprite::create(“要加载的图片文件目录的相对路径”);
1、该方式创建的精灵以静态图的形式呈现
2、图片大小与原大小一致
3、如果图片显示大小超出屏幕范围，则只显示屏幕内的部分
4、如果精灵大小小于图片大小。则会按比例进行缩放图片，导致
图片变形。（长度和宽度的比例与原图长宽比不同，会导致图片变形）
SpriteDemo.h

#pragma once
#include"cocos2d.h"
USING_NS_CC;
class SpriteScene:public Scene
{public:CREATE_FUNC(SpriteScene);virtual bool init();
};

SpriteDemo.cpp

bool SpriteScene::init()
{if(!Scene::init())return false;//创建一个精灵Sprite* sprite = Sprite::create("要加载的图片文件目录的相对路径");//图片太大会显示在屏幕外边，所以需要进行一个缩放，图片锚点默认在图片正中心//sprite ->setContentSize(Size(100*100));//这样处理图片大小会变形sprite ->setScale(0.3f);//需要进行整体缩放，缩放到原来的多少倍sprite ->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));this->addChild(sprite);return true;
}

创建完成后要去AppDelegate.cpp 调用

2、使用图集创建一个精灵
如果读取图片过多，会导致内存奔溃，使用后，需要及时清理缓存
通常图片没有达到一定数量是不会清理的，不清理的话在创建精灵
的时候去读取图片就会非常快，如果每次读取都去加载一次因为是
大图，所以会非常卡顿。一般是做场景切换的时候会去清理缓存。

string path =  "plist文件的相对路径";
//通过plist文件路径将图片读取到精灵帧缓存
auto cache = SpriteFrameCache::getInstance()->addSpriteFrameWithFile(path);
//通过指定名称的精灵帧创建精灵
auto sprite = Sprite::createWithSpriteFrameName("1");

做序列帧动画的时候和做资源优化的时候会用到图集。
比如有很多张图片，有很多透明的边缘，我们想把边缘裁掉，
我们可以把很多张图片拼合在一起，拼合的时候裁剪，
最后做成一张大图，可以节省磁盘空间，也可以加快渲染的效率。

图集的产生会用到cocos2d官方提供的工具TexturePacker创建图集文件
TexturePacker集成了cocos2d生成图集的功能
会生成以下两个文件：
plist文件、png大图；
plist文件就是xml文件，存放的每张图片的一个键值对，还包含了在大图中的偏移位置
以及精灵的大小，键是根据每张图片名称生成的可以有后缀。

SpriteDemo.h

#pragma once
#include"cocos2d.h"
USING_NS_CC;
class SpriteScene:public Scene
{public:CREATE_FUNC(SpriteScene);virtual bool init();
};

SpriteDemo.cpp

bool SpriteScene::init()
{if(!Scene::init())return false;//创建一个精灵Sprite* sprite = Sprite::create("要加载的图片文件目录的相对路径");//图片太大会显示在屏幕外边，所以需要进行一个缩放，图片锚点默认在图片正中心//sprite ->setContentSize(Size(100*100));//这样处理图片大小会变形sprite ->setScale(0.3f);//需要进行整体缩放，缩放到原来的多少倍sprite ->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));this->addChild(sprite);//隐藏此精灵sprite->setVisible(false);//通过图集创建精灵SpriteFrameCache::getInstance()->addSpriteFramesWithFile("plist文件相对路径");//这个 1 是对应plist文件中的文件名 键Sprite* vampireSprite = Sprite::createWithSpriteFrameName("1");this->addChild(vampireSprite);vampireSprite ->setPosition(sprite->getPosition());//吸血鬼动画实例auto cache = SpriteFrameCache::getInstance();//cococs2d的Vector与C++的不一样，是记录cocos2d对象的指针Vector<SpriteFrame*>images;//8张图片for(int i = 1;i<=8;i++){//Value()是cocos2d专门提供基本类型转换的 这里文件名是字符串所以用asString()images.pushBack(cache->getSpriteFrameByName(Value(i).asString()));//每一帧都是一个精灵}Animation* _animation = Animation::createWithFrames(images,1.f/8);//每张图片间隔时间0.25m//播放一次，停下来的就是最后一张图片//vampireSprite ->runAction(Animate::create(_animation));//一直播放vampireSprite ->runAction(RepeatForever::create(Animate::create(_animation)));return true;
}

3、使用贴图创建一个精灵
贴图又称为纹理（读取到图片的数据存入内存）

//贴图缓存
auto textureCache = TextureCache::getInstance();
//读取贴图，在缓存中添加
auto cache = textureCache->addImage("图片文件相对路径");
//通过贴图创建一个精灵
Sprite*sprite = Sprite::createWithTexture(cache);
//裁切贴图
sprite ->setTextureRect(Rect(0,0,480,320));

SpriteDemo.cpp

bool SpriteScene::init()
{if(!Scene::init())return false;//创建一个精灵Sprite* sprite = Sprite::create("要加载的图片文件目录的相对路径");//图片太大会显示在屏幕外边，所以需要进行一个缩放，图片锚点默认在图片正中心//sprite ->setContentSize(Size(100*100));//这样处理图片大小会变形sprite ->setScale(0.3f);//需要进行整体缩放，缩放到原来的多少倍sprite ->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));this->addChild(sprite);//隐藏此精灵sprite->setVisible(false);//通过图集创建精灵SpriteFrameCache::getInstance()->addSpriteFramesWithFile("plist文件相对路径");//这个 1 是对应plist文件中的文件名 键Sprite* vampireSprite = Sprite::createWithSpriteFrameName("1");this->addChild(vampireSprite);vampireSprite ->setPosition(sprite->getPosition());vampireSprite ->setVisible(false);//隐藏//通过纹理创建一个精灵//png支持透明，jpg不支持，如果一张图片转成jpg格式就会添加一个背景色//jpg比png占的磁盘空间更小，但是在读取到内存解析的时候png更快auto cache = TextureCache::getInstance()->addImage("图片相对路径");Sprite* textureSprite = Sprite::createWithTexture(cache);this->addChild(textureSprite);textureSprite ->setPosition(sprite->getPosition());//0,0,前边是图片坐标，480,320是图片长宽//如果裁切位置是240，160那么裁切出来的是图片右下角textureSprite ->setTextureRect(Rect(0,0,480,320));//裁切return true;
}

4、多边形精灵
对图片空白的地方进行裁切后构成多边形，算法越好裁切的就越多，
空白的地方就越少。裁切后需要着色的像素点就会变少。

读取图片生成多边形
注意：
1、图片格式只能为png图片，不支持其他格式的图片；
2、生成时会占用CPU，消耗系统性能

auto info = AutoPolygon::generatePolygon("图片相对路径",Rect(0,0,437,437));

根据多边形数据创建多边形精灵

auto sprite = Sprite::create(info);

SpriteDemo.cpp

bool SpriteScene::init()
{if(!Scene::init())return false;//创建一个精灵Sprite* sprite = Sprite::create("要加载的图片文件目录的相对路径");//图片太大会显示在屏幕外边，所以需要进行一个缩放，图片锚点默认在图片正中心//sprite ->setContentSize(Size(100*100));//这样处理图片大小会变形sprite ->setScale(0.3f);//需要进行整体缩放，缩放到原来的多少倍sprite ->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));this->addChild(sprite);//隐藏此精灵sprite->setVisible(false);//通过图集创建精灵SpriteFrameCache::getInstance()->addSpriteFramesWithFile("plist文件相对路径");//这个 1 是对应plist文件中的文件名 键Sprite* vampireSprite = Sprite::createWithSpriteFrameName("1");this->addChild(vampireSprite);vampireSprite ->setPosition(sprite->getPosition());vampireSprite ->setVisible(false);//隐藏//通过纹理创建一个精灵//png支持透明，jpg不支持，如果一张图片转成jpg格式就会添加一个背景色//jpg比png占的磁盘空间更小，但是在读取到内存解析的时候png更快auto cache = TextureCache::getInstance()->addImage("图片相对路径");Sprite* textureSprite = Sprite::createWithTexture(cache);this->addChild(textureSprite);textureSprite ->setPosition(sprite->getPosition());//0,0,前边是图片坐标，480,320是图片长宽//如果裁切位置是240，160那么裁切出来的是图片右下角textureSprite ->setTextureRect(Rect(0,0,480,320));//裁切//创建一个多边形精灵3.x的版本才有的//RGBA8888这个格式就是pngauto polygonInfo = AutoPolygon::generatePolygon("图片相对路径",Rect(0,0,437,437));Sprite* _sprite = Sprite::create(polygonInfo);_sprite ->setPosition(sprite->getPosition());this->addChild(_sprite);return true;
}

创建精灵的方式	优点	缺点
通过图片路径创建	不需要清理缓存	图片过大，直接读取会卡顿
通过图集创建	图片加载速度快	内存占用较大，切换场景时需要清理缓存
通过贴图创建	图片加载速度快	内存占用较大，切换场景时需要清理缓存
通过多边形数据创建	渲染速度快	读取图片生成多边形信息会消耗更多CPU性能

游戏中常见的几种对精灵的控制

对精灵控制的演示：
1、实现精灵旋转效果
2、实现精灵淡入效果
3、实现精灵水平翻转
4、实现精灵在屏幕中自动移动

SpriteDemo.h

#pragma once
#include"cocos2d.h"
USING_NS_CC;
class SpriteScene:public Scene
{public:CREATE_FUNC(SpriteScene);virtual bool init();
private:Sprite* _sprite;float _angel;int _opacity;//淡入，对应到阿尔法通道，对透明度操作的float _scaleX;float _minScaleX;
};

SpriteDemo.cpp

bool SpriteScene::init()
{if(!Scene::init())return false;//创建一个精灵Sprite* sprite = Sprite::create("要加载的图片文件目录的相对路径");//图片太大会显示在屏幕外边，所以需要进行一个缩放，图片锚点默认在图片正中心//sprite ->setContentSize(Size(100*100));//这样处理图片大小会变形sprite ->setScale(0.3f);//需要进行整体缩放，缩放到原来的多少倍sprite ->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));this->addChild(sprite);//隐藏此精灵sprite->setVisible(false);//通过图集创建精灵SpriteFrameCache::getInstance()->addSpriteFramesWithFile("plist文件相对路径");//这个 1 是对应plist文件中的文件名 键Sprite* vampireSprite = Sprite::createWithSpriteFrameName("1");this->addChild(vampireSprite);vampireSprite ->setPosition(sprite->getPosition());vampireSprite ->setVisible(false);//隐藏//通过纹理创建一个精灵//png支持透明，jpg不支持，如果一张图片转成jpg格式就会添加一个背景色//jpg比png占的磁盘空间更小，但是在读取到内存解析的时候png更快auto cache = TextureCache::getInstance()->addImage("图片相对路径");Sprite* textureSprite = Sprite::createWithTexture(cache);this->addChild(textureSprite);textureSprite ->setPosition(sprite->getPosition());//0,0,前边是图片坐标，480,320是图片长宽//如果裁切位置是240，160那么裁切出来的是图片右下角textureSprite ->setTextureRect(Rect(0,0,480,320));//裁切//创建一个多边形精灵3.x的版本才有的//RGBA8888这个格式就是pngauto polygonInfo = AutoPolygon::generatePolygon("图片相对路径",Rect(0,0,437,437));_sprite = Sprite::create(polygonInfo);_sprite ->setPosition(sprite->getPosition());this->addChild(_sprite);//实现精灵旋转效果//将图片先缩小_sprite ->setScale(0.3f);//_angel = 0;//_sprite ->setRotation(_angel );//开启一个调度器//this->schedule([&](float dlt)//{//_angel +=1.f;//if(_angel > 360)//{//_angel = _angel - 360;//}//_sprite ->setRotation(_angel );//},0.02f,"schedule");//实现精灵淡入效果//_opacity = 0;//精灵默认透明度是255，所以需要先初始化//_sprite ->setOpacity(_opacity);//this->schedule([&](float dlt)//{//if(_opacity>= 255)//{//调度器用完需要注销，不然就会像线程的死循环//this->unschedule("schedule");//return;//}//_opacity+=5;//_sprite ->setOpacity(_opacity);//},0.02f,"schedule");//实现精灵水平翻转(X轴)//_scaleX = _sprite->getScaleX();//_minScaleX = -_sprite->getScaleX();//this->schedule([&](float dlt)//{//if(_minScaleX > _scaleX)//{//this->unschedule("schedule");//return;//}//_scaleX -= 0.01f;//_sprite ->setScaleX(_scaleX);//},0.02f,"schedule");//控制精灵移动this->schedule([&](float dlt){//游戏角色锚点一般在底部中心//宽度需要乘以一个系数_sprite ->getScale()，不然缩小后的图片在原始图片的范围情况下不会到边if(_sprite ->getPositionX() + _sprite ->getContentSize().width /2 * _sprite ->getScale() >                 Director::getInstance()->getVisibleSize().width || _sprite ->getPositionX() - _sprite ->getContentSize().width /2 * _sprite ->getScale()< 0){this->unschedule("schedule");return;}_sprite ->setPositionX(_sprite ->getPositionX() + 1.f);},0.02f,"schedule");return true;
}

九宫格古代称为"洛书"
Scale9Sprite类继承自Sprite所以也是精灵
对图片的拉伸，长宽比例会改变，但是不会
发生拉伸的形变。特点就是四个角不会变，
四条边会被拉伸。需要确定中心区域，
中心区域确定后就可以确定四个角，只改变中心区域

创建九宫格精灵

auto sprite = Scale9Sprite::create("图片相对路径");

设置九宫格中心区域

//22,22是相对整个图形的坐标位置，56,56是传入的整个中心区域的大小，长和宽
sprite ->setCapInsets(Rect(22,22,56,56));

Scale9Demo.h

#pragma once
#include"cocos2d.h"
USING_NS_CC;#include"ui/UIScale9Sprite.h"
using namespace ui;
class Scale9SpriteScene:public Scene
{public:CREATE_FUNC(Scale9SpriteScene);virtual bool init();
};

bool SpriteScene::init()
{if(!Scene::init())return false;//如果图片背景和颜色都是黑色，那么我们需要添加白色背景，方便观察auto layer = LayerColor::create(Color4B::WHITE);this->addChild(layer);//创建九宫格精灵的演示实例Scale9Sprite* sprite = Scale9Sprite::create("图片相对路径");this->addChild(sprite);//设置精灵坐标位置在屏幕正中心sprite->setAnchorPoint(Vec2::ANCHOR_MIDDLE);sprite->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));//设置九宫格精灵的中心区域sprite->setCapInsets(Rect(20,20,1,1));//改变图形大小sprite->setContentSize(Size(200,200));//改变图形形状为矩形sprite->setContentSize(Size(300,200));//后边创建的精灵会盖在前边的九宫格精灵下面,所以这里隐藏九宫格的//sprite->setVisible(false);//创建一个用于对比的精灵//Sprite*_sprite = Sprite::create("图片相对路径");//this->addChild(_sprite );//_sprite ->setColor(Color3B::RED);//设置精灵坐标位置在屏幕正中心//_sprite ->setAnchorPoint(Vec2::ANCHOR_MIDDLE);//_sprite ->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));//_sprite ->setContentSize(Size(200,200));return true;
}

九宫格精灵VS精灵
性能参数对比

对比参数	九宫格精灵	精灵
图片资源占用磁盘大小	小	大
消耗CPU性能	小	小
占用内存	小	一般
渲染速度	一般	一般

九宫格精灵应用范围
常用于发布包(apk release)大小要求的情况，用于压缩图片大小。

演示示例：对话框自适应文字内容
要求：
文字显示内容不确定，对话框需要根据文字内容大小进行自适应匹配

bool SpriteScene::init()
{if(!Scene::init())return false;//如果图片背景和颜色都是黑色，那么我们需要添加白色背景，方便观察auto layer = LayerColor::create(Color4B::WHITE);this->addChild(layer);//创建九宫格精灵的演示实例Scale9Sprite* sprite = Scale9Sprite::create("图片相对路径");this->addChild(sprite);//设置精灵坐标位置在屏幕正中心sprite->setAnchorPoint(Vec2::ANCHOR_MIDDLE);sprite->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));//设置九宫格精灵的中心区域sprite->setCapInsets(Rect(20,20,1,1));//改变图形大小sprite->setContentSize(Size(200,200));//改变图形形状为矩形sprite->setContentSize(Size(300,200));//读取文字内容auto data = FileUtils::getInstance()->getValueMapFromFile("plist文件相对路径");if(!data.empty()){std::string content = data.at("1000").asString();Label* _label = Label::create(content,"方正姚体",24);_label ->setAnchorPoint(Vec2::ANCHOR_BOTTOM_LEFT);//九宫格包裹了内容，内部标签距离上下左右都有20的距离//Vec2(20,20)这个外边距的长度正好是中心区域sprite->setCapInsets(Rect(20,20,1,1));20,20的长宽_label ->setPosition(Vec2(20,20));//把标签直接添加到九宫格上，因为二者都是精灵sprite->addChild(_label);//控制宽度if(_label->getContentSize().width>300){_label->setDimensions(300,0);//宽度300像素换行}//Size(40,40)设置个外边距sprite->setContentSize(_label->getContentSize() + Size(40,40));}return true;
}

cocos2dx学习之路（七）——精灵、精灵旋转、淡入、水平翻转、自由移动、九宫格精灵相关推荐

前端学习之路之图片(魔方旋转)
前端学习之路之图片(魔方旋转) 前面实现了图片的轮播,同时实现了自动轮播图片.图片轮播的就是通过js监听通过改变css样式实现图片轮播的.改文章也是图片的轮播不过是增加了一些css样式,是的旋转的时 ...
ITK学习笔记（七） ITK旋转方向位置不变
ITK学习笔记(七) ITK旋转方向位置不变 sitk使用的使LPS坐标系,与slicer中使用的RAS坐标系不同. 在sitk中的方向(1,1,1)(1,1,1)(1,1,1),在slicer中的方 ...
cocos2dx学习之路（三）
Director类: Node和Director是并列的都是继承自Ref. Ref是cocos2d中的一个内存管理机制.Director自己封装了一个单例的数据模式,而Node是Creater的一个构 ...
Cocos2d-x学习之路(一)
前文我呢,现在在一家手游公司上班,但是我之前一直学习的是做Android应用的,来这家公司后就在做SDK渠道接入的工作,工作好清闲啊,但是感觉自己来了一个多月了也没什么提高.可能是我太笨了吧.哇咔咔 ...
cocos2dx学习之路（二）
Cocos2d-x核心概念: 一.场景(Scene)和层(Layer) 场景:特定时间.特定地点发生的事件的集合例如: 进入一个游戏的战斗场景后,整个的一个战斗过程就是一个战斗场景. 登录游戏的时候 ...
cocos2dx学习之路（九）——声音引擎
了解Cocos2d-x中的声音引擎掌握SimpleAudioEngine类掌握音效的控制 Cocos2d-x中的事件分发机制了解监听器了解优先级掌握触摸事件及其应用其他事件 Cocos2d ...
我的cocos2d-x学习之路
cocos2d-x的一些学习资源: 1,首先是,Cocos2d-x高级开发教程.pdf 2,youku上有一些视频教程,比如:龙灵修的专辑,http://i.youku.com/u/id_UNTc4N ...
OpenGL学习之路6----平移，旋转和缩放变换
代码放在github上本文根据教程:ogldev进行扩充学习,一步步从零开始,记录学习历程一.准备工作 1.1 表示一个矩阵我们需要在程序中使用矩阵,我们需要用计算机程序语言来表示出来一个矩阵. ...
cocos2dx学习之路(一)———windows10下cocos2dx环境配置
(一).准备所需工具 1.开发工具Visual Studio 2015[官网地址]当然大家根据自己喜好下载各种版本,笔者只是觉得2015版本大小比较合适,也用习惯了.(https://visualst ...

cocos2dx学习之路（七）——精灵、精灵旋转、淡入、水平翻转、自由移动、九宫格精灵

cocos2dx学习之路（七）——精灵、精灵旋转、淡入、水平翻转、自由移动、九宫格精灵相关推荐

最新文章

热门文章