webtalekit-alpha 0.2.10

package/README.md

@@ -0,0 +1,193 @@
+# 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`を実行して、デモゲームが起動すれば、構築は完了です。
+
+## 動作確認手順
+
+以下のコマンドを実行してください。
+
+```bash
+git clone https://github.com/EndoHizumi/testGame.git
+npm install
+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>` を記述する
+
+- 選択肢を増やす
+  - 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) で行っております。
+実装予定の項目については、こちらの[Trello](https://trello.com/b/qYNGh7MY)からも確認できます。
+
+デモをプレイした感想・WebTaleKitを使って気になったことなど、意見・感想はこちらで受け付けています！
+[https://forms.gle/uejQwvwAb99wcJht7](https://forms.gle/uejQwvwAb99wcJht7)
+
+検索Hashtag: #webTalekit
+
+## アルファ版で、できること
+
+- 地の文の表示
+- キャラクターのセリフの表示・ボイスの再生
+- キャラクターの画像の表示・位置変更・アニメーション
+- その他の画像の画像の表示・位置変更・アニメーション
+- キャラクターの複数表示・位置変更・アニメーション
+- 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/engineConfig.json

@@ -0,0 +1,10 @@
+{
+  "title": "NO TITLE",
+  "description": "NO DESCRIPTION",
+  "resolution": {
+    "width": 1280,
+    "height": 720
+  },
+  "fullScreen": "false",
+  "url": ""
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "webtalekit-alpha",
+  "version": "0.2.10",
+  "description": "Web知識でノベルゲーを作ることを目指したやつ",
+  "main": "./src/index.js",
+  "scripts": {
+    "lint": "eslint . --ext .ts --ext .js",
+    "test": "jest",
+    "build": "rimraf ./dist/ && tsc && cp -r package.json README.md engineConfig.json parser/ dist/ && cp src/core/index.js  dist/src/core/"
+  },
+  "bin": {
+    "wtc": "parser/cli.js"
+  },
+  "author": "EndoHizumi",
+  "license": "MIT",
+  "dependencies": {
+    "html-minifier": "^4.0.0",
+    "html-to-json-parser": "^2.0.1",
+    "rimraf": "^6.0.1",
+    "stacktrace-js": "^2.0.2",
+    "storejs": "^2.1.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.28",
+    "@types/storejs": "^2.0.3",
+    "autoprefixer": "^10.4.20",
+    "esdoc": "^1.1.0",
+    "esdoc-standard-plugin": "^1.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-promise": "^6.1.1",
+    "html-webpack-plugin": "^5.6.0",
+    "jest": "^29.7.0",
+    "postcss": "^8.4.49",
+    "prettier": "^3.2.5",
+    "tailwindcss": "^3.4.15",
+    "ts-jest": "^29.1.2",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.2",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.2"
+  }
+}

package/parser/cli.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+const parse = require('./parser.js')
+const fs = require('fs')
+const path = require('path')
+/**
+ * WebTaleScript Parser CLI
+ */
+
+const exec = (targetScript) => {
+  // ファイル名を取得する。（拡張子を除く）
+  const fileName = path.basename(targetScript).split('.')[0]
+  let outputPath = process.argv.slice(2)[1] || ''
+  // 末尾にスラッシュがない場合、追加する
+  if (outputPath.length > 0) {
+    if (outputPath.slice(-1) !== '/') {
+      outputPath += '/'
+    }
+  }
+
+  // sceneファイルを読み込んで、JSファイルに変換する
+  fs.readFile(targetScript, 'utf8', async (err, data) => {
+    if (err) {
+      console.error(err)
+      return
+    }
+    // パーサーを呼び出す。
+    const { scenario, script, lang } = await parse(data)
+    // jsディレクトリがない場合、作成する
+    if (!fs.existsSync(outputPath)) {
+      fs.mkdirSync(outputPath)
+    }
+    // JSファイルを出力する(lang=tsの場合は、tsファイルを出力する)
+    fs.writeFile(
+      `${outputPath}${fileName}.${lang == 'text/typescript' ? 'ts' : 'js'}`,
+      `${script};\nexport const scenario = ${JSON.stringify(scenario)}; `,
+      (err) => {
+        if (err) {
+          console.error(err)
+          return
+        }
+        console.log(`Output: ${outputPath}${fileName}.${lang == 'text/typescript' ? 'ts' : 'js'}`)
+      },
+    )
+  })
+}
+
+// コマンドライン引数から、ファイル一覧を取得する
+const targetScripts = process.argv.slice(2)[0]
+if (fs.statSync(targetScripts).isDirectory()) {
+  fs.readdir(targetScripts, (err, files) => {
+    if (err) {
+      console.error(err)
+      return
+    }
+    files.forEach((file) => {
+      exec(`${targetScripts}/${file}`)
+    })
+  })
+} else {
+  exec(targetScripts)
+}

package/parser/parser.js

@@ -0,0 +1,53 @@
+const { HTMLToJSON } = require('html-to-json-parser')
+const { minify } = require('html-minifier')
+
+module.exports = async (data) => {
+  let scenario = []
+  let script = []
+  let lang = 'js'
+
+  /**
+   * 渡されたオブジェクトを展開する
+   * @param {Object} jsObject
+   */
+  const flattenAttributes = (jsObject) => {
+    if (Array.isArray(jsObject)) {
+      return jsObject.map(flattenAttributes)
+    }
+    if (typeof jsObject !== 'object' || jsObject === null) {
+      return jsObject
+    }
+    const { attributes, ...rest } = jsObject
+    if (attributes) {
+      Object.assign(rest, attributes)
+    }
+    if (rest.content) {
+      rest.content = rest.content.map(flattenAttributes)
+    }
+    return rest
+  }
+
+  /**
+   * HTMLとして解析され、変換されたオブジェクトを、WTS仕様に変換する
+   * @param {string} html 読み込んだWSTファイル
+   */
+  /** HTMLを読み込む */
+  const html = minify(data, {
+    removeTagWhitespace: true,
+    collapseWhitespace: true,
+    removeComments: true,
+    minifyJS: true,
+    minifyCSS: true,
+  })
+  // HTMLをJSONに変換
+  const parseJson = await HTMLToJSON(html)
+  parseJson.content.forEach((element) => {
+    if (element.type === 'scenario') {
+      scenario = flattenAttributes(element.content)
+    } else {
+      script = element.content
+      lang = element.attributes?.type
+    }
+  })
+  return { scenario, script, lang }
+}