PrismatiXEngine · Visual novel engine

把你的故事，
做成遊戲。

先寫第一句台詞。
再加入選項、角色和你想做的功能。

PrismatiXEngine / Story 範例

Story/main.pxstory

*start
[show guide expression=smile position=center]

@guide
看，第一顆星出現了。

[choice text="到窗邊看看" goto=stars]
[choice text="再聽個故事" goto=story]

用 Story 寫劇情，用 JavaScript 加功能。角色、選項和對話介面都有範例，不用從空白畫面開始。

Try it out

安裝、建立專案、啟動預覽。

Terminal命令列範例

npm install -g @prismatix/cli

prismatix create my-game

prismatix dev my-game

需要 Node.js 與包含對應 runtime 的 CLI 套件。0.2.0 目前的文件依據是候選版；安裝前先看套件狀態。

不用先學 C++。

打開 Story/main.pxstory 就能改台詞。接著學會安排分支、切換立繪，再把範本換成自己的角色與素材。

寫第一個故事

從台詞，到自訂玩法。

Story 負責劇情，UI 決定畫面，Extension 處理額外的遊戲邏輯。需要哪一部分，再往下加。

Story/main.pxstory

*start
[show guide expression=smile position=center]
@guide
今晚想先做什麼？

[choice text="看看星星" goto=stars]
[choice text="聽個故事" goto=story]
[choice.wait]

*stars
第一顆星亮了起來。
[jump target=finish]

*story
桌上的書翻開了新的一頁。

*finish
[end]

對話、選項與分支

用範本的 guide 角色寫一段有兩個選項的故事。

閱讀 Story 教學

Content/UI/Title.tsx

/** @jsxImportSource @prismatix/authoring-sdk */
import { Scene, VBox, Text, Button } from '@prismatix/authoring-sdk';

export default (
  <Scene name="Title" width={1280} height={720}>
    <VBox name="Root" fill>
      <Text name="Heading">First Light</Text>
      <Button name="Start" size={[240, 64]} action="game.start">
        開始遊戲
      </Button>
    </VBox>
  </Scene>
);

做自己的標題畫面

TSX 在建置時轉成原生 UI 資料；遊戲內不需要 React 或瀏覽器。

自訂遊戲介面

Scripts/tutorial.ts

import { createPrismatiXContext, defineCommand } from '@prismatix/runtime';

const ctx = createPrismatiXContext();

defineCommand<{ message: string }>('tutorial.note', async ({ message }) => {
  ctx.raw.log('tutorial.note', message);
  await ctx.time.wait(0.2);
});

// 在 .pxextension 宣告 tutorial.note，再從 Story 呼叫：
// [tutorial.note message="Hello from the extension"]