cocos文檔”快速上手第一個遊戲“學習筆記

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);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章