cc.Sprite
1.遊戲種顯示一個圖片,通常我們把這個叫做"精靈"sprite
2.cocos creator如果需要顯示一個圖片,那麼節點上
就要掛一個精靈組件,爲這個組件指定要顯示的圖片(SpritrFrame)
3.顯示一個圖片的步驟:
(1)創建一個空節點(2)添加一個組建
(3)要顯示的圖片(SpriteFrame)拖動到SpriteFrame;
(4)配置圖片的SIZE_MODE;
a: CUSTOM大小和cc.Node大小一致
b: RAW 原始的圖片大小
c: TRIMMED大小爲原始圖片的大小,
顯示的內容是才剪掉 透明像素後的圖片
他的作用是如果發生來裁剪,尺寸不變,把中間的圖片拉伸到當前大小
這時候他的尺寸還是裁剪之前的,但是內容是裁剪之後的。
5.Trim: 是否才剪掉,圖片的透明區域.
如果勾選了,就會把這個圖片完全透明的行和列裁剪掉
注意:他只會裁剪周圍完全透明,如果你是中間透明他肯定不會裁剪.
如圖所示,也就是周圍有透明的,把他裁掉後也不影響顯示
做動畫的時候就不要去勾選,因爲動畫出圖都是一樣大小。
圖片模式Type
1.SIMPLE:精靈最普通的模式,選擇該模式後.圖片將縮放到指定大小
2.TILED:平鋪模式.圖片以平鋪的模式,鋪地板磚的模式,仆倒目標大小上、
選擇TILED之後,在改變圖片的寬度
3.SLICED:九宮格模式，指定拉伸區域
九宮格能節省圖片資源
比如我們用SIMPLE模式拉伸,他看起來很糟糕哦
因爲他是所有整個圖片都被拉伸方法了
而如果使用九宮格模式,他是可以指定拉伸區域的
他上面兩條橫線兩條豎線,把圖片分爲9個格子一樣。
他4個角是固定區域,是不會被拉伸的,也就是不變形。
假設這時候要放大圖片,只會拉伸這5個區域
4條邊只做單向拉伸,就是上下兩邊 只做橫向拉伸,
左右兩邊只 上下拉伸, 中間的可以兩個方向拉伸,
這樣做紋理拉伸縮放的時候就不會變形。
4.九宮格模式 使用方法 選中然後點編輯
把他拖動 成9個格子,最好就是拖動到
拖動好了,紅色的區域就是你不要移動的地方.然後點右上角的勾
5.FILLED 設置填充的方式,可以使用比例來裁剪顯示圖片
填充方式可以是圓形,矩形,比例:只顯示的比例
(1)Fill Type就是你要填充的方式
有3種 垂直 水平 圓形
(2)Fill Center 中心位置座標(0到1的小數)
和錨點一樣,左下角(0,0)右上角(1,1)
(3)Fill start開始的位置 (0到1)表示百分比
也就是0表示右邊的中心點, 逆時針走.
(4)Fill Range 填充比例(0到1)表示百分比
這樣我們就能用扇形的方式來顯示一張圖, 例如
遊戲裏的一個道具,他是圓形的,他上面有一個扇形
來 表示這個道具還有多久完成.
可以通過一個代碼來實例一下: 也就是通過代碼讓他動態的修改
首先獲得這個組件的實例
使用代碼獲取
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 爲正數逆時針， 爲負數就是順時針.
6.代碼裏更換顯示的圖片
首先要把圖片綁定到節點.
sps:{
default: null,
type: cc.SpriteFrame,
},
或者Spite組建,把他的屬性spriteFrame 換成我們綁定的即可、
this.sp = this.node.getComponent(cc.Sprite); //更換spriteFrame this.sp.spriteFrame = this.sps;