webtalekit-alpha 0.2.13 → 0.2.14

package/example/package.json

@@ -1,26 +0,0 @@
-{
-  "name": "example",
-  "version": "1.0.0",
-  "description": "A WebTaleKit game project",
-  "main": "src/index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "play": "rimraf dist && npx wtc ./src/scene/ ./src/js/ && npx webpack serve --open --mode development",
-    "dev": "rimraf dist && npx wtc ./src/scene/ ./src/js/ && npx webpack serve --mode development",
-    "build": "rimraf dist && npx wtc ./src/scene/ ./src/js/ && webpack --mode production"
-  },
-  "dependencies": {
-    "console-browserify": "^1.2.0",
-    "html-webpack-plugin": "^5.6.0",
-    "storejs": "^2.1.0"
-  },
-  "devDependencies": {
-    "filemanager-webpack-plugin": "^8.0.0",
-    "rimraf": "^5.0.7",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.5.2",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.11.1"
-  }
-}

package/example/src/index.js

@@ -1,13 +0,0 @@
-import { Core } from 'webtalekit-alpha/src/core/'
-import engineConfig from '../engineConfig.json'
-
-const game = new Core()
-
-// URLからクエリパラメータを取得
-const urlParams = new URLSearchParams(window.location.search)
-const sceneParam = urlParams.get('scene')
-
-// 指定されたシーンがある場合はそのシーンを、なければタイトルシーンを開始
-const initialScene = sceneParam || 'title'
-game.setConfig(engineConfig)
-game.start(initialScene)

package/example/src/scene/animation.scene

@@ -1,28 +0,0 @@
-<scene>
-  <scenario>
-    <say name="ナレーター">このシーンでは様々なアニメーションをお見せします。</say>
-    <show src="./src/resource/chara/dancer.png" name="ダンサー" pos="center:middle" />
-    <say name="ダンサー">ステージ上を動き回るのをご覧ください！</say>
-    <moveTo name="ダンサー" x="100" y="360" duration="3" />
-    <moveTo name="ダンサー" x="-280" y="-360" duration="3" />
-    <moveTo name="ダンサー" x="100" y="0" duration="2" />
-    <say name="ダンサー">フェードイン、フェードアウトもできますよ。</say>
-    <hide name="ダンサー" />
-    <show src="./src/resource/chara/dancer.png" name="ダンサー" pos="center:middle" opacity="0" />
-    <show src="./src/resource/chara/dancer.png" name="ダンサー" pos="center:middle" opacity="1" duration="3" />
-    <say name="ダンサー">アニメーションを使えば、ストーリーをより動的に演出できます！</say>
-    <choice>
-      <item label="タイトルに戻る" onSelect="title">
-        <route scene="title" />
-      </item>
-    </choice>
-  </scenario>
-
-  <script>
-    export const sceneConfig = {
-      name: 'animation',
-      background: './src/resource/background/stage.jpg',
-      template: './src/screen/title.html'
-    }
-  </script>
-</scene>

package/example/src/scene/background.scene

@@ -1,29 +0,0 @@
-<scene>
-  <scenario>
-    <say name="ナレーター">このシーンでは、背景の変更方法をお見せします。</say>
-    <say name="ナレーター">現在、私たちは森の中にいます。静かで緑豊かな環境ですね。</say>
-    <show mode="bg" src="./src/resource/background/beach.jpg" />
-    <say name="ナレーター">そして今、場面が変わって海辺に来ました！波の音が聞こえてきそうです。</say>
-    <show mode="bg" src="./src/resource/background/city.jpg" />
-    <say name="ナレーター">さらに場面が変わり、今度は都会の街中です。高層ビルが立ち並んでいますね。</say>
-    <say name="ナレーター">このように、背景は瞬時に切り替えることができます。</say>
-    <show mode="bg" src="./src/resource/background/beach.jpg" />
-    <say name="ナレーター">また、ゆっくりとフェードさせて背景を変更することもできます。</say>
-    <show mode="bg" src="./src/resource/background/sunset.jpg" transition="fade" duration="2000" />
-    <say name="ナレーター">夕暮れの空が広がっていきましたね。</say>
-    <say name="ナレーター">背景の変更は、ゲームの雰囲気や場面の転換を表現するのに非常に効果的です。</say>
-    <choice>
-      <item label="タイトルに戻る" onSelect="title">
-        <route to="title" />
-      </item>
-    </choice>
-  </scenario>
-
-  <script>
-    export const sceneConfig = {
-      name: 'background',
-      background: './src/resource/background/forest.jpg',
-      template: './src/screen/title.html'
-    }
-  </script>
-</scene>

