Help us understand the problem. What is going on with this article?

React Pixi Fiber使ってみた

More than 1 year has passed since last update.

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

game.png

おいー! 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 もあります。あとで使ってみよ。

作ったもの

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

https://hibikinekage.github.io/flappy-rico

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

ソースコードはこちら。

https://github.com/HibikineKage/flappy-rico

雑感

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

メリット👍

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

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

デメリット👎

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

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

まとめ

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

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

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

Hibikine_Kage
TypeScriptばっかり書いてます。
http://hibikine.me
autoscale
Twitter アカウント管理サービス「SocailDog」を開発・運営するスタートアップ
https://autoscale.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした