あなたはどのくらいのネイティブが扱うことができる反応を考えたことがありますか?私.
反応と最初の小さなWebプロジェクトを書いた後、何かが反応ネイティブと呼ばれることを知っている、私はそれをゲームを構築できるかどうか疑問に思っています.

それはあまりにも遅いゲームですか？

JavaScriptが解釈された言語であるので、ゲームを作るのが遅すぎると思いました.
だから、私はパフォーマンスに私の期待を限定し、シンプルなカジュアルゲームを構築することを決めた.
そうだと思いました.私が最適化に関して高いレベルの専門知識を持っていないので、私が決めた良いことです.
私はカスタムアニメーションエンジンと20ナイーブの表示コンポーネントで構成されている粒子の効果をテストしたときにネイティブの反応は本当に遅くなった.それで、私はどんな視覚効果にでもあきらめて、ゲーム自体に集中しました.
あなたが視覚効果の多くを持っているアプリを構築するために計画している場合はい、反応ネイティブはあなたを失望させる.しかし、単純な相互作用に固執するならば、それはすばらしいです.

すみません、どんなゲームですか。

これは、マルチプレイをサポートするカジュアルなパズルゲームです.
ルールは非常に簡単です.並べ替えなしで時間内のすべての色のブロックを並べ替えます.

どうやって開発したの？

私はクライアントとサーバのためにtypescriptを使用しました.私がそれを使用しなかったならば、それはすべての変数とパラメタを追跡するのが全く難しいということでした.
開発サイクルは省略できます.

0. Configure dev routes and production routes.
1. Make components, hooks, and utils.
2. Test each modules on dev routes.
3. Build screens with components.
4. Test screens on release build.
5. Go to 1.

100以上のモジュール(すべてのutils , screen , component , hookを含む)があります.

ブロックをレンダリングするコンポーネントのブロック反応.

NatiVerefboxアニメーションを処理するためのコンポーネントを反応させる.

NatiVerefblockboardボードのコンポーネントの反応.

ソケット通信を扱うためのUSMattigameSocketフック.

Generatorマップを生成する関数です.

他の構成要素はいくぶん自己説明的なので、NATIVEREFBOXについて説明したいと思います.なぜなら、この名前は非常に曖昧であり、このプロジェクトの重要な要素であると私は信じています.

ナチヴェルフボックス？何ですか。

私は、ブロックをアニメーション化するとき、より高いパフォーマンスを必要としてそれを構築しました.最初に、私はアニメーションAPIを使用しました、しかし、それは非常に遅くて遅れているようでした.(振り返ってみると、interactionManagerを適切に使用していたら、それは異なっていたかもしれません).
私が知っていた他の唯一の選択肢が複数回再レンダリングコンポーネントであったので、私はプロジェクトをあきらめることについて考えました.
それから、私はResponnativePropsと呼ばれる方法がほとんどの反応しているネイティブのコンポーネントにあるとわかりました.レンダリングされたコンポーネントを直接操作することができました.

うーん、その方法を使うのは大丈夫？

告白するには、反応は、プロップベースの操作、REFベースではなく、反応を推奨する方法のトラックを少しオフです.
しかし、私はそれを必要とし、setnativepropsを使用して自分のコンポーネントを構築しようとしました.
結果?SetnativePropsメソッドは、アニメーションよりも高速だった.Animated APIが多くの豊富な機能をサポートしているからです.
あなたはアニメーションのNativerefboxを使用する場合はどのように見えるか?
はい.

アニメーションを用いたスケールアップアニメーション

const popAnim = React.useRef<Animted.Value>(new Animated.Value).current;

const scale = popAnim.interpolate({
  inputRange: [0, 1],
  outputRange: [1, 2],
});

const popup = (callback?: () => any) => {
  Animated.timing(popAnim, {
    toValue: 1,
    easings: Easing.elastic(7),
    duration: 1000,
    useNativeDriver: false,
  }).start(callback)
}

React.useEffect(() => {
  popup();
})

return (
  <Animated.View style={{transform: [{scale:scaleAnim}]}}>
    <Target/>
  </Animated.View>
)

Nativerefboxを用いたスケールアップアニメーション

const boxRef = React.useRef<NativeRefBox>(null);

React.useEffect(() => {
  boxRef.animate({
    style: {
      scaleX: 2,
      scaleY: 2,
    },
    duration: 1000,
    easing: "easeOutElastic",
  }).start(() => {
    console.log("Animation Finished");
  });
}, [])

return (
  <NativeRefBox>
    <Target/>
  </NativeRefBox>
)

面白い?でも。

あなたは“hmm、私はアニメーションのAPIを読みやすく維持すると思うかもしれない”と思うかもしれない
まあ、私はそれが便利だとは言わなかった
複雑なアニメーションがないとき、私はSetnativePropsを使用したが、それが複雑になるたびに、私はゲームのシーンで使用されるアニメーションを除いて、アニメーションAPIを使用しました.
私が提案したいものは、それがパフォーマンスを向上させることができるので、あなたがSetnativePropsを単純なアニメーションのために使うことができるということです.しかし、複雑なアニメーションに直面したときには、あなたが混乱してしまうので、良いコンポーネントやユーティリティを構築する必要があるかもしれません.
あなたがSetnativePropsを使用して独自のアニメーションモジュールを構築することに興味があるなら、私はあなたがlassyされてからあなたのアプリを保存するので、最初に約InteractionManagerを確認してほしい.(残念でしたが……)
Nativerefbox hereのコードを見ることができます.(関数を緩和する必要がある場合、here ).

Gitを見ることができますか？

そうです.どうぞ、秘密にしておきたいです.

ディレクトリ構造を表示できます.

Clientディレクトリツリー(深さ= = 1 )

./src/
├── Language
├── algo
├── api
├── assets
├── components
├── hooks
├── redux
├── router
├── screens
└── types

Serverディレクトリツリー(深さ= = 1 )

./src/
├── algo
├── asset
├── controller
├── entity
├── migration
├── route
├── utils
└── websocket

あなたがスタートに戻るならば、あなたは何を修正しますか？

かも.私は、素晴らしいポートフォリオウェブサイトを構築するために捧げます.
それ以外は、このAPIが相互作用のパフォーマンスを改善するのを助けることができるので、InteractionManagerを最初に勉強します.その後、より良い読みやすさとパフォーマンスを持つNativerefboxを構築します.それから、私はソケット通信のためにより繊細なモデルを設計します.

リンク?

アプリのPlaystore Link
...AppStoreのリンク?
残念ながら、私はMacBookを持っていません.

それだけですか。

もっとお話したいことがありますが、今はシンプルにしたいです.
それは今のところプロジェクトをラップするために少しunsastisfactoryですが、クライアントとサーバーの両方のために様々なutils、フック、およびコンポーネントを構築することはとても楽しいです.約1ヶ月2週間、多分?
私は、この卑劣な記事を言って、“あなたがネイティブの反応でゲームを構築することに興味があるなら、それは非常に単純なゲームですか?いいえ、それが他の場合は…”
フィン