package/example/src/scene/character.scene

@@ -1,26 +0,0 @@
-<scene>
-  <scenario>
-    <say name="ナレーター">このシーンではキャラクターの表示と配置をデモンストレーションします。</say>
-    <show src="./src/resource/chara/guide.png" name="ガイド" pos="left:middle" />
-    <say name="ガイド">こんにちは、私がガイドです。キャラクターは画面上に配置できるんですよ。</say>
-    <show src="./src/resource/chara/guest.png" name="ゲスト" pos="right:middle" transition="fade" />
-    <say name="ゲスト">そうですね。複数のキャラクターを同時に表示することもできます！</say>
-    <moveTo name="ガイド" x="500" y="400" duration="2" />
-    <say name="ガイド">このように、滑らかに動くこともできます。</say>
-    <hide name="ゲスト" transition="fade" />
-    <say name="ガイド">必要がなくなったキャラクターは非表示にすることもできますね。</say>
-    <choice>
-      <item label="タイトルに戻る" onSelect="title">
-        <route scene="title" />
-      </item>
-    </choice>
-  </scenario>
-
-  <script>
-    export const sceneConfig = {
-      name: 'character',
-      background: './src/resource/background/living_room.jpg',
-      template: './src/screen/title.html'
-    }
-  </script>
-</scene>

package/example/src/scene/choice.scene

@@ -1,97 +0,0 @@
-<scene>
-  <scenario>
-    <say name="ナレーター">このシーンでは選択肢と分岐するストーリーをデモンストレーションします。</say>
-    <say name="ナレーター">まず、シンプルな二択から始めましょう。</say>
-    <choice prompt="どちらの道を選びますか？">
-      <item label="左の道" onSelect="leftPath">
-        <say name="ナレーター">左の道を選びました。森に続く道のようです。</say>
-        <show src="./src/resource/background/forest.jpg" />
-      </item>
-      <item label="右の道" onSelect="rightPath">
-        <say name="ナレーター">右の道を選びました。海に続く道のようです。</say>
-        <show src="./src/resource/background/beach.jpg" />
-      </item>
-    </choice>
-    <say name="ナレーター">次に、3つ以上の選択肢を試してみましょう。</say>
-    <choice prompt="どの乗り物で旅をしますか？">
-      <item label="車" onSelect="car">
-        <say name="ナレーター">車を選びました。快適なドライブ旅行が始まります。</say>
-      </item>
-      <item label="電車" onSelect="train">
-        <say name="ナレーター">電車を選びました。窓の外の景色を楽しみながらの旅です。</say>
-      </item>
-      <item label="飛行機" onSelect="plane">
-        <say name="ナレーター">飛行機を選びました。空の上から地上を見下ろす旅が始まります。</say>
-      </item>
-      <item label="船" onSelect="ship">
-        <say name="ナレーター">船を選びました。波の音を聞きながらのクルーズ旅行です。</say>
-      </item>
-    </choice>
-    <say name="ナレーター">最後に、選択肢の結果に基づいて条件分岐するテストを行います。</say>
-    <choice prompt="あなたの好きな色は？">
-      <item label="赤" onSelect="red">
-        <say name="ナレーター">赤を選びました。情熱的な色ですね。</say>
-        <call func="setFavoriteColor('red')" />
-      </item>
-      <item label="青" onSelect="blue">
-        <say name="ナレーター">青を選びました。落ち着いた色ですね。</say>
-        <call func="setFavoriteColor('blue')" />
-      </item>
-      <item label="緑" onSelect="green">
-        <say name="ナレーター">緑を選びました。自然を感じる色ですね。</say>
-        <call func="setFavoriteColor('green')" />
-      </item>
-    </choice>
-    <if condition="getFavoriteColor() === 'red'">
-      <then>
-        <say name="ナレーター">赤が好きなあなたは、活動的な性格かもしれませんね。</say>
-      </then>
-      <else>
-        <if condition="getFavoriteColor() === 'blue'">
-          <then>
-            <say name="ナレーター">青が好きなあなたは、冷静な性格かもしれませんね。</say>
-          </then>
-          <else>
-            <say name="ナレーター">緑が好きなあなたは、穏やかな性格かもしれませんね。</say>
-          </else>
-        </if>
-      </else>
-    </if>
-    <say name="ナレーター">このように、選択肢によって異なる結果やストーリーの分岐を作ることができます。</say>
-    <choice prompt="">
-      <item label="タイトルに戻る" onSelect="end">
-        <route to="title" />
-      </item>
-      <item label="１つ目の質問に戻る" onSelect="replay">
-        <say name="ナレーター">デモをもう一度実行します。</say>
-        <jump index="1" />
-      </item>
-      <item label="２つ目の質問に戻る" onSelect="replay">
-        <say name="ナレーター">デモをもう一度実行します。</say>
-        <jump index="4" />
-      </item>
-      <item label="３つ目の質問に戻る" onSelect="replay">
-        <say name="ナレーター">デモをもう一度実行します。</say>
-        <jump index="6" />
-      </item>
-    </choice>
-  </scenario>
-
-  <script>
-    export const sceneConfig = {
-      name: 'choice_demo',
-      background: './src/resource/background/crossroad.jpg',
-      template: './src/screen/title.html'
-    }
-
-    let favoriteColor = '';
-
-    export function setFavoriteColor(color) {
-      favoriteColor = color;
-    }
-
-    export function getFavoriteColor() {
-      return favoriteColor;
-    }
-  </script>
-</scene>

