iT邦幫忙

2023 iThome 鐵人賽

DAY 1
1
Modern Web

什麼!在網頁上也可以寫遊戲?系列 第 1

[Day 01] 什麼!在網頁上也可以寫遊戲?

  • 分享至 

  • xImage
  •  

不知道你有沒有這種煩惱,想做遊戲卻不知道該從何下手,找了許多教學,卻被一開始的各種軟體安裝勸退,以至於自己始終在起跑線原地打轉,沒關係,曾經的我也有這些煩惱,但我現在已經跑出去了,雖然還沒有跑得很遠,不過多少還是有些經驗可以來分享一下。

那麼,究竟是什麼樣的法寶,讓我們就算不安裝任何軟體,只要打開瀏覽器,就可以盡情的創作呢?

答案是 code.gamelet.com(以下簡稱 CG),可能有很多人是第一次聽到這個網站,不過沒關係,聽我娓娓道來。

CG icon

Code.Gamelet

CG 是在 2018 年,由 小哈片刻 正式推出的遊戲製作平台,只要有一個 Google 帳號,就可以直接登入並建立新專案,開始把自己腦中的天馬行空幻化成現實!

CG 首頁第一頁

CG 包辦了我們在開發遊戲時,需要處理的各種大小事,讓我們只需要認真思考遊戲該怎麼做。

另外 CG 也能夠上傳圖片、音樂等素材,提供遊戲開發時使用,而這些素材也都可以公開給其他人使用,當然自己也可以去搜尋別人提供的素材來匯入專案中使用。

除了素材以外,專案也可以設定是否公開,若看到有趣,且有公開的專案,還能夠進去一探究竟別人是怎麼製作出有趣的成品的,甚至還能夠直接從該專案摳出一份,變成自己的專案,直接對裡面的內容進行修改,從而更有效的學習到許多不一樣的技巧,或是直接在 CG 上的討論區內發文提問,不管你是要討論某個專案,或是討論程式設計,甚至是單純的討論遊戲設計,都有提供專屬的討論區可供使用。

CG 首頁第二頁

CG 提供了完整的線上的 IDE,主要是使用 Typescript 來進行開發,藉由小哈所提供的模組,可以將自己上傳的素材載入到瀏覽器中,並使用 Pixi.js 這個繪圖引擎將其顯示到網頁上。而如果是會 React 的人,小哈也有提供相關的模組,可以用來快速的設計遊戲 UI 等,甚至是單純的寫一個自己的網頁也可以。

除了用手敲鍵盤以外,CG 也有以圖形化介面呈現的遊戲編輯器,我們暫且稱之為 CG 同人陣,讓即使是完全不懂程式設計的小白,也能夠輕易的製作出一款簡單的小遊戲,實作起來有點像是在拼積木,卻又不同於 Scratch 那樣,CG 同人陣將遊戲設計的流程分為了三大塊,分別為觸發、檢查、動作,而這也是我接下來要向各位介紹的重點之一,所以我暫且先在這裡打住,之後會再慢慢跟各位介紹 CG 同人陣的強大之處!

CG 首頁第三頁

CG 還有提供簡單的資料庫,讓創作者可以隨時存取使用者的資料,例如遊戲進度、分數等,也提供基本的排行榜、商店等功能,在製作小遊戲時,就可以設定一個簡單的排行榜,讓玩家們互相爭奪第一名的寶位。

除了可以存取資料的資料庫以外,CG 還為每個帳號提供了小型的伺服器,讓創作者也能夠自製一款可以即時多人連線的遊戲,不管是要做燒腦的多人博弈遊戲,或是乍看為多人合作,實則是考驗友情的絕交遊戲,都完全沒有問題。

CG 首頁第四頁

在遊戲製作完成後,除了可以將成品公開至 CG 以外,還能夠同時上架到 嘎姆擂台,相較於 CG,嘎姆擂台主要為整合從 CG 開發完成後的成品,除了提供了專屬的遊戲討論區,還能夠為自己的作品撰寫公告、調整製作進度,每當有作品發布新的公告時,就會顯示在嘎姆擂台的主頁面上,增加作品的曝光率。

結語

五年前當初我剛接觸 CG 時,也是個完全不懂程式設計的小白,甚至讀的是與資訊壓根就沒什麼關係的化工科,由於那時 CG 正處於萌芽的階段,除了小哈那陣子每周一次一小時的直播以外,幾乎沒有其他教學可以參考,雖然小哈提到了 Typescript、Pixi.js,但我那時完全不知道這是什麼,也不知道該怎麼找資料。

一直到了 2020 年,也就是我剛進入大學之後,某天回到 CG 上看看時,突然發現其實已經有不少人在上面發佈作品了,可能是因為這個關係,我卯起來把小哈那陣子幾乎所有的直播全部看了一次,一邊看,一邊實作,遇到問題時又回去多看幾遍,不知不覺間,我也能夠自己寫模組來給別人使用了。

我大概有 90% 程式的相關知識,都是從 CG 這個平台,以及小哈身上學到的,這個鐵人賽也是小哈推薦我們來參加的,我覺得這也算是回饋小哈的一種方式,而且還能夠推廣 CG 這個平台,所以,何樂而不為呢?在接下來的日子裡,我將會慢慢的向大家介紹 CG 的各項功能,並從較為簡單的 CG 同人陣開始,著手製作一些有趣的東西,所以還請各位跟著我的腳步,一起進入由小哈站長所開創的,Code.Gamelet 的世界吧!


下一篇
[Day 02] 建立新的 Code.Gamelet 專案
系列文
什麼!在網頁上也可以寫遊戲?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言