cocos creator快速上手第一個遊戲學習筆記
https://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html
(小吐槽:cocos creator 2的改動很大,這個示例代碼居然沒有跟進,實際上沒法用2.4.0版本運行)
1、軟件界面
層級管理器裏面:
canvas代表屏幕,可以設置大小,但不能改變position,anchor等(應該可以通過camera改變視角)
注意node的上下級分屬,這關係到他們的座標。
示例node全部放到canvas下面,座標系都以父節點canvas的anchor爲原點。
node的位置,包括運動也是以anchor爲原點描述
資源管理器 assets
文件都在這裏面,可以自己創建目錄
場景編輯器是所見即所得
2、遊戲場景 scene
場景是核心,示例只有一個場景,默認加載。示例未演示多個場景下的默認場景設置。
加載場景是 cc.director.loadScene('sceneName');
也可以重新加載場景。(有時候會顯示warn,但可以正常工作)
場景內容包括 node 和 組件component
node是圖形,組件是腳本,兩者可以關聯到一起,是多對多的關係
canvas對應的腳本組件應該是主程序
node是具體圖形/文字,可以直接設置一些顯示屬性,例如position, anchor等,可以添加組件獲得相應的能力
component是一個js class
一些特殊屬性:
extends: cc.Component, 表示繼承關係
properties: {},表示可以在屬性管理器中設置的屬性,其他屬性只能通過代碼設置
對其他node的引用,可以通過設置屬性,然後拖拉的方式直接獲得
onLoad(){} 加載初始化
update(dt){} 幀回調,dt表示幀間隔時間(秒),
component內可以用this.node獲取其關聯的node,
場景內的其他node,屬性拖拉獲得,而腳本獲得方式,目前只學到 this.node.parent 這一種相對關係的方式。
通過node獲得其對應componet的方式是
this.node.getComponent,
獲得引用後,可以獲取屬性,調用方法等
緩動 tween
就是node的位移、縮放和旋轉等變化動作
取代了過去的動作action(緩動這個名字比動作好,緩慢的變化,而快速的變化是要在update裏面做幀變化)
目前學到的內容是:
// 先定義一些動作 let jumpUp = cc.tween().by(this.jumpDuration, { y: this.jumpHeight}, {easing:'cubicOut'}); ... var scaleBack = cc.tween().to(this.squashDuration, {scaleX: 1, scaleY: 1}, {easing: "smooth"}) // 對node施展動作 cc.tween(this.node) // 可以重複,注意這個重複方法可以重複多個動作,並且一直重複 .repeatForever( // 具體的動作序列 cc.tween().sequence(squash, stretch, jumpUp, scaleBack, jumpDown) // 還可以添加函數動作 .call(this.playJumpSound, this) ) // 開始 .start()
取消動作的方法也只學到一種:
停止一個節點所有動作 this.node.stopAllActions();
幀動畫(update函數)
涉及內容:
- 幀動畫裏面直接改變node座標/透明度等(快速動畫)
- 計時
- 判斷碰撞(這裏用的是非常簡單的,anchor之間的距離)
Prefab(預製) 資源
用來動態創建的node和component
預製製作
在場景中正常編輯,拖到資源管理器會自動變成prefab,再刪除場景中內容即可
預製使用
// 實例化預製 let newStar = cc.instantiate(this.starPrefab); // 添加到上級node this.node.addChild(newStar); // 設置位置 let pos = this.getNewStarPosition(); newStar.setPosition(pos); // 調用component方法 newStar.getComponent('Star').game = this;
監聽輸入
//監聽鍵盤 cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this); // 獲取按鍵code: event.keyCode,具體按鍵值:cc.macro.KEY.a... // 取消方法off,參數一致
尚未了解如何獲取 觸摸事件 touch
播放音頻資源
properties類型:cc.AudioClip
播放代碼
cc.audioEngine.playEffect(this.jumpAudio, false);