package/example/src/scene/dialog.scene

@@ -1,105 +0,0 @@
-<scene>
-    <scenario>
-        <text>ダイアログのテスト</text>
-        <say name="ナレーター">このシーンでは、ダイアログの基本的な使い方をデモンストレーションします。</say>
-        <say name="ナレーター">まずは、シンプルなダイアログから始めましょう。</say>
-        <!-- デフォルトテンプレート使用 -->
-        <say name="ナレーター">ダイアログを表示します。</say>
-        <dialog id="simple">
-            <prompt>犬は好きですか</prompt>
-            <actions>
-                <action value="yes" id="ok" label="はい">
-                    <text>いいですね、私も大好きです。</text>
-                </action>
-                <action value="no" id="cancel" label="いいえ">
-                    <text>よろしい、ならば、戦争だ。</text>
-                </action>
-            </actions>
-        </dialog>
-        <say name="ナレーター">２つ目は、確認ダイアログを表示します。</say>
-        <!-- 確認ダイアログ -->
-        <dialog id="confirm">
-            <prompt>本当に続けますか？</prompt>
-            <actions>
-                <action value="yes" id="ok" label="OK">
-                    <text>続行します。</text>
-                </action>
-                <action value="no" id="cancel" label="キャンセル">
-                    <text>中止します。</text>
-                </action>
-            </actions>
-        </dialog>
-        <say name="ナレーター">３つ目は、選択肢を提供するダイアログです。</say>
-        <!-- 選択肢ダイアログ -->
-        <dialog id="choice">
-            <prompt>どの色が好きですか？</prompt>
-            <actions>
-                <action value="red" id="red" label="赤">
-                    <text>赤は情熱的な色ですね。</text>
-                </action>
-                <action value="blue" id="blue" label="青">
-                    <text>青は落ち着いた色です。</text>
-                </action>
-                <action value="green" id="green" label="緑">
-                    <text>緑は自然を感じさせます。</text>
-                </action>
-            </actions>
-        </dialog>
-
-        <say name="ナレーター">４つ目に、ユーザーへの問いかけを行うダイアログです。</say>
-        <!-- ユーザーへの問いかけダイアログ -->
-        <dialog id="question">
-            <prompt>あなたの好きな食べ物は何ですか？</prompt>
-            <actions>
-                <action value="pizza" id="pizza" label="ピザ">
-                    <text>ピザは美味しいですね！</text>
-                </action>
-                <action value="sushi" id="sushi" label="寿司">
-                    <text>寿司も最高です！</text>
-                </action>
-                <action value="ramen" id="ramen" label="ラーメン">
-                    <text>ラーメンは心を温めます。</text>
-                </action>
-            </actions>
-        </dialog>
-        <say name="ナレーター">最後に、ユーザーカスタムダイアログを表示します。</say>
-        <!-- ユーザーカスタムダイアログ -->
-        <dialog id="custom" template="./src/screen/incoming.html">
-            <prompt>カスタムダイアログのテスト</prompt>
-            <actions>
-                <action value="yes" id="answer" label="">
-                    <text>はい、もしもし。</text>
-                </action>
-                <action value="no" id="decline" label="">
-                    <text>ツー…ツー…</text>
-                </action>
-                <action value="no" id="message" label="">
-                    <say name="自動音声">ただ今、留守にしています・・・ピーっとなったら、メッセージをどうぞ</say>
-                </action>
-                <action value="no" id="contact" label="">
-                    <dialog id="contact">
-                        <prompt>連絡先を選択してください</prompt>
-                        <actions>
-                            <action value="friend" id="friend" label="友達">
-                                <text>友達に連絡します。</text>
-                            </action>
-                            <action value="family" id="family" label="家族">
-                                <text>家族に連絡します。</text>
-                            </action>
-                            <action value="colleague" id="colleague" label="同僚">
-                                <text>同僚に連絡します。</text>
-                            </action>
-                        </actions>
-                </action>
-            </actions>
-        </dialog>
-
-        <say name="ナレーター">このようにユーザーへの問いかけを行うことができます。</say>
-        <choice>
-            <item label="タイトルに戻る" onSelect="title">
-                <route to="title" />
-            </item>
-        </choice>
-    </scenario>
-    <script></script>
-</scene>

