cocos creator 簡單實戰

項目地址：https://github.com/Iroha1024/...

一個小遊戲的demo，如下簡單地介紹了我關於cocos creator的一點理解和開發流程

版本：cocos creator v2.0.9

編輯器：vscode

---

準備篇

一、新建目錄
res存放資源，scenes存放場景，scripts存放腳本

二、新建scene

三、雙擊左鍵，打開scene

改變了當前場景內容記住及時ctrl+s保存！

---

背景篇

一、在canvas節點下建立空節點background（做爲全部背景的父節點），在父節點下建立渲染節點sprite。子節點會隨父節點移動

二、點擊建立的bg1節點，右側"屬性檢查器"出現bg1相關信息。將準備好的圖片資源拖至正確位置

三、肯定background錨點（Anchor）

錨點（Anchor）是節點的另外一個重要屬性，它決定了節點以自身約束框中的哪個點做爲整個節點的位置。

Anchor：https://docs.cocos.com/creato...

錨點位置肯定後，全部子節點就會以 父節點錨點所在位置做爲座標系原點。
由於本遊戲設計爲從上至下，因此background的錨點值設置爲（0.5, 1）

四、設置background Y值爲320（canvas Y值的一半），點擊bg1節點、拖動藍色矩形或在屬性檢查器中改變position值導致背景與紫色矩形（camera節點）吻合（X值爲0，即爲居中）。遊戲初始畫面爲camera中內容。

五、觀察實際效果

如下爲實際效果，左側打開欄目爲不一樣手機分辨率模式。選擇後會發現畫面上方出現黑邊、一樣旋轉（rotate）也會有同樣情況。
巨坑：由於分辨率發生變化，致使canvas節點大小、位置都會發生變化。所以，一開始全部的對齊都成無用功。

六、點擊background，在屬性檢查器中點擊「添加組件」，選擇UI的widget組件。點擊top（將background與父節點上邊界對齊）

widget組件：https://docs.cocos.com/creato...

改變canvas的屏幕適應（以寬度爲標準撐滿屏幕）。

如今全部分辨率下都不會出現問題

---

腳本篇

一、建立小球節點（步驟同背景篇），更改player節點position座標、ball節點圖片

二、在scripts文件夾下新建javascript，ball.js

三、雙擊ball.js進入編輯器，編輯小球屬性

cc.Class聲明：https://docs.cocos.com/creato...

四、在ball節點，屬性檢查器中「添加組件」，選擇用戶腳本組件-->ball
將層級管理器中「Main Camera」和「background」節點分別拖至相應位置，便可在ball.js腳本中訪問相應節點的實例化對象

五、編輯ball.js方法

生命週期回調：https://docs.cocos.com/creato...

六、使用js和官方提供的API編寫自定義函數來實現你想實現的功能

Cocos Creator v2.0 用戶手冊：https://docs.cocos.com/creato...
API參考：https://docs.cocos.com/creato...

---

追加

如下爲我未在上面講述，可是比較重要的內容，官方教程這些地方很詳細

預製資源：https://docs.cocos.com/creato...

碰撞系統：https://docs.cocos.com/creato...

動畫系統：https://docs.cocos.com/creato...

動畫編輯完點擊在「場景編輯器」保存，不編輯點擊關閉。一個Animation組件掛載多個clip，編輯時在「動畫編輯器」左下角切換

音樂和音效：https://docs.cocos.com/creato...

感謝閱讀至此