2025-03-29

Cocos Creator 2D實戰(二) - Hello World

 Cocos Creator 2D實戰(二)

Hello World

    每個程式開發的開始都是從Hello World開始的,當然我也不免淑的來個Hello World。



選擇Hello TypeScript --> 定個項目名稱"CocosCreator2D" --> 選擇存放的位置 --> 創建。

會看到基本的架構

        比較重要的是左下方的檔案存放區,設好分類,把不同的檔案放在相對應的資料夾內,這樣之後專案變大之後才比較容易找到分辦所以尋找的檔案在何處。

接下來設定畫布的大小,畫布的大小就等於您整個遊戲的畫面大小,如果是網頁遊戲都是以16 * 9或是4*3為主,比如說:1024 * 768。

一個場景裡面包含畫布、鏡頭、父節點、子節點、圖片、文字,任何的東西都會是一個節點,節點有上下層關係(父子關係),也就是圖層的前後層關係,誰在誰前面,後面的圖層就會被前面的圖層蓋到(這個後面會說)。

從圖片裡面可以看到,任何的元件都會有一個Node(節點),用來代表這個圖片或是文字,也代表這個圖片或是文字的相關位置、大小、角度、透明度,這些在Node裡面都有相關的屬性。



由於我們已經設定好了相關的環境設定,所以點擊腳本兩下會自動開始VS Code,打開TypsScript到該腳本的位置,這就是我們要寫程式碼的地方,這樣就能控制該物件了。


以上就有個初步的認識cocos creator 2D的基本架構和內容會有哪些相關的東西了,下一步我們來實做一個Loading畫面,這個在很多遊戲裡面都還蠻常用的,因為遊戲在剛開始起步時,會需要加載很多東西(圖片、文字、聲音),這個也需要一點時間,所以就有了Loading的必要性了下一篇我們就來實做這個部份,感謝。

2025-03-23

Cocos Creator 2D實戰(一) - 環境設定

 Cocos Creator 2D實戰(一)

環境設定


第二步先做環境設定:環境設定VS Code

正常來說跟著做就可以完成環境設定了,由於是開發2D,所以右上角先選擇2.4版(目前最高版本)會比較好,比較不容易錯亂,畢竟3.x和2.x的差異很大。


介面軟體是Cocos Dashboard,但程式碼的IDE是VS Code,預覽瀏覽器Chrome,所以做完環境設定就能連結好Cocos Dashboard、VS Code、Chrome,就可以準備好開發2D遊戲了。





2025-03-22

Cocos Creator 2D實戰

Cocos Creator 實戰

    Cocos Creator是個用來開發2D或是3D遊戲的整合開發環境(IDE),程式語言是使用Javascript或TypeScript,Unity是用C#,但如果是Cocos Creator 3D的話是只能用TypeScript,所以建議還是用TypeScript比較統一。

第一步當然是下載編輯軟體:軟體下載

安裝完成後會出現"Cocos Dashboard",點擊二下開啟

必須先按裝版本編輯器:
  1. 選擇左側"安裝"
  2. 點擊右上角"安裝編輯器"
  3. 安裝最新版本,我目前的2D版本是2.4.13,2開頭就是專門用來開發2D的,3D請選擇3開頭的。


為什麼需要先安裝編輯器呢?因為專案是需要指定是用哪個版本的,所以最好是先安裝編輯器。


這樣初步的開發軟體就已經安裝好就定位了,下一篇來說說環境設定的部份,有問題歡迎留言給我,謝謝。