package/example/src/scene/effects.scene

@@ -1,38 +0,0 @@
-<scene>
-  <scenario>
-    <say name="ナレーター">このシーンでは特殊効果やフィルターをデモンストレーションします。</say>
-    <show src="./src/resource/chara/scientist.png" name="科学者" pos="center:middle" />
-    <say name="科学者">視覚効果の実験をしてみましょう！</say>
-    <say name="科学者">まずはセピア調のフィルターを試してみます。</say>
-    <show mode="cg" src="./src/resource/background/laboratory.jpg" sepia="80" />
-    <say name="科学者">次は私で試してみます。</say>
-    <show mode="cg" src="./src/resource/background/laboratory.jpg" />
-    <show src="./src/resource/chara/scientist.png" name="科学者" pos="center:middle" sepia="80" />
-    <say name="科学者">次にモノクロ効果に切り替えてみましょう。</say>
-    <show mode="cg" src="./src/resource/background/laboratory.jpg" mono="100" />
-    <say name="科学者">こちらも、私で試してみます。</say>
-    <show mode="cg" src="./src/resource/background/laboratory.jpg" />
-    <show src="./src/resource/chara/scientist.png" name="科学者" pos="center:middle" mono="100" />
-    <say name="科学者">ぼかし効果も適用できます。</say>
-    <show mode="cg" src="./src/resource/background/laboratory.jpg" blur="5" />
-    <say name="科学者">では、私で試してみます。</say>
-    <show mode="cg" src="./src/resource/background/laboratory.jpg" />
-    <show src="./src/resource/chara/scientist.png" name="科学者" pos="center:middle" blur="5" />
-    <say name="科学者">これらの効果を使えば、ゲームに様々な雰囲気を演出できますね！</say>
-    <show mode="cg" src="./src/resource/background/laboratory.jpg" />
-    <show src="./src/resource/chara/scientist.png" name="科学者" pos="center:middle" />
-    <choice>
-      <item label="タイトルに戻る" onSelect="title">
-        <route scene="title" />
-      </item>
-    </choice>
-  </scenario>
-
-  <script>
-    export const sceneConfig = {
-      name: 'effects',
-      background: './src/resource/background/laboratory.jpg',
-      template: './src/screen/title.html'
-    }
-  </script>
-</scene>

package/example/src/scene/en/animation.scene

