17. rexUIのninePatch2

はじめに

アップグレードのカード画像を作成するために、 PhaserのrexUI プラグインの ninePatch2 を使いました。

rexUIとは？

rexUIは、Phaser3向けの高機能UIプラグイン群です。ボタン、スライダー、ダイアログ、レイアウトなど、標準Phaserにはない多彩なUIコンポーネントを簡単に使えるようになります。

インストール方法

npmで簡単に導入できます。

npm install phaser3-rex-plugins

セットアップ方法

PhaserのGameConfigで、sceneプラグインとして登録します。
このプロジェクトでは main.ts で以下のように設定しています。

import RexUIPlugin from "phaser3-rex-plugins/templates/ui/ui-plugin.js";

const config: Phaser.Types.Core.GameConfig = {
  // ...existing code...
  plugins: {
    scene: [
      {
        key: "rexUI",
        plugin: RexUIPlugin,
        mapping: "rexUI",
      },
    ],
  },
};

これで、各Sceneから this.rexUI でrexUIの機能が使えるようになります。

TypeScript補完を効かせるため、型定義も追加しています（phaser.d.ts）。

import UIPlugin from "phaser3-rex-plugins/templates/ui/ui-plugin";

declare module "phaser" {
  interface Scene {
    rexUI: UIPlugin;
  }
}

ninePatch2の使い方

ninePatch2は、9分割画像（9-patch）を使って、可変サイズのパネルやボタンを美しく描画できるUIコンポーネントです。

+----+------+----+
| TL |  T   | TR |
+----+------+----+
| L  |  C   | R  |
+----+------+----+
| BL |  B   | BR |
+----+------+----+

• TL,TR,BL,BR: 四隅の角 → 固定サイズ
• T,B: 上下の辺 → 横に伸縮
• L,R: 左右の辺 → 縦に伸縮
• C: 中央 → 横にも縦にも伸縮

角部分はそのまま使用し、中央や辺は伸ばしてサイズにフィットさせることで、 一つの画像でいろんなサイズのUIに対応可能です。

ninePatchは9枚の画像を利用しますが、ninePatch2では1枚の画像を9つに分けて使用することができるため、 今回はninePatch2を利用しました。

画像の準備

今回使ったのは、下記画像です。16x16ピクセルで、縦横ともに[6,4,6]に区切ることができます。

基本的な使い方

例えば、アップグレードカードの背景パネルに使う場合は以下のように記述します。

const panel = this.scene.rexUI.add.ninePatch2({
  x: 0,
  y: 0,
  width: this.cardWidth,
  height: this.cardHeight,
  key: "ui_nine_panel", // 9-patch用の画像アセット
  columns: [6, undefined, 6], // 左・中央・右の幅
  rows: [6, undefined, 6],    // 上・中央・下の高さ
})
.setOrigin(0, 0)
.setScrollFactor(0);

• columns/rows で9分割のサイズを指定します。中央部分は undefined で自動伸縮。
• key には事前にロードした9-patch画像のキーを指定します。

まとめ

ninePatch2を使ってカード背景を生成しました。