@inlet/react-pixiから@pixi/reactに移行したときにやったこと

はじめに

最近、業務にて@inlet/react-pixiから@pixi/reactに移行する作業を行いました。この移行は、@inlet/react-pixiが廃止され、@pixi/reactに変更されたこと、React v18が@inlet/react-pixiに未対応だったため行いました。

本記事では、@pixi/reactへの移行作業で行った主な変更点について解説します。

変更点1: PixiSpriteの型定義

@inlet/react-pixiでは、PixiSpriteの型定義はシンプルにuseRef<PixiSprite>(null)と記述していました。しかし、@pixi/reactではPixiRefを使用する必要があるため、以下のように変更しました。

// 旧: @inlet/react-pixi
const maskRef = useRef<PixiSprite>(null);

// 新: @pixi/react
import { PixiRef } from '@pixi/react';
import { Sprite } from '@pixi/react';

type ISprite = PixiRef<typeof Sprite>;
const maskRef = useRef<ISprite>(null);

PixiRefはPixiJSオブジェクトをReact側から参照するための型です。

変更点2: PixiComponentのジェネリクス型

@inlet/react-pixiでは、PixiComponentの第2引数にContainerを指定していました。しかし、@pixi/reactでは型エラーが発生してしまう問題が公式のIssueで報告されております。

// 旧: @inlet/react-pixi
const PixiVideo = PixiComponent<PixiVideoProps, Container>('Video', {
  // 省略
}

// 新: @pixi/react
// https://github.com/pixijs/pixi-react/issues/457 でバグ報告のissueが立っている
const PixiVideo = PixiComponent<PixiVideoProps, any>('Video', {
  // 省略
}

この変更は、@pixi/reactの内部実装が変更されたことに伴うものです。

変更点3: Stageコンポーネントのoptions

@inlet/react-pixiでは、Stageコンポーネントのtransparentオプションを使用していましたが、@pixi/reactではこのオプションが非推奨となり、代わりにbackgroundAlphaオプションを使用する必要があります。

// 旧: @inlet/react-pixi
<Stage
  options={{
    transparent: true,
  }}
/>

// 新: @pixi/react
<Stage
  options={{
    backgroundAlpha: 0,
  }}
/>

backgroundAlphaは背景の不透明度を0～1の値で指定します。transparent: trueと同じ効果を得るにはbackgroundAlpha: 0と設定します。