iOS_31_cocos2d_纹理打包(TexturePacker)

最终效果图:
图片 1 末段代码:纹理相册的接纳
图片 2

// 4.播放赵云的序列帧动画
- (void)zhaoyunPlay
{
    // 1.【精灵帧缓存】 是一个单例
    CCSpriteFrameCache *spriteFrameCache= [CCSpriteFrameCache sharedSpriteFrameCache];
    // 从一个plist文件中加载一个大图片,方法内部会进行切割,生成所有的小精灵帧 都将会放到【精灵帧缓存】中
    // 只需要,根据小精灵帧的在plist中的名字,就可以取出对应的 已经分割好的,精灵帧
    [spriteFrameCache addSpriteFramesWithFile:@"zhaoyun.plist"];

    // 2.精灵帧数组的填充
    NSMutableArray *spriteFramesArr = [NSMutableArray array];

    for (int i = 1; i<=10; i++) {
        // 合成的小精灵帧的文件名,必须是plist里面的key,一个key对应一个字典
        NSString *filename = [NSString stringWithFormat:@"%d.png", i];
        // 从【精灵帧缓存】 根据小精灵的名字,取出对应的精灵帧对象
        CCSpriteFrame *oneSpriteFrame = [spriteFrameCache spriteFrameByName:filename];
        // 添加到数组
        [spriteFramesArr addObject:oneSpriteFrame];
    }

    // 3.为精灵添加动画
    CCAnimation *animation = [CCAnimation animationWithSpriteFrames:spriteFramesArr delay:0.1];
    CCActionAnimate *animate = [CCActionAnimate actionWithAnimation:animation];
    [_sprite runAction:[CCActionRepeatForever actionWithAction:animate]];

}

TexturePacker工具专项使用用来对多张图片进行打包成一张大图片
其目标是:1.节省里部存款和储蓄器空间,2.滑坡纹理渲染的次数
因为Android和iOS的游玩,都以经过OpenGL ES举办渲染, OpenGL
ES要求纹理的尺码必须为2的n次方,
假使不是,则会扩大至近来的2的n次方的尺码(通过填充透明像素)
最根本的是:纹理渲染特别消耗质量,
若果每于每一张小图片,分别开始展览渲染,则都要经过三个步骤:
企图渲染、伊始渲染、结束渲染
可是,借使用TP将,全数小图片,合成一张大图片,
则只需渲染贰遍(即只需对大图片进行:早为之所渲染、开首渲染、甘休渲染)
那将大大提高品质

譬如表明,有一张260×260像素的三贰10位色图,

它在内部存款和储蓄器中山大学大抵攻克270KB(260 x 260 x 32 / 8 = 270400B),

但受纹理尺寸的范围,纹理的尺寸必须是2的n次幂,

系统将自动生成一张最邻近原图尺寸的(只会比原图尺寸大)、宽高都为2的n次幂的纹理,

为此,系统将会生成一张512×512像素的纹理,

与此同时,最后会据有1MB的内部存款和储蓄器(512 x 512 x 32 / 8 = 1048576B),

能够阅览,实际占领的内部存款和储蓄器依旧是原图所需内存的4倍。

化解办法正是将那张260×260像素的图像改为256×256像素,系统也将扭转256×256像素的纹路。

图片 3 它合成后的大图片,援救以下各个框架
图片 4 图片 5 **图片 6


