Qual é a experiência de desenvolver jogos com ReactNative

Em muitos casos, precisamos adicionar elementos de jogo ao aplicativo, como software de aprendizagem para crianças. A forma do jogo será mais conveniente.

O objetivo deste artigo é explorar a possibilidade de usar o RN para desenvolver jogos, as tentativas feitas neste artigo estão longe de desenvolver um jogo completo.

pronto:

1. Instalando o ambiente de desenvolvimento RN
   Os artigos e materiais de instalação do RN devem estar disponíveis em todo o mundo, então não vou repetir aqui.

2. Instale a Expo

yarn global add expo-cli

Criar:

Neste artigo, Expo é usado para criar apps, o que também é tendência.

expo init ballcap

Selecione o primeiro item em branco

levar a cabo

O diretório do projeto recém-criado é o seguinte:

.
├── .expo
├── .expo-shared
├── .git
├── .gitignore
├── App.js
├── app.json
├── assets
│   ├── adaptive-icon.png
│   ├── favicon.png
│   ├── icon.png
│   └── splash.png
├── babel.config.js
├── node_modules
├── package.json
├── project.txt
└── yarn.lock

É muito mais simples do que o projeto tradicional do RN.

corre

Execute o seguinte comando:

yarn android

Você verá um enorme código QR:

Digitalize o código QR com Expo em seu telefone para executar o aplicativo em seu telefone, conforme mostrado na figura:

Até agora nossos preparativos estão prontos e podemos jogar felizes.

Desenvolvimento:

Apresentar mecanismo de jogo: RNGM

安装 npm: react-native-game-engine

yarn add react-native-game-engine

Modificar App.js

antes de consertar:

import {
    
     StatusBar } from 'expo-status-bar';
import React from 'react';
import {
    
     StyleSheet, Text, View } from 'react-native';

