使用许多小图拼接的大图制作精灵

    写在前头：2年前，我使用cocos2d-x自娱自乐开发了一些小游戏，中间突然不想搞了，主要是因为一个人做美术太烦了，用falsh做的那个半吊子图片不忍直视，做出来的东西丑陋无比，玩的也没意思。不过现在开始流行微信小游戏，又想认真搞一个棋牌游戏来玩玩，所以重新开始学习了。

    在cocos2d官网搜了下最新的游戏引擎，发现了最新的开发工具是cocos creator，一打开这个工具还以为是u3d，不止是界面，连操作习惯都很类似，真的惊讶了一下，没想到开源界也整出了这么牛逼的开发工具。

    跟着官网的入门教程做完了那个吃星星的hello world，感觉确实方便了不少，不过对于我这种以前用代码来写游戏的人来说，有些东西还是改不过来，这不就遇到了问题：比如主角头像的生成，以前我是把所有的图像拼接成一个大图，然后通过行列号来索引，通过遮罩显示出来，现在用这个工具就完全不知道怎么弄了。

大图的样子：

    搜了下相关资料找到了答案，那就是通过图集生成工具 TexturePacker 将小图像做成图集，结果中会生成一个.plist文件和大图，如下所示（TexturePacker 自动去除了重复头像）：

    在cocos creator里动态使用头像，首先在场景代码 game.js 里声明图集属性（注意在开发工具的属性检查器添加当前场景的代码组件 game.js，然后将预制体 player 和 图集plist 拖动到声明的对象属性中）：

properties: {
        // 主角头像图集
        player_head_atlas:{
            default:null,
            type:cc.SpriteAtlas,
        },

        // 主角
        player: {
            default: null,
            type: cc.Prefab,
        },
    },

    然后在代码相应位置里调用代码变更主角头像：

// 初始化player
var player = cc.instantiate(this.player);
this.node.addChild(player);
player.setPosition(cc.p(100,0));
        
// 设置主角头像
var frame = this.player_head_atlas.getSpriteFrame('0_3'); // 这里是制作图集对象里的图片名称 0_3.png
player.getComponent(cc.Sprite).spriteFrame = frame; // 变更纹理

    吐槽一下：源码编辑模式在哪儿，中间操作失误有个代码段去不掉，图片也不能变更大小，我靠