** 它由一个人叫做Andreas Loew的老外开拓。上边是她的推文(Tweet)帐号、照片墙帐号
图片 7
图片 8
下载下来,如图所示:
图片 9
开荒应用,分界面如下: 一、点击Add Folder(展开一个富含n多图片的folder)
图片 10
二、将含有常胜将军全体图片的文本夹选中
图片 11
三、设置各个参数,此时,分界面如下:
图片 12
图片 13
上面是不毫无干系系的参数设置: data Format选项,援助的格式有:
图片 14
Data Filename:生成的目的文件名
图片 15
Texture Format:
图片 16
推荐介绍选用:压缩过的PV本田CR-V 【.pvr.ccz】
图片 17
图片 18
图片 19
图片 20
图片 21
Image FZ喎?” target=”_blank”
class=”keylink”>vcm1hdKO6CgrNxrz2o7pSR0JBNDQ0NKOsvLRSR0JBt9ax8NPDNM67se3KvgoKPGltZyBzcmM9″”
alt=”\”>
Dithering【无语】抖动处理??? 接纳:FloydSteinberg???
图片 22
图片 23
当Algorithm为MaxRects时:
图片 24
当Algorithm为Basic时:
图片 25
当Allow Rotation为NO时:
图片 26
四、点击 发表【Publish】,会扭转一个大png和一个plist文件
注意:Save是保留TP工程,生成TPS文件
图片 27
图片 28
图片 29
Plist文件内容如下: 字典:键是图片名,如1.png
值是叁个字典,键有:frame、offset、rotated、sourceSize、sourceColorRect

        frames

            1.png

                frame
                {{2,416},{92,107}}
                offset
                {-29,-26}
                rotated

                sourceColorRect
                {{91,56},{92,107}}
                sourceSize
                {332,167}

            10.png

                frame
                {{111,414},{184,81}}
                offset
                {-3,-29}
                rotated

                sourceColorRect
                {{71,72},{184,81}}
                sourceSize
                {332,167}

            2.png

                frame
                {{2,224},{190,81}}
                offset
                {-71,-29}
                rotated

                sourceColorRect
                {{0,72},{190,81}}
                sourceSize
                {332,167}

            3.png

                frame
                {{297,337},{136,127}}
                offset
                {-46,-6}
                rotated

                sourceColorRect
                {{52,26},{136,127}}
                sourceSize
                {332,167}

            4.png

                frame
                {{297,182},{158,153}}
                offset
                {-59,7}
                rotated

                sourceColorRect
                {{28,0},{158,153}}
                sourceSize
                {332,167}

            5.png

                frame
                {{85,224},{188,149}}
                offset
                {-12,5}
                rotated

                sourceColorRect
                {{60,4},{188,149}}
                sourceSize
                {332,167}

            6.png

                frame
                {{2,2},{242,143}}
                offset
                {45,2}
                rotated

                sourceColorRect
                {{90,10},{242,143}}
                sourceSize
                {332,167}

            7.png

                frame
                {{246,2},{242,119}}
                offset
                {45,-10}
                rotated

                sourceColorRect
                {{90,34},{242,119}}
                sourceSize
                {332,167}

            8.png

                frame
                {{246,123},{232,57}}
                offset
                {40,-41}
                rotated

                sourceColorRect
                {{90,96},{232,57}}
                sourceSize
                {332,167}

            9.png

                frame
                {{2,147},{198,75}}
                offset
                {24,-32}
                rotated

                sourceColorRect
                {{91,78},{198,75}}
                sourceSize
                {332,167}


        metadata

            format
            2
            realTextureFileName
            zhaoyun.png
            size
            {512,512}
            smartupdate
            $TexturePacker:SmartUpdate:aae1cbd56ecaac00aa0364cad5d7b3d2:1/1$
            textureFileName
            zhaoyun.png

