【教學】在網頁上做一個視覺小說遊戲

不過在正式開始之前，講到可以在網頁上製作視覺小說的工具，可能有人會想說我是要介紹 oice.com，或是 BASS 遊戲製作平台，兩個都是中文圈的網站，前者主要為香港的平臺，後者主要為臺灣的平臺。oice 最大的優點應該就是介面比較精美，而且非常容易上手，但容易上手所帶來的問題就是比較有侷限性，你很難在劇本、立繪以外的地方發揮自己的創意，例如主畫面、對話框樣式、排版等等。而 BASS 雖然能夠製作出一款較為完整的遊戲成品，但它在遊戲製作方面的上手難度比較高，而且網站整體，包括遊戲編輯器的介面都比較老舊，對於新手來說可能比較不太適合。不過如果你是第一次聽到這兩個平台，我會建議你親自到這兩個網站上去，體驗一下其他人創作的遊戲，或是看看它們各自的教學影片等，到時候再回來這篇文章也不遲，也許其中一個就符合你的需求也不一定。

OK，提了這麼多，接下來就要正式的介紹，如果不是以上兩者，那到底還有什麼網站可以讓我們在網頁上，不需要安裝軟體，不需要寫程式，就可以製作視覺小說遊戲呢？答案是 Code.Gamelet。

關於這個問題，我在參加 2023 年的 iThome 鐵人賽，有寫了一系列的介紹文章 什麼！在網頁上也可以寫遊戲？，有興趣的人可以去瀏覽一下，不過我還是在這裡簡單介紹一下。

Code.Gamelet（以下簡稱 CG），是由 小哈片刻 在 2018 年正式推出的遊戲製作平臺，老實說它並不是只能做視覺小說遊戲，所有 2D 風格的遊戲都能夠在上面製作，但與許多網頁上的遊戲製作平臺不同的是，它提供了以 Typescript 為主的線上 IDE（整合開發環境），任何有程式經驗的人，都能夠在上面撰寫 Typescript 程式碼來進行開發，而在不久之後，小哈也隨之開發了具有圖形化介面的遊戲編輯器—— CG 事件表，正是因為這個系統，才讓本次的介紹得以實現。

而最重要的是，CG 的專案可以由作者自行決定是否開源，還能夠讓所有人將自己開發的函式庫、工具集等，包裝成一個模組，分享給其他創作者們使用，除了單純的使用這些模組以外，我們也能夠為其添加更多的新功能之後，再包裝成一個新模組，來達成幫模組擴充更多功能的效果。

CG 事件表本身其實也是一個模組，事實上它提供的只是 CG 的圖形介面編輯器及流程控制而已，讓原本需要撰寫 Typescript 程式碼才能創作的我們，能夠輕鬆的利用拼積木的方式就做出一些有意思的東西，不過這裡的拼積木和 Scratch 不太一樣，這我們稍後再來說明。

不知道你有沒有意識到了什麼，簡單的說，就是我們可以直接在上面開發一款遊戲引擎，並將其包裝成模組提供給大家使用，因此，當我開始有能力撰寫模組之後，馬上就試著寫了一個視覺小說引擎的模組。

視覺小說遊戲引擎，是我基於 CG 事件表的功能，自己另外寫的一個事件表模組，它可以讓我們使用 CG 事件表的圖形化介面去製作一款視覺小說遊戲。

上圖就是 CG 事件表中，一個事件的畫面，可以看到這個事件裡面由非常多藍色的條目所組成，我們稱之為動作，最前面所顯示的就是這個動作的名字，可以看到諸如設置背景、顯示對話框、播放對話、顯示立繪、切換立繪，對於視覺小說有興趣的人，看到這些名稱應該就可以明白這些動作的用途了吧？

講了這麼多，不如實際操作一次看看，首先到 code.gamelet.com 的首頁去，應該會在畫面正中間看到一顆按鈕顯示 探索去，點下去之後就會來到如上圖的頁面，接著從右上角進行登入，你可以使用 Google、Facebook、GitHub、X 帳號登入。

登入後，這裡會顯示你自己的專案，當然應該不會像我這麼多，不過這不重要，點擊大頭照下方有一個 新創專案。

接著會跳出如上圖的視窗，這些都可以不用理會，我們就是要新增一個空白的專案，因此直接按下 新增一個空白專案。

