From 23833dedb6412967e25929cdfd8b91019c773897 Mon Sep 17 00:00:00 2001 From: EndoHizumi Date: Sun, 4 Aug 2024 03:21:19 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E3=83=90=E3=82=B0=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/drawer.ts | 2 +- src/core/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/drawer.ts b/src/core/drawer.ts index fd58288..f53c453 100644 --- a/src/core/drawer.ts +++ b/src/core/drawer.ts @@ -188,7 +188,7 @@ export class Drawer { return new Promise((resolve) => { const target = displayedImages[name]; const startPos = { x: target.pos.x, y: target.pos.y }; - const dest = { x: startPos.x + pos.x, y: startPos.y + pos.y }; + const dest = { x: startPos.x + Number(pos.x), y: startPos.y + Number(pos.y) }; const startTime = performance.now(); const move = (currentTime:any) => { diff --git a/src/core/index.js b/src/core/index.js index 6334cbb..726ad67 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -25,7 +25,7 @@ export class Core { say: this.sayHandler, if: this.ifHandler, call: this.callHandler, - moveTo: this.moveToHandler, + moveto: this.moveToHandler, route: this.routeHandler, } From 6206709d213e95546e2f6bab3cb29315a2e66af6 Mon Sep 17 00:00:00 2001 From: EndoHizumi Date: Sun, 4 Aug 2024 03:21:39 +0900 Subject: [PATCH 2/3] 0.2.6 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index cdaaa89..a302094 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "webtalekit", - "version": "0.2.5", + "version": "0.2.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "webtalekit", - "version": "0.2.5", + "version": "0.2.6", "license": "MIT", "dependencies": { "html-minifier": "^4.0.0", diff --git a/package.json b/package.json index 86c99cd..a07e1ec 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "webtalekit", - "version": "0.2.5", + "version": "0.2.6", "description": "Web知識でノベルゲーを作ることを目指したやつ", "main": "./src/index.js", "scripts": { From 833bed4e042255629b8ae1483f832f8f182fac9c Mon Sep 17 00:00:00 2001 From: EndoHizumi Date: Sun, 4 Aug 2024 04:12:02 +0900 Subject: [PATCH 3/3] =?UTF-8?q?README=E3=82=92=E6=9B=B4=E6=96=B0=E3=81=97?= =?UTF-8?q?=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 217 ++++++++++++++++++++------------------------ documents/manual.md | 109 ++++++++++++++++++++++ 2 files changed, 207 insertions(+), 119 deletions(-) create mode 100644 documents/manual.md diff --git a/README.md b/README.md index fc95d1f..e419e48 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,17 @@ ![wabTaleKitロゴ](s-plan1-5Light-s-1.jpg) +## 目次 + +- 概要 +- デモ +- 環境構築手順 +- 動作確認手順 +- Quick Start（デモゲームを弄ってみよう） +- できること +- できないこと +- フィードバックフォームのご案内 + ## 概要 TypeScript(JavaScript) ベースのビジュアルノベルゲームエンジンです。 @@ -15,23 +26,99 @@ Firefoxでも、Chromeでも、Edgeでも、好きなブラウザを使いたま ![alt text](image.png) -## 動作確認 +## 環境構築手順 -とりあえずの動作確認は、こちらのリポジトリのREADMEを元にセットアップすることできます。 - +1. Node.js(20以降)が必要です。(nvm等お好みの方法がある場合は、そちらでも構いません) + - Windowsの場合は、Node.js公式サイト () からインストールしてください。 + - Macの場合は、`brew install node` を実行してインストールしてください。 + - Linuxの場合は、以下のコマンドを実行して、インストールしてください。 -## フィードバッグ + ```bash + curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - + sudo apt-get install -y nodejs + ``` -デモをプレイした感想・WebTaleKitを使って気になったことなど、意見・感想はこちらで受け付けています！ -[https://forms.gle/uejQwvwAb99wcJht7](https://forms.gle/uejQwvwAb99wcJht7) +2. 以下のコマンドを実行してください + + ``` bash + npm create tale-game + ``` + +プロジェクトに移動して、`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 以下に表示したい画像を置きます。 + - 登場させたい行数で、`` を記述する +- セリフを増やす + - セリフを表示させたい行数で、`セリフをここに入れる` を記述する +- 地の文を増やす + - 地の文を表示させたい行数で、`セリフをここに入れる` を記述する + +- 選択肢を増やす + - 43行目のchoiceタグの中(44行-50行)で、以下のように記述すると、選択されたときに、地の文を表示する + + ``` html + + セリフをここに入れる + + ``` + + 実装例 + + ```　html + + + + + + + + + 承知しました。 + + + + ``` ## 現在の状況 webTaleKitは、現在アルファ版です。 + 開発進捗は、[@endo_hizumi](https://x.com/endo_hizumi) で行っております。 実装予定の項目については、こちらの[Trello](https://trello.com/b/qYNGh7MY)からも確認できます。 -Hashtag: #webTalekit +デモをプレイした感想・WebTaleKitを使って気になったことなど、意見・感想はこちらで受け付けています！ +[https://forms.gle/uejQwvwAb99wcJht7](https://forms.gle/uejQwvwAb99wcJht7) + +検索Hashtag: #webTalekit ## アルファ版で、できること @@ -51,6 +138,10 @@ Hashtag: #webTalekit - 定義した変数の表示 - 表示する文章・画像の条件分岐 - 選択肢の表示 +- 選択肢の画像の変更 + - 通常時 + - マウスオーバー + - 選択時 - セリフのジャンプ - Ctrlキーでの強制スキップ - Enterキーで全文表示 @@ -91,118 +182,6 @@ Hashtag: #webTalekit - ゲーム設定ファイルの反映 - 画面用HTMLのcss・jsのインライン化・minify化 -## WebTaleKitチュートリアル - -このチュートリアルでは、WebTaleKitを使ってビジュアルノベルゲームを作成する方法を学びます。 - -## 前提条件 - -- Node.js 16以降がインストールされていること -- HTML、CSS、JavaScriptの基本的な知識があること - -## プロジェクトの作成 - -1. 新しいディレクトリを作成し、そこにWebTaleKitのディレクトリ構造を設定します。 - -```bash -├─src -│ ├─scene -│ | └─title.scene -| ├─ screen -│ | ├─title.html -│ | ├─title.css -│ | └─title.js -│ ├─resource -│ │ ├─audio -│ │ ├─background -│ │ ├─chara -│ │ ├─key -│ │ ├─se -│ │ ├─config.js -│ │ └─voice -├─tsconfig.json -├─webpack.config.js - -``` - -## シーンの作成 - -1. `src/scene`ディレクトリに新しいシーンファイル（例：`title.scene`）を作成します。 - -2. シーンファイルには、``セクションと``セクションがあります。 - - ``セクションでは、WebTaleScript（WTS）を使ってゲームの進行を制御します。 - - ``セクションでは、JavaScriptを使ってシーンで使う処理や背景のデータ、変数の定義を記述します。 - -3. WTSを使って、テキストの表示、キャラクターの表示、選択肢の表示などを行います。 - 例： - - ```html - - 「先輩、別れてください」 - 「え、ごめん。今･･･なんて」 - - - - - - - - ``` - - - 利用できるWTSタグ - - text（テキストの表示） - - choice（選択肢の表示） - - show（画像の表示） - - hide（画像の日表示） - - newpage（画面のクリア） - - jump（シナリオの行移動） - - sound（音楽の再生） - - say（名前付きテキストの表示・ボイス再生） - - if（処理分岐） - - call（JSメソッドの呼び出し） - - moveTo（画像の水平・平行移動） - - route（シーンの移動） - -4. ``セクションで、シーンの設定や変数の定義を行います。 -前のシーンの設定を引継ぐ場合は、その項目は入力を省略できます。 - - 例： - - ```html - - const sceneConfig = { - background: '屋上.jpg' - } - - ``` - - - 利用できる設定 - - template（シーンのUIのHTML） - - name （シーンの名前） - - background（シーンの背景） - - bgm（シーンのBGM） - -## UIの作成 - -1. `src/screen`ディレクトリにシーンごとのUIファイル（HTML、CSS、JavaScript）を作成します。 - -2. HTMLファイルでUIの構造を定義し、CSSファイルでスタイルを設定します。 - -3. JavaScriptファイルでUIの動作を制御します。 - -## ビルドとデプロイ - -1. WebPackやViteを使ってプロジェクトをビルドします。 - -2. ビルド時に、シーンファイル（`.scene`）がJavaScriptに変換され、UIファイル（HTML、CSS、JavaScript）がインライン化されます。 - -3. ビルドされたファイルを`dist`ディレクトリに出力します。 - -4. `dist`ディレクトリの内容をWebサーバーにデプロイすることで、ゲームを公開できます。 - -以上がWebTaleKitを使ってビジュアルノベルゲームを作成するための基本的な流れです。 -タグの詳細については、[WebTaleKit仕様](documents/spec.md)を参照してください。 - ## アイコン素材 - diff --git a/documents/manual.md b/documents/manual.md new file mode 100644 index 0000000..2fbdbc3 --- /dev/null +++ b/documents/manual.md @@ -0,0 +1,109 @@ +# WebTaleKit プロジェクト作成マニュアル + +## 前提条件 + +- Node.js 20以降がインストールされていること +- HTML、CSS、JavaScriptの基本的な知識があること + +## プロジェクトの作成 + +1. 新しいディレクトリを作成し、そこにWebTaleKitのディレクトリ構造を設定します。 + +```bash +├─src +│ ├─scene +│ | └─title.scene +| ├─ screen +│ | ├─title.html +│ | ├─title.css +│ | └─title.js +│ ├─resource +│ │ ├─audio +│ │ ├─background +│ │ ├─chara +│ │ ├─key +│ │ ├─se +│ │ ├─config.js +│ │ └─voice +├─tsconfig.json +├─webpack.config.js + +``` + +## シーンの作成 + +1. `src/scene`ディレクトリに新しいシーンファイル（例：`title.scene`）を作成します。 + +2. シーンファイルには、``セクションと``セクションがあります。 + - ``セクションでは、WebTaleScript（WTS）を使ってゲームの進行を制御します。 + - ``セクションでは、JavaScriptを使ってシーンで使う処理や背景のデータ、変数の定義を記述します。 + +3. WTSを使って、テキストの表示、キャラクターの表示、選択肢の表示などを行います。 + 例： + + ```html + + 「先輩、別れてください」 + 「え、ごめん。今･･･なんて」 + + + + + + + + ``` + + - 利用できるWTSタグ + - text（テキストの表示） + - choice（選択肢の表示） + - show（画像の表示） + - hide（画像の日表示） + - newpage（画面のクリア） + - jump（シナリオの行移動） + - sound（音楽の再生） + - say（名前付きテキストの表示・ボイス再生） + - if（処理分岐） + - call（JSメソッドの呼び出し） + - moveTo（画像の水平・平行移動） + - route（シーンの移動） + +4. ``セクションで、シーンの設定や変数の定義を行います。 +前のシーンの設定を引継ぐ場合は、その項目は入力を省略できます。 + + 例： + + ```html + + const sceneConfig = { + background: '屋上.jpg' + } + + ``` + + - 利用できる設定 + - template（シーンのUIのHTML） + - name （シーンの名前） + - background（シーンの背景） + - bgm（シーンのBGM） + +## UIの作成 + +1. `src/screen`ディレクトリにシーンごとのUIファイル（HTML、CSS、JavaScript）を作成します。 + +2. HTMLファイルでUIの構造を定義し、CSSファイルでスタイルを設定します。 + +3. JavaScriptファイルでUIの動作を制御します。 + +## ビルドとデプロイ + +1. WebPackやViteを使ってプロジェクトをビルドします。 + +2. ビルド時に、シーンファイル（`.scene`）がJavaScriptに変換され、UIファイル（HTML、CSS、JavaScript）がインライン化されます。 + +3. ビルドされたファイルを`dist`ディレクトリに出力します。 + +4. `dist`ディレクトリの内容をWebサーバーにデプロイすることで、ゲームを公開できます。 + +以上がWebTaleKitを使ってビジュアルノベルゲームを作成するための基本的な流れです。 +タグの詳細については、[WebTaleKit仕様](documents/spec.md)を参照してください。