码迷,mamicode.com
首页 > 其他好文 > 详细

【cocos2d-x】图片平铺和Scale9Sprite

时间:2014-12-25 16:26:29      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:cocos2d-x   scale9sprite   平铺   

今天介绍cocos2dx如何使用平铺和Scale9Sprite
平铺主要用到了openGL的知识,示例代码如下:

Texture2D *texture = Director::getInstance() -> getTextureCache() -> addImage("Santa.png");
Texture2D::TexParams tp = {GL_LINEAR, GL_LINEAR, GL_REPEAT, GL_REPEAT};
texture -> setTexParameters(tp);
auto sprite = Sprite::createWithTexture(texture, Rect(0 , 0, visibleSize.width, visibleSize.height));
sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
this->addChild(sprite, 0);      

原图片:
技术分享

实现效果:

技术分享
注意:

  1. TexParams是纹理参数,可以通过它实现纹理变换,前两个参数是纹理过滤规则,后两个参数是纹理环绕模式。
    常见的几种:

    * 过滤规则
        * GL_LINEAR:使用邻近像素点来插值补点
        * GL_NEAREST:最邻近点过滤
    * 环绕模式
        * GL_REPEAT:重复纹理
        * GL_CLAMP:边缘像素复制     
    
  2. 注意纹理的长宽必须是2的n次方,否则会报错

Scale9Sprite有人叫9宫格,有人叫9妹,不过叫什么都无所谓,用法是一样的。
Scale9Sprite可以用来拉伸图片,但是不失真。实现原理就是把图片分成九块,四个角的区域都保持不变,上下左右四条边只做一个方向的拉伸,中间区域放大,示例如下:

原图片:

技术分享使用setScale放大:

技术分享使用Scale9Sprite:

技术分享分割图片:

技术分享用法:
cocos2d-x 3.x以后废弃了Extension::Scale9Sprite,现在统一使用ui::Scale9Sprite,使用它首先要引入头文件和名称空间

#include "cocos-ext.h"   
USING_NS_CC_EXT;    

示例代码:

//第一个Rect是指定Scale9Sprite的区域,第二个是指定中间用于拉伸的区域
ui::Scale9Sprite *scale9Sprite = ui::Scale9Sprite::create("sample.png", Rect(0, 0, 142, 80), Rect(10,10, 122, 60));
//目标大小
scale9Sprite -> setPreferredSize(visibleSize);
scale9Sprite -> setPosition(visibleSize * 0.5f);
this -> addChild(scale9Sprite); 
欢迎访问我的博客:helkyle.tk

【cocos2d-x】图片平铺和Scale9Sprite

标签:cocos2d-x   scale9sprite   平铺   

原文地址:http://blog.csdn.net/joueu/article/details/42147373

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!