cocos2dx--纹理平铺

cocos2dx--纹理平铺,第1张

概述使用cocos2d-x的时候,有时候我们需要一场重复纹理的大图,比如某个有很多花纹的背景,花纹都是完全一样的,这个时候用一张很大的图片就比较浪费了,正确的做法应该是只做一个花纹的图片,然后利用cocos2d-x的平铺技术,生成一个有很多花纹的大背景,这样就比较节省资源。 代码如下: //auto texture = Director::getInstance()->getTextureCache(

使用cocos2d-x的时候,有时候我们需要一场重复纹理的大图,比如某个有很多花纹的背景,花纹都是完全一样的,这个时候用一张很大的图片就比较浪费了,正确的做法应该是只做一个花纹的图片,然后利用cocos2d-x的平铺技术,生成一个有很多花纹的大背景,这样就比较节省资源。


代码如下:

//auto texture = Director::getInstance()->getTextureCache()->addImage("test.png");//auto sprite = Sprite::createWithTexture(texture);auto sprite = Sprite::create("test.png");Texture2D::TexParams texParams = { GL_liNEAR,GL_liNEAR,GL_REPEAT,GL_REPEAT };sprite->getTexture()->setTexParameters(texParams);sprite->setTextureRect(Rect(0,1024,1024));sprite->setposition(Vec2( 0,0));addChild(sprite);

效果如下:



上面最重要的函数就是setTexParameters();他就是根据TexParams来控制纹理图像的纹理如何对应到屏幕的像素。根据什么来实现纹理的缩放和纹理的重复(重复纹理)等效果。


我们来看看TxtParams这个结构体

/** Extension to set the Min / Mag filter */typedef struct _TexParams {	gluint    minFilter;//纹理过滤器:缩小过滤器	gluint    magFilter;//纹理过滤器:放大过滤器	gluint    wrapS;//横向纹理寻址模式	gluint    wrapT;//纵向纹理寻址模式}TexParams;


两个基本的纹理过滤规则:

(1)GL_liNEAR:“当显示纹理时,显示的大小大于或者小于原纹理的尺寸时,使用邻近像素点来插值补点”

特点:图像拉伸或者缩小后,看起来失真了,但是效果比GL_NEAREST好,看起来没有人工 *** 作后的痕迹.

(2)GL_NEAREST:(最邻近过滤)最简单最快捷的过滤方式。

特点:当纹理拉伸到特别大的时候,会出现大片斑驳状像素。

TexParameters后面的两个成员变量叫做纹理环绕模式.是用来控制当绘制纹理边界范围之外的像素点的时候应该怎么去处理。openGL纹理的坐标范围是(0.0f, 1.0f).意思就是当纹理坐标大于1.0f或者纹理坐标小于0.0f的时候怎么去处理纹理。


两个常用的纹理环绕模式:
(1)GL_REPEAT:在纹理超过1.0f的方向上对纹理进行重复。如果你想显示纹理边界之外的像素点时,把它旁边的纹理像素点平铺过去。
注意:精灵的位置不会发生变化.这就用GL_REPEAT来实现了重复纹理的效果.

还需要注意的是纹理的宽和高必须是2的N次方大小。否则的话当你用GL_REPEAT来作为环绕模式的时候会出现警告提示:GL_REPEAT mode must be POT.意思就是用GL_REPEAT模式图片大小必须是2的指数幂(POT).警告提示完了之后就是崩溃.

(2)GL_CLAMP:作用就是纹理的绘制坐标大于1.0则就设置成1.0, 小于0.0则设置成0.0;

如果绘制的x坐标大于了纹理宽度,则就用纹理最右边的一个像素来绘制后面的区域.


但是据说这里的小图块一定要用单独一张小图,而且宽高为2的幂,如果用texturePacker之类的工具打包了,再用spriteFrame创建出sprite的话上面代码会有问题。 没有证实过。

总结

以上是内存溢出为你收集整理的cocos2dx--纹理平铺全部内容,希望文章能够帮你解决cocos2dx--纹理平铺所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1079084.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存