ReactJS - ゲームにおすすめの方法はありますか（2Dタイルマップ）

Question

私たちは反応ネイティブの小さなモバイルゲームをやっています。しかし、今は反応ネイティブが私たちが作りたがっているものにとって良い選択であるかどうかはわかりません。

私たちのゲームは、ちょうど小さな「地図」ではなくタイルで作業しています。 1000 x 1000のタイルが、最終的には1.000.000タイルと言えます。

1）私たちの最初の試みは1 Mioをレンダリングすることでした。コンポーネント - 悪くなった。 100 x 100でも反応ネイティブでレンダリングするのは不可能です。

2）ビュー内にタイルをレンダリングするロジックを追加しました。しかし、何らかのアクション（新しいタイルがレンダリングされる）をすると、アプリは地獄のように遅いです。

3）タイルが再作成されないようにしました。代わりに、タイルが再作成される代わりに位置を変更するように、小道具を変更しました。これはまた地獄の経験として（たとえ20タイルのようなものがちょうど支柱を変えたとしても）遅れてしまった。

これらの後、私たちはReact-Nativeが私たちが作りたかったものに対しては素晴らしいパフォーマンスを持たないことを決めました：いくつかの相互作用を持つ大きなタイルマップ。

4）私たちは反応ネイティブのアプリでタイルを描画するためにキャンバスを使用することを考えていましたが、これも一般的な方法ではないようです。反応ネイティブのためのキャンバスパッケージがいくつか見つかりましたが、プロジェクトには役に立たないいくつかのコンポーネントを追加するだけです。これらのコンポーネントでは、同様にコンポーネントをレンダリングすることになります。しかし、目標は、キャンバスのメリットを利用できるようにすることです。

このようなプロジェクトを解決するための推奨方法は何でしょうか？自分のやり方でこのようなことを行うには反応ネイティブがあまりにも遅いですし、キャンバスもウェブでは使えません。あるいは、反応ネイティブがこのようなプロジェクトを解決するための間違ったシステムであるかもしれないという答えでしょうか？助言がありますか ？

Answer 1

IMHO、あなたは（タイルマップで）説明しているような反応をネイティブにすることは決して決してお勧めしません。

しかし、クリッピングを起こさずに何千ものタイルをレンダリングする可能性はありますか？ビューのクリッピングを有効にする方法はありますか？ここremoveClippedSubviewsを参照してください：https://facebook.github.io/react-native/docs/view.html

あなたはまだ私は、このようなプラグインを使用することをお勧めし、反応するネイティブでプッシュする場合：https://github.com/ProjectSeptemberInc/gl-react-native

目的はあなたのゲームのレンダリングを高速化するためのOpenGL ESのキャンバスを持つことです。

それ以外の場合、2Dゲームの場合、実際にモバイルデバイス上でゲームを実行するにはコンパイラに関する知識が必要ですが、cocos2d-jsはあなたに適しているようです（バックグラウンドはjavascriptです）。他の解決策はUnity 3D（2Dはこのエンジンで完全に見つけられる）です。各エンジンにはそれぞれ独自の賛否両論がありますので、いずれの方が適しているのかを基本レベルで試してみることをお勧めします。