ゲームプログラミングレシピ集

ReactNativeでPIXI.jsを動かしてみた結果

javascript

ReactNative PIXI.js

こんにちは。なおキーヌです。

ブログ毎日更新は300日目になります。

ReactとPIXI.jsを連携できて調子に乗ったので、
ReactNativeで動かしてみようと思ったのですが、結果は散々でした。

結論から言ってしまうと、UnityやRPGツクールMVでいいかなって感じです。

まだまだ発展途上な感じがしたので、今後もしかすると活きてくる可能性はありますが
一旦はReactNativeに関しては撤退仕様かなと思っています。

一応やったことを書き残しておくので、興味がある方はチャレンジしてみてください。

導入環境は

  • Windows10 HOME
  • Ubuntu19.10

で検証しました。

  1. expo-cliをインストールする
  2. expo initでプロジェクトを生成する
  3. expo-pixiをインストールしてサンプルを試す
  4. スマホアプリから開発サーバーにアクセスしよう
  5. 結論：ReactNativeはゲーム作りに向いていなかった

expo-cliをインストールする

ReactNativeを扱うには何通りかあるそうなのですが、
create-raect-appのようなものがこの「expo-cli」になったそうなのでこれでやっていきます。

あまりnodeのグローバル環境にいれたくなかったのですが、
ローカルだと色々面倒くさかったのでグローバルに入れることにしました。

npm install -g expo-cli

なぜかyarnだとグローバルに入ってくれなかったのでnpmを使っています。

Windowsの場合

nodeを最新版にしてたのですが、metro-config周りの正規表現エラーがでていました。

どうやら12.9.n未満以下じゃないとダメらしいのですが、
ダウングレードしなくてもファイルを書き替えると動くようです。

// \node_modules\metro-config\sr \defaults\blacklist.js

// 変更前
var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

// ↓に変更

// 変更後
var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

Windowsの場合はこれだけ突破したら後はすんなりと動いてくれました。

Ubuntuの場合

Ubuntuはnodeのバージョンを10ぐらいにしておいたので行けるかと思いきや
インストール宙に一部エラーになったのでなんぞや？と思って調べていると
どうやら権限的な問題で一部がグローバルインストールできないとのことで、
nvmかglobal用のディレクトリを変更すればよいとのことでした。

私はディレクトリ変更の方を選びました。

# ディレクトリの生成
mkdir ~/.npm-global
# 作ったディレクトリを登録
npm config set prefix '~/.npm-global'
# 環境変数を設定
echo 'export PATH="$HOME/.npm-global/bin:$PATH"' >> ~/.bashrc
# 環境変数を適用
exec $SHELL
# expo-cliをグローバルインストール
npm install -g expo-cli

これで通るはずです。

私はコレでエラーが消えました。

これでもダメならエラーコードでググってみましょう。

参考ページ

React native expo-cli permission denied リアクトインストール出来ない権限問題 EACCES mac

https://stlisacity.hatenablog.com/entry/2019/06/08/021445

WindowsのNodeバージョン対策

https://github.com/expo/expo-cli/issues/1074

expo initでプロジェクトを生成する

無事expo-cliを導入出来たらプロジェクトを作成しましょう。

expo公式の手順に沿ってやっていきます。

expo init my-new-project
cd my-new-project
expo start

インストールする際、現在のディレクトリに設定されますので
任意のディレクトリを作成してそこに移動してからインストールすることをオススメします。

これでとりあえずは動きます。

QRが出てきますが、Web版じゃないと通常じゃ読み込めません。

AndroidエミュレーターかiOSエミュレーターがあれば確認できます。

実機で確認する場合は専用のアプリがありますので、あとで紹介いたします。

expo-pixiをインストールしてサンプルを試す

やっとこさ本番です。

早速ReactNativeにPIXI.jsを組み込みます。

自力でやるととても大変なので「expo-pixi」を使います。

yarn add expo-pixi

そしてexpo-pixiの公式で記載されているexampleを試します。

しかしそのまま記述するとエラーが出てしまいます。

以下のライブラリを導入しましょう。

yarn add expo-gl

そして公式のexampleを元に以下のように書き替えます。

import React from 'react';
import { GLView } from 'expo-gl';
import { PIXI } from 'expo-pixi';

export default () => (
  <GLView
    style={{ flex: 1 }}
    onContextCreate={async context => {
      const app = new PIXI.Application({ context });
      const sprite = await PIXI.Sprite.fromExpoAsync(
        'https://i.imgur.com/uwrbErh.png',
      );
      app.stage.addChild(sprite);
    }}
  />
);

後は保存して

yarn start

で立ち上がります。

スマホアプリから開発サーバーにアクセスしよう

開発サーバーを立ち上げてもエミュレーターを導入していなければ確認が出来ません。

なのでスマホでexpo公式のアプリを使って読み込みます。

アンドロイド版はコチラ

iOS版はコチラ

私はAndroidでしか試してませんが、どちらでも大丈夫です。

開発サーバーに表示されているQRコードをこのアプリで読み込むと、
ケーブルレスでネイティブアプリとして実行してくれます。

便利！

とおもったのですが、真っ黒のまま何も出てきません。

エラーもhttpsの警告だけで特に何もなし。

一旦開発サーバーを落として

yarn run web

でウェブ版を動かしてみると、普通に動いていました。

マリオのドット絵が表示されて居たら問題なく動いています。

コンソールログをみてみたのですが特にエラーは無し。

……わからん！

調べようにも情報が少なすぎるので、習得コストが高すぎるなーと思いここで諦めました。

これならUnityでゲーム作ってた方が将来性もあるし
わざわざReactNative+PIXI.jsというマイナー環境で作る必要も感じられなくなりました。

どうしてもJavaScriptで作りたいならRPGツクールMVを使った方が
スマホ版に簡単出力があるのでそれをつかえばいいだけですからね……

結論：ReactNativeはゲーム作りに向いていなかった

ということで、結論としてはReactNativeはあくまでWebアプリをネイティブにしたいとき
使うような代物でした。

昔のCGIゲーム風のアプリにすれば面白いかなと思ったのですが、
それならもうReact+PIXI.jsでブラウザでいいかなってなったのです。

ReactNativeはまだまだ発展途上感がすごいあるので、
もうちょっと使いやすくなったらガッツリ触ろうかなと思います。

それまではReact単体を中心に触ってた方がよさそうですね。

pixi.jsは当分はNW.jsとの組み合わせで行こうと思います。

ツクールMVでもいいんですが、モダンなコードで書けないのと
既存のコードの解読に時間がかかるのでそれなら1から自分で組み立てたくなりました。

pixi.jsについてはこれからも続けていきますのでよろしくお願いいたします。

それでは。

関連記事