matter.js 上的 App 和 Physics 中的世界和实体不同

Question

我正在尝试使用 matter.js 在 React Native 上编写一个 flappy bird 游戏。我按照在线教程创建了一个 flappy bird 游戏。但我想更进一步，自己做一些事情来练习我从教程中学到的东西。我想创建一个开火按钮，当用户单击它时，火就会发送到管道。

当我第一次运行这个应用程序时，这个发送就可以了。但是在游戏结束后，用户点击任何东西并开始新游戏。这一次，开火按钮不起作用。我调试并看到在 App.js 文件中，世界和实体已更新。我的火对象已创建。但我没有在屏幕上看到它。当我检查 Physics.js 中的实体时，它们实际上并未创建。

这里是我生火的相关代码。

onFirePress = () => {
    let bird = this.entities.bird.body;
    console.log("bird position:"+bird.position.x, bird.position.y)
    const fireObj = {};

    fireObj["fire" + this.state.fireCounter.toString()] = Matter.Bodies.rectangle(
      bird.position.x + 50,
      bird.position.y,
      constants.FIRE_SIZE,
      constants.FIRE_SIZE,
      { isStatic: true },
    );
    let world = this.entities.physics.world;
    Matter.World.add(world, [fireObj["fire" + this.state.fireCounter.toString()]])

    this.entities['fire' + this.state.fireCounter ] = { body: fireObj["fire" + this.state.fireCounter.toString()], renderer: Fire };

    let fireList = Object.keys(this.entities).filter(key => key.slice(0,4) === "fire");
    console.log(fireList);

    this.setState({ fireCounter: this.state.fireCounter + 1 });
  }

这是我在 App.js 中的重置功能。

  reset = () => {
    this.gameEngine.swap(this.setupWorld());
    this.setState({ running: true, score: 0,  })
  }

并在 App.js 中呈现。

render() {
    return (
      <View style={styles.container}>
        <Image source={Images.background} resizeMode={"stretch"} style={styles.backgroundImage} />
        <GameEngine
          ref={ref => {
            this.gameEngine = ref;
          }}
          style={styles.gameContainer}
          running={this.state.running}
          onEvent={this.onEvent}
          systems={[Physics]}
          entities={this.entities}>
          <StatusBar hidden={true} />
        </GameEngine>
        <Text style={styles.score}>{this.state.score}</Text>
        <TouchableOpacity style={styles.fireButtonWrapper} onPress={this.onFirePress}>
          <Image source={Images.fireButton} style={styles.fireButton} />
        </TouchableOpacity>
        {!this.state.running && <TouchableOpacity onPress={this.reset} style={styles.fullScreenButton} >
          <View style={styles.fullScreen} >
            <Text style={styles.sectionTitle} >Game Over!</Text>
          </View>
        </TouchableOpacity>}
      </View>

    );
  }

这是我的相关 Physics.js 文件代码。

const Physics = (entities, { touches, time, dispatch }) => {
  let engine = entities.physics.engine;
  let world = entities.physics.world;
  let bird = entities.bird.body;
let fireList = Object.keys(entities).filter(key => key.slice(0,4) === "fire");

  if(fireList && fireList.length > 0 && consoleOn){
    console.log(fireList);
    consoleOn = false;
  }

  if (tick % 3 === 0 ){
    if (fireList && fireList.length > 0) {
      fireTurn++;
      fireList.forEach(fire => {
        entities[fire].pose = fireTurn *20
      })
    }
  }

  if (fireList && fireList.length > 0){
    console.log(fireList);
    fireList.forEach(fire => {
      if(entities[fire].body.position.x - constants.FIRE_SIZE/ 2 > constants.MAX_WIDTH){
        delete (entities[fire]);
      }else
        Matter.Body.translate(entities[fire].body, {x:2, y:0})
    })
  }


  Matter.Engine.update(engine, time.delta);

  return entities;
};

export default Physics;

Answer 1

这与 matter-js 无关。它与 react-native-game-engine 有关，当我浏览 matter-js 和 react-native-game-engine 的文档时，我更改了我的体系结构并在 Physics 中将我的火体创建为同一对象。但是当我将它们添加到 gameEngine 时，我给它们起了一个独特的名字。这样就成功了。

matter.js 上的 App 和 Physics 中的世界和实体不同

World and Entities are not same in the App and Physics on matter.js

javascript

react-native

matter.js