我的React Native游戏引擎之旅第二部分：添加触摸和弹跳

在第一部分中，我有一个关于如何使用React Native Game Engine入门的教程，使用Matter.js 在世界上添加重力并在屏幕上渲染掉落的盒子。

坠落的盒子不是超级互动的，所以让我们学习如何为GameEngine增加触感。

• 游戏的重点是什么
• Hansel和Gretel —个人游戏
• 为什么要回到游戏开发领域？
• GameDev的想法：如何成为一个更有生产力的游戏开发商
• 期待已久的CryEngine V检查

为了添加触摸检测，我们需要向系统添加另一个功能。 在我们的App类上方，创建一个名为CreateBox的新函数。

  let boxIds = 0; const CreateBox =（实体，{触摸，屏幕}）=> { 
 让世界=实体[“ physics”]。world; 
 让boxSize = Math.trunc（Math.max（screen.width，screen.height）* 0.075）; 
  touches.filter（t => t.type ===“ press”）。forEach（t => { 
 让body = Matter.Bodies.rectangle（ 
  t.event.pageX，t.event.pageY， 
  boxSize，boxSize， 
  {摩擦空气：0.021}）； 
  Matter.World.add（world，[body]）; 
 实体[++ boxIds] = { 
 身体：身体， 
 大小：[boxSize，boxSize]， 
  color：boxIds％2 == 0？  “ pink”：“＃B8E986”， 
 渲染器：盒子 
  }; 
  }）; 
  返回实体； 
  }; 

CreateBox将实体 ， 触摸和屏幕作为其参数。 如第一部分所述， 系统可以将触摸和屏幕作为参数传递。 就像函数外部一样， 屏幕用于确定boxSize的大小。 对于那些认为这是多余的人，您是对的。 但是，我们可以稍后重构代码，并且当我们这样做时以这种方式进行有意义。

触摸是一个数组，在用户每次触摸屏幕时都会存储该数组，并向其中存储某种类型的内容，例如“触摸”或“按下”。 我们采用此数组并过滤“ press”类型。 对于找到的每个印刷机，我们在其位置添加一个新的Rectangle 实体 ，将其添加到世界中 ，然后将其动态添加到我们的实体中 。 为了区分某些框，我们还更改了其他所有框的颜色。 添加新的Box实体后 ，我们返回新的object对象，并在幕后更新状态。

现在，让我们将CreateBox添加到GameEngine组件的Systems数组中。

 系统= {[物理，CreateBox]} 

重新启动模拟器，再加上红色框，我们现在可以单击创建框！

好吧，如果我们想在盒子里添加一些弹跳，该怎么办？

为了使Box弹起，我们需要使用称为restitution的Matter JS body属性。

恢复性定义了所应用的身体的弹性 。 恢复为0表示它是无弹性的 ，不会发生反弹。 恢复0.8表示身体以其约80％的动能反弹。 这意味着，如果箱子以100个单位的速度下降，它将以大约80个单位的速度反弹。

让我们尝试一下。

在我们的App.js中，我将使用新的恢复属性来更新CreateBox函数的let body语句。

 让body = Matter.Bodies.rectangle（ 
  t.event.pageX， 
  t.event.pageY， 
  boxSize， 
  boxSize， 
  { 
 摩擦空气：0.021， 
 恢复原状：1.0 // <---添加恢复原状属性 
  } 
  ）; 

通过添加归还，这就是我们现在创建一个框时发生的情况：

现在，当我们的盒子降落在地板上时，它们会有一点反弹！

第二部分就是这样！ 在第3部分（正在建设中）中，我将讨论如何添加蹦床和分数以将其变成小型游戏。

以下是本部分内容的要点：

App.js

Box.js

再次非常感谢bberak和liabru提供这些超赞的库！ 没有这些家伙，就无法与很棒的东西一起工作。

包含此部分代码的GitHub存储库可在以下位置找到：