Henry Blog

Javaer

0%

CVP认证学习笔记--(何小成)021--纹理打包文件读取

发表于 分类于 阅读次数： 评论：

概念

本节课内容介绍了如何将多张小图打包成一张大图，以及纹理打包文件的读取，在正式项目中，一个精灵动画的多帧图片通常是通过TexturePacker打包成一张png及一个plist文件使用，在cocos中使用其中的纹理图片时，直接通过解析plist文件就能读取到打包的png的各个需要的帧图片的部分

步骤

打包纹理图片

上一节直接使用了打包好的纹理大图，这一节介绍打包这张大图的一个工具————TexturePacker，同时又mac版和win版，使用Texture，将要打包的图片拖进去，设置好图片大小，然后发布，就能在对应目录下生成一个png文件一个plist文件，其中png文件就是打包好的大图，plist是一个xml文件，对这张png图片的详细描述。plist文件具体内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>frames</key>
        <dict>
            <key>kick01.png</key>
            <dict>
                <key>frame</key>
                <string>{{2,164},{42,106}}</string>
                <key>offset</key>
                <string>{-36,-3}</string>
                <key>rotated</key>
                <true/>
                <key>sourceColorRect</key>
                <string>{{15,10},{42,106}}</string>
                <key>sourceSize</key>
                <string>{144,120}</string>
            </dict>
            <key>kick02.png</key>
            <dict>
                <key>frame</key>
                <string>{{194,262},{56,84}}</string>
                <key>offset</key>
                <string>{-36,-14}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{8,32},{56,84}}</string>
                <key>sourceSize</key>
                <string>{144,120}</string>
            </dict>
            <key>kick03.png</key>
            <dict>
                <key>frame</key>
                <string>{{100,262},{64,92}}</string>
                <key>offset</key>
                <string>{-36,-10}</string>
                <key>rotated</key>
                <true/>
                <key>sourceColorRect</key>
                <string>{{4,24},{64,92}}</string>
                <key>sourceSize</key>
                <string>{144,120}</string>
            </dict>
            <key>kick04.png</key>
            <dict>
                <key>frame</key>
                <string>{{2,208},{72,96}}</string>
                <key>offset</key>
                <string>{-23,-8}</string>
                <key>rotated</key>
                <true/>
                <key>sourceColorRect</key>
                <string>{{13,20},{72,96}}</string>
                <key>sourceSize</key>
                <string>{144,120}</string>
            </dict>
            <key>kick05.png</key>
            <dict>
                <key>frame</key>
                <string>{{2,282},{54,90}}</string>
                <key>offset</key>
                <string>{-29,-11}</string>
                <key>rotated</key>
                <true/>
                <key>sourceColorRect</key>
                <string>{{16,26},{54,90}}</string>
                <key>sourceSize</key>
                <string>{144,120}</string>
            </dict>
            <key>kick06.png</key>
            <dict>
                <key>frame</key>
                <string>{{2,2},{122,102}}</string>
                <key>offset</key>
                <string>{8,-5}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{19,14},{122,102}}</string>
                <key>sourceSize</key>
                <string>{144,120}</string>
            </dict>
            <key>kick07.png</key>
            <dict>
                <key>frame</key>
                <string>{{126,2},{118,102}}</string>
                <key>offset</key>
                <string>{8,-5}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{21,14},{118,102}}</string>
                <key>sourceSize</key>
                <string>{144,120}</string>
            </dict>
            <key>kick08.png</key>
            <dict>
                <key>frame</key>
                <string>{{110,168},{92,100}}</string>
                <key>offset</key>
                <string>{6,-6}</string>
                <key>rotated</key>
                <true/>
                <key>sourceColorRect</key>
                <string>{{32,16},{92,100}}</string>
                <key>sourceSize</key>
                <string>{144,120}</string>
            </dict>
            <key>kick09.png</key>
            <dict>
                <key>frame</key>
                <string>{{118,106},{60,112}}</string>
                <key>offset</key>
                <string>{-11,0}</string>
                <key>rotated</key>
                <true/>
                <key>sourceColorRect</key>
                <string>{{31,4},{60,112}}</string>
                <key>sourceSize</key>
                <string>{144,120}</string>
            </dict>
            <key>kick10.png</key>
            <dict>
                <key>frame</key>
                <string>{{2,106},{56,114}}</string>
                <key>offset</key>
                <string>{-12,1}</string>
                <key>rotated</key>
                <true/>
                <key>sourceColorRect</key>
                <string>{{32,2},{56,114}}</string>
                <key>sourceSize</key>
                <string>{144,120}</string>
            </dict>
        </dict>
        <key>metadata</key>
        <dict>
            <key>format</key>
            <integer>2</integer>
            <key>realTextureFileName</key>
            <string>npc.png</string>
            <key>size</key>
            <string>{256,512}</string>
            <key>smartupdate</key>
            <string>$TexturePacker:SmartUpdate:e4480d70d3c21807e7e1537afdfcd8a8$</string>
            <key>textureFileName</key>
            <string>npc.png</string>
        </dict>
    </dict>
