JSでギャルゲーをつくろう！（第２版)

Transcript

1. JSでギャルゲーを作ろう！ JS製ビジュアルノベルエンジン WebTaleKitのご紹介
2. 自己紹介 名前：遠藤ヒズミ 生息地：千葉県 分類：Webフロントエンジニア（サーバーサイドもいけるよ） 好きなもの：太めのロボットとニチアサとPSO2の自キャラ 今期のアニメ：負けヒロインが多すぎる！ 　恋は双子で割り切れない 　2.5次元の誘惑
3. 導入 JavaScriptで ビジュアルノベルゲームエンジン 作ったった
4. 開発経緯 • 友達からヒズミさんの書いた小説はゲームでもありだねと言われる • エンジンは、なにを使おう？？ ◦ いや、HTML5(死語)を駆使すれば、ワンチャン自作できるのでは？ ▪ canvasとWebAudioを使えば、作れるはずだから、試してみよう！ ◦ おまえは誰だ？　俺は、 JavaScript(TypeScript)技術者だ →よし、作ろう！（2023年8月）
5. アルファ版リリース！ 出来た！(2024年7月)
6. アルファ版リリース！ 鋭意開発中！
7. WebTaleKit とは ビジュアルノベルゲーム(以下: VN)をWeb アプリケーションとして作るためのゲームエ ンジン VNに必要な基本機能を、HTMLベースの 独自言語で記述し、ゲームロジックを JavaScriptで作る事が出来る
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使える！ Canvas HTML
11. WebTaleKit の特徴 画面構成 • HTMLとcanvasの2段構成 ◦ 背景とキャラの canvas ◦ UI部分のHTML →HTML+CSS+JSで好きにUI を組める！ →Vue.jsやReact使える！ →解像度に非依存で表 示！
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. WebTaleKit の特徴 導入が楽 • npm create tale-game • コマンド一発ッ！！
15. デモンストレーション https://test-game-chi.vercel.app/
16. 今後の展開 - アニメーション・トランジションの拡充 - セーブ＆ロード機能の追加 - フラグ管理機能の追加 - プラグイン機能の追加 - vercel/netlifyへのデプロイ機能の追加 - Electronなどを用いたクロスプラットフォーム展開の対応 - GUIエディタの提供 - TypeScriptへの対応（移行中） etc…
17. 最後に 使ってみた感想・意見お待ちしております！ - アイデア・今後の実装内容：https://trello.com/b/qYNGh7MY - GitHubレポジトリ：https://github.com/EndoHizumi/webTaleKit - フィードバックフォーム：https://forms.gle/KMRWLinYNAfqt8PfA