- 概要
- デモ
- 環境構築手順
- 動作確認手順
- Quick Start（デモゲームを弄ってみよう）
- 現在の状況
- ロードマップ
- できること
- できないこと
- フィードバックフォームのご案内
TypeScript(JavaScript) ベースのビジュアルノベルゲームエンジンです。
UIをHTML・CSS・JavaScriptで柔軟に作成でき、シナリオをマークアップ言語とJavaScriptで制御できます。
自動スケーリング機能で、様々なウインドウで遊ぶことができます。
VS Codeの拡張機能を用いたGUIエディタやREST API呼び出しによる生成AI連携の追加を提供予定です。
Firefoxでも、Chromeでも、Edgeでも、好きなブラウザを使いたまえ・・・！
https://test-game-chi.vercel.app/
-
Git が必要です。
- インストール確認:
git --versionでバージョンが表示されれば OK - Windowsの場合は、Git公式サイト (https://git-scm.com/) からインストールしてください。
- Macの場合は、
brew install gitを実行してインストールしてください。 - Linuxの場合は、以下のコマンドを実行してインストールしてください。
sudo apt-get update sudo apt-get install git
- インストール確認:
-
Node.js(20以降)が必要です。(nvm等お好みの方法がある場合は、そちらでも構いません)
- インストール確認:
node --versionでv20以上のバージョンが表示されれば OK - Windowsの場合は、Node.js公式サイト (https://nodejs.org/) からインストールしてください。
- Macの場合は、
brew install nodeを実行してインストールしてください。 - Linuxの場合は、以下のコマンドを実行して、インストールしてください。
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - sudo apt-get install -y nodejs - インストール確認:
-
以下のコマンドを実行してください
npm create tale-game your-game-title cd your-game-title npm run play
デモゲームが起動すれば、構築は完了です。
以下のコマンドを実行してください。
git clone https://github.com/EndoHizumi/testGame.git
npm install
npm run playこのセクションでは、プログラミングの知識がなくても簡単にゲームをカスタマイズできる方法を説明します。
手順: 既存の画像ファイルを新しい画像で置き換える（ファイル名は同じにしてください）
- キャラを変える場合
./src/resource/chara/guide.pngを新しいキャラ画像で上書きしてください（ファイル名はguide.pngのまま）
- 背景画像を変える
./src/resource/background/title_bg.pngを新しい背景画像で上書きしてください（ファイル名はtitle_bg.pngのまま）
- BGMを変える
./src/resource/bgm/title_theme.mp3を新しい音楽ファイルで上書きしてください（ファイル名はtitle_theme.mp3のまま）
- 選択肢の画像を変える
./src/resource/system/systemPicture/02_button/button.png（通常時）- ファイル名はbutton.pngのまま上書き./src/resource/system/systemPicture/02_button/button2.png（マウスを乗せた時）- ファイル名はbutton2.pngのまま上書き./src/resource/system/systemPicture/02_button/button3.png（クリック時）- ファイル名はbutton3.pngのまま上書き
パス表記について:
./は「現在のプロジェクトフォルダから」という意味です- パス区切り文字は
/(スラッシュ) を使用しています - Windowsをお使いの方:
\(バックスラッシュ) でも動作しますが、上記の/形式を推奨します
シナリオファイル（.sceneファイル）をテキストエディタで開いて、以下の方法で内容を変更できます：
- キャラを増やす
./src/resource/characterフォルダに新しいキャラ画像を保存- シナリオファイルで
<show src="キャラ画像のファイル名"></show>を記述
- セリフを増やす
<say name="キャラの名前">ここにセリフを入力</say>を記述
- 地の文（ナレーション）を増やす
<text>ここに地の文を入力</text>を記述
初心者の方へ: まずは既存のテキストを変更することから始めることをお勧めします。
選択肢はプレイヤーがゲームの進行を選ぶ重要な要素です。シナリオファイル内の <choice> タグを編集することで変更できます。
基本的な選択肢の書き方:
<item label='選択肢の文言'>
<text>選択後に表示される文章</text>
</item>実用的な例:
<choice prompt="ゲームを始めますか？">
<item label="はい">
<jump index="5" />
</item>
<item label="いいえ">
<jump index="16" />
</item>
<item label='ちょっと待ってくれ'>
<text>承知しました。</text>
<jump index="1" />
</item>
</choice>
webTaleKitは、現在アルファ版です。
開発進捗は、@endo_hizumi で行っております。 実装予定の項目については、こちらのTrelloからも確認できます。
デモをプレイした感想・WebTaleKitを使って気になったことなど、意見・感想はこちらで受け付けています！ https://forms.gle/uejQwvwAb99wcJht7
検索Hashtag: #webTalekit
| バージョン | コードネーム | codeName | 内容 |
|---|---|---|---|
| 0.1.0 | 初音 | HATUNE | 初期リリース |
| 0.2.0 | 礎 | ISHIZUE | 基本機能アップデート 0.2.12～ ダイアログ表示タグの追加 engineConfig反映バグの修正 未定義タグがある場合、undefineを呼び出すバグの修正 文字列以外を囲むとこける問題の修正 リンク切れでこける問題の修正 メッセージウインドウオーバーフローの修正 if属性の実装 for属性の実装 既読管理の追加 |
| 0.3.0 | 舞踊 | BUYO | - トランジション・アニメーション関連のアップデート - テキストスピードの調整タグの追加 - テキスト表示フォントサイズの変更 - Webフォントのサポート（フォント変更設定の追加） - 動画再生のサポート - 子要素でフィルター・アニメーション設定 |
| 0.4.0 | 狭間 | HAZAMA | - Vue.jsやReact、SvelteなどのUIフレームワークとの連携追加のアップデート |
| 0.5.0 | 操手 | AYATURI | - ゲームパッドのサポート追加 - キーコンフィグの追加 - VOICEBOX APIの対応 - npm run recの追加 |
| 0.6.0 | 絡繰 | KARAKURI | - wtsLinterの追加 - VSCodeとの連携追加 - wst2htmlの追加 - プラグイン機能の追加 - クロスプラットホームへのビルド追加 |
| 0.7.0 | 綴り | TUDURI | GUIエディタの追加 |
| 0.8.0 | 迅雷 | JINRAI | パフォーマンスアップデート |
| 0.9.0 | 出島 | DEJIMA | KAGタグコンバータの追加 |
| 1.0.0 | 暁月 | AKATUKI | メジャーアップデート |
- 地の文の表示
- キャラクターのセリフの表示・ボイスの再生
- 定義した変数の表示
- キャラクターの画像の表示・位置変更・アニメーション
- その他の画像の画像の表示・位置変更・アニメーション
- キャラクターの複数表示・位置変更・アニメーション
- CGの表示・変更
- 背景画像の表示・変更
- 画像のフィルター操作
- モノクロ化
- セピア化
- 透明度の変更
- サイズの変更
- 選択肢の表示
- 選択肢の画像の変更
- 通常時
- マウスオーバー
- 選択時
- Ctrlキーでの強制スキップ
- Enterキーで全文表示
- 表示する文章・画像の条件分岐
- セリフのジャンプ
- シナリオ（シーン）の切り替え
- BGMの再生・停止
- SEの再生・停止
- HTMLで作った画面の表示
- 解像度の設定変更
- JavaScript連携
- メソッドの呼び出し
- 式の実行
- 変数の定義・値の変更
- JavaScript側での背景画像の変更
- TypeScript連携
- REST API呼び出し（レスポンスの表示）
- Desktopアプリケーションへのビルド
- Android(iOS)向けのビルド
- 画面各種のボタン
- セーブファイルの一覧の取得
- sayタグの以下の機能
- キャラが表示されていないときは、表示する
- セーブ＆ロード機能
- showタグ / hideタグの以下の機能
- 子要素でフィルター指定
- 子要素でアニメーション指定
- スラッシュで区切ってリソース種類を指定
- quakeタグ（画面を揺らす）
- maskタグ（画面の暗転）
- soundタグの以下の機能
- pause
- setVolume
- getVolume
- bgmエイリアス
- voiceエイリアス
- seエイリアス
- JavaScriptでのリソースの動的定義
- ゲーム設定ファイルの反映
- 画面用HTMLのcss・jsのインライン化・minify化
青: #3178C6 (TypeScript BLue) 緑: #02a889 (WebTaleKit Green) 白: #f8f8f8 (White Smoke)