@@ -1,28 +0,0 @@
-<scene>
-  <scenario>
-    <say name="Narrator">This scene showcases various animations.</say>
-    <show src="./src/resource/chara/dancer.png" name="Dancer" pos="center:middle" />
-    <say name="Dancer">Watch me move across the stage!</say>
-    <moveTo name="Dancer" x="1000" y="360" duration="3" />
-    <moveTo name="Dancer" x="280" y="360" duration="3" />
-    <moveTo name="Dancer" x="640" y="360" duration="2" />
-    <say name="Dancer">I can also fade in and out.</say>
-    <hide name="Dancer" />
-    <show src="./src/resource/chara/dancer.png" name="Dancer" pos="center:middle" opacity="0" />
-    <show src="./src/resource/chara/dancer.png" name="Dancer" pos="center:middle" opacity="1" duration="3" />
-    <say name="Dancer">Animations can make your story more dynamic!</say>
-    <choice>
-      <item label="Return to Title" onSelect="title">
-        <route scene="title" />
-      </item>
-    </choice>
-  </scenario>
-
-  <script>
-    const sceneConfig = {
-      name: 'animation',
-      background: './src/resource/background/stage.png',
-      template: './src/screen/title.html'
-    }
-  </script>
-</scene>

package/example/src/scene/en/background.scene

@@ -1,26 +0,0 @@
-<scene>
-  <scenario>
-    <say name="Narrator">This scene shows how backgrounds can be changed.</say>
-    <say name="Narrator">We're currently in a forest.</say>
-    <show src="./src/resource/background/beach.jpg" />
-    <say name="Narrator">Now we've moved to a beach!</say>
-    <show src="./src/resource/background/city.jpg" />
-    <say name="Narrator">And now we're in a city.</say>
-    <say name="Narrator">Backgrounds can be changed instantly or with transitions.</say>
-    <show src="./src/resource/background/sunset.jpg" transition="fade" duration="2000" />
-    <say name="Narrator">We can also change the background gradually with a fade effect like this. As you can see, the
-      twilight sky has spread across the scene.</say>
-    <choice>
-      <item label="Return to Title" onSelect="title">
-        <route scene="title" />
-      </item>
-    </choice>
-  </scenario>
-  <script>
-    const sceneConfig = {
-      name: 'background',
-      background: './src/resource/background/forest.jpg',
-      template: './src/screen/title.html'
-    }
-  </script>
-</scene>

package/example/src/scene/en/character.scene

@@ -1,26 +0,0 @@
-<scene>
-  <scenario>
-    <say name="Narrator">This scene demonstrates character display and positioning.</say>
-    <show src="./src/resource/chara/guide.png" name="Guide" pos="left:bottom" />
-    <say name="Guide">Hello! I'm Guide. Characters can be positioned on the screen.</say>
-    <show src="./src/resource/chara/guest.png" name="Guest" pos="right:bottom" transition="fade" />
-    <say name="Guest">And multiple characters can appear at once!</say>
-    <moveTo name="Guide" x="500" y="400" duration="2" />
-    <say name="Guide">We can also move around smoothly.</say>
-    <hide name="Guest" transition="fade" />
-    <say name="Guide">And characters can be hidden when not needed.</say>
-    <choice>
-      <item label="Return to Title" onSelect="title">
-        <route scene="title" />
-      </item>
-    </choice>
-  </scenario>
-
-  <script>
-    export const sceneConfig = {
-      name: 'character',
-      background: './src/resource/background/living_room.png',
-      template: './src/screen/title.html'
-    }
-  </script>
-</scene>

package/example/src/scene/en/choice.scene

@@ -1,32 +0,0 @@
-<scene>
-  <scenario>
-    <say name="Narrator">This scene demonstrates choices and branching narratives.</say>
-    <say name="Narrator">Which path will you choose?</say>
-    <choice>
-      <item label="Take the left path" onSelect="leftPath">
-        <say name="Narrator">You chose the left path.</say>
-        <show src="./src/resource/background/forest.png" />
-        <say name="Narrator">You find yourself in a dense forest.</say>
-      </item>
-      <item label="Take the right path" onSelect="rightPath">
-        <say name="Narrator">You chose the right path.</say>
-        <show src="./src/resource/background/beach.png" />
-        <say name="Narrator">You arrive at a beautiful beach.</say>
-      </item>
-    </choice>
-    <say name="Narrator">Choices can lead to different outcomes and story branches.</say>
-    <choice>
-      <item label="Return to Title" onSelect="title">
-        <route scene="title" />
-      </item>
-    </choice>
-  </scenario>
-
-  <script>
-    const sceneConfig = {
-      name: 'choice',
-      background: './src/resource/background/crossroad.jpg',
-      template: './src/screen/title.html'
-    }
-  </script>
-</scene>