我如何在 React Native 上创建我的第一个 Android 游戏

你好。我是 Progosling。我将谈谈我如何在 React Native 上编写我的第一个移动游戏。这一切都始于我为我的游戏找到了免费的图像资源。它们激励我创建了这个游戏。这里是 水、船、渔夫 和 云 的资源。

React-native 有许多社区认可的库，通常用于动画元素的移动。通常是：react-native-reanimated 和 react-native-redash。但不久前 react-native-skia 出现了。它提供了与 react-native-reanimated、react-native-redash 的集成。它还包含 Canvas，将成为我们绘图的基础。

整个游戏是使用 <Image> 组件构建的。在其中，我根据当前帧更改图片的位置。它是如何工作的？我用 <Group /> 包装了 <Image />，以便可以修剪多余的帧并仅使用 clip 属性显示当前帧。

这就是最终动画的样子。

水是一张图像，组合成一个组，并且该组的位置根据 useTiming 函数更改。对于每个水图像，当前帧根据 useTiming 更改。这使得水的移动动画更加有趣。

勺子的移动动画。取决于 useTouchHandler，并且只是根据用户点击屏幕的哪一侧在船的位置上加 +10 或 -10。船的划桨动画也从 useTouchHandler 启动，并且 runTiming 函数更改当前帧。

鱼的拉动动画从 useTouchHandler 启动，类似于船的划桨动画。但在拉动动画中，runTiming 函数中有一个特性，添加了一个回调，其中进行检查。如果钓鱼竿的位置和鱼的位置匹配，则用户获得 +1 分。分数是使用普通的 setState 计算的。

好，最后一个是初始模态窗口。这是 <Modal /> 组件。

您可以在 Google Play 上评价这个游戏 并查看 游戏网站。游戏的名称是 Fishing Pixel Art。您是否尝试过使用 react native 制作游戏？您会建议更改和优化什么？