前往
大廳
主題

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

酷可 | 2024-01-16 17:30:03 | 巴幣 4238 | 人氣 4862


不知道有多少人和曾經的我一樣,對於製作一個屬於自己的視覺小說有興趣,但卻始終不知道該從何下手,或是安裝過開發軟體,但又因為各種原因而被勸退,可能是軟體太過複雜、安裝失敗、沒有中文、有亂碼、可自訂功能太少、需要程式基礎等等,因為種種的原因,導致這些想要製作視覺小說遊戲的人一直沒辦法起步,這篇文章主要是想跟各位介紹一下,一個可以讓人在網頁上,不需要安裝軟體、不需要程式基礎,只需要一個 Google 帳號,就可以在網頁上製作一個視覺小說遊戲的工具。

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

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

什麼是 Code.Gamelet?


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

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

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


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

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

視覺小說引擎模組


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


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

(日語配音是我用 Google 翻譯的,實際上可能有很多語法錯誤,還請見諒)

這是我當初在開發時的紀錄影片,前半段是成果展示,後半段也有一些編輯器的畫面,影片中示範的遊戲網址,可以點擊 這裡 前往看看,另外也可以從 這裡 查看遊戲背後的原始碼,待會我們也會簡單的帶各位從新創專案,到製作出一段對話為止。

第一步:新創專案


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


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


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


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


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


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

第二步:安裝視覺小說模組


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


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

第三步:啟動遊戲、事前設定


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

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

再來是 舞台大小,通常我自己會根據兩點來做決定:
  • 圖片素材尺寸:先根據我們圖片素材的尺寸大小去定義舞台大小的上限,雖然圖片是可以進行縮放的,大圖縮小還沒有問題,可是小圖放大就會造成解析度降低,遊戲的品質看起來就會有所下降。再來就是如果每一張圖都要進行縮放,工作量勢必會有所增加,對於往後遊戲規模變大之後,可能未必是件好事,所以建議一開始在準備圖片素材的時候,可以統一一個尺寸規格,以便能夠直接套用就好。
  • 設備螢幕尺寸:接著要考慮這個遊戲的成品,是要在什麼樣的環境下供人遊玩,有可能你是想要讓玩家可以在手機上拿直的看,那可能就是寬比較窄,高比較長,由於 CG 完全是在網頁上運作的,所以要在手機上運行也是沒有問題的,不過像我通常都是做給 PC 使用的,加上對解析度有一點要求,所以我就會設定 1920 x 1080,而且有許多的免費素材都是根據這個尺寸去畫的,或是解析度低一點就是 1440 x 810、1280 x 720,總之就是改變尺寸但保持比例不變。
如果你暫時還沒有圖片素材,或是沒有什麼想法,可以像我一樣設定成寬 1920,高 1080,因為待會我會順便介紹一些素材網站,可以讓我們在遊戲製作上使用。

第四步:實作事件表、播放對話

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


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


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

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


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

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


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

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

第五步:上傳資源、改變背景

首先,要自訂背景的前提就是要有背景,但不是人人隨手一筆就可以生出一個背景圖,如果是能夠自己畫出背景圖的人,就可以跳過這一段,但如果是跟我一樣沒辦法的人,就可以考慮找找其他人開放出來給大家使用的素材,包括之後的角色立繪也是一樣。
這裡跟各位分享一篇文章,上面整理了不少免費素材的網站,如果不知道該怎麼搜尋相關素材的話,暫時可以先參考介紹裡的網站看看。

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


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


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


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


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

第六步:創建角色、顯示立繪

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

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


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

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

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


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

結語

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

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

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

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

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



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

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

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


如果你還想看更多詳細的介紹,我有直播了一場教學,影片上有標註時間軸,可以參考看看,只是有個大問題是我到直播 33:37 的時候,才發現先前的測試畫面觀眾都看不到,所以如果你是要查看 33:37 以前的介紹,可能只能看我如何操作,看不到測試畫面。
送禮物贊助創作者 !
0
留言

創作回應

鴿子奶綠特調
好耶! 酷可做的遊戲引擎真的很容易上手!
2024-01-17 00:08:16
酷可
好耶!
2024-01-18 21:15:27
.我是人qq
感謝有這模組,成功製作出遊戲了,現坐等存檔系統(๑•̀ᄇ•́)و ✧
2024-03-18 08:19:53
酷可
讚欸~恭喜你!不過存檔系統可能真的要一段時間了,這個系統當初在做的時候沒有考慮到存檔,現在想要即存即讀好像有點困難,但我會想辦法的
2024-03-18 14:14:03
酷可
為了迎接存檔系統,我把模組大部分核心的程式重新編寫了一次,事件表動作的部分也有少許的變動,如果你還在做的話,可能需要從載入模組的地方更新模組,如果更新完以後出現問題,可以回報給我,感謝!
2024-03-22 11:45:03
加奈さん
實在太感謝了!!!多年來就一直想做視覺小說,看了版主的文章才終於有成功的小確幸了(灑花)!!!
2024-09-29 02:19:58
酷可
好耶!成功做出東西的成就感真的很重要w
有了第一步之後就會有更多的動力繼續下去了,加油!
2024-09-29 06:08:41
Althea
你好!這邊想請問為什麼上傳圖片到資源,按照步驟做之後卻無法顯示呢?
2024-10-15 20:43:43
酷可
這個問題的原因有很多種,但我猜可能是你不小心把圖片資源設定成模組測試專用了,如果是的話可以更新資源將該設定取消。
如果不是的話得看看妳的圖片用途是什麼,背景、角色立繪、對話框樣式,也許比較容易找出問題。
2024-10-15 21:54:35
Althea
ㄟ檢查了一下發現沒有設置成模組測試專用,圖片用途是背景圖片(初始頁面)
2024-10-15 22:44:52
酷可
可以讓我看看你的專案嗎,這樣可能比較快,可以從專案設定新增測試員。
https://truth.bahamut.com.tw/s01/202410/c13a41cbf4d8040318110873f0dbae25.PNG
2024-10-15 23:01:18

相關創作

更多創作