Introduction to Cocos Creator
Cocos Creator 身為中國開發商所推出的遊戲引擎，雖然名氣不像 Unity、UE5 那樣響亮，不過主打 2D 市場起家的他也是一款很不錯的開發軟體。尤其在部署到網頁這方面，Unity 所使用的 WebGL 在遇上不同的機型系統與瀏覽器時，會有許多不相容的問題發生，因此若是你想要製作一款簡單的 2D 或是 2.5D 遊戲，Cocos Creator 是一個容易上手且免費的好選擇！
（如果想做 3D 遊戲，目前 Cocos 也有推出進階的 3D 版本，不過我本人做 3D 偏愛 Unity ）
先簡單介紹一下 Cocos Creator 的運作，他支援 Mac 和 Windows 系統開發，遊戲也能順利發佈到 IOS、Android、Web、PC 用戶端等各種平台，利用 TypeScript 作為主要開發語言，JavaScript 能作為外掛使用，同時也支援用 VScode 做主要編輯器，網路上都有蠻詳細的教學文章，並且因為是中國開發的，所以大量文章都是中文為主。這裡也推薦大家 Cocos 的官方教學網頁。
這次要介紹給大家的就是結合 JavaScript 語言的 Firebase 所製作出的簡單登入器，本次文章會著重在如何將 Cocos Creator 的遊戲順利 Deploy 到 Firebase 上，以及如何在 Cocos Creator 裡行雲流水地使用 Firebase！
當然，如果沒有 Cocos Creator 跟 Firebase 基礎的話，也能夠先透過 Github 專案裡的素材練習 deploy。
錄了一段 Demo 影片給大家參考，因為主要要做登入器功能，只幫遊戲人物做了簡單的 AD 左右移動和 Space 跳躍，大家學會以後也可以再進一步設計遊戲內容 XD
Goal - Cocos Creator Version 2.4.8
Demo 網址：
（帳號可以用真實電子信箱，也能直接虛擬出一個 @g.com 結尾的信箱唷！我測試都習慣這麼使用！然後這次偷懶沒有做帳號密碼錯誤的提示欄，所以大家在輸入帳密的時候可以在注意一下如果太久沒有跳轉可能就是打錯了～）
Github 網址：
Demo 影片：
Introduction to Firebase
前面先介紹了 Cocos Creator，這裡就也簡短介紹一下 Firebase 在做什麼。Firebase 身為 Google 旗下的開發者平台，主要提供的服務是身份驗證、雲端即時資料庫（Realtime Database）、儲存空間（Storage） 以及 Web 代管的 Hosting 等等的功能，能夠讓使用者的應用程式更加完整。
這次會用到的主要是身份驗證、即時資料庫還有 Hosting，都是很入門的功能，學好 Firebase 真的非常有幫助，推推！
Step 0 - Firebase 專案建立
首先到 Firebase Console 這個網站，跟著他的步驟新增一個專案，然後替這個專案新增一個網頁應用程式，基本上都是照著他預設的設定不斷下一步。
新增完以後，會獲得一組 Firebase config，之後再專案總覽當中也可以看到，是我們待會要設定登入器的重要資訊。
然後到左側的專案欄位裡點選建構，啟用我們需要的功能，例如這次我開了 Authentication、Hosting、Realtime Database。
Step 1 - Cocos Creator 場景搭建
首先先用 Cocos 拉出你想要的場景模樣，但這裡不是這次文章的重點，所以我就隨意拉了一下，使用方式和 Unity 大同小異，如果大家還不是那麼熟悉的話也可以先用 Github 裡提供的模板來練習看看。
我這裡拉了兩個場景，一個是 Menu 供大家註冊登入，另一個是遊戲場景，到時候在左上角會顯示你的 Username，右上角是登出。
另外，Cocos 儲存場景的方式是會存成 .fire 檔案。
Step 2 - Firebase in Cocos Creator
要在 Cocos 裡使用 Firebase 並不難，不過首先需要獲得一個 Firebase 的編譯檔，這邊我也附在 Github 裏面提供給大家，就是 firebase.js。
把他點開的話會是一個超級長串的編譯檔案，別懷疑直接拉到最下面，有幫大家留了填上 firebase config 的地方，這裡置換成自己專案裡的資料就可以了。
接著把這項編譯檔拖到你的 Cocos Asset 裏面，然後回到 Cocos Creator，將這個 file 設為 plugin。（目前 Cocos 只支援 JS 的 plugin 喔！）
如果在進入 Cocos 時軟體沒有主動問你要不要將該檔案設置為 plugin，就自己從 [資源管理器] 點選檔案，再到右邊 [屬性檢查器/Inspector] 將設定打勾就可以囉！
現在在你的 Script 裏面就能夠順利使用 firebase 的 function 啦！
Step 3 - Cocos Creator Build
當你製作好你的遊戲場景們、寫好程式碼，在本地端測試都沒有問題以後，就可以按下功能列表當中的 [項目]，選擇 [構建發布]，讓我們打包這個專案。
選好以後會跳到以下的介面，發佈平台我選擇 Web Desktop，主要供電腦版，他也有提供手機版的專用選擇。在初始場景的地方記得選擇你想要先進入的場景，預覽分辨率是到時候遊戲顯示的大小，因為我在遊戲場景當中的 Canvas 都是設定成 960:640，為了不讓遊戲有白邊就有額外改成想要的尺寸了，至於其他設定都不用多調整。
都選好以後選擇 [構建]，如果成功，會在你的專案資料夾當中得到一個打包好名為 build 的資料夾。這時候新增一個名叫 public 的空資料夾。
然後點進剛剛的 build 資料夾，裏面有一層 Web-Desktop，然後是如下圖的一些文件資料，是要把這個專案發佈到 Web 平台所需的打包檔案。
接著勇敢地把這些資料通通拖進 public 資料夾當中！這裡可以用剪下貼上或是複製，因為之後設定 Firebase 的時候會吃的是 public 資料夾裡面的東西，所以 build 裡面有沒有留都沒關係～
把資料通通都拖進去以後，回到我們的 VScode 編輯。
如果還沒有下載過 Firebase，可以先在 Terminal 輸入：
npm install firebase等 Firebase 下載完以後，為了用 Firebase 的網域運行，在 Terminal 當中輸入以下資訊：
firebase init當中會要求你登入 Firebase 或是選擇一些選項，詳細可以參考下圖，基本上只需要 Firebase 的 Database 跟 Hosting 功能就可以了，其他都照著預設的選，以下是我自己 init 時的詳細 log。
選好這些內容以後，輸入以下指令就可以等待 Deploy 完成啦！
firebase deployDeploy 需要一些時間，所以如果沒有馬上更新到網址上也不要緊張，可以耐心等待一陣子！
等到 Deploy 完成以後，就能從他提供的網址去看到你的遊戲啦～
Ending
以上就是這次的內容介紹啦，如果有任何問題也歡迎聯絡我！做遊戲是快樂又美好的事情。
祝大家都學習愉快～ ( ̀⌄ ́)
遊戲素材來源：
https://digitalmoons.itch.io/pixel-skies-demo
https://free-game-assets.itch.io/free-tiny-hero-sprites-pixel-art