export default function App() {
    
    
  return (
    <View style={
    
    styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
    
    
  container: {
    
    
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Após modificação:

import {
    
     StatusBar } from 'expo-status-bar';
import React from 'react';
import {
    
     StyleSheet, Text, View } from 'react-native';
// 添加游戏引擎1/2
import {
    
     GameEngine } from "react-native-game-engine";

export default function App() {
    
    
  // 添加游戏引擎2/2
  return (
    <GameEngine style={
    
    styles.container}>
      <StatusBar hidden={
    
    true} />
    </GameEngine>
  );
}

const styles = StyleSheet.create({
    
    
  container: {
    
    
    flex: 1,
    backgroundColor: '#fff',
  },
});

Recarregue seu aplicativo neste momento e você verá que o mundo inteiro está limpo:

"Uma captura de tela branca é omitida aqui"

Adicionar objetos

Acabar com o estado de vazio

Adicionar Bola

Novo Ball.js:

import React, {
    
     Component } from "react";
import {
    
     View } from "react-native";
import {
    
     array, object, string } from 'prop-types';

export default class Ball extends Component {
    
    
  render() {
    
    
    const width = this.props.size[0];
    const height = this.props.size[1];
    const x = this.props.body.position.x - width / 2;
    const y = this.props.body.position.y - height / 2;
    const minSize = Math.min(width, height);
    return (
      <View
        style={
    
    {
    
    
          position: "absolute",
          left: x,
          top: y,
          width: width,
          height: height,
          backgroundColor: this.props.color || "orange",
          borderWidth: 2,
          borderRadius: minSize / 2,
          borderColor: 'black'
        }} />
    );
  }
}

Ball.propTypes = {
    
    
  size: array,
  body: object,
  color: string
}

Não é diferente de outros componentes RN, simplesmente transforma uma vista quadrada com cantos arredondados em um círculo.

Em seguida, modifique App.js para importar Ball e adicionar o objeto ball:

// ...
import {
    
    
  Dimensions,
  // ...
} from 'react-native';
// ...
// 添加Ball 1/2
import Ball from './Ball';
const {
    
     width, height } = Dimensions.get("screen");
const ballSize = Math.trunc(Math.max(width, height) * 0.075);
const ball = {
    
     position: {
    
     x: width / 2, y: height / 2 } };


export default function App() {
    
    
  // 添加游戏引擎2/2
  return (
    <GameEngine
      style={
    
    styles.container}
      entities={
    
    {
    
    
        // 添加Ball 2/2
        ball: {
    
    
          body: ball,
          size: [ballSize, ballSize],
          color: '#f93',
          renderer: Ball
        }
      }} >
      <StatusBar hidden={
    
    true} />
    </ GameEngine>
  );
}
// ...

O efeito de recarga é mostrado na figura:

Adicionar parede

Criar código de adição de Wall.j

Na verdade, um componente semelhante ao Ball:

"Omita 29 linhas do código-fonte do Wall aqui"

Adicionar parede em App.js

//...
// 添加Walls 1/3
import Wall from './Wall';

const ball = createObject(width / 2, height / 2);

//...
// 添加Walls 2/3
const wallColor = "#335"
const wallSize = ballSize / 4;
const floor = createObject(width / 2, height - wallSize / 2);
const leftwall = createObject(wallSize / 2, height / 2);
const rightwall = createObject(width - wallSize / 2, height / 2);

export default function App() {
    
    
  // 添加游戏引擎2/2
  return (
    <GameEngine
      style={
    
    styles.container}
      entities={
    
    {
    
    
        // 添加Ball 3/3
        ball: {
    
    
          //....
        },
        // 添加Walls 3/3
        leftwall: {
    
    
          body: leftwall,
          size: [wallSize, height],
          color: wallColor,
          renderer: Wall
        },
        rightwall: {
    
    
          body: rightwall,
          size: [wallSize, height],
          color: wallColor,
          renderer: Wall
        },
        floor: {
    
    
          body: floor,
          size: [width, wallSize],
          color: wallColor,
          renderer: Wall
        }
      }} >
      <StatusBar hidden={
    
    true} />
    </ GameEngine>
  );
}
//...

O efeito é o seguinte:

Adicionar matéria do motor de física

Deixe os objetos se moverem de acordo com as leis da física

expo install matter-js poly-decomp 

ou

yarn add matter-js poly-decomp 

Criar arquivo Physics.js

import Matter from "matter-js";

// 创建引擎
const engine = Matter.Engine.create({
    
     enableSleeping: false });
const world = engine.world;
// 引擎对象
export const physicsEntity = {
    
    
  engine: engine,
  world: world
};

// 更新引擎
export const Physics = (entities, {
    
     time }) => {
    
    
  let engine = entities["physics"].engine;
  Matter.Engine.update(engine, time.delta);
  return entities;
};


//创建墙
export const createWall = (x, y, w, h) => {
    
    
  const wall = Matter.Bodies.rectangle(x, y, w, h, {
    
     isStatic: true })
  Matter.World.add(world, wall);
  return wall;
};

//创建球
export const createBall = (x, y, r) => {
    
    
  const ball = Matter.Bodies.circle(x, y, r, {
    
     frictionAir: 0.021 });
  Matter.World.add(world, ball);
  return ball;
}

Modifique App.js:

//...

import {
    
     Physics, physicsEntity, createWall, createBall } from './Physics';

// const createObject = (x, y) => ({ position: { x: x, y: y } });

// 添加Ball 2/3
const {
    
     width, height } = Dimensions.get("screen");
const ballSize = Math.trunc(Math.max(width, height) * 0.075);
const ball = createBall(width / 2, height / 2, ballSize / 2);

// 添加Walls 2/3
const wallColor = "#335"
const wallSize = ballSize * 0.5;
const floor = createWall(width / 2, height - wallSize / 2, width, wallSize);
const leftwall = createWall(wallSize / 2, height / 2, wallSize, height);
const rightwall = createWall(width - wallSize / 2, height / 2, wallSize, height);

export default function App() {
    
    
  // 添加游戏引擎2/2
  return (
    <GameEngine
      style={
    
    styles.container}
      systems={
    
    [Physics]}
      entities={
    
    {
    
    
        physics: physicsEntity,
        // 添加Ball 3/3
        ball: {
    
    
          // ...
        },
        //  ...
      }} >
    </ GameEngine>
  );
}
//...

O efeito é o seguinte:

Adicionar evento de clique

Cada vez que tocamos na tela, uma esfera é criada.

Adicionar CreateBalls em Physics.js

// 点击创建球
let ballIndex = 1;
const ballColors = [ "#f93", "#f39", "#9f3", "#3f9", "#93f", "#39f"];
export const CreateBalls = (renderer)=> (entities, {
    
     touches, screen }) => {
    
    
  const ballSize = Math.trunc(Math.max(screen.width, screen.height) * 0.075);
  
  touches.filter(t => t.type === "press").forEach(t => {
    
    
    entities[++ballIndex] = {
    
    
      body: createBall(t.event.pageX, t.event.pageY, ballSize / 2),
      size: [ballSize, ballSize],
      color: ballColors[ballIndex % ballColors.length],
      renderer: renderer
    };
  });
  return entities;
};

Adicionar App.js

//...
import {
    
    
  //...
  createBall,
  CreateBalls
} from './Physics';

// ...
export default function App() {
    
    
  // 添加游戏引擎2/2
  return (
    <GameEngine
      systems={
    
    [Physics, CreateBalls(Ball)]}
      entities={
    
    {
    
    
        //...
      }} >
      <StatusBar hidden={
    
    true} />
    </ GameEngine>
  );
}
//...

Adicione um sensor de gravidade

expo install expo-sensors

Se você não usa Expo, você pode adicionar sensores nativos de reação, com uso semelhante

Modificar Physics.js

//...
import { useState, useEffect } from 'react';
import { Accelerometer } from 'expo-sensors';
//...
export const useAccelerometer = () => {
  const [subscription, setSubscription] = useState(null);
  const subscribeAccelerometer = () => {
    setSubscription(
      Accelerometer.addListener(accelerometerData => {
        const { x, y, z } = accelerometerData;
        world.gravity.x = -x;
        world.gravity.y = y;
      })
    );
  };

  const unsubscribeAccelerometer = () => {
    subscription && subscription.remove();
    setSubscription(null);
  };

  useEffect(() => {
    subscribeAccelerometer();
    return () => unsubscribeAccelerometer();
  }, []);
} 

Modifique o App.js para chamar useAccelerometer

// ...
import {
    
    
  // ...
  CreateBalls,
  useAccelerometer
} from './Physics';
// ...
export default function App() {
    
    
  useAccelerometer()
  // 添加游戏引擎2/2
  return (
    <GameEngine>
    //...
    </ GameEngine>
  );
}

Agora você pode alterar a direção da gravidade ajustando o ângulo do telefone, o efeito é como mostrado na figura:

Materiais de referência:

Minha jornada com React Native Game Engine - Parte I: Iniciando o projeto

My Journey with React Native Game Engine - Parte II: Adicionando Touch and Bounce

expo acelerômetro

Endereço de Origem

https://github.com/caojianfeng/ballcup

Resumindo

Usar a combinação de sensores RNGM + Matter + para desenvolver jogos tem vantagens óbvias:

1. Bom e fácil.
2. A quantidade de código é pequena e fácil de manter.
3. O desempenho é bom e não congela em cenários gerais.

Indique a fonte para reimpressão e mantenha o artigo intacto.
Qual é a experiência de desenvolver jogos com ReactNative: https://juejin.cn/post/6916101003322327054/