/exia

Next.js, Electronベースのノベルゲームエンジン (開発中)

Primary LanguageTypeScriptMIT LicenseMIT

©Proxima Beta Pte. Limited ©SHIFT UP CORP.

Exia

Next.js and Electron based novel game engine.
Inspired by the UX/UI of “勝利の女神:NIKKE”.


🚧 重要事項

Exia は現在開発中です。全体の進捗は 20% くらいです。
@kokushing をフォローして更新をお待ちください!

📝 概要

Exia(エクシア)は、Next.js(TypeScript)+Electron ベースのビジュアルノベルゲームエンジンです。
基本的なノベルゲームの機能を搭載し、JSX や CSS を用いて柔軟に UI をスタイリングすることが可能です。
レスポンシブ対応しているため、モバイル向けのアプリケーションとしても出力できます。

将来的には、専用 GUI エディタや ChatGPT など生成 AI との連携機能も提供予定です!

🔗 デモ

Google Chrome での閲覧を推奨します。

exia-demo.vercel.app

🛠 主な機能

脳内のイメージで開発しているため細かい要件定義が終わっていません。都度更新していきます。
欲しい機能などありましたら Issue に書き込んでいただくか、X(@kokushing) 宛に DM ください。

  • ゲームエディターの機能
    • キャラクターのセリフ表示
    • システムメッセージ表示
    • キャラクター画像の表示
    • キャラクター切り替え
    • カットイン画像表示
    • CG 表示
    • 選択肢表示/条件分岐(セリフ間ジャンプ)
    • シナリオ切り替え
    • スタート画面
    • エンディング画面
    • CG ギャラリー画面
    • オプション画面
    • シナリオフローチャート画面
    • サウンド(BGM/SE)出力
    • アニメーション再生
    • ローディング(画像キャッシュ)
  • ゲームプレーヤーの機能
    • データセーブ
    • データロード
    • オート再生
    • スキップ
    • ログ
    • コンフィグ
  • その他
    • Windows/MacOS 向けアプリケーションコンパイル
    • 画面録画・書き出し機能
    • VOICEVOX 連携
    • 多言語対応(英語/**語)
    • 専用 GUI エディタ
    • 処理最適化・リファクタリング
    • 外部 API 連携(プラグイン)実装

🎮 動作確認

現状で動作を確認したいという方は、下記の手順に沿って環境を構築してください。

動作環境

  • Node.js v20x

手順

  1. プロジェクトをクローン、またはダウンロード
git clone https://github.com/kokushin/exia.git
  1. プロジェクトのディレクトリへ移動
cd exia
  1. 必要なモジュールをインストール
npm install
  1. 開発用のサーバを起動
npm run dev
  1. 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 をエディタで開き、編集して保存してください。

// 構成と型の参考
// renderer/src/scenarios.json
export const mockScenario: Scenario = {
  id: 1, // シナリオID. 現在機能しません
  backgroundFile: "bg_01.png", // 背景画像のファイル名を指定
  currentLineIndex: 0, // 現在のセリフ位置. 現在機能しません
  characters: [
    // キャラクター情報を配列で格納する
    // 増やした分だけキャラクターが表示される
    {
      index: 0, // キャラクターの番号. 0が一番左端です
      name: "キャラA", // キャラクターの名前
      imageFile: "chara_01.png", // キャラクター画像のファイル名を指定
      isShow: true, // 初期表示フラグ. 現在機能しません
    },
    {
      index: 1,
      name: "キャラB",
      imageFile: "chara_02.png",
      isShow: true,
    },
  ],
  lines: [
    // セリフを配列で格納する
    // 増やした分だけセリフが表示される
    {
      type: 0, // メッセージタイプ. 0=システム 1=キャラクター
      text: "説明テキスト", // セリフの内容. HTMLタグが使えます
    },
    {
      character: {
        index: 0, // キャラクターをフォーカスする場合、対象キャラクターの番号を指定
      },
      type: 0,
      text: "キャラクター移動",
    },
    {
      character: {
        index: 0,
        imageFile: "chara_01.png", // キャラクターの画像を変更する場合、画像のファイル名を指定
      },
      type: 1,
      text: "キャラクターのセリフ1",
    },
    {
      cutInFile: "cut_01.png", // カットインを表示する場合、画像のファイル名を指定
      type: 0,
      text: "カットイン表示",
    },
    {
      character: {
        index: 1,
        imageFile: "chara_02.png",
      },
      type: 1,
      text: 'キャラクターのセリフ2<br>改行<br><span style="font-size:24px">テキストの大きさ変更</span>',
    },
    ...
  ],
};

上記の仕様はモックアップ段階であり、今後変更される可能性が高いです。
設計に関してご提案がありましたら、お気軽に改善案をお送りください!

🎙 VOICEVOX 連携

仮実装ですが、VOICEVOX を使用して音声ファイルを書き出すことができます。

VOICEVOX 本体をダウンロードして、ローカルサーバを起動します。

renderer/src/constants/index.ts の CONFIG.VOICEVOX フラグを true にします。

export const CONFIG = {
  ...
  VOICEVOX: true,
};

renderer/src/scenarios/S_000.jsoncharacters のオブジェクト内に 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 や演出を参考していることや、エクシア自身がゲーム好きという性格もありこの名前に決めました。

お尻に注目されがちのゲームですが、キャラクターデザイン、シナリオやアニメーションなどクオリティ高いのでぜひ一度プレイしてみてください。

🎫 License

Code and documentation copyright 2024 by @kokushing.
Code released under the MIT License.