cocos2dx基础篇(12)——点九图CCScale9Sprite

【引言】

本来是想学学控件类CCControl的另一个子类按钮控件CCControlButton的。但是发现里面有一个参数牵扯到CCScale9Sprite这个类。看到CCScale9Sprite,很容易联想到精灵类CCSprite。两者又有什么区别呢?因此我就去网上收了一些有关CCScale9Sprite的资料来学习。

【参考文献】

[1] http://blog.csdn.net/nynyvkhhiiii/article/details/12782249

[2] http://www.cnblogs.com/moodlxs/archive/2012/12/26/2834235.html

[3] http://blog.sina.com.cn/s/blog_7d1531ed010167pq.html

[4] http://blog.csdn.net/zaojiahua/article/details/21295535

[5] http://blog.csdn.net/onerain88/article/details/8273219



【CCScale9Sprite】

对于CCScale9Sprite类,不知道该怎么翻译,有人叫它点九图,有人叫它九宫图,有有人叫它九妹图。

那么什么是CCScale9Sprite呢?CCScale9Sprite对象,是一种CCSprite对象的变形,它的用法和CCSprite类似,不同点是:CCScale9Sprite对象有个特性就是缩放贴图时可以尽量不失帧。

如下图所示,用普通的CCSprite拉伸后四个角模糊失真了,而是用CCScale9Sprite进行拉伸后,依旧很清晰。

1、原理:

CCScale9Sprite的实现非常巧妙,是通过1个CCSpriteBatchNode和9个CCSprite来实现的,原理很简单,通过将原纹理资源切割成9部分(PS: 这也是叫九宫图的原因),根据想要的尺寸,完成以下的三个步骤:

(1)保持4个角部分不变形

(2)单向拉伸4条边(即在4个角两两之间的边,比如上边,只做横向拉伸)

(3)双向拉伸中间部分(即九宫图的中间部分,横向,纵向同时拉伸,PS:拉伸比例不一定相同)

CCSpriteBatchNode的资源为整个的纹理,9个CCSprite对应于纹理的9个部分(根据纹理不同,9部分所占比例会有所不同),根据想要的尺寸,将9部分拼装在一起!

2、需要引用的头文件及命名空间:

#include "cocos-ext.h" //包含cocos-ext.h头文件
using namespace cocos2d::extension; //引用cocos2d::extension命名空间
//


3、常用操作如下:

CCScale9Sprite继承于CCNodeRGBA,所以除了可以使用以下自定义的操作外,还可以使用节点类CCNode、以及节点颜色类CCNodeRGBA的相关函数操作。

/************************************************************************/
/* 以上面原理部分提到的图片为例											*/
/************************************************************************/

class CCScale9Sprite : public CCNodeRGBA
{
/**
 *		创建的三类方式
 *		create , createWithSpriteFrame , createWithSpriteFrameName
 */

//使用图片资源名来创建
//参数说明:
//		rect整个图的矩形大小
//		capInsets中间部分区域对应的矩形大小
//rect = CCRectMake(0, 0, 80, 80);
//capInsets = CCRectMake( 12, 12, 56, 56);
//create("sp.png", rect, capInsets);
//create(capInsets, "sp.png");
static CCScale9Sprite* create(const char* file);
static CCScale9Sprite* create(const char* file, CCRect rect);
static CCScale9Sprite* create(const char* file, CCRect rect,  CCRect capInsets);
static CCScale9Sprite* create(CCRect capInsets, const char* file);

//使用精灵帧来创建
static CCScale9Sprite* createWithSpriteFrame(CCSpriteFrame* spriteFrame);  
static CCScale9Sprite* createWithSpriteFrame(CCSpriteFrame* spriteFrame, CCRect capInsets); 

//使用精灵帧的名称来创建
static CCScale9Sprite* createWithSpriteFrameName(const char* spriteFrameName);
static CCScale9Sprite* createWithSpriteFrameName(const char* spriteFrameName, CCRect capInsets); 

/**
 *		属性设置
 *		setSpriteFrame , setCapInsets , 
 *		setPreferredSize ,  setContentSize ,
 *		setOpacity , setColor
 */

//设置精灵帧
virtual void setSpriteFrame(CCSpriteFrame * spriteFrame);

//设置中间部分区域对应的矩形大小
CC_PROPERTY(CCRect, m_capInsets, CapInsets);

//设置需要生成的尺寸大小,默认为精灵图的原始大小
CC_PROPERTY(CCSize, m_preferredSize, PreferredSize); 

//CCScale9Sprite是通过这个来拉伸的,而CCSprtie是通过setScale来拉伸。
virtual void setContentSize(const CCSize & size);

//设置透明度
virtual void setOpacity(GLubyte opacity);
virtual GLubyte getOpacity();

//设置颜色
virtual void setColor(const ccColor3B& color);
virtual const ccColor3B& getColor();

};
//


