Exia は現在開発中です。全体の進捗は 30% くらいです。
@kokushing をフォローして更新をお待ちください!
Exia(エクシア)は、Next.js(TypeScript)+Electron ベースのビジュアルノベルゲームエンジンです。
基本的なノベルゲームの機能を搭載し、JSX や CSS を用いて柔軟に UI をスタイリングすることが可能です。
レスポンシブ対応しているため、モバイル向けのアプリケーションとしても出力できます。
将来的には、専用 GUI エディタや ChatGPT など生成 AI との連携機能も提供予定です!
Google Chrome での閲覧を推奨します。
脳内のイメージで開発しているため細かい要件定義が終わっていません。都度更新していきます。
欲しい機能などありましたら Issue に書き込んでいただくか、X(@kokushing) 宛に DM ください。
- ゲームエディターの機能
- キャラクターのセリフ表示
- システムメッセージ表示
- キャラクター画像の表示
- キャラクター切り替え
- カットイン画像表示
- CG 表示
- 選択肢表示/条件分岐(セリフ間ジャンプ)
- シナリオ切り替え
- スタート画面
- エンディング画面
- CG ギャラリー画面
- オプション画面
- シナリオフローチャート画面
- サウンド(BGM/SE)出力
- アニメーション再生
- ローディング(画像キャッシュ)
- ゲームプレーヤーの機能
- データセーブ
- データロード
- オート再生
- スキップ
- ログ
- コンフィグ
- その他
- Windows/MacOS 向けアプリケーションコンパイル
- 画面録画・書き出し機能
- VOICEVOX 連携
- 多言語対応(英語/中国語)
- 専用 GUI エディタ
- 処理最適化・リファクタリング
- 外部 API 連携(プラグイン)実装
現状で動作を確認したいという方は、下記の手順に沿って環境を構築してください。
- Node.js v20x
- プロジェクトをクローン、またはダウンロード
git clone https://github.com/kokushin/exia.git
- プロジェクトのディレクトリへ移動
cd exia
- 必要なモジュールをインストール
npm install
- 開発用のサーバを起動
npm run dev
- Electron アプリケーションが起動します。
終了したい場合は、アプリケーションを閉じるか、Ctrl+C でローカルサーバを閉じてください。
より詳細な編集方法は別途ドキュメントを作成しますが、とりあえず差し替えたい人向けの説明です。
renderer/public/images/backgrounds
の bg_01.png を上書きしてください。
renderer/public/images/characters
の chara_01.png を上書きしてください。
renderer/public/images/cut_ins
の cut_01.png を上書きしてください。
renderer/src/scenarios/S_000.json
をエディタで開き、編集して保存してください。
// 構成と型の参考
export const mockScenario: Scenario = {
id: "S_000", // シナリオID
backgroundFile: "bg_01.webp", // 背景画像のファイル名を指定
currentLineIndex: 0, // 現在のセリフ位置
characters: [
// キャラクター情報を配列で格納する
// 増やした分だけキャラクターが表示される
{
index: 0, // キャラクターの番号. 0が一番左端です
name: "ガイド", // キャラクターの名前
imageFile: "chara_01.webp", // キャラクター画像のファイル名を指定
isShow: true, // 初期表示フラグ
speakerId: 3, // VOICEVOXのspeakerId(使用する場合)
},
{
index: 1,
name: "アシスタント",
imageFile: "chara_02.webp",
isShow: true,
speakerId: 2,
},
],
lines: [
// セリフを配列で格納する
// 増やした分だけセリフが表示される
{
type: 0, // メッセージタイプ. 0=ナレーション, 1=セリフ, 2=選択肢
text: "説明テキスト", // セリフの内容. HTMLタグが使えます
},
{
character: {
index: 0, // キャラクターをフォーカスする場合、対象キャラクターの番号を指定
},
type: 0,
text: "キャラクター移動",
},
{
character: {
index: 0,
imageFile: "chara_01.webp", // キャラクターの画像を変更する場合、画像のファイル名を指定
},
type: 1,
text: "キャラクターのセリフ1",
},
{
cutIn: {
// カットインを表示する場合、imageFileプロパティを指定
imageFile: "cut_01.webp",
},
type: 0,
text: "カットイン表示",
},
{
type: 0,
text: "カットイン非表示",
},
{
cutIn: {
// フルスクリーンCGを表示する場合はisFullScreenをtrueにする
imageFile: "cg_01.webp",
isFullScreen: true,
},
type: 0,
text: "CG表示",
},
{
character: {
index: 1,
imageFile: "chara_02.webp",
},
type: 1,
text: 'キャラクターのセリフ2<br>改行<br><span style="font-size:24px">テキストの大きさ変更</span>',
},
// 選択肢表示の例
{
id: "choice_point", // 行にIDを設定できます(ジャンプ先の指定用)
type: 2, // タイプ2は選択肢を表示
text: "どうしますか?", // 選択肢の前に表示するテキスト
choices: [
// 選択肢の配列
{
text: "選択肢1のテキスト", // 選択肢に表示するテキスト
jumpTo: "choice1_response", // 選択時にジャンプする行のID
},
{
text: "選択肢2のテキスト",
jumpTo: "choice2_response",
},
],
},
// 選択肢1を選んだ場合のジャンプ先
{
id: "choice1_response", // jumpToで指定されたID
character: {
index: 0,
},
type: 1,
text: "選択肢1を選んだ場合の応答",
jumpTo: "after_choice", // 別の行へさらにジャンプすることも可能
},
// 選択肢2を選んだ場合のジャンプ先
{
id: "choice2_response",
character: {
index: 1,
},
type: 1,
text: "選択肢2を選んだ場合の応答",
},
// 選択後の共通パート
{
id: "after_choice",
character: {
index: 0,
name: "ガイド(名前変更例)", // 名前を途中で変更することも可能
imageFile: "chara_01.webp",
},
type: 1,
text: "選択後の共通パート",
},
],
};
上記の仕様はモックアップ段階であり、今後変更される可能性が高いです。
設計に関してご提案がありましたら、お気軽に改善案をお送りください!
Exia には、シナリオ作成を効率化するための Web ベースのエディターが含まれています。
このエディターを使用することで、GUI を通じてシナリオデータを簡単に作成・編集することができます。
- プロジェクトのルートディレクトリで、editor ディレクトリに移動します。
cd editor
- 必要なモジュールをインストールします(初回のみ)。
npm install
- エディターサーバーを起動します。
npm run dev
または、プロジェクトのルートディレクトリで下記コマンドを実行します。
npm run dev:editor
ブラウザで http://localhost:3001
にアクセスすると、シナリオエディターが表示されます。
- エディターは現在開発中であり、今後機能が追加される予定です。
- 複雑なシナリオ構成が必要な場合は、直接 JSON ファイルを編集することをお勧めします。
Claude Desktop アプリから自然言語でシナリオを生成できる MCP サーバもご用意しました。
琴葉姉妹による解説シナリオを自動生成してくれます。
リポジトリはこちら
仮実装ですが、VOICEVOX を使用して音声ファイルを書き出すことができます。
VOICEVOX 本体をダウンロードして、ローカルサーバを起動します。
renderer/src/constants/index.ts
の CONFIG.VOICEVOX フラグを true
にします。
export const CONFIG = {
...
VOICEVOX: true,
};
renderer/src/scenarios/S_000.json
の characters
のオブジェクト内に speakerId
を設定します。
※ VOICEVOX の speakerId を参照してください
{
"index": 0,
"name": "キャラA",
"imageFile": "chara_01.webp",
"isShow": true,
"speakerId": 3 // ずんだもん(ノーマル)
},
下記コマンドを実行すると、public/audios/voices
配下に wav ファイルを生成します。
npm run build-voice
キャラクターのセリフが設定されている箇所の音声が生成されます。
現在準備中です。
ゲームエンジン名の「Exia(エクシア)」は SHIFT UP CORP の作品「勝利の女神:NIKKE」に登場するキャラクターです。本ゲームエンジンが NIKKE の UI や演出を参考していることや、エクシア自身がゲーム好きという性格もありこの名前に決めました。
お尻に注目されがちのゲームですが、キャラクターデザイン、シナリオやアニメーションなどクオリティ高いのでぜひ一度プレイしてみてください。
Code and documentation copyright 2024 by @kokushing.
Code released under the MIT License.