最终合成的图纸:
图片 30
Plist文件一览:
图片 31

)
最终效果图: 最后代码:纹理相册的行使 // 4.广播常胜将军的行列帧动画-
(void)zhaoyunPlay{ // 1.【Smart帧缓存】 是一…

一.TexturePacker的优点

RGB16

转移纹理之后必要传递到shader中开始展览绑定。大家在一些着色器中增多uniform
sampler2D
texture,在那之中sampler2D是纹理参数类型。然后经过texture2D函数采集样品fragUV坐标下的texture像素颜色。重临值赋值给gl_FragColor:

TP那一个软件其实很好用。打开TexturePacker软件:

代码优化:

图片 32

使用string.png

图片 33

贴图压缩优化.png

图片 34

comparetag获取图片.png

图片 35

接纳对象池.png

每一个面上的各样三角形的每一种终端钦赐纹理坐标点。如下图这样:

 图片 36

在Unity里渲染的大小分别是:
                  442  X 563  =  0.9MB
                  512  X 1024 = 0.5MB
                  512  X 512  =  256KB
                  256 X 256  =  64kB
                  256 X 563 = 0.5MB
                  442 X 256 = 442KB

图片 37

作者们这里需求明白三个概念:图片格式(Image format)。图片格式有宝马X3GBA8888、EvoqueGBEquinox444、ENVISIONGBA5555、EvoqueGB888等等。如若我们选用的图片格式为OdysseyGBA8888,也正是说图片种种像素点都由Lacrosse、G、B、GREIZ个值组成,各样值占用8位(值为0-255),那么贰个像素点会占用8位*4=三10个人=4字节。所以图片大小为64*65时大家依据64*128载入,此时会招致64*(128-65)*4字节=16128字节=15.75KB的内部存款和储蓄器空间浪费,要驾驭整张图片的轻重才有64*65*4/1024=16.25KB。

认识TexturePacker的界面:

先看一下生成纹理,能够应用GLKit提供的变型方法:

 

透过静态绑定的艺术 来 Instantiate 四个能源

IEnumerator InstResources()
{
    // 62.0MB
    Resources.UnloadUnusedAssets ();
    yield return new WaitForSeconds (5.0f);

    // 64.4MB
    GameObject tank = Resources.Load("Role/Tank")as GameObject;
    GameObject inst = GameObject.Instantiate (tank,Vector3.zero,Quaternion.identity)as GameObject;
    yield return new WaitForSeconds (1f);

    // 64.0MB
    GameObject.Destroy (inst);
    yield return new WaitForSeconds (1f);

    //释放无用资源 (6.23MB)
    tank = null;
    Resources.UnloadUnusedAssets ();
    yield return new WaitForSeconds (1f);
}

图片 38

透过静态绑定.png

总结:

图片 39

.png

图片 40

01.png

图片 41

02.png

图片 42

03.png

图片 43

 

在类型中,尽大概是采纳ETC1和PVR电视4等GPU直接辅助的图片格式,不唯有内部存款和储蓄器占用低、品质也更加好;当现身品质不如格时,再逐步的升高压缩格式,来满足急需。

参照:OpenGL ES应用开垦实施指南 iOS卷

能够见见,大家因此敏锐帧缓存的单例对象将合图加载到了工程中,使用的章程为addSpriteFramesWithFile(),也正是说合图中的图片财富都是以Smart帧的款型储存起来的

架构设计优化

图片 44

情景优化.png

图片 45

生命周期优化.png

图片 46

Resources和Instance加载分裂优化.png

图片 47

创设财富情势.png

图片 48

destroy和instance的优化分裂.png

下边看占星比:(MB 的转换)

//  LoadResources 和 Instance 的对比
// 协程
IEnumerator LoadResources()
{
    //清除干净以免影响测试结果 
    Resources.UnloadUnusedAssets ();

    // 5s 秒后看结果 (72.8MB)
    yield return new WaitForSeconds (5.0f);

    // 通过 Resource.load 加载资源 (72.8MB)
    GameObject tank = Resources.Load("Role/Tank")as GameObject;
    yield return new WaitForSeconds (0.5f);

    // Instantiate 一个资源出来 (75.3MB)
    GameObject tankInst = GameObject.Instantiate(tank,Vector3.zero,Quaternion.identity) as GameObject;
    yield return new WaitForSeconds (0.5f);

    // Destory 一个资源 (没有立刻释放,存在镜像缓存,事实上内存变化非常小)(74.7MB)
    GameObject.Destroy(tankInst);
    yield return new WaitForSeconds (0.5f);

    // 释放无用资源 (72.3MB)
    tank = null;
    Resources.UnloadUnusedAssets (); // 这个是内存 的释放是完美的
    yield return new WaitForSeconds (0.5f);
}

补充:
大许多的OpenGL
ES实现要么须要、要么受益于采纳尺寸为2的幂的纹理。本例中的图片为512×512,边长均为2的n次幂,那几个尺寸符合OpenGL
ES的须要。贰个4×64的纹理是可行的,三个128×128的纹路能够干活特出。二个1×64的纹路也得以。叁个200×200的纹理要么不干活,要么依照使用的OpenGL
ES版本在渲染时造功用率低下。

 

近期在做Unity的内部存储器优化,代码大概从不得以优化的地点了,那么独有从图片素材进行。

此地的GLKTextureLoader类是苹果GLKit框架提供的实用工具类,可简化从各个文件格式加载OpenGL或OpenGL
ES纹理数据。
里面提供了伊始化新纹理加载器对象恐怕从文件加载纹理、从内存中创制纹理、从U哈弗L加载纹理和从CGImages创立纹理方法。
这里并不会从来开立GLKTextureInfo对象,而通过GLKTextureLoader成立的OpenGL纹理数据重临GLKTextureInfo纹理消息目的供大家运用,它的name属性正是opengl上下文的纹路名称,以便我们用来和OpenGL实行交互。
急需详细摸底的能够在苹果官方文档查阅

 

补偿一下:

本着大图往往是过多小图合成的图集 Atlas,且 GPU 在拍卖图片是三番两次供给 POT
(Power of Two)大小的纹路那七个特征。另一种管理格局是把小图挤到半张
Atlas 里面,其余半张放折射率新闻。
这般管理, iOS
平台下的支付也就不会太大。其实,由于小图往往长度宽度比不准则,比比较多原先要求一张大图的Atlas完全能够献身半张图里面。
正文重借使介绍后边的管理格局。当然,也就讲个思路。先把图片排到半张图得到半图,再采用Mali 的 TCT 工具获得所需的全图。最后写三个 Shader 来收获完整的图形音信。

图片 49

咱俩新建一个类型,导入图片能源并安装相关属性,就能够公布了。这里自个儿将6个开关图片合成了一张大图。发布后会生成多个公文,贰个保存各图片音信的.plist文件和叁个.png格式的大图。

Border/shape padding:

即在spritesheet里面,设置Smart与机智之间的间隔。尽管你在您的游玩当中看到Smart的边际有局地“杂图”的时候,你就足以扩大这一个Smart之间的间隔。

为uv内定数量读取规范:

 

Extrude:

敏感边界的再次像素个数.
这些与间隔是相对应的–借让你在你的敏锐性的边边上看看一些透明的小点点,你就足以经过把这几个值设设置大学一年级点。

cube.gif

 图片 50

Algorithm TexturePacker:

里头近来独一协理的算法正是马克斯Rects,即按灵活尺寸大小排列,但是那个算法效果十分好,因而你不要管它。

第一看一下纹理坐标。

发布TP工程。

Shape outlines:

把这一个选项张开,那么就能够收看Smart的边边。那在调度的时候特别有效。

每一个终端的U和V坐标会附加到每一种终端的视口坐标系中的最后地点。

个别为:新创制一个TP工程;

Publish:

导出财富文件(.plist和png)

双重定义好了fragment shader,大家回到项目中实行纹理绑定:

运转结果:

AddSprite:

加多图片Add Folder:遵照文件夹增添图片

纹理映射到转换后的终点

三.使用TexturePacker合图

Image format:

图表像素格式,暗中认可QX56GBA8888…遵照对图纸性能的急需导出差别的格式

// 绑定纹理到GL_TEXTURE_2D
glBindTexture(GL_TEXTURE_2D, texture.name);

// 获取texture位置
GLuint textureUniformLocation = glGetUniformLocation(program, "texture");

// 将0传递给texture
glUniform1i(textureUniformLocation, 0);

1.先是供给加载合图

2、即使自个儿的图纸不是2次方的正方形,能做获得吗?

而奥迪Q3GB16,是任重先生而道远针对一些,不带透明通道,同一时候长度宽度又不是2的次方的图样;对于那一个图片,使用EvoqueGB16能够裁减二分一的内部存储器,不过意义会略逊于宝马X5GB32。

OpenGL
ES中得以敞开8个通道,通道0是暗中认可开启,这里大家只设置一层纹理。所以没有须求再展开越来越多通道,直接将0传递给textureUniformLocation就能够。

若选择冠道GBPASSAT444据有的内部存款和储蓄器大小会减小百分之五十,那样会节约一倍内部存款和储蓄器,代价便是图表品质有损失,但由于算法存在这种损失是非常小的。

看出来区别了吗!无论怎么相比较,正是 2次方的星型最优!

static GLfloat vertices[] = {

    // X轴+
    0.5,  0.5, -0.5,  1, 0, 0,  1, 1,
    0.5, -0.5, -0.5,  1, 0, 0,  1, 0,
    0.5,  0.5,  0.5,  1, 0, 0,  0, 1,
    0.5,  0.5,  0.5,  1, 0, 0,  0, 1,
    0.5, -0.5,  0.5,  1, 0, 0,  0, 0,
    0.5, -0.5, -0.5,  1, 0, 0,  1, 0,

    // X轴-
   -0.5,  0.5, -0.5,  1, 0, 0,  0, 1,
   -0.5, -0.5, -0.5,  1, 0, 0,  0, 0,
   -0.5, -0.5,  0.5,  1, 0, 0,  1, 0,
   -0.5, -0.5,  0.5,  1, 0, 0,  1, 0,
   -0.5,  0.5,  0.5,  1, 0, 0,  1, 1,
   -0.5,  0.5, -0.5,  1, 0, 0,  0, 1,

    // Y轴+
    -0.5,  0.5, -0.5,  0, 1, 0, 0, 0,
    -0.5,  0.5,  0.5,  0, 1, 0, 1, 0,
     0.5,  0.5,  0.5,  0, 1, 0, 1, 1,
     0.5,  0.5,  0.5,  0, 1, 0, 1, 1,
     0.5,  0.5, -0.5,  0, 1, 0, 0, 1,
    -0.5,  0.5, -0.5,  0, 1, 0, 0, 0,

    // Y轴-
    -0.5, -0.5, -0.5,  0, 1, 0, 0, 0,
    -0.5, -0.5,  0.5,  0, 1, 0, 1, 0,
     0.5, -0.5,  0.5,  0, 1, 0, 1, 1,
     0.5, -0.5,  0.5,  0, 1, 0, 1, 1,
     0.5, -0.5, -0.5,  0, 1, 0, 0, 1,
    -0.5, -0.5, -0.5,  0, 1, 0, 0, 0,

    // Z轴+
    -0.5,  0.5,  0.5,  0, 0, 1, 0, 1,
    -0.5, -0.5,  0.5,  0, 0, 1, 0, 0,
     0.5, -0.5,  0.5,  0, 0, 1, 1, 0,
     0.5, -0.5,  0.5,  0, 0, 1, 1, 0,
     0.5,  0.5,  0.5,  0, 0, 1, 1, 1,
    -0.5,  0.5,  0.5,  0, 0, 1, 0, 1,

    // Z轴-
    -0.5,  0.5, -0.5,  0, 0, 1, 0, 1,
    -0.5, -0.5, -0.5,  0, 0, 1, 0, 0,
     0.5, -0.5, -0.5,  0, 0, 1, 1, 0,
     0.5, -0.5, -0.5,  0, 0, 1, 1, 0,
     0.5,  0.5, -0.5,  0, 0, 1, 1, 1,
    -0.5,  0.5, -0.5,  0, 0, 1, 0, 1,
};

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注