4、使用说明:

    (1)关于参数:

当使用CCScale9Sprite::create(const char* file, CCRect rect,  CCRect capInsets);进行创建的时候,必须要注意理解 rectcapInsets 这两个参数。

在曾经讲到的精灵类CCSprite中,是否还记得下列创建的方法?

    CCSprite::create(const char *pszFileName, const CCRect& rect);

该方法就是使用pszFileName图片资源,并从中截取某区域矩形的小图rect,来创建CCSprite精灵。当然若为设置rect的话,默认为整张图片的大小。

而在 CCScale9Sprite 中的 rect 其实用法也是一样的。如果是需要整张图片资源sp.png的话,只要设置rect为整张图片的大小,坐标为(0,0)即可。

另外对于 capInsets 的设置,则是决定了CCScale9Sprite的九宫分割的区域大小。若未对CCScale9Sprite的capInsets进行设置,创建的九宫图的分区为九等分。capInsets则是设置了中间区域的大小,从而得到其他8块区域的大小。(这样就不一定是等分了)

    

(2)关于图片拉伸:

我们都知道 CCSprite 的拉伸方式是通过 setScale(); 来实现的,而对于 CCScale9Sprite 则不同。它是通过 setContentSize(const CCSize & size); 来实现图片的拉伸。不过貌似使用 setPreferredSize(const CCSize & size); 的效果类似?



【代码实战】

(1)使用三组图片进行测试:

        

(2)引入头文件及命名空间:

#include "cocos-ext.h"
using namespace cocos2d::extension;
//

(3)编写测试对比函数test:

/**
 *		file:图片资源名称,如"sp.png"
 *		index:第几组测试数据
 */
void HelloWorld::test(const char* file, int index)
{

//获取可视区域尺寸大小
	CCSize mysize = CCDirector::sharedDirector()->getVisibleSize();
//获取可视区域的原点位置
	CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();
//屏幕正中心位置
	CCPoint midPos = ccp(mysize.width/2, mysize.height/2);

//CCSprite,精灵拉伸
	CCSprite* sprite1 = CCSprite::create(file);
	sprite1->setPosition( ccp(120 * index, mysize.height - 60) );
	this->addChild(sprite1);

	//精灵拉伸
	sprite1->setScale(2.0f);

//scale9Sprite1,不设置capInsets
	CCScale9Sprite* scale9Sprite1 = CCScale9Sprite::create(file);
	scale9Sprite1->setPosition( ccp(120 * index, mysize.height/2) );
	this->addChild(scale9Sprite1);

	//不设置capInsets,拉伸
	scale9Sprite1->setContentSize( CCSizeMake(80, 80) );

//scale9Sprite2,设置capInsets
	CCScale9Sprite* scale9Sprite2 = CCScale9Sprite::create(file);
	scale9Sprite2->setPosition( ccp(120 * index, 60) );
	this->addChild(scale9Sprite2);

	//设置capInsets,并拉伸
	scale9Sprite2->setCapInsets( CCRectMake(3, 3, 34, 34) );
	scale9Sprite2->setContentSize( CCSizeMake(80, 80) );
}
//

(4)测试三组图片:

bool HelloWorld::init()
{
    if ( !CCLayer::init() )
    {
        return false;
    }

	test("Icon.png", 1); //用Icon.png做测试
	test("CloseNormal.png", 2); //用CloseNormal.png做测试
	test("Rect.png", 3); //用Rect.png做测试

	return true;
}
//

运行结果:

分析结果:

亮点自寻。



【Demo下载】

http://down.51cto.com/data/1865750

cocos2dx基础篇(12)——点九图CCScale9Sprite,布布扣,bubuko.com

时间: 2024-10-19 12:54:56

cocos2dx基础篇(12)——点九图CCScale9Sprite的相关文章

cocos2dx基础篇(13)——按钮控件CCControlButton

