この記事は @HibikineCode 1人 Advent Calendar 2018 の6日目の記事です。

おいー！　Reactでpixi.js動かそうぜー！

React は主にDOMのレンダリングに使われるJavaScriptのViewのライブラリです。が、中でやってることは更新を検知して差分だけ変更するってことだけです。ということは、DOM だろうがネイティブだろうが Canvas だろうが、レンダリング先を変えているだけで同じ仕組みで出来るはずです。

だったら React でゲームエンジン pixi.js のコンポーネントを操作するなんてわけないはずです。さらに好都合なことに、 pixi.js のコンポーネントはツリー構造です。もう React との相性は抜群なわけです。

React で pixi.js を動かそうとした先人がいます。が、React v16 のFiber化による内部仕様変更には対応しなかったため、v16以降で動くreact-pixi-fiberを使います。

ちなみに3月に生まれたばかりで急成長中の @inlet/react-pixi もあります。あとで使ってみよ。

作ったもの

某スマホゲームのパクリを作りました。私の絵描きの方で使ってる代理キャラを飛ばす「りこぴょん」です。

そのうちPWAにします。12月の貴重な時間を無駄に溶かしてください。

ソースコードはこちら。

雑感

作った時に感じたことをつらつらと。

メリット👍

コンポーネントのデバッグが楽
stateが変に分散していないので次の状態を書くのが楽

とにかく各コンポーネントのデバッグが楽なのがいいです。

デメリット👎

結構パフォーマンスに影響がある
unmount忘れるとガンガンメモリリークする
ルートに状態が集中する
アニメーションつらい

アニメーションやろうと思うたびに新しく状態変数追加しなきゃいけないのちょっとめんどくさい……。
クラスベースだと該当するクラスに委譲するだけでいいのに対し、Reactではルートに置かないと他から参照できなくなるので、どこに状態を置くべきか悩ましいです。

まとめ

React でゲーム作るのは楽しいぞ
片方向バインディング最高
状態管理が増えるとめんどくさい

ちょっとでかいゲームは作るの大変そうですが、中・小規模なゲームならアリだと思いました。

最後まで見ていただきありがとうございました。