在本系列文章中，我们将使用React Native和React Native Game Engine开发经典的《大金刚》街机游戏的翻版。 由于这将是仅限移动设备的游戏，因此我们将大大简化其原始控件-我们的游戏只能用一根手指玩。
以下是我们要实现的目标的预览：
如果您不熟悉原始游戏，我们的角色马里奥（Mario）（最初称为Jump Man）试图躲避主要对手在一系列坡道上摔下来的木桶时营救公主（原名Pauline），Kong 前往YouTube，获取我们正在构建的应用程序的游戏演示 。
为使此步伐保持良好步伐，这不是逐行教程-我们将介绍一些重要且有价值的主题。 有关完整的源代码，请参见React Native Donkey Kong 。
项目设置
初始化香草React Native或Expo项目之后 ，请安装以下先决条件：
React本机游戏引擎
该库将帮助我们循环运行游戏并管理/操纵游戏实体（玩家，弹丸，敌人，梯子，平台等）。 特别是，我们将使用GameEngine组件，它是Component-Entity-Systems模式的宽松实现。
npm install — save react-native-game-engine
JS问题
这是一个2D物理库，将帮助我们模拟弹丸沿一系列倾斜坡道的投掷（请参见上面的预览）。 这也将帮助我们将角色马里奥（Mario）朝坡道移向公主（Princess）。
npm install --save matter-js
其他NPM软件包
npm install --save lodash # Always good to have
npm install --save d3-interpolate # Will help us create a nice jump curve
精灵资源
我从Spriters Resource网站上找到了一些很棒的艺术品和资产。 在这里，我找到了大金刚的原始雪片。 他们拥有大量其他游戏的资产。
特别感谢Zeon出色的《金刚》雪片，我在整个游戏中都广泛使用它。
磷灰石
为了编辑，切片和缩放游戏的精灵，我使用了一种称为Aseprite的出色像素艺术工具。
在本教程中，我们不需要编辑任何图稿-我们只需使用React Native Donkey Kong仓库中的图像精灵即可。
发起游戏实体
游戏实体是我们游戏世界中的所有游戏对象（它们也不一定必须是可见的），我们可以根据需要添加和删除它们。 在我们的游戏中，这将包括Mario； 平台； 桶； 公主; Kong; 梯子等
首先，让我们为平台实体编码组件。 创建以下文件platform.js ：
接下来是mario.js （玩家控制的字符）：
您可能已经注意到我们引用了一个constants.js文件。 它包含碰撞类别的地图，我们的物理引擎用来确定应该碰撞的游戏实体。
让我们创建第一个（也是唯一一个）级别，创建一个名为Entitys.js的文件：
接下来，让我们更新App.js文件：
请注意，我们可以将子代传递到我们的GameEngine组件中，并且它们将在我们的实体之后呈现。
运行我们的游戏
现在我们可以启动我们的应用程序react-native run-ios，并希望我们应该能够看到我们的七个平台以及我们的GameEngine组件渲染的Mario
我应该注意，我们正在做的所有事情也将在Android上运行-为了简洁起见，我只是坚持使用iOS。
接下来
在下一篇文章中，我们将开始连接系统并用一些简单的手势移动角色。
跟随我（ bberak ）保持关注。
链接与资源
翻译自: https://hackernoon.com/making-a-platforming-game-with-react-native-4682b4d4d209
扫一扫
565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
