/
index.js
50 lines (42 loc) · 1.67 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, { Component } from "react";
import { StatusBar, Dimensions } from "react-native";
import { GameEngine } from "react-native-game-engine";
import { Physics, CreateBox, MoveBox, CleanBoxes } from "./systems";
import { Box } from "./renderers";
import Matter from "matter-js";
Matter.Common.isElement = () => false; //-- Overriding this function because the original references HTMLElement
export default class RigidBodies extends Component {
constructor() {
super();
}
render() {
const { width, height } = Dimensions.get("window");
const boxSize = Math.trunc(Math.max(width, height) * 0.075);
const engine = Matter.Engine.create({ enableSleeping: false });
const world = engine.world;
const body = Matter.Bodies.rectangle(width / 2, -1000, boxSize, boxSize, { frictionAir: 0.021 });
const floor = Matter.Bodies.rectangle(width / 2, height - boxSize / 2, width, boxSize, { isStatic: true });
const constraint = Matter.Constraint.create({
label: "Drag Constraint",
pointA: { x: 0, y: 0 },
pointB: { x: 0, y: 0 },
length: 0.01,
stiffness: 0.1,
angularStiffness: 1
});
Matter.World.add(world, [body, floor]);
Matter.World.addConstraint(world, constraint);
return (
<GameEngine
systems={[Physics, CreateBox, MoveBox, CleanBoxes]}
entities={{
physics: { engine: engine, world: world, constraint: constraint },
box: { body: body, size: [boxSize, boxSize], color: "pink", renderer: Box },
floor: { body: floor, size: [width, boxSize], color: "#86E9BE", renderer: Box }
}}
>
<StatusBar hidden={true} />
</GameEngine>
);
}
}