[引言] 按钮类CCControlButton继承于控件类CCControl. 控件类CCControl主要向子类提供了一系列的控件触发事件.当子控件触发相关的事件后,就会执行相关的控件事件回调函数.这与之前讲的CCMenu中的菜单按钮回调是类似的. 控件类CCControl主要有三个子类: (1)开关控件CCControlSwitch (2)滑块控件CCControlSlider (3)按钮控件CCControlButton 本节讲的是其子类其中之一:按钮类CCControlButton. [

cocos2dx 3.2 Scale9Sprite点九图

cocos2dx 3.2 Scale9Sprite点九图 本文部分转载至 cocos2dx 3.x Scale9Sprite的认识 1. Scale9Sprite 认识 Scale9Sprite 是一张可拉伸的精灵.只要给他设置一下大小,它就能自动拉伸. 2. Scale9Sprite的使用 1 #include "GUI/CCControlExtension/CCScale9Sprite.h" 2 3 USING_NS_CC_EXT; 4 5 bool HelloWorld::ini

cocos2dx基础篇(5)——浅析几个常见类

目录 入口类main.cpp 主要控制类AppDelegate.cpp 节点类CCNode 导演类CCDirector 场景类CCScene 层次类CCLayer 精灵类CCSprite 大小类CCSize 坐标CCPoint 矩形类CCRect 数组类CCArray 入口类main.cpp 这是应用程序的入口类,用于创建cocos2dx的AppDelegate实例.窗口大小.以及运行程序. 主要代码如下:     // create the application instance     A

cocos2dx基础篇(10)——开关按钮CCControlSwitch

[本节内容] 开关类CCControlSwitch继承于控件类CCControl. 控件类CCControl主要向子类提供了一系列的控件触发事件.当子控件触发相关的事件后,就会执行相关的控件事件回调函数.这与之前讲的CCMenu中的菜单按钮回调是类似的. 控件类CCControl主要有三个子类: (1)开关控件CCControlSwitch (2)滑块控件CCControlSlider (3)按钮控件CCControlButton 本节讲的是其子类其中之一:开关类CCControlSwitch.

cocos2dx基础篇(7)——菜单按钮CCMenu、CCMenuItem

[本节内容] 菜单按钮在游戏中是经常被用到的,比如主菜单界面的菜单选项,暂停游戏时的菜单选项等等.cocos2dx引擎同样为我们提供了CCMenu菜单的功能,并包含了一些简单的菜单项CCMenuItem.且菜单项附带触碰按钮时,自动放大的效果. 温馨提示:本节内容比较多,需要大家慢慢分析,不要急于求成. 本节组织结构如下: 一.介绍CCMenu. 二.介绍CCMenuItem,及其具体的六个子类. 三.代码实战. [一.菜单CCMenu] 菜单CCMenu是专门用来承载菜单按钮的CCLayer图

cocos2dx基础篇(4)——浅析cocos2dx引擎目录

通过前面几节的学习,相信大家都已经配置好了VS+cocos2dx2.2.3的环境,并且成功运行了官方的案例HelloWorld. 一.窥探文件目录 要想学好cocos2dx,首先就需要对引擎目录下的各个文件有所了解.接下来,就让我们先来分析一下cocos2dx2.2.3引擎的文件目录吧. 从目录中我们主要了解一下一下几个文件: cocos2dx:cocos2d-x引擎的核心部分,存放了引擎的大部分源文件. CocosDenshion:声音模块相关源文件. Debug.win32:在Windows

cocos2dx基础篇(8)——定时器更新schedule、update

[本节内容] 定时器在大部分游戏中是不可或缺的,即每隔一段时间,就要执行相应的刷新体函数,以更新游戏的画面.时间.进度.敌人的指令等等. cocos2dx为我们提供了定时器schedule相关的操作.其操作函数的定义在CCNode中,所以基本上大多数的引擎类都可以设置定时器,如CCLayer.CCSprite.CCMenu等. 定时器更新的方式分为三类: (1)默认定时器:scheduleUpdate(); (2)自定义定时器:schedule(); (3)一次性定时器:scheduleOnce

cocos2dx基础篇(29)——屏幕适配

[唠叨] 手机的屏幕大小千差万别,如现在流行的安卓手机屏幕大部分长宽比例为16:9.而iPhone 5S的长宽比例为71:40(接近16:9),也有预测说iPhone 6S的长宽比例也将会是主流的16:9.另外还有一些平板电脑为4:3.16:10.5:4等等.当然还有一些其他的牌子可能屏幕比例也不一样. 要想让你的程序在各种手机上都能很好的呈现游戏画面,就需要进行屏幕适配. 本节将以下三篇文章进行提炼整合,摘取讲得比较好的段落. [致谢] http://gl.paea.cn/contents/1

【Cocos2d入门教程二】Cocos2d-x基础篇

上一章已经学习了环境的搭建.这一章对基础概念进行掌握.内容大概有: 1.导演 2.场景 3.节点 4.层 4.精灵 1.导演(Director) 导演存在的主要作用: 环境设定(帧率 初始化openGl和渲染器) 场景管理 执行主循环 游戏就是个死循环 不断不断的渲染  就跟视频没两样 一帧一帧的绘制出来  话说提一下一帧为1/60秒  也就是说cocos2d里一秒渲染60次 导演的管理:   计时器  事件管理器  动作管理器 导演继承于REF  一个单例类 获得导演类Director实例语句