使用 Matter.js 在 React Native 中实现物体下落

背景

最近学校有个作业，用 React Native 做个游戏。我想在里面加一些物理效果，比如物体下落。如果自己写的话会比较麻烦，不如直接用现有工具。

使用 React Native 的一大好处就是，可以直接用现成的 JavaScript 库，比如物理引擎 Matter.js。

Matter.js 简介

简单来说，Matter.js 分为两部分：

• 物理引擎（Matter.Engine）：你可以创建一些物体，指定物体的属性（例如初识位置、大小、是否受重力，等等）、物体之间的相互作用（比如物体之间的连接）或者外界作用（比如点击鼠标时施加作用力），之后引擎会根据物理规律，计算这些物体在之后每一时刻的位置；
• 渲染器（Matter.Render）：你可以使用 Matter.js 提供的渲染器，方便地把这些物体绘制在 canvas 上，以便进行可视化；

在很多情况下，其实你不需要使用 Matter.js 提供的渲染器。在 HTML 中，你可以使用 p5.js 之类的库轻松实现 canvas 绘制，并且对绘制拥有更多的控制。

在 React Native 中，一般来说用 StyleSheet（相当于 CSS）实现绘制就可以了。（如果想用 canvas 的话则需要借助第三方库，且其通过 WebView 实现，可能会影响性能。）

使用 Matter.js 实现物体下落

示例代码如下：

import { useEffect, useState } from 'react';
import { View, Dimensions } from 'react-native';
import { Engine, Runner, Bodies, Composite} from 'matter-js';

const WINDOW_WIDTH = Dimensions.get('window').width;
const WINDOW_HEIGHT = Dimensions.get('window').height;
const BOX_INIT_X = WINDOW_WIDTH/2;
const BOX_INIT_Y = WINDOW_WIDTH/2;
const BOX_SIZE = WINDOW_WIDTH / 5;
const GROUND_X = WINDOW_WIDTH / 2;
const GROUND_Y = WINDOW_HEIGHT;
const GROUND_HEIGHT = 100;

export default function App() {
  const [positionX, setPositionX] = useState(BOX_INIT_X)
  const [positionY, setPositionY] = useState(BOX_INIT_Y)

  useEffect(() => {
    const engine = Engine.create(); // 创建物理引擎

    // 创建一个盒子物体
    const boxA = Bodies.rectangle(
      BOX_INIT_X, 
      BOX_INIT_Y, 
      BOX_SIZE, 
      BOX_SIZE
    );
    // 创建地面
    const ground = Bodies.rectangle(
      GROUND_X, 
      GROUND_Y, 
      WINDOW_WIDTH, 
      GROUND_HEIGHT, 
      { isStatic: true }
    );

    // 把盒子和地面加入到物理引擎中
    Composite.add(engine.world, boxA);
    Composite.add(engine.world, ground);

    // 运行物理引擎
    const runner = Runner.create();
    Runner.run(runner, engine);

    // 每隔 30 ms 获取物体的最新位置并绘制
    const timer = setInterval(() => {
      setPositionX(boxA.position.x)
      setPositionY(boxA.position.y)
    }, 30)
  
    return () => {
      clearInterval(timer);
    };
  }, []);

  const boxStyle = {
    position: 'absolute',
    left: positionX - BOX_SIZE/2, // 盒子的 x 轴位置
    top: positionY - BOX_SIZE/2, // 盒子的 y 轴位置
    width: BOX_SIZE,
    height: BOX_SIZE,
    backgroundColor: 'red'
  }
  
  return <View style={boxStyle} />;
}

效果如下：

参考链接

Matter.js Getting started