在前面的章節中您已經學會了如何創建一個汽車節點,這一章我們將會學習如何通過掛載自定義節點的方式讓小車變得可控制,所以通過這一章的學習后,您將實現一個效果:開始運行后,小車每隔一幀就延y軸向上移動一段距離。在這之前,我們要先熟悉一下少量的基本概念,這樣才能讓您更快的熟悉起來。
一、基本概念
1.如何控制節點/更改節點屬性:
在Coscos中,節點不光可以掛載組件,還可以掛載自定義腳本,自定義腳本主要使用到兩個方法,第一個方法是start()方法,start?方法會在組件第一次激活時調用,所以start方法往往回寫對節點的初始操作,比如設置起始點坐標、設置角色滿血狀態等,第二個方法是update(dt:number),update方法在游戲的每一幀都會調用,所以update方法往往用來寫對節點狀態改變的方法,例如更新角色的最新血量、更新角色位置(如果操作者此時正在按著前進按鈕)等。
二、為汽車節點掛載自定義腳本
1.創建腳本
首先我們要在和前面一樣,資源管理器中鼠標右鍵點擊assets,選擇“創建-文件夾”來創建一個script文件夾,這個文件夾將會保存我們接下來所有的自定義腳本,效果如下:
然后我們鼠標右鍵點擊新建出來的script文件夾,選擇“創建-腳本-NewComponment”:
創建出來的自定義腳本名稱為“CarControl”,效果如下:
2.預覽一下腳本
現在,讓我們鼠標左鍵雙擊CarControl腳本,VS Code將會自動運行并打開CarControl,效果如下:
3.將腳本掛載到汽車節點下:
為了讓腳本能實現對汽車的控制,例如改變位置等,我們需要將這個腳本掛載到汽車節點下,我們切換窗口切換到Cocos Creator界面,鼠標左鍵點擊“Car”節點來讓右邊的屬性檢查器里顯示目前Car節點的所有屬性,效果如下:
然后我們點擊屬性管理器中的“添加組件”按鈕,往下滑找到“自定義組件”按鈕,然后選中剛才創建的CarControl腳本,最終效果如下:
你也許會疑惑為什么要把自定義腳本掛載到Car節點而不是CarSprite節點,這是因為對于小車來說,Car才是它的根節點,我們最終達到的效果是要改變小車的位置,如果節點被掛載到了CarSprite節點下,那么運行起來后位置發生改變的是小車的圖片,而不是真正的小車的根節點。
4.實現控制邏輯
在上圖中,當你手動去修改y值的時候,你會發現場景編輯器中的小車的位置就會隨著你的改動而發生改變。所以只需要把您手動的這個過程交給腳本去做就行了。根據屬性管理器,需要修改的是當前節點的Position屬性的Y值。回憶下我們要達到的效果:“開始運行后,小車每隔一幀就延y軸向上移動一段距離”,因為是每一幀都要移動,所以我們將會把這一過程寫在update里面。而按照默認規則,自定義節點中調用this.node就表示當前被掛載的節點。而Postion作為節點的屬性必有set和get方法,所以綜上,核心實現邏輯為:
update(deltaTime: number) {
var nowPostion = this.node.getPosition()
nowPostion.y = nowPostion.y + 1
this.node.setPosition(nowPostion)
}
整體如下:
5.查看結果
現在,在VS Code按下Ctrl+S,切換到Cocos Creator窗口按下Ctrl+S(建議多按幾次直到確定左上角沒有*了),然后點擊運行按鈕,您將會在瀏覽器中看到效果,小車將會緩緩向上移動直到超出攝像機范圍:
6.查看代碼中的console.log的輸出:
在瀏覽器界面以內,黑色框以外的灰色部分任意位置點擊鼠標右鍵,選擇檢查:
點擊“檢查”后將會開啟瀏覽器的開發工具,選擇“控制臺”就可以看到console.log的輸出了:
以上就是本章的全部內容,感謝您的觀看和實踐。
?章節源碼、答疑和交流移步?https://t.zsxq.com/5JQPx