webtalekit-alpha 0.2.10 → 0.2.13

package/.history/README_20240812191155.md

@@ -0,0 +1,185 @@
+# webTaleKit
+
+![wabTaleKitロゴ](s-plan1-5Light-s-1.jpg)
+
+## 目次
+
+- 概要
+- デモ
+- 環境構築手順
+- 動作確認手順
+- Quick Start（デモゲームを弄ってみよう）
+- できること
+- できないこと
+- フィードバックフォームのご案内
+
+## 概要
+
+TypeScript(JavaScript) ベースのビジュアルノベルゲームエンジンです。  
+UIをHTML・CSS・JavaScriptで柔軟に作成でき、シナリオをマークアップ言語とJavaScriptで制御できます。  
+自動スケーリング機能で、様々なウインドウで遊ぶことができます。  
+VS Codeの拡張機能を用いたGUIエディタやREST API呼び出しによる生成AI連携の追加を提供予定です。  
+
+## デモ
+
+Firefoxでも、Chromeでも、Edgeでも、好きなブラウザを使いたまえ・・・！
+<https://test-game-chi.vercel.app/>
+![alt text](image.png)
+
+## 環境構築手順
+
+1. Node.js(20以降)が必要です。(nvm等お好みの方法がある場合は、そちらでも構いません)
+   - Windowsの場合は、Node.js公式サイト (<https://nodejs.org/>) からインストールしてください。
+   - Macの場合は、`brew install node` を実行してインストールしてください。
+   - Linuxの場合は、以下のコマンドを実行して、インストールしてください。
+
+    ```bash
+        curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
+        sudo apt-get install -y nodejs
+    ```
+
+2. 以下のコマンドを実行してください
+
+    ``` bash
+    npm create tale-game your-game-title
+    ```
+
+プロジェクトに移動して、`npm run play`を実行して、デモゲームが起動すれば、構築は完了です。
+
+## Quick Start（デモゲームを弄ってみよう
+
+### 画像を差し替える
+
+- キャラを変える場合
+  - src/resource/chara/guide.png に上書きしてください。
+- 背景画像を変える
+  - src/resource/background/title_bg.png　に上書きしてください。
+- BGMを変える
+  - src/resource/bgm/title_theme.mp3　に上書きしてください。
+
+- 選択肢の画像を変える
+  - src\resource\system\systemPicture\02_button\button.png　に上書きしてください。
+- 選択肢(マウスオーバー時)の画像を変える
+  - src\resource\system\systemPicture\02_button\button2.png　に上書きしてください。
+- 選択肢(クリック時)の画像を変える
+  - src\resource\system\systemPicture\02_button\button3.png　に上書きしてください。
+
+### 要素を増やす
+
+- キャラを増やす
+  - src\resource\character 以下に表示したい画像を置きます。
+  - 登場させたい行数で、`<show src="表示したい画像のパス"></show>` を記述する
+- セリフを増やす
+  - セリフを表示させたい行数で、`<say name="キャラの名前">セリフをここに入れる</say>` を記述する
+- 地の文を増やす
+  - 地の文を表示させたい行数で、`<text>セリフをここに入れる</text>` を記述する
+
+- 選択肢を増やす
+  - src\scene\title.sceneの43行目のchoiceタグの中(44行-50行)で、以下のように記述すると、選択されたときに、地の文を表示する
+
+   ``` html
+    <item label='選択肢の文言'>
+        <text>セリフをここに入れる</text>
+    </item>
+   ```
+
+   実装例
+
+   ```　html
+          <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](https://x.com/endo_hizumi) で行っております。
+※上記アカウントは、日常的なツイートも含まれているので、WebTaleKitの情報だけ見たい場合は、検索Hashtag: [#webTaleKit](https://x.com/search?q=%23webTaleKit&src=typed_query) で検索をお願いします。
+
+実装予定の項目については、こちらの[Trello](https://trello.com/b/qYNGh7MY)からも確認できます。
+
+デモをプレイした感想・WebTaleKitを使って気になったことなど、意見・感想はこちらで受け付けています！
+[https://forms.gle/uejQwvwAb99wcJht7](https://forms.gle/uejQwvwAb99wcJht7)
+
+## アルファ版で、できること
+
+- 地の文の表示
+- キャラクターのセリフの表示・ボイスの再生
+- キャラクターの画像の表示・位置変更・アニメーション
+- その他の画像の画像の表示・位置変更・アニメーション
+- キャラクターの複数表示・位置変更・アニメーション
+- CGの表示・変更
+- 背景画像の表示・変更
+- 画像のフィルター操作
+  - モノクロ化
+  - セピア化
+  - 透明度の変更
+  - サイズの変更
+- REST API呼び出し（レスポンスの表示）
+- 定義した変数の表示
+- 表示する文章・画像の条件分岐
+- 選択肢の表示
+- 選択肢の画像の変更
+  - 通常時
+  - マウスオーバー
+  - 選択時
+- セリフのジャンプ
+- Ctrlキーでの強制スキップ
+- Enterキーで全文表示
+- シナリオ（シーン）の切り替え
+- BGMの再生・停止
+- SEの再生・停止
+- HTMLで作った画面の表示
+- 解像度の設定変更
+- JavaScript連携
+  - メソッドの呼び出し
+  - 式の実行
+  - 変数の定義・値の変更
+
+## アルファ版(0.2.x-0.1.x)で出来ないこと
+
+- Desktopアプリケーションへのビルド
+- Android(iOS)向けのビルド
+- 画面各種のボタン
+- sayタグの以下の機能
+  - キャラが表示されていないときは、表示する
+- セーブ＆ロード機能
+- showタグ / hideタグの以下の機能
+  - 子要素でフィルター指定
+  - 子要素でアニメーション指定
+  - スラッシュで区切ってリソース種類を指定
+- JavaScript側での背景画像の変更
+- soundタグの以下の機能
+  - pause
+  - setVolume
+  - getVolume
+  - bgmエイリアス
+  - voiceエイリアス
+  - seエイリアス
+- quakeタグ（画面を揺らす）
+- maskタグ（画面の暗転）
+- JavaScriptでのリソースの動的定義
+- セーブファイルの一覧の取得
+- ゲーム設定ファイルの反映
+- 画面用HTMLのcss・jsのインライン化・minify化
+
+## アイコン素材
+
+- <https://www.silhouette-illust.com/>
+
+## カラーコード
+
+青: #3178C6 (TypeScript BLue)
+緑: #02a889 (WebTaleKit Green)
+白: #f8f8f8 (White Smoke)

package/.history/README_20240812191211.md

@@ -0,0 +1,185 @@
+# webTaleKit
+
+![wabTaleKitロゴ](s-plan1-5Light-s-1.jpg)
+
+## 目次
+
+- 概要
+- デモ
+- 環境構築手順
+- 動作確認手順
+- Quick Start（デモゲームを弄ってみよう）
+- できること
+- できないこと
+- フィードバックフォームのご案内
+
+## 概要
+
+TypeScript(JavaScript) ベースのビジュアルノベルゲームエンジンです。  
+UIをHTML・CSS・JavaScriptで柔軟に作成でき、シナリオをマークアップ言語とJavaScriptで制御できます。  
+自動スケーリング機能で、様々なウインドウで遊ぶことができます。  
+VS Codeの拡張機能を用いたGUIエディタやREST API呼び出しによる生成AI連携の追加を提供予定です。  
+
+## デモ
+
+Firefoxでも、Chromeでも、Edgeでも、好きなブラウザを使いたまえ・・・！
+<https://test-game-chi.vercel.app/>
+![alt text](image.png)
+
+## 環境構築手順
+
+1. Node.js(20以降)が必要です。(nvm等お好みの方法がある場合は、そちらでも構いません)
+   - Windowsの場合は、Node.js公式サイト (<https://nodejs.org/>) からインストールしてください。
+   - Macの場合は、`brew install node` を実行してインストールしてください。
+   - Linuxの場合は、以下のコマンドを実行して、インストールしてください。
+
+    ```bash
+        curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
+        sudo apt-get install -y nodejs
+    ```
+
+2. 以下のコマンドを実行してください
+
+    ``` bash
+    npm create tale-game your-game-title
+    ```
+
+プロジェクトに移動して、`npm run play`を実行して、デモゲームが起動すれば、構築は完了です。
+
+## Quick Start（デモゲームを弄ってみよう
+
+### 画像を差し替える
+
+- キャラを変える場合
+  - src/resource/chara/guide.png に上書きしてください。
+- 背景画像を変える
+  - src/resource/background/title_bg.png　に上書きしてください。
+- BGMを変える
+  - src/resource/bgm/title_theme.mp3　に上書きしてください。
+
+- 選択肢の画像を変える
+  - src\resource\system\systemPicture\02_button\button.png　に上書きしてください。
+- 選択肢(マウスオーバー時)の画像を変える
+  - src\resource\system\systemPicture\02_button\button2.png　に上書きしてください。
+- 選択肢(クリック時)の画像を変える
+  - src\resource\system\systemPicture\02_button\button3.png　に上書きしてください。
+
+### 要素を増やす
+
+- キャラを増やす
+  - src\resource\character 以下に表示したい画像を置きます。
+  - 登場させたい行数で、`<show src="表示したい画像のパス"></show>` を記述する
+- セリフを増やす
+  - セリフを表示させたい行数で、`<say name="キャラの名前">セリフをここに入れる</say>` を記述する
+- 地の文を増やす
+  - 地の文を表示させたい行数で、`<text>セリフをここに入れる</text>` を記述する
+
+- 選択肢を増やす
+  - src\scene\title.sceneの43行目のchoiceタグの中(44行-50行)で、以下のように記述すると、選択されたときに、地の文を表示する
+
+   ``` html
+    <item label='選択肢の文言'>
+        <text>セリフをここに入れる</text>
+    </item>
+   ```
+
+   実装例
+
+   ```　html
+          <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](https://x.com/endo_hizumi) で行っております。
+※上記アカウントは、日常的なツイートも含まれているので、WebTaleKitの情報だけ見たい場合は、検索Hashtag: [#webTaleKit](https://x.com/search?q=%23webTaleKit&src=typed_query) で検索をお願いします。
+
+実装予定の項目については、こちらの[Trello](https://trello.com/b/qYNGh7MY)からも確認できます。
+
+デモをプレイした感想・WebTaleKitを使って気になったことなど、意見・感想はこちらで受け付けています！
+[https://forms.gle/uejQwvwAb99wcJht7](https://forms.gle/uejQwvwAb99wcJht7)
+
+## アルファ版で、できること
+
+- 地の文の表示
+- キャラクターのセリフの表示・ボイスの再生
+- キャラクターの画像の表示・位置変更・アニメーション
+- その他の画像の画像の表示・位置変更・アニメーション
+- キャラクターの複数表示・位置変更・アニメーション
+- CGの表示・変更
+- 背景画像の表示・変更
+- 画像のフィルター操作
+  - モノクロ化
+  - セピア化
+  - 透明度の変更
+  - サイズの変更
+- REST API呼び出し（レスポンスの表示）
+- 定義した変数の表示
+- 表示する文章・画像の条件分岐
+- 選択肢の表示
+- 選択肢の画像の変更
+  - 通常時
+  - マウスオーバー
+  - 選択時
+- セリフのジャンプ
+- Ctrlキーでの強制スキップ
+- Enterキーで全文表示
+- シナリオ（シーン）の切り替え
+- BGMの再生・停止
+- SEの再生・停止
+- HTMLで作った画面の表示
+- 解像度の設定変更
+- JavaScript連携
+  - メソッドの呼び出し
+  - 式の実行
+  - 変数の定義・値の変更
+
+## アルファ版(0.2.x-0.1.x)で出来ないこと
+
+- Desktopアプリケーションへのビルド
+- Android(iOS)向けのビルド
+- 画面各種のボタン
+- sayタグの以下の機能
+  - キャラが表示されていないときは、表示する
+- セーブ＆ロード機能
+- showタグ / hideタグの以下の機能
+  - 子要素でフィルター指定
+  - 子要素でアニメーション指定
+  - スラッシュで区切ってリソース種類を指定
+- JavaScript側での背景画像の変更
+- soundタグの以下の機能
+  - pause
+  - setVolume
+  - getVolume
+  - bgmエイリアス
+  - voiceエイリアス
+  - seエイリアス
+- quakeタグ（画面を揺らす）
+- maskタグ（画面の暗転）
+- JavaScriptでのリソースの動的定義
+- セーブファイルの一覧の取得
+- ゲーム設定ファイルの反映
+- 画面用HTMLのcss・jsのインライン化・minify化
+
+## アイコン素材
+
+- <https://www.silhouette-illust.com/>
+
+## カラーコード
+
+青: #3178C6 (TypeScript BLue)
+緑: #02a889 (WebTaleKit Green)
+白: #f8f8f8 (White Smoke)

package/.history/README_20240812192035.md

@@ -0,0 +1,185 @@
+# webTaleKit
+
+![wabTaleKitロゴ](s-plan1-5Light-s-1.jpg)
+
+## 目次
+
+- 概要
+- デモ
+- 環境構築手順
+- 動作確認手順
+- Quick Start（デモゲームを弄ってみよう）
+- できること
+- できないこと
+- フィードバックフォームのご案内
+
+## 概要
+
+TypeScript(JavaScript) ベースのビジュアルノベルゲームエンジンです。  
+UIをHTML・CSS・JavaScriptで柔軟に作成でき、シナリオをマークアップ言語とJavaScriptで制御できます。  
+自動スケーリング機能で、様々なウインドウで遊ぶことができます。  
+VS Codeの拡張機能を用いたGUIエディタやREST API呼び出しによる生成AI連携の追加を提供予定です。  
+
+## デモ
+
+Firefoxでも、Chromeでも、Edgeでも、好きなブラウザを使いたまえ・・・！
+<https://test-game-chi.vercel.app/>
+![](2024-08-12-19-20-29.png)
+
+## 環境構築手順
+
+1. Node.js(20以降)が必要です。(nvm等お好みの方法がある場合は、そちらでも構いません)
+   - Windowsの場合は、Node.js公式サイト (<https://nodejs.org/>) からインストールしてください。
+   - Macの場合は、`brew install node` を実行してインストールしてください。
+   - Linuxの場合は、以下のコマンドを実行して、インストールしてください。
+
+    ```bash
+        curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
+        sudo apt-get install -y nodejs
+    ```
+
+2. 以下のコマンドを実行してください
+
+    ``` bash
+    npm create tale-game your-game-title
+    ```
+
+プロジェクトに移動して、`npm run play`を実行して、デモゲームが起動すれば、構築は完了です。
+
+## Quick Start（デモゲームを弄ってみよう
+
+### 画像を差し替える
+
+- キャラを変える場合
+  - src/resource/chara/guide.png に上書きしてください。
+- 背景画像を変える
+  - src/resource/background/title_bg.png　に上書きしてください。
+- BGMを変える
+  - src/resource/bgm/title_theme.mp3　に上書きしてください。
+
+- 選択肢の画像を変える
+  - src\resource\system\systemPicture\02_button\button.png　に上書きしてください。
+- 選択肢(マウスオーバー時)の画像を変える
+  - src\resource\system\systemPicture\02_button\button2.png　に上書きしてください。
+- 選択肢(クリック時)の画像を変える
+  - src\resource\system\systemPicture\02_button\button3.png　に上書きしてください。
+
+### 要素を増やす
+
+- キャラを増やす
+  - src\resource\character 以下に表示したい画像を置きます。
+  - 登場させたい行数で、`<show src="表示したい画像のパス"></show>` を記述する
+- セリフを増やす
+  - セリフを表示させたい行数で、`<say name="キャラの名前">セリフをここに入れる</say>` を記述する
+- 地の文を増やす
+  - 地の文を表示させたい行数で、`<text>セリフをここに入れる</text>` を記述する
+
+- 選択肢を増やす
+  - src\scene\title.sceneの43行目のchoiceタグの中(44行-50行)で、以下のように記述すると、選択されたときに、地の文を表示する
+
+   ``` html
+    <item label='選択肢の文言'>
+        <text>セリフをここに入れる</text>
+    </item>
+   ```
+
+   実装例
+
+   ```　html
+          <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](https://x.com/endo_hizumi) で行っております。
+※上記アカウントは、日常的なツイートも含まれているので、WebTaleKitの情報だけ見たい場合は、検索Hashtag: [#webTaleKit](https://x.com/search?q=%23webTaleKit&src=typed_query) で検索をお願いします。
+
+実装予定の項目については、こちらの[Trello](https://trello.com/b/qYNGh7MY)からも確認できます。
+
+デモをプレイした感想・WebTaleKitを使って気になったことなど、意見・感想はこちらで受け付けています！
+[https://forms.gle/uejQwvwAb99wcJht7](https://forms.gle/uejQwvwAb99wcJht7)
+
+## アルファ版で、できること
+
+- 地の文の表示
+- キャラクターのセリフの表示・ボイスの再生
+- キャラクターの画像の表示・位置変更・アニメーション
+- その他の画像の画像の表示・位置変更・アニメーション
+- キャラクターの複数表示・位置変更・アニメーション
+- CGの表示・変更
+- 背景画像の表示・変更
+- 画像のフィルター操作
+  - モノクロ化
+  - セピア化
+  - 透明度の変更
+  - サイズの変更
+- REST API呼び出し（レスポンスの表示）
+- 定義した変数の表示
+- 表示する文章・画像の条件分岐
+- 選択肢の表示
+- 選択肢の画像の変更
+  - 通常時
+  - マウスオーバー
+  - 選択時
+- セリフのジャンプ
+- Ctrlキーでの強制スキップ
+- Enterキーで全文表示
+- シナリオ（シーン）の切り替え
+- BGMの再生・停止
+- SEの再生・停止
+- HTMLで作った画面の表示
+- 解像度の設定変更
+- JavaScript連携
+  - メソッドの呼び出し
+  - 式の実行
+  - 変数の定義・値の変更
+
+## アルファ版(0.2.x-0.1.x)で出来ないこと
+
+- Desktopアプリケーションへのビルド
+- Android(iOS)向けのビルド
+- 画面各種のボタン
+- sayタグの以下の機能
+  - キャラが表示されていないときは、表示する
+- セーブ＆ロード機能
+- showタグ / hideタグの以下の機能
+  - 子要素でフィルター指定
+  - 子要素でアニメーション指定
+  - スラッシュで区切ってリソース種類を指定
+- JavaScript側での背景画像の変更
+- soundタグの以下の機能
+  - pause
+  - setVolume
+  - getVolume
+  - bgmエイリアス
+  - voiceエイリアス
+  - seエイリアス
+- quakeタグ（画面を揺らす）
+- maskタグ（画面の暗転）
+- JavaScriptでのリソースの動的定義
+- セーブファイルの一覧の取得
+- ゲーム設定ファイルの反映
+- 画面用HTMLのcss・jsのインライン化・minify化
+
+## アイコン素材
+
+- <https://www.silhouette-illust.com/>
+
+## カラーコード
+
+青: #3178C6 (TypeScript BLue)
+緑: #02a889 (WebTaleKit Green)
+白: #f8f8f8 (White Smoke)