cocos-creator入門demo游戲


參考資源:https://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html

cocos-creator是一款基於cocos2d-x游戲引擎的游戲開發軟件,開發語言支持js,c++,lua,

其提倡的開發語言是js,因為creator原本就是cocos2d-html5的衍生產品

(核心:數據驅動 模仿3D Unity

下面將使用官網的demo來了解這個軟件的使用:

1. 下載cocos-creator

下載鏈接:https://www.cocos.com/creator

這里選用的是2.2版本

2. 配置代碼編輯環境

creator使用vscode作為外接的代碼編輯器,下載鏈接:https://code.visualstudio.com/

1)安裝 Cocos Creator API 適配插件

01

2)在項目中生成智能提示數據(用於生成api代碼高亮提示)

    對於每個不同的項目都需要運行一次這個命令,如果 Cocos Creator 版本更新了,也需要打開您的項目重新運行一次這個命令,來同步最新引擎的 API 數據,所以這里的步驟可以在項目搭建完后再執行。

02

3)設置vscode文件顯示和搜索過濾

打開項目時可以隱藏一些不必要的文件夾,搜索文件時也同理

參考:https://docs.cocos.com/creator/manual/zh/getting-started/project-structure.html

上述鏈接說明了項目文件結構,以及需要關注的文件夾

點擊vscode的setting,打開ui配置界面

03

搜索框中輸入:exclude 並找到files:exclude和search:exclude

點擊添加按鈕,給其添加要進行排除的文件夾或者文件

下面是我配置后的vscode,可以參照進行配置

image

files:exclude

image

search:exclude

image

 

 

3.下載初始資源

資源地址:https://github.com/cocos-creator/tutorial-first-game/releases/download/v2.0/start_project.zip

啟動 Cocos Creator,點擊文件。然后選擇打開項目,在彈出的文件夾選擇對話框中,選中我們剛下載並解壓完成的 start_project

下載好的資源會在資源管理器中顯示

4. 場景的搭建

create scene

在場景中我們可以配置多個節點,每個節點的層級都會在層級管理器中顯示

image

點擊任意節點,會在屬性檢查器中顯示這個節點的所有屬性,通過屬性檢查器我們可以精確設置節點的屬性

Canvas屬性:

image

場景搭建細節有點類似使用ps等制圖工具

通過使用變換工具改變每個節點資源的屬性,或者直接通過屬性檢查器改變

image

這里都不是重點,在場景中應該知道的重點應該是其設定的坐標系以及節點的默認錨點位置

我們通過坐標系和錨點可以設置節點的位置

直接打開我已經編輯好的場景來認識坐標系及錨點

image

箭頭所指方向就是初始的坐標系,根節點定Canvas義在上方

點擊Canvas節點可以看到如下圖

image

藍色框表示的是節點的大小,在屬性檢查器里就是size,兩個箭頭表示屬於Canvas上的坐標系

坐標系的交匯原點就是該節點的錨點,屬性檢查器里image

表示錨點在圖片的中心。之后如果在Canvas上建立子節點,那么子節點的位置就要靠Canvas上

的坐標系來定義,所以藍色的精靈角色Player節點位置定在image

之后只要將資源管理器中textures里的圖片資源拖拽進場景內就可以生成節點了,同理去定義背景

圖background,地面ground,分數score(分數使用Label組件生成)

 

5. 代碼部分的編寫

在assets文件夾下創建scripts文件夾用來保存js代碼

代碼結構:

image

下面將簡略解釋每個js文件干嘛用的,詳細解釋已經被注釋在代碼之內(變態詳細)

Game.js

Game.js用於控制游戲的主要邏輯,因此被綁定在game.fire場景文件的根節點Canvas上

image

點擊添加組件,選擇用戶腳本文件Game即可

添加完成后應用有下面的樣子:

image

里面的值應該是0,或者none,這些屬性的定義是在腳本內完成的,之所以會顯示在面板上。

全靠creator強大的數據驅動功能。

屬性在腳本內的樣子,我手動在面板將max&minStarDuration改為5和3,原本是0

屬性設置:

image

prefab是預制資源,需要在面板上進行資源關聯,方法就是直接拖拽資源進屬性檢查器中

需要關聯的prefab屬性上(預制資源指需要重復生成和銷毀的節點)。node是節點資源,

把層級管理器上需要的節點拖拽過去即可

audio-clip是音頻資源,同樣把音效拖拽過去即可關聯。

image

注意到腳本里有沒有在面板顯示的屬性了嗎,只要在屬性前加_就默認不顯示,或者在顯示定義屬

性時這樣寫也可以不顯示在面板上image

腳本中的cc.Class是creator提供的類api,它繼承了cc.componet。用來構建腳本組件,整個文件

就是一個cc組件,它會自動把整個文件當成一個組件模塊暴露出去,提供其他方引用。而且

creator自動編譯這些定義好的腳本,你每次進行保存都會編譯。

函數功能:

image

image

腳本最下方還定義的節點的生命周期:

image

onload->start->update->ondestroy

update中的dt參數是指每一幀動畫時間間隔,可以視作單位時間

Play.js

Play.js用來控制角色動作邏輯的組件,需要綁定在Player節點上

image

屬性設置:

image

函數功能:

image

image

生命周期:

image

 

Star.js

有關星星生成的邏輯

星星是一個預制資源,需要重復生成和銷毀

星星圖片拖拽進場景中成為一個節點,再將star節點拖拽進assets文件夾中,即可

變成一個prefab資源,同時記得關聯上腳本組件

這里的addOne prefab也是一個預制資源,一個用Label創建出來的+1節點資源

主要用來制作吃到星星時產生+1的動畫

image

屬性:

image

函數功能:

image

生命周期:

image

StartBtn.js

play按鈕的腳本組件,用來清空分數並進行場景切換,切進游戲場景去。

play按鈕圖片用來制作start節點,並關聯StartBtn腳本

init.fire和gameOver.fire場景中都需要創建start節點(play按鈕)

image

image

一共3個場景

image

image

腳本內容:

image

ScoreModule.js

用來保存分數的全局數據文件

image

 

項目效果:

image

完成后的項目資源:

https://github.com/helloCaijiaqi/cocos-creator-demoGame

assets:里面可能會有以.meta結尾備份文件,不需要則可以刪除

只需關注項目中的腳本文件即可(assets/scripts)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM