vocus logo

方格子 vocus

WebGal 免費開源視覺小說製作工具 - 0代碼製作ACG遊戲

更新 發佈閱讀 4 分鐘

此文搬運來自我的網站:

我之前關於 Webgal 的算是心得感想吧
可以從這裡查看

介紹:什麼是 WebGal?

Webgal 是一個簡單而功能齊全的視覺小說製作器,讓你可以在不用任何代碼的情況下做出一款 ACG 遊戲
除了提供各種你會需要的功能外還搭配了相當用戶友好的使用介面讓就算是沒有開發經驗的新手也可以很快的進入狀況開始製作遊戲
因為是可視化的編輯器你甚至不需要打開 Atom 或是 Visual Studio 之類的代碼編輯器就可以直接編輯你的遊戲了

其他可視化引擎:



優點:為什麼使用 WebGal?

Webgal 的優點在哪裡?為什麼推薦它呢?
以下是幾個 WebGal 的特點:

  • 易於使用:無論是使用 Webgal 脚本還是使用可視化編輯器進行開發,一切都是非常的簡單自然。只需要按照官方提供教程和文檔,就可以快速上手這個視覺小說製作引擎
  • 美觀優雅:Webgal 提供了美觀優雅的圖形用戶界面與交互效果,一切都是為了更好的用戶體驗。你可以自定義你的遊戲界面,添加各種元素和動畫等內容
  • 功能強大: 它不僅支持主流視覺小說引擎所具有的幾乎全部功能,你還可以使用 Pixi.js 為你的遊戲添加自定義效果。除此之外 Webgal 還支持多語言、多平台、多解析度等特性,讓你的遊戲可以在任何設備上運行
  • 免費開源: 還有一個重點就是它是一個完全免費且開源的項目,你可以在 GitHub 上找到它的源代碼和文檔。你也可以參與到 Webgal 的社區中,與其他開發者交流和學習

有興趣的人可以看官方的 demo 預覽一下做出來的效果
或是 B 站也有一些演示的影片可以預覽大概的樣子



開始使用:如何使用 WebGal 製作視覺小說?

首先我們要先來下載 WebGal 到我們的電腦上
在不知道什麼時候 (笑) 的更新開始 WebGal 有了自己的官網並且提供了可以直接下載安裝的安裝包
所以可以直接從官網下載安裝文件
(有.exe 包可以選或是 Zip 檔案或是你也可以從 Github 上下載)

安裝 WebGal

安裝 WebGal

  • 可能會跳出說不安全的提示但可以無視它
  • 如果顯示缺乏權限的話就用 admin 的權限打開它就好

創建第一個專案

下載好後雙擊 WebGAL_Terre 就可以打開 WebGal 了

  • 默認的話會出現在 http://localhost:3001/

之後點擊 新建遊戲 然後給它取個名字

新建遊戲

新建遊戲

之後它就會出現在遊戲列表裡面了
點擊 編輯遊戲 就可以開始編輯你的專案了

開始編輯遊戲

開始編輯遊戲



WebGal 編輯器介紹

編輯器外觀

編輯器外觀

  • 最左邊的一欄可以切換 設定 , 資源場景的畫面,為出現在預覽畫面下面
  • 中間的話就是可以用來預覽遊戲畫面,現在還可以在編輯器裡調整大小所以可以放大來看
  • 右邊的話可以用來編寫腳本或是預覽專案裡面的圖片

以下是一些目前有的語句:

WebGal 語句們

WebGal 語句們

介紹一下一些特點好了

WebGal 編輯器特點:

  1. 可以隨時切換編輯模式: 從可視化到腳本編輯器之間視可以隨時切換的
  2. 可以隨時開啟實時預覽模式: 想要隨時預覽自己做的修改的話就可以打開它,甚至也可以切換到新分頁預覽畫面
  3. 可以隨時輕鬆的預覽圖片: 雙擊圖片就會出現在右邊放大出來了
  4. 可以任意拖拉語句: 在可視化的編輯器中你可以隨時隨意的上下拖拉每個語句
  5. 可以一鍵導出遊戲: 遊戲做好後直接點右上角的按鈕就可以直接導出遊戲給其他人遊玩了

編輯專案

要添加語句非常簡單
滑到想要添加的地方後點一下 添加語句 或是 本句前插入句子 之後再從跳出來的小畫面中點選想執行的動作
像是新增普通對話,新增分支選項或是切換場景都可以不用任何代碼點一下就可以切換 / 加入了

因為是簡單的視覺化引擎感覺不需要太多解釋所以就直接切到下個部分拉

輸出遊戲

跟剛剛的特點說的一樣使用 WebGal 輸出遊戲非常簡單,從右上角的導出遊戲按鈕裡選擇導出的格式 (像是 Android 版,網頁或是 exe 檔案) 之後等待一下下後就會自己跳出一個文件夾,文件夾裡面就有導出的遊戲囉


今天的介紹就到這裡拉~
下次再見!

留言
avatar-img
SmileFlower的星球 ⭐ 歡迎入住~
58會員
116內容數
此沙龍呢,主要包含 Renpy 中文教學還有其他遊戲引擎 (專注於視覺小說引擎) 的教學。 歡迎想學自製遊戲的人加入! 除了遊戲製作的教學外也有一些我的生活上的各種事的分享,只想學製作遊戲的話就可以先忽略他們拉
2025/01/03
回顧2024年忙碌充實的一年,完成了畢業、考試、實習和接案等重要事項,並新增32篇教學、3個UI範本,參與2個Game Jam。2025年計畫完成未完成教學、製作教學影片,並考慮新增會員投稿教學。新年推出限時優惠方案,訂閱新年方案享對折優惠。
Thumbnail
2025/01/03
回顧2024年忙碌充實的一年,完成了畢業、考試、實習和接案等重要事項,並新增32篇教學、3個UI範本,參與2個Game Jam。2025年計畫完成未完成教學、製作教學影片,並考慮新增會員投稿教學。新年推出限時優惠方案,訂閱新年方案享對折優惠。
Thumbnail
2023/10/26
昨天在滑巴哈的遊戲製作公會的時候看到一篇關於 ACG Creator 的文章 覺得做出來的成品看起來還不錯 而且還是台灣人做的引擎,很有興趣所以嘗試了一下 看起來跟 OICE 有點像是也讓我想到類似易次元這樣的平台
Thumbnail
2023/10/26
昨天在滑巴哈的遊戲製作公會的時候看到一篇關於 ACG Creator 的文章 覺得做出來的成品看起來還不錯 而且還是台灣人做的引擎,很有興趣所以嘗試了一下 看起來跟 OICE 有點像是也讓我想到類似易次元這樣的平台
Thumbnail
2022/05/12
這算是中式古風或是日式古風 可以用在所有 (付費/免費) 引擎上 - 推薦的話是使用在 Renpy 上 免費古風UI素材, 免費視覺小說UI素材, 免費文字冒險遊戲UI素材 古風UI素材下載, 日式古風UI素材下載, 中式古風UI下載 自製遊戲用免費素材下載
Thumbnail
2022/05/12
這算是中式古風或是日式古風 可以用在所有 (付費/免費) 引擎上 - 推薦的話是使用在 Renpy 上 免費古風UI素材, 免費視覺小說UI素材, 免費文字冒險遊戲UI素材 古風UI素材下載, 日式古風UI素材下載, 中式古風UI下載 自製遊戲用免費素材下載
Thumbnail
看更多
你可能也想看
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
別讓你的房子,變成家中最大的「閒置資產」 作為一名服務高淨值客戶的私人銀行顧問,我每天的任務只有一個:幫客戶「讓錢滾動」。然而,當我觀察身旁許多同樣育有子女的朋友們,即便他們多半已是職場上的中高階主管,表面上看似光鮮亮麗,有房有車;但實際上,大家都是典型的「夾心世代」。每個月薪水一入帳,扣掉沉重的
Thumbnail
別讓你的房子,變成家中最大的「閒置資產」 作為一名服務高淨值客戶的私人銀行顧問,我每天的任務只有一個:幫客戶「讓錢滾動」。然而,當我觀察身旁許多同樣育有子女的朋友們,即便他們多半已是職場上的中高階主管,表面上看似光鮮亮麗,有房有車;但實際上,大家都是典型的「夾心世代」。每個月薪水一入帳,扣掉沉重的
Thumbnail
其實有很多下載版的實用工具,免費的付費的我都有,但就懶得安裝懶得開,還是喜歡線上直接使用……
Thumbnail
其實有很多下載版的實用工具,免費的付費的我都有,但就懶得安裝懶得開,還是喜歡線上直接使用……
Thumbnail
一直想整理手裡有的免費素材連結,希望可以幫助到其他創作者。 平時都在這裡撈素材(背景、音樂、音效、立繪等): https://www.nvlmaker.net/index.html (⬆️遊戲製作工具NVL的社團網頁,至今仍有不少遊戲成品發表) 可是有蠻多素材連結失效了,所以才想自己慢慢整理
Thumbnail
一直想整理手裡有的免費素材連結,希望可以幫助到其他創作者。 平時都在這裡撈素材(背景、音樂、音效、立繪等): https://www.nvlmaker.net/index.html (⬆️遊戲製作工具NVL的社團網頁,至今仍有不少遊戲成品發表) 可是有蠻多素材連結失效了,所以才想自己慢慢整理
Thumbnail
文章中,我們介紹了幾款免費的AI影片製作工具,並提供了使用教學和技巧。無論是Lumen5、Pictory、Canva、Kapwing、CapCut還是FlexClip,這些工具都能幫助你高效地實現影片製作目標。此外,我們還介紹了一些其他輔助工具,如AI配音工具和AI繪圖工具,讓您可以更豐富地製作影片
Thumbnail
文章中,我們介紹了幾款免費的AI影片製作工具,並提供了使用教學和技巧。無論是Lumen5、Pictory、Canva、Kapwing、CapCut還是FlexClip,這些工具都能幫助你高效地實現影片製作目標。此外,我們還介紹了一些其他輔助工具,如AI配音工具和AI繪圖工具,讓您可以更豐富地製作影片
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
這篇文章分享了一個感覺高科技的AVG製作工具,詳細介紹了TyranoBuilder和TyranoScript之間的區別,並提到了自己對於文字 + 選項的AVG玩法的看法。
Thumbnail
這篇文章分享了一個感覺高科技的AVG製作工具,詳細介紹了TyranoBuilder和TyranoScript之間的區別,並提到了自己對於文字 + 選項的AVG玩法的看法。
Thumbnail
俗話說得好,人要衣裝,貼文也要圖像美化 在眾多貼文中看到含有漂亮圖片貼文,會使你駐留腳步,停下多看幾眼,如同看到美女也會使你短暫停留,多瞟幾眼,欣賞他美麗的容貌。沒有圖片的貼文仿佛失去了顏色、平淡無奇些。 還在擔心作圖技巧不如他人,不是美編出身的我們如何脫穎而出?不用擔心,看完這篇你會有方法👍
Thumbnail
俗話說得好,人要衣裝,貼文也要圖像美化 在眾多貼文中看到含有漂亮圖片貼文,會使你駐留腳步,停下多看幾眼,如同看到美女也會使你短暫停留,多瞟幾眼,欣賞他美麗的容貌。沒有圖片的貼文仿佛失去了顏色、平淡無奇些。 還在擔心作圖技巧不如他人,不是美編出身的我們如何脫穎而出?不用擔心,看完這篇你會有方法👍
Thumbnail
【網頁設計】Instawp InstaWP 是一個快速建立 WordPress 沙盒環境的服務商,全世界有很多網站是使用 WordPress 建立的,對於想要學習的新手,要先從架設網站開始學起來,也需要一段時間,如果遇到想要測試特殊的外掛或佈景模組,在不想影響原本的使用環境,就需要一個能快速建置
Thumbnail
【網頁設計】Instawp InstaWP 是一個快速建立 WordPress 沙盒環境的服務商,全世界有很多網站是使用 WordPress 建立的,對於想要學習的新手,要先從架設網站開始學起來,也需要一段時間,如果遇到想要測試特殊的外掛或佈景模組,在不想影響原本的使用環境,就需要一個能快速建置
Thumbnail
【線上工具】Azue Azure 是微軟的雲端平台,提供了許多實用工具和服務,可以幫助您建立、部署和管理應用程式,其中還有文字轉換語音的工具,能建置可自然說話的應用程式和服務,透過自訂、寫實的語音產生器來產出不同的說話樣式和情緒語調的語音,你可以設定男生或女生聲音,甚至可以做到語調的高低與速度都能
Thumbnail
【線上工具】Azue Azure 是微軟的雲端平台,提供了許多實用工具和服務,可以幫助您建立、部署和管理應用程式,其中還有文字轉換語音的工具,能建置可自然說話的應用程式和服務,透過自訂、寫實的語音產生器來產出不同的說話樣式和情緒語調的語音,你可以設定男生或女生聲音,甚至可以做到語調的高低與速度都能
Thumbnail
【線上工具】Azue Azure 是微軟的雲端平台,提供了許多實用工具和服務,可以幫助您建立、部署和管理應用程式,其中還有文字轉換語音的工具,能建置可自然說話的應用程式和服務,透過自訂、寫實的語音產生器來產出不同的說話樣式和情緒語調的語音,你可以設定男生或女生聲音,甚至可以做到語調的高低與速度都能略
Thumbnail
【線上工具】Azue Azure 是微軟的雲端平台,提供了許多實用工具和服務,可以幫助您建立、部署和管理應用程式,其中還有文字轉換語音的工具,能建置可自然說話的應用程式和服務,透過自訂、寫實的語音產生器來產出不同的說話樣式和情緒語調的語音,你可以設定男生或女生聲音,甚至可以做到語調的高低與速度都能略
Thumbnail
【免費字體】辰宇落雁體 【線上工具】Flexclip 【線上工具】Happy Hues 【線上工具】Designevo 【線上工具】Picreator
Thumbnail
【免費字體】辰宇落雁體 【線上工具】Flexclip 【線上工具】Happy Hues 【線上工具】Designevo 【線上工具】Picreator
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News