cocos-creator 指令碼邏輯-1

JoeJoan發表於2018-09-13
指令碼

1.節點

編輯元件的指令碼檔案時。可以通過以下語句獲得節點

this 就是當前元件

this.node

拿到元件依附的節點 

 

This.node.parent

拿到元件依附的節點 的父節點

 

This.node.children

拿到元件依附的節點 的子節點

 

this.node.getChildByName(‘’)

通過名稱取得特定名的直系子節點

 

cc.removeSelf() 

從節點樹刪除該節點 留在記憶體，但已經不在節點中 如果 args = true 則消失

 

跨直系引用節點

在properties 中宣告 node 物件再在編輯器中拖拽繫結

就可以在組建內部直接引用

兩個屬性

預設元件名樣式 name:節點<元件>

isValid 元件是否還在活動

 

2.動作

所有的動作 api 是由節點提供的，所以我們要先拿到節點

如 node.runAction()

 

1）動作執行：

runAction(`action`) 開始一個動作

stopAction(‘action’) 停止一個動作

stopAllAction() 停止該節點下的所有動作

 

2) 設定tag

action.setTag(`tag_name`)

node.getActionByTag(`tag_name`)

 

3）移動

cc.moveTo(1,20,20) 用 1s 以父節點錨點為座標中心移動到（20，20）的位置

可以移動到一個點的相對位置，比如可以換成 cc.v2(100,100) 以c2為座標的(100,100)

cc.rotateTo(1,50) 1s 第二個引數是角度

cc.moveBy() 相對移動

cc.scaleTo(1,2,2) 1s 放大到 2，2 scale

cc.fadeOut(1) 1s 消失

 

4）動作包裝

包裝為一個動作

cc.sequence(

動作1，

動作2

)

 

5）容器動作

順序動作：cc.sequence

可執行來回往復運動，如：

var seq = cc.sequence(cc.moveBy(0.5, 200, 0), cc.moveBy(0.5, -200, 0));

node.runAction(seq);//左右來回移動

 

同步動作：cc.spawn

可執行疊加系列動作，如：

var spawn = cc.spawn(cc.moveBy(0.5, 0, 50), cc.scaleTo(0.5, 0.8, 1.4));

node.runAction(spawn);//向上同時縮放

 

重複動作：cc.repeat

可執行重複一個動作，如：

var seq = cc.repeat(
             cc.sequence(
                 cc.moveBy(2, 200, 0),
                 cc.moveBy(2, -200, 0)
             ), 5);
 node.runAction(seq);//左右移動，重複5次


永遠重複動作：cc.repeatForever
可執行一直重複動作，如：
 var seq = cc.repeatForever(
             cc.sequence(
                 cc.moveBy(2, 200, 0),
                 cc.moveBy(2, -200, 0)
             ));//一直重複左右移動


改變速度：cc.speed
可執行改變速率，如：
var action = cc.speed(
                 cc.spawn(
                     cc.moveBy(2, 0, 50),
                     cc.scaleTo(2, 0.8, 1.4)
                 ), 0.5);
 node.runAction(action);//速度加快一倍，2秒變1秒
 
 

 

3.回撥函式 callFunc

cc.callFunc(this.callBack, this, {`args`:args}) 函式，物件，引數

callBack :function(targetNode, args){}

 

4.事件/互動內容

新增 Label 內建元件來新增名稱，方便於判斷

在操作過程中記得返回編輯器拖拽補充引用。

 

emit 和 on 配套 發射和監聽

This.node.emit(”事件“,{引數}); 發生“事件” 同時給出引數

this.node.on(”事件“，this.event1, this.node1) 發生了“事件”後 執行 event1 執行物件是這個 node

this.node.on(”事件“,this.event2,this.node2)

限制：（引數必須和 on 一致 )

this.node.once() 只監聽聽一次 

this.node.off() 不再監聽 on 

例項：

這裡的 this 指的是 node1

  1.  
    event1: function(e){
  2.  
    console.log(e.detail),
  3.  
    this.runAction(cc.moveTo(1,200,0))
  4.  
    },

 

5 觸控事件 滑鼠事件 鍵盤事件

1）觸控（因為用的比較多這個寫完整，其它都只寫一個）

This.node.on(‘touchStart’,this.onTouchStart, this) 開始觸控

this.node.on(‘touchmove’,this.onTouchMove,this); 觸控移動，持續觸發

this.node.on(‘touchEnd’,this.onTouchEnd, this) 觸控停止

this.node.on(‘touchCancel’, this.onTouchCancel, this) 觸控取消，（節點外釋放）

 

This.node.on(‘mouseup’,this.onMouseUp,this)  滑鼠脫離

mouseDown onMouseDown 滑鼠按下 

mouseMove onMouseMove 滑鼠移動（不一定要點選）

mouseEnter onMouseEnter 滑鼠進入節點區域

mouserLeave onMouseLeave 滑鼠離開節點區域

mouseWheel onMouseWheel 滑鼠滾輪

獲取點選

getButton() 返回 0 1 2 對應 左中右

 

2）鍵盤事件 

cc.systemEvent.on(type,callback,target)

返回一個 keycode 

可選的 type 型別有:

  1. cc.SystemEvent.EventType.KEY_DOWN (鍵盤按下)
  2. cc.SystemEvent.EventType.KEY_UP (鍵盤釋放)
  3. cc.SystemEvent.EventType.DEVICEMOTION (裝置重力感測)

例如

cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);

If e.keyCode == cc.KEY.w 當 keycode 是 w 時

cc.KEY.(按鍵)

 

3）獲取座標

getLocation() 獲取全域性座標下的圓心

例子：

onTouchStart: function(e){

    E.getLocation() 

}

座標轉換：從全域性座標系轉到本地座標系

let locationOfThisNode = this.node.convertToNodeSpaceAR(e.getLocation()) AR 忽略錨點 this.node目標座標系對應節點

讓某個節點的座標更新

this.node.position = locationOfThisNode

 

相關文章