背景：毫无疑问，Sprite精灵组件在游戏开发中是使用最多的元素。根据cocos creator的Sprite组件使用，简单写下我的理解。

1)如何显示一张图片

1.添加空节点

2.挂载Sprite组件

3.指定Sprite组件要显示的图片，即spriteFrame

2)理解Sprite组件的选项

1.Type

Simple：

简单这个最常用，大部分显示都勾选这个

Sliced:九宫格：

做背景时，为了节约资源，当一张小的图片当做背景图，则需要制作九宫格图片

Tiled

Filled

Mesh

2.SizeMode

CUSTOM：用户自定义尺寸，这个非常常用，比如棋牌中，一个桌子4个人显示微信头像，远程资源加载的微信头像并不知道多大，那么就需要自定义尺寸。自定义完毕后，那么一张大图也会显示自己指定的大小；

当自己手动调整图片大小时，就会由TRIMMED或者RAW自动变为这个选项。

TRIMMED

原始图片裁减掉透明度后的图片，trim嘛，意思就是去除。所以中间显示的部分能够达到原始尺寸。比如原始尺寸是150*150, 可显示区域是130*130，那么使用这个。将会将中间的130*130强行拉到150*150；

当将一张图片拖入编辑器，默认就是这个选项。

RAW

原生，因此就是显示原始大小，考虑透明像素。因此和TRIMMED相比，看着显示区域会小一点。因为TRIMMED不显示透明部分，RAW显示；

RAW中node的宽高和在电脑中的宽高一致。

3.Trim(不勾选，勾选容易变形)

是否渲染原始图像周围的透明区域。

勾选则不渲染，那么将会填充至node节点大小，因此看起来好像图片放大了一样。甚至有点变形，因此觉得不勾选好点。

4）代码控制随机头像

cc.Class({
    extends: cc.Component,

    properties: {
       spr_wxHeadImg: {
           type: cc.Sprite,
           default: null
       },

       wx_spriteFrame: {
           type: cc.SpriteFrame,
           default: []
       }
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {
        var index = parseInt(Math.random() * this.wx_spriteFrame.length);
        if (index >= this.wx_spriteFrame.length-1){
            index = this.wx_spriteFrame.length - 1;
        }
        this.spr_wxHeadImg.spriteFrame = this.wx_spriteFrame[index];
    },

    // update (dt) {},
});