React Native + Matter.js

В этом нет ничего удивительного, но в настоящее время мобильные игры занимают лидирующие позиции в цифровом мире. Итак, я попытался найти вдохновение для создания игры, но в чем же захватывающий факт этой игры? Да! вы правильно поняли, что это сделано с использованием React Native.

Несомненно, эта игра не позволила бы вам оставить свои телефоны. Обдумывая дизайн этой игры и чтобы приветствовать игроков с вышеупомянутым чувством удивления, я решил придать физическим материалам более реалистичный вид, чем раньше.

Просто хочешь проверить код? Угощайся

Https://github.com/garganurag893/Game-Using-React-Native

Сложность создания игр - это синхронизировать всю логику, которую вы хотите применить, чтобы заставить вещи двигаться, например, в моем случае я хочу использовать гравитацию. React Native не предоставляет никаких функций для обеспечения гравитации, поэтому в этом случае мне пришла в голову идея использовать Matter.js.

Что такое Matter.js? Matter.js - это 2D-физический движок, который поможет нам добавить физику в React Native. Но один только файлatter.js не справится с этим, поэтому мы должны использовать react-native-game-engine, который поможет нам легко настроитьatter.js с React Native.

Итак, начнем с создания нового приложения:

npx react-native init GameApp

Теперь нам нужно добавить react-native-game-engine и Matter.js:

npm install matter-js react-native-game-engine --save

Всегда полезно начинать писать код в правильной структуре папок, чтобы сэкономить время на рефакторинге кода. Вы можете следовать любой структуре папок, которую хотите использовать, я буду следовать приведенной ниже структуре папок:

Теперь пришло время, наконец, начать кодировать ... Нам нужно создать мир и добавить к нему самолет.

App.js ☟

src / entity / index.js ☟

src / components / Plane.js ☟

Теперь давайте просто добавим немного физики, чтобы гравитация могла творить чудеса… ✨

По умолчанию Matter предоставляет миру гравитацию 1.0, но для большей гладкости мы установим ее на 0.25. Теперь мы будем использовать функцию обновления материи.js, которая обновит последнее значение всех сущностей, присутствующих в его мире, и будет обернута в свойства системы RNGE, которые вызывают переданный набор функций в цикле периода.

Обновите App.js ☟

import Systems from './src/systems';
<GameEngine
    ref={(ref) => { this.gameEngine = ref; }}
    style={styles.gameContainer}
    running={this.state.running}
    systems={Systems}
    entities={this.entities}>
</GameEngine>

src / systems / index.js ☟

import Physics from './physics';
export default [Physics];

src / systems / Physics.js ☟

Пришло время заставить этот самолет летать… 🚀

Matter.js предоставляет несколько функций, с помощью которых мы можем решить эту проблему. Тот, который мы собираемся использовать, это setVelocity, который может вызываться при прикосновении к экрану, и здесь RNGE играет свою роль, предоставляя нам событие касания.

src / systems / plane.js ☟

Обновите src / systems / index.js:

import Physics from './physics';
import Plane from './plane';
export default [Physics, Plane];

Теперь пришло время добавить пол и потолок, чтобы мы могли определять, когда происходит столкновение, иначе наш самолет никогда не перестанет падать ...

src / components / Floor.js ☟

src / components / Ceiling.js ☟

Обновите src / entity / index.js ☟

import Floor from '../components/Floor';
import Ceiling from '../components/Ceiling';
Floor: Floor(world,'white',{x: width / 2, y: height - 50},{height: 100, width: width}),
Ceiling: Ceiling(world,'white',{x: width / 2, y: 0},{height: 100, width: width}),

В материи.js, применяя isStatic, мы можем сделать пол и потолок статичными телами, которые никогда не могут менять положение или угол и полностью фиксированы. С помощью этого мы теперь можем предотвратить падение самолета или его пролет над нашей игровой зоной.

Пришло время сделать нашу игру более интересной, добавив препятствия и повысив уровень сложности.

src / components / Obstacle.js ☟

src / utils / random.js ☟

Мы будем использовать Math.random для получения разных размеров для каждого препятствия.

src / utils / constants.js ☟

const Constants = {
TOP_PIPE_WIDTH: 250,
BOTTOM_PIPE_WIDTH: 100,
};
export default Constants;

Обновите src / entity / index.js ☟

import Obstacle from '../components/Obstacle';
import {getRandom,topObstacleHeight,topObstacleHeight} from '../utils/random';
import Constants from 'src/utils/constants';
Obstacle1: Obstacle(world,'top',{x: width * 2 - Constants.TOP_PIPE_WIDTH / 2, y: getRandom(100, 400)},{height: topObstacleHeight, width: Constants.TOP_PIPE_WIDTH}),
Obstacle2: Obstacle(world,'bottom',{x: width - Constants.BOTTOM_PIPE_WIDTH / 2,y: getRandom(400, 700)},{height: bottomObstacleHeight, width: Constants.BOTTOM_PIPE_WIDTH}),

Но создания препятствий недостаточно, нам нужно перемещать эти препятствия и создавать бесконечные препятствия. Для достижения этой цели нам нужно использовать material.js.

src / systems / preventle.js ☟

Обновите src / systems / index.js:

import Physics from './physics';
import Plane from './plane';
import Obstacle from './obstacle';
export default [Physics, Plane, Obstacle];

Matter.js имеет функцию translate, с помощью которой мы можем изменить положение по заданному вектору относительно его текущего положения, не сообщая никакой скорости. Благодаря этому мы получаем иллюзию движущихся препятствий.

Если положение по оси X тела препятствия становится отрицательным по отношению к его ширине, это означает, что оно покинуло экран. В это время мы можем установить положение этого тела в 2 раза больше его исходной позиции, и поэтому этот цикл будет повторяться, делая его бесконечным.

Наконец, мы хотим проверить, когда произошло столкновение, чтобы мы могли остановить игру и объявить счет.

Matter.Events. On помогает передать функцию обратного вызова всякий раз, когда происходит определенное событие. С помощью этого метода мы легко можем добавить событие столкновения.

Обновите src / systems / .js:

Matter.Events.on(engine, 'collisionStart', (event) => {
    dispatch({ type: "game-over"});         
});

Обновите App.js:

onEvent = e => {
if (e.type === 'gameOver') {
Alert.alert('Game Over');
this.setState({running: false,});
} 
};

<GameEngine
    ref={(ref) => { this.gameEngine = ref; }}
    style={styles.gameContainer}
    onEvent={this.onEvent}
    running={this.state.running}
    systems={Systems}
    entities={this.entities}>
</GameEngine>

Ыйыыыы !!! Мы нашли новую игру, к которой можно пристраститься…