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

HTMLとJavaScriptで簡単にブラウザノベルゲーが作れるWebTailKitのご紹介です！

Transcript

1. JSで ビジュアルノベルエンジン 作った
2. 自己紹介 名前：遠藤ヒズミ 生息地：千葉県 分類：Webフロントエンジニア（サーバーサイドもいけるよ） 好きなもの：太めのロボットとニチアサとPSO2の自キャラ
3. 導入 JavaScriptで ビジュアルノベルゲームエンジン 作ったった
4. 開発経緯 • ﾉﾍﾞﾙｹﾞｰ作りたいﾝｺﾞ...でも、既存のｽｸﾘﾌﾟﾄ覚えるのめんどいﾝｺﾞww ◦ いや、HTML5(死語)を駆使すれば、ワンチャン自作できるのでは？ ▪ CanvasとWebAudioを使えば、作れるはずだから、試してみよう！ ◦ おまえは誰だ？　俺は、 JavaScript(TypeScript)技術者だ → よし、作ろう！(2023年8月) → て”き”た”ぁ”！ver.0.1リリース！（2024年1月) → 現在、ver.0.2.11
5. WebTaleKit とは ブラウザで動くノベルゲームを作るための ゲームエンジン UIを、HTMLで好きに作れる。 進行制御をとっつきやすいHTMLベースの 言語で記述し、エンジンを JavaScript(TypeScript)で拡張できる
6. ４つの特徴 - HTMLで好きなUIが作れる - オートスケールでどの画面でも - 環境構築がコマンド一発でらっくらく - とっつきやすい独自言語
7. WebTaleKit の特徴 HTMLで好きなUIを作れる • HTMLとcanvasの2段構成 ◦ 画像表示はcanvas ◦ UIはHTML Canvas HTML
8. WebTaleKit の特徴 画面構成 • HTMLとcanvasの2段構成 ◦ 背景とキャラの canvas ◦ UI部分のHTML →HTML+CSS+JSで好きにUI を組める！ Canvas HTML
9. WebTaleKit の特徴 画面構成 • HTMLとcanvasの2段構成 ◦ 背景とキャラの canvas ◦ UI部分のHTML →HTML+CSS+JSで好きにUI を組める！ →Vue.js･Reactで作れる！ Canvas HTML
10. WebTaleKit の特徴 オートスケールでどの画面でも 画面に合わせて、自動で拡 大縮小 →どんな画面で同じ表示！
11. WebTaleKit の特徴 環境構築がコマンド一発 • npm create tale-game →　楽ッ！！
12. WebTaleKit の特徴 とっつきやすい独自言語 • HTMLベースで見やすい • 直感的な英単語で理解し やすい • JavaScriptのメソッド呼び 出しができる。 • 属性を使ってREST API呼 び出しが出来る →　デザイナーでも作れる？ WebTaleScriptの記述例： 地の文の表示： <text speed='50'>これは地の文</text> セリフの表示： <say name='' voice=''>これはセリフ</say> 画像の表示：　 <show path="" name="" pos="center:top"> 選択肢の表示： REST API:
13. 今後の展開 - アニメーション・トランジションの拡充 - セーブ＆ロード機能の追加 - フラグ管理機能の追加 - プラグイン機能の追加 - Electronなどを用いたクロスプラットフォーム展開の対応 - GUIエディタの提供 - TypeScriptへの対応（移行中）←9割方できた etc…
14. 最後に 使ってみた感想・意見お待ちしております！ - アイデア・今後の実装内容：https://trello.com/b/qYNGh7MY - GitHubレポジトリ：https://github.com/EndoHizumi/webTaleKit - フィードバックフォーム：https://forms.gle/KMRWLinYNAfqt8PfA - デモンストレーション： https://test-game-chi.vercel.app/