cc.Sprite組件詳解

cc.Sprite

1.游戲種顯示一個圖片,通常我們把這個叫做"精靈"sprite

2.cocos creator如果需要顯示一個圖片,那么節(jié)點上

就要掛一個精靈組件,為這個組件指定要顯示的圖片(SpritrFrame)

3.顯示一個圖片的步驟:

(1)創(chuàng)建一個空節(jié)點(2)添加一個組建

(3)要顯示的圖片(SpriteFrame)拖動到SpriteFrame;

(4)配置圖片的SIZE_MODE;

a: CUSTOM大小和cc.Node大小一致

b: RAW 原始的圖片大小

c: TRIMMED大小為原始圖片的大小,

顯示的內(nèi)容是才剪掉 透明像素后的圖片

他的作用是如果發(fā)生來裁剪,尺寸不變,把中間的圖片拉伸到當前大小

這時候他的尺寸還是裁剪之前的,但是內(nèi)容是裁剪之后的。

5.Trim: 是否才剪掉,圖片的透明區(qū)域.

如果勾選了,就會把這個圖片完全透明的行和列裁剪掉

注意:他只會裁剪周圍完全透明,如果你是中間透明他肯定不會裁剪.

如圖所示,也就是周圍有透明的,把他裁掉后也不影響顯示

做動畫的時候就不要去勾選,因為動畫出圖都是一樣大小。

圖片模式Type

1.SIMPLE:精靈最普通的模式,選擇該模式后.圖片將縮放到指定大小

2.TILED:平鋪模式.圖片以平鋪的模式,鋪地板磚的模式,仆倒目標大小上、

選擇TILED之后,在改變圖片的寬度

3.SLICED:九宮格模式，指定拉伸區(qū)域

九宮格能節(jié)省圖片資源

比如我們用SIMPLE模式拉伸,他看起來很糟糕哦

因為他是所有整個圖片都被拉伸方法了

而如果使用九宮格模式,他是可以指定拉伸區(qū)域的

他上面兩條橫線兩條豎線,把圖片分為9個格子一樣。

他4個角是固定區(qū)域,是不會被拉伸的,也就是不變形。

假設(shè)這時候要放大圖片,只會拉伸這5個區(qū)域

4條邊只做單向拉伸,就是上下兩邊 只做橫向拉伸,

左右兩邊只 上下拉伸, 中間的可以兩個方向拉伸,

這樣做紋理拉伸縮放的時候就不會變形。

4.九宮格模式 使用方法 選中然后點編輯

把他拖動 成9個格子,最好就是拖動到

拖動好了,紅色的區(qū)域就是你不要移動的地方.然后點右上角的勾

5.FILLED 設(shè)置填充的方式,可以使用比例來裁剪顯示圖片

填充方式可以是圓形,矩形,比例:只顯示的比例

(1)Fill Type就是你要填充的方式 

有3種 垂直 水平 圓形

(2)Fill Center 中心位置坐標(0到1的小數(shù))

和錨點一樣,左下角(0,0)右上角(1,1)
(3)Fill start開始的位置 (0到1)表示百分比

也就是0表示右邊的中心點, 逆時針走.

(4)Fill Range 填充比例(0到1)表示百分比

這樣我們就能用扇形的方式來顯示一張圖, 例如

游戲里的一個道具,他是圓形的,他上面有一個扇形

來 表示這個道具還有多久完成.

可以通過一個代碼來實例一下: 也就是通過代碼讓他動態(tài)的修改

首先獲得這個組件的實例

使用代碼獲取

this.sp = this.getComponent("cc.Sprite");

通過綁定到編輯器,獲取

sprite{
    default: null.
    type: cc.Sprite,
},

使用這個綁定的組件

cc.Class({
    extends: cc.Component,
    properties: {
        sprite:{
            default: null,
            type: cc.Sprite,
        },
        action_time: 15,
    },
    // LIFE-CYCLE CALLBACKS:
     onLoad :function() {
        //開始時間
        this.now_time = 0;
     },
     update :function(dt) {
        this.now_time += dt;
        //進度 當前時間 除 總時間 = 時間百分比
        var percent = this.now_time / this.action_time;
        //判斷百分比是不是大于1
        if(percent > 1){
            percent = 1;
            this.now_time = 0;
        }
        this.sprite.fillRange = percent;
     },

如果Fill Range 為正數(shù)逆時針， 為負數(shù)就是順時針.

6.代碼里更換顯示的圖片

首先要把圖片綁定到節(jié)點.

        sps:{
            default: null,
            type: cc.SpriteFrame,
        },

或者Spite組建,把他的屬性spriteFrame 換成我們綁定的即可、

            this.sp = this.node.getComponent(cc.Sprite);
            //更換spriteFrame
            this.sp.spriteFrame = this.sps;