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

更新 發佈閱讀 1 分鐘

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

raw-image

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

raw-image

會看到基本的架構

raw-image

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

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

raw-image

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

raw-image

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

raw-image

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

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


留言
avatar-img
宅D嘉的開發人生
22會員
53內容數
加密貨幣很有趣,遊戲開發也很有趣,AI也有點意思,身為一個跨多領域的軟體工程師,喜歡研究新鮮的事物,歡迎來到我的世界,一起坐上這艘開往未來探索新奇的列車。
你可能也想看
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
這篇內容,將會講解什麼是表達式(Expression),什麼是陳述式(Statement)。有了這些概念,各位會更容易理解,要如何設計程式碼。
Thumbnail
這篇內容,將會講解什麼是表達式(Expression),什麼是陳述式(Statement)。有了這些概念,各位會更容易理解,要如何設計程式碼。
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
這篇內容,將簡單介紹Asset Browser、Workspace、Inspector、Code Browser,作為入門的介面導覽。
Thumbnail
這篇內容,將簡單介紹Asset Browser、Workspace、Inspector、Code Browser,作為入門的介面導覽。
Thumbnail
這篇內容,將教你如何開啟新的GameMaker專案,並調整畫面佈局。也會講解,為何建議用英文語系,來進行遊戲開發。
Thumbnail
這篇內容,將教你如何開啟新的GameMaker專案,並調整畫面佈局。也會講解,為何建議用英文語系,來進行遊戲開發。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
文章講述了作者如何利用c++寫程式做貼圖,包括製作貼圖的構思過程、實際步驟和上傳貼圖的過程。這個故事不僅分享了作者的創作心路歷程,也提供了實際的操作步驟,讓讀者對於用c++做貼圖有更深入的瞭解。
Thumbnail
文章講述了作者如何利用c++寫程式做貼圖,包括製作貼圖的構思過程、實際步驟和上傳貼圖的過程。這個故事不僅分享了作者的創作心路歷程,也提供了實際的操作步驟,讓讀者對於用c++做貼圖有更深入的瞭解。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News