按下後，視窗會要求你輸入一個獨有的專案代碼，這個代碼就代表著你的專案，不能與其它專案代碼重複，包刮別人的也一樣，主要會影響的大概就是遊戲的成品網址，例如我這次就寫了 VNTutorial，就是視覺小說教學的意思，好了之後就點擊下方的 新創專案。

如此一來，我們的遊戲專案就創建完成了，點擊畫面中的 編輯遊戲事件表，就可以跳到事件表的頁面。

事件表，就是在左邊檔案總管，以副檔名 events 結尾的檔案，一般創建一個包含事件表模組的空白專案時，都會內建一個名為 game.events 的事件表檔案，最上方的 試玩遊戲，最右側工具列的 播放按鈕，都可以進行專案的測試，而事件表本身也有一個播放按鈕可以單獨測試該事件表，因為一個專案可能會有許多事件表可以運作。

點擊畫面右側工具列的第三個功能——載入模組，這邊會顯示我們專案當前有使用哪些模組，因為我們要載入新模組，所以點擊上方的 加載模組。

搜尋 VisualNovelEngine，就可以找到該模組，點擊 加載模組 就可以將該模組加入到專案中。

載入模組後，在事件表上方會多出一個如上圖的 視覺小說設定 按鈕，點擊後會打開一個視窗，勾選 啟動視覺小說遊戲，並按下視窗左上角的綠色勾勾儲存，這樣事件表在執行的時候，才會運行視覺小說遊戲。

另外在上方的 設定 按鈕中，我們還可以設定舞台大小、背景顏色、縮放策略等，通常我們會需要動到的只有舞台大小、背景顏色這兩個，先講 背景顏色，預設是灰色（#999999），但我一般都會調成純黑色（#000000），因為大多時候我們的遊戲舞台上都會有東西，不管是遊戲背景、角色立繪、畫面遮罩等，老實說只有在遊戲視窗不符合舞台大小時，才會看到舞台背景，也就是說那些是遊戲外的畫面，因此我一般都使用純黑色。

再來是 舞台大小，通常我自己會根據兩點來做決定：

如果你暫時還沒有圖片素材，或是沒有什麼想法，可以像我一樣設定成寬 1920，高 1080，因為待會我會順便介紹一些素材網站，可以讓我們在遊戲製作上使用。

每個事件表開始的第一步，都是新增一個新的事件，在剛剛那些設定的下方，有一個 +事件 的按鈕，點擊後就會跳出一個視窗，讓你輸入各種欄位，但我們都先不管，直接儲存就好。在這裡補充一下，從剛剛到現在我們要進行各種設定時，都是會跳出一個視窗，裡面有各種欄位可以填寫，並且左上角都會有兩個按鈕，一定要按下綠色勾，視窗內的資料才會被儲存，否則就是白編輯了。

如上圖，確認視窗之後事件表內就會多了個剛剛新增的事件，可以看到上方會顯示事件的 ID，而事件內分成了觸發、檢查、動作三個區塊，這一次我們只會使用到動作區塊而已，因為只是要和大家演示在 CG 上面製作視覺小說大概的流程是如何而已，不會用到太複雜的功能。

接著點擊動作後方的 + 按鈕新增動作，可以看到目錄中有許多資料夾，而我們需要用到的幾乎都在 視覺小說 裡面，我們首先要做的是先設置一個白色背景，因為待會顯示的對話框背景會是黑色，到時跟舞台背景融為一體就看不見了，所以點擊 場景 資料夾，找到動作 設置背景，原則上數值幾乎都是預設就好，只要改變 繪製圓角矩形 裡面的 顏色 就好，將其改成左上角的白色（#FFFFFF），完成後儲存，就可以在畫面中顯示一個純白色的背景。

接著就是視覺小說的主角，也就是對話框的顯示、播放，同樣新增動作，直接找到路徑 視覺小說 > 對話框 > 播放對話，製作視覺小說遊戲這個動作應該是最常被使用的，我們可以在 對話內容 的欄位輸入你想顯示的內容，例如「哈囉你好嗎！」、「這是一個視覺小說模組的教學示範。」等，輸入完之後先同樣不管其他設定，直接儲存。

如上圖，你可以繼續新增更多的播放對話，不過我目前暫時新增兩個就好，事件的執行順序都是由上而下，所以例如圖中的設計，就會是【設置背景 > 播放對話 > 播放對話】這樣子的順序去執行。

都設置完成之後，就到了最緊張刺激的一刻了，讓我們按下事件表上方的 試玩遊戲 來看看成果吧。