</plist>

可以看到，在plist中，对png中的每个小图片的位置，名字等都有详细描述，在cocos中通过SpriteFrameCache就可以对plist中的信息进行读取，然后从png中切出这张小图。

加载纹理图片

一次性加载纹理图片并解析所有的帧

1
cc.spriteFrameCache.addSpriteFrames(res.npc_plist);

使用帧缓存创建Sprite

根据帧缓存就可以创建sprite

1
2
var sp=new cc.Sprite(cc.spriteFrameCache.getSpriteFrame("kick01.png"));
this.addChild(sp);

使用帧缓存创建动画

也可以使用帧缓存创建动画

1
2
3
4
5
6
7
8
var frames=[];
for(var n=1;n<10;n++)
{
    var sf=cc.spriteFrameCache.getSpriteFrame("kick0"+n+".png");
    frames.push(sf);
}
var animation=new cc.Animation(frames,0.2);
var animate=new cc.animate(animation);

作业

本节作业：实现对spriteBachNode的动画创建，让动画播放添加到一个spriteBachNode父节点上。作业代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();

        //一次加载纹理图片和解析所有的帧
        cc.spriteFrameCache.addSpriteFrames(res.npc_plist);
        //根据帧缓存来创建sprite
        var sp=new cc.Sprite(cc.spriteFrameCache.getSpriteFrame("kick01.png"));
        // this.addChild(sp);
        sp.setPosition(200,200);
        //使用帧缓存创建动画
        var frames=[];
        for(var n=1;n<10;n++)
        {
            var sf=cc.spriteFrameCache.getSpriteFrame("kick0"+n+".png");
            frames.push(sf);
        }
        var animation=new cc.Animation(frames,0.2);
        var animate1=new cc.animate(animation);
        var animate2=new cc.animate(animation);
        
        // 本节作业，实现对spriteBachNode的动画创建
        // 让动画播放添加到一个spriteBachNode父节点上
        
        // 读取和plist文件同名的png文件，这个文件其实已经被读取到纹理内存里了的
        var spBatch = new cc.SpriteBatchNode(res.npc_png);
        this.addChild(spBatch,1);
        // 为SpriteBatchNode添加第一个Sprite
        var sp1 = new cc.Sprite.create(cc.spriteFrameCache.getSpriteFrame("kick01.png"));
        sp1.setPosition(300,300);
        spBatch.addChild(sp1,3);
        sp1.runAction(animate1.repeatForever());
        // 为SpriteBatchNode添加第二个Sprite
        var sp2 = new cc.Sprite.create(cc.spriteFrameCache.getSpriteFrame("kick01.png"));
        sp2.setPosition(500,300);
        spBatch.addChild(sp2,3);
        sp2.runAction(animate2.repeatForever());
        return true;
    }
});

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

最终效果

http://www.cocoscvp.com/usercode/2016_04_30/810eec0b33a2c2d59f828dda9204f341d0d9a585/

大爷赏点儿呗.

欢迎关注我的其它发布渠道