UI 與選單

修改標題畫面

打開 Content/UI/Title.pxui，找到 name 為 Title、Start、Load 的節點。text 是顯示文字，layout 設定位置與尺寸，accessibilityLabel 提供輔助閱讀名稱。先改這幾個欄位，再開 Preview 看結果。

這份檔案使用 PrismatiXUIScene JSON 格式。parentId 決定父子關係，order 排序同層節點，runtimeType 選擇原生控制項。根節點的 parentId 是 null。修改時保留節點 ID，讓其他引用仍能找到它。

按鈕動作

Start 按鈕的 onClick 是：

{
  "id": "game.start",
  "arguments": {}
}

id 指定 Action，arguments 放入參數。預設 Player 提供 game.start、save.open、load.open、backlog.open 和 settings.open，可用來開始遊戲或開啟對應畫面。

自訂動作在 Extension 的 actions 宣告並實作；Story 使用的則是 commands，兩者分開註冊。

畫面路由

prismatix.json 的 uiEntryPoints 將路由名稱對應到畫面檔案：

{
  "uiEntryPoints": {
    "title": "Content/UI/Title.pxui"
  }
}

合併設定時保留其他路由。Story 可使用 [ui route=save operation=push]；Extension 則提供 ctx.ui.push、replace、back、showModal、closeModal。

push 加入導覽堆疊，back 返回前一頁；modal 是覆蓋在目前畫面上的視窗。新增 gallery 或 credits 等自訂路由時，也要提供對應的 UI 檔案。

用 TSX 撰寫介面

TSX 可以把 UI 寫成元件結構。先備份原本的 Title.pxui，再建立 Content/UI/Title.tsx：

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

export default (
  <Scene name="First Light Title" width={1280} height={720}>
    <VBox name="Root" fill style={{ background: '#16182AFF' }}>
      <Text name="Heading">第一道光</Text>
      <Button name="Start" size={[240, 64]} action="game.start">
        開始遊戲
      </Button>
      <Button name="Load" size={[240, 64]} action="load.open">
        讀取進度
      </Button>
    </VBox>
  </Scene>
);

將 uiEntryPoints.title 改成 Content/UI/Title.tsx，再執行：

prismatix validate my-game
prismatix dev my-game

CLI 會檢查型別、執行 default export，然後產生原生 .pxui 資料。模組必須匯出 Scene、Component，或回傳它們的函式。同一個輸出路徑只能登記一份來源，所以不要同時登記 Title.tsx 和 Title.pxui。

這裡使用的是 SDK 元件，不是 React 網頁：沒有 <div>、DOM 或 React hooks，版面也依照引擎規則而非瀏覽器 CSS。共用元件可使用 SDK 的 Component，並在 uiComponents 登記。

綁定文字與遊戲資料

Text 可以直接綁定語系文字：

<Text name="Heading" bind={{ text: 'locale.ui.welcome' }}>
  Welcome
</Text>

在 locale 檔的 strings 加入 "ui.welcome": "歡迎"，畫面便使用該語言的文字。

對話介面可使用 session、choices、backlog 和 settings 的資料。Extension 也能透過 ctx.session.observeDialogue 等方法訂閱更新，詳見 Runtime API。

加入轉場

在已建立 ctx、並具有 runtime 和 ui 能力的 Extension 中設定：

ctx.ui.setTransition('title', 'hud', {
  preset: 'crossfade',
  durationSeconds: 0.45,
});

內建轉場有 none、fade、crossfade、slide-left、slide-right。這段是 Extension 程式，不是 UI JSON 欄位；設定方法見 Extension 教學。

試玩介面

修改後檢查鍵盤焦點、按鈕標籤、文字放大、英文長選項，以及存讀檔後能否返回故事。彈出視窗也要測試關閉、返回與轉場期間的操作。

TSX 會在作者電腦的 Node.js 中執行，因此只建置可信任的專案與依賴。遊戲內的 QuickJS 沙盒不會限制這個建置步驟。

實作參考：Title 範本、TSX 範例、CLI 載入、Runtime SDK。