如果你從創新專案都一直跟著我做的話，那麼理論上就會和影片裡的我一樣，看到一個很酷的測試畫面，一個事件跟幾個動作就可以弄出視覺小說的效果，不酷嗎？

可能有一些胃口比較大的人並不滿於現狀，好吧，所以我接下來要示範的是如何匯入一個圖片當作背景，以及視覺小說中的另外一大看點——角色立繪。

首先，要自訂背景的前提就是要有背景，但不是人人隨手一筆就可以生出一個背景圖，如果是能夠自己畫出背景圖的人，就可以跳過這一段，但如果是跟我一樣沒辦法的人，就可以考慮找找其他人開放出來給大家使用的素材，包括之後的角色立繪也是一樣。

我自己覺得 KNT graphics 這個網站上的背景還不錯，雖然上面的圖片尺寸比較小，但放大後的影響我幾乎是意識不到，因此決定使用這裡的圖片素材當作背景，在這些網站上下載素材之前，一定要注意每個網站的素材使用規則，這非常的重要，尊重原作者的同時，也避免自己不會侵犯到別人的版權，例如這個網站在瀏覽素材前會有一個 利用規約 的頁面，如果上面寫的不是中文，你又覺得瀏覽器的翻譯不準確的話，可以考慮使用 ChatGPT，或是 Microsoft Copilot 來協助翻譯，只要把原文貼上去，並告訴 AI 幫你翻譯成中文就好，因為 AI 會考慮前後文，翻譯出來的結果會比較準確。

總之如果你已經準備好背景圖的話，就讓我們回到 CG，最右側工具列的第二個功能——資源管理，這裡會顯示你的專案目前有載入哪些資源，跟模組的部分很像，點擊上方的 加載資源 就可以上傳圖片了。

開啟視窗之後，要先幫這個資源輸入一個代理名字，可以輸入中文，例如我就寫「背景.教室」，之後點擊 上傳資源 分頁就可以瀏覽選擇圖片，或是直接拖曳上去也可以，完成後右下角可以決定是否公開資源，公開資源就是讓其他創作者可以在 尋找資源 那裡搜尋到，但這主要是給自創素材的人使用的，因為像我剛剛下載素材的網站就有提到「二次配布（加工したものでも）はご遠慮ください。」，意思就是素材不能再次分享，即使是經過修改的，所以就不能將該資源公開給別人使用，這點各位在上傳資源時可能要注意一下。

總之選擇好檔案之後就可以按下右下角的 上傳資源 進行上傳，上傳之後就可以看到多了一個圖片分類，打開後可以看到我們剛剛上傳的圖片資源，上面有資源的代理名稱、預覽圖，下拉後還有資源的詳細資訊等。

圖片上傳完成後，讓我們回去編輯 設置背景 這個動作，點擊該動作前方的鉛筆按鈕進行編輯，將 背景來源 改為 資源，就可以在 資源的代理名字 中選擇我們剛剛上傳的資源，例如我就是 VNTutorial.背景.教室，比例一般都不用調整，完成後儲存動作，接著再測試一次，就可以看到遊戲背景變成了我們剛剛上傳的圖片了。

最後一步，就是在遊戲中顯示角色立繪，而同樣的，想要顯示立繪就得先有立繪，而步驟就跟我們剛剛的背景一模一樣，我在 立ち絵素材 わたおきば 這個網站上有找到適合的立繪，因此我將其上傳至專案，並取名為 VNTutorial.立繪.男學生1_閒置。

這裡我又要分享一個經驗，就是當你的專案越做越大，素材一定會越來越多，這時資源的命名就滿重要的了，因為 CG 只會幫你分類不同種類的資源，但即使是同種類的資源，也可能會有不同的用途，例如剛剛的背景、立繪，之後可能還會有大頭貼、遮罩、特效等等，所以像我就會在命名中標示這個圖片的用途，然後像是男學生可能也會有很多個，所以我就會加上編號，並標示這個立繪的狀態描述，來達到另類的分類效果。

有了立繪資源之後，讓我們新增一個新動作——創建角色，在路徑 視覺小說 > 角色 裡面，首先 角色代碼 是寫給我們自己看的，用來之後在事件表中操控這個角色，而 名字 是會在遊戲中顯示的，其他比較重要的就是 人物立繪、大頭貼 了，我們現在要在人物立繪中新增一個欄位，選擇我們剛剛的立繪資源，並給這個立繪一個代碼，就跟角色代碼的用途一樣，完成後就可以儲存，儲存後記得把這個動作拉到事件的最上面去，這樣它才會第一個被執行，滑鼠左鍵按住動作就可以進行拖動了。

