pixi/uiのInputをpixi/reactのコンポーネントにする方法

趣味で作っていたプログラムで作ったものの、結局使わなかったので放流しておく。

バギーだったり雑だったりするのは途中まで作ったが不要だと判断したため。

やり方

pixi/reactのカスタムコンポーネントにする。

動かした環境

package.jsonは次の通り。

{
  /* 一部省略 */
  "dependencies": {
    "@pixi/react": "^7.1.2",
    "@pixi/ui": "^1.2.0",
    "pixi.js": "^7.4.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
  },
  "devDependencies": {
    "@pixi/devtools": "^2.0.1",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "typescript": "~5.7.2",
  },
  "engines": {
    "node": ">=22.14.0",
    "pnpm": ">=9.14.2"
  },
  "packageManager": "pnpm@9.14.2"
}

コンポーネントの定義

カスタムコンポーネントとしてpixi/uiのInputをレンダリングする。

import { PixiComponent } from "@pixi/react";
import { Input } from "@pixi/ui";
import { Graphics, Sprite, Texture } from "pixi.js";
import { Container as PixiContainer } from "pixi.js";

type Props = {
  bg: Sprite | Graphics | Texture | string;
  placeholder?: string;
  value?: string;
  onChange?: (text: string) => void;
};

export const TextFiled = PixiComponent<Props, PixiContainer>("TextField", {
  create() {
    return new PixiContainer();
  },
  didMount(instance, parent) {
    parent.addChild(instance);
  },
  applyProps(instance, _oldProps, newProps) {
    instance.removeChildren();
    const input = new Input({
      bg: newProps.bg,
      placeholder: newProps.placeholder,
      value: newProps.value,
    });
    if (newProps.onChange) {
      input.onChange.connect(newProps.onChange);
    }
    instance.addChild(input);
  },
  willUnmount(instance) {
    instance.removeChildren();
  },
  config: {
    destroy: true,
  },
});

コンポーネントの呼び出し

なぜかbgはstringだとうまく動作しない。

import { Stage } from "@pixi/react";
import { Graphics } from "pixi.js";

import { TextFiled } from "./TextField";

function Hoge() {
  const bgGraphics = new Graphics();
  bgGraphics.beginFill(0xffffff);
  bgGraphics.drawRect(0, 0, 300, 100);
  bgGraphics.endFill();

  return (
    <Stage
      width={1000}
      height={1000}
      options={{ background: 0xffffff }}
    >
      <TextFiled
        bg={bgGraphics}
        placeholder="Enter your name"
        onChange={(text) => {
          console.log(text);
        }}
      />
    </Stage>
  );
}

バグとか

• IME切替ができない
• ショートカットキーが使えない