JSでギャルゲーをつくろう！

akihabara.any #1（https://akihabara-any.connpass.com/event/323071/）で、発表した
JavaScriptで作れるビジュアルノベルゲームエンジン「WebTaleKit」の紹介LTです。

Transcript

1. JSでギャルゲーを作ろう！ JS製ビジュアルノベルエンジン WebTaleKitのご紹介
2. 目次 • 自己紹介 • 導入 • WebTaleKitの特徴の紹介 ◦ 画面構成 ◦ ゲーム進行制御 ◦ WebTaleScript • 開発経緯 • デモンストレーション • 今後の展開
3. 自己紹介 名前：遠藤ヒズミ 生息地：千葉県 分類：Webフロントエンジニア（サーバーサイドもいけるよ） 好きなもの：太めのロボットとニチアサとPSO2の自キャラ 今期のアニメ：鹿しか勝たん
4. 導入 JSでギャルゲーが作りませんかーっ？！
5. 導入 いない...？(´･ω･`)
6. 導入（結論） JavaScriptで ギャルゲーエンジン作ったった
7. WebTaleKit とは ビジュアルノベルゲーム(以下: VN)をWeb アプリケーションとして作るためのゲームエ ンジン VNに必要な基本機能を、HTMLベースの 独自言語で記述し、ゲームロジックを JavaScriptで作る事が出来る ターゲット：Webフロントエンド技術者
8. WebTaleKit の特徴 画面構成 • HTMLとcanvasの2段構成 ◦ 背景とキャラの canvas ◦ UI部分のHTML Canvas HTML
9. WebTaleKit の特徴 画面構成 • HTMLとcanvasの2段構成 ◦ 背景とキャラの canvas ◦ UI部分のHTML →HTML+CSS+JSで好きにUI を組める！ Canvas HTML
10. WebTaleKit の特徴 画面構成 • HTMLとcanvasの2段構成 ◦ 背景とキャラの canvas ◦ UI部分のHTML →HTML+CSS+JSで好きにUI を組める！ →Vue.jsやReactでUIが！ Canvas HTML
11. WebTaleKit の特徴 画面構成 • HTMLとcanvasの2段構成 ◦ 背景とキャラの canvas ◦ UI部分のHTML →HTML+CSS+JSで好きにUI を組める！ →Vue.jsやReactが使え る！ Canvas HTML
12. WebTaleKit の特徴 ゲーム進行制御 • 独自言語とJavaScript • 独自言語はビルドすると JavaScriptとして、生成さ れる • WebTaleKitエンジンは生 成されたJSを実行する →画面とシナリオを分離して、作 業を進めることができる ビルド ブラウザーで実行
13. WebTaleKit の特徴 WebTaleScript（略:WTS) • HTMLベースの独自言語 • 地の文やセリフの表示な ど機能をセマンティックに 表現 • JavaScriptと相互に連携 が出来る • HTTPメソッド属性を使っ てREST API呼び出しが出 来る 例： 地の文の表示： <text speed='50'>これは地の文</text> セリフの表示： <say name='' voice=''>これはセリフ</say> 画像の表示：　 <show path="" name="" pos="center:top"> 選択肢の表示： REST API:
14. 開発経緯 • 友達からヒズミさんの書いた小説はゲームでもありだねと言われる • 素材 ◦ シナリオ→僕 ◦ 絵→知り合いに頼もうかAI生成か･･･ ◦ 音楽→フリーを探そう ◦ スクリプト→僕 • エンジンは、なにを使おう？？ ◦ いや、HTML5(死語)を駆使すれば、ワンチャン自作できるのでは？ ◦ おまえは誰だ？　俺は、 Webフロントエンド技術者だ →よし、作ろう！（2023年8月）
15. アルファ版リリース！ 出来た！(2024年7月)
16. デモンストレーション https://www.youtube.com/watch?v=YWVDPW4qWZU
17. 今後の展開 - アニメーション・トランジションの拡充 - セーブ＆ロード機能の追加 - フラグ管理機能の追加 - プラグイン機能の追加 - vercel/netlifyへのデプロイ機能の追加 - Electronなどを用いたクロスプラットフォーム展開の対応 - GUIエディタの提供 etc…
18. 最後に - アイデア・今後の実装内容：https://trello.com/b/qYNGh7MY - GitHubレポジトリ：https://github.com/EndoHizumi/webTaleKit - フィードバックフォーム：https://forms.gle/KMRWLinYNAfqt8PfA