有了角色跟立繪我們就可以將其顯示到舞台中了，新增一個動作 顯示立繪，在 視覺小說 > 立繪 裡面，選擇剛剛創建的 角色代碼 以及 立繪代碼，顯示位置看自己的需求，完成後儲存動作，此時測試一下遊戲，就可以看到前面的動作都執行完後，畫面中就顯示出了我們所設置的立繪了。

然後我們可以再新增一個播放對話，因為有個角色之後，我們就可以指定角色代碼，讓該角色說話，這樣子當遊戲在播放這一段對話時，就會在對話框上面顯示該角色的名字囉～

OK，到現在最基礎的操作、功能，我大概都介紹完了，其他的功能像是切換立繪、立繪跳躍、背景震動，我覺得如果上面的介紹都理解了的話，要使用起來應該不會太難，頂多剩下的就是如何將遊戲變成一個成品分享出去給別人玩而已，不過這個部分呢可以參考 [Day 11] 在 CG 上公開自己的作品 這篇文章，雖然前提的作品內容不一樣，但製作成品的流程是一樣的。

最後，想跟各位說說，這個模組是我剛學會寫程式時，就在嘗試的東西，目前這一版是我重寫兩次後的結果，因為過程中隨著我寫程式的經驗越來越豐富，並開始逐漸意識到我之前寫的結構有多麼的凌亂、慘不忍睹，因此我才把模組砍掉重寫，原始碼都是開源的，有興趣的人可以 點此 自己去看看。

而目前這一版，其實也已經是我一年前的產物了，現在看起來很有可能會重寫第三次，不過在那之前，因為模組該有的功能還是有，所以我決定先來試著推廣看看，因為在這之前我都只有在 Youtube、X，上傳過開發日誌而已，沒想到某天居然會有站外的人跑來問我這個該怎麼使用，代表真的有人會需要這個東西。

另外，也能夠順便推廣 Code.Gamelet 這個平台，雖然它能夠讓我們只利用一個網頁，就在上面進行遊戲、應用程式開發，但我也必須很誠實地說，現在關於這個平台的資源確實很少，要從零開始學起確實是有一定的難度，我當初是每天看著小哈站長長達一小時的直播教學，持續了好幾個月，才學成這樣的，這也是我真正踏入程式這塊領域的起點，但我並不希望後來的人們都跟我一樣，太耗費時間跟精力了，所以我成立了 Discord 群組、嘗試拍教學影片、寫教學文章，希望有更多的人可以加入，多創作出一點有意思的東西，而關於平台本身有機會我再來特別介紹。

回到視覺小說模組身上，因為寫模組的是我，代表你如果在使用上遇到什麼問題，或是有什麼建議，都可以直接告訴我，能力有限的範圍之內，能改的我就改，能加的我就加，不像是一般的開發軟體，雖然也可以回報問題、建議等，但與開發者的溝通可能相對的就不會那麼即時，再加上我現在只是個大學生，其實平常都還滿閒的，而若是我之後又打算重新開發時，也能夠有更多人的意見可以參考，畢竟老實說我玩過的視覺小說其實不多，可能有些細節會被我忽略。

總之，希望這篇文章能夠幫到那些想要製作視覺小說，但又不知道該怎麼開始的人，可能你之前已經找了某些軟體、網站、工具等，只是你還在猶豫怎麼開始，或是你是曾經試過，但最後不了了之，又看到這篇文章的人，不妨可以進來試試看，你只需要一個 Google 帳號，並跟著上面的介紹做，就可以看到一些成果，做著做著你就完成了一個作品也說不定，或是等你熟悉了概念之後要再回去使用那些更專業的軟體也行，只要有起步之後，後面的路就更容易走下去了。

---

如果你有更多關於這個平台，或是模組的問題，可以考慮下面的管道。

Discord－嘎姆討論區：這是我為了 CG 這個平台自行創立的 DC 群，並不是官方創立的，但很酷的是你可以在官方的遊戲裡面找到這個群組，而且小哈站長也在裡面，所以你可以很輕鬆地找到他。

或是如果你覺得加入一個 Discord 群太害羞的話，可以直接加我的 DC。代碼：cook1470