My Journey with React Native Game Engine Part II: Adding Touch and Bounce

In Part I, I had a tutorial on how to get started with React Native Game Engine, use Matter.js to add gravity to a world and render a falling Box on the screen.

Simple red box falling with gravity

A falling Box isn’t super interactive, so let’s learn how to add touch to our GameEngine.

Touch to Create a Box

In order to add touch detection, we need to add another function to our Systems. Above our App class, create a new function called CreateBox.

let boxIds = 0;
const CreateBox = (entities, { touches, screen }) => {
    let world = entities["physics"].world;
    let boxSize = Math.trunc(Math.max(screen.width, screen.height) * 0.075);
    touches.filter(t => t.type === "press").forEach(t => {
            let body = Matter.Bodies.rectangle(
                       t.event.pageX, t.event.pageY, 
                       boxSize, boxSize,
                       { frictionAir: 0.021 });
            Matter.World.add(world, [body]);
                entities[++boxIds] = {
                    body: body,
                    size: [boxSize, boxSize],
                    color: boxIds % 2 == 0 ? "pink" : "#B8E986",
                    renderer: Box
                };
             });
    return entities;
};

CreateBox takes in entities, touches, and screen as its parameters. As explained in Part I, Systems can pass in touches and screen as parameters. Screen is used for determining the size of boxSize, just like outside of the function. For those thinking this is redundant, you’re right. However, we can refactor the code later and having it this way will make sense when we do.

Touches is an array that stores every time the user touches the screen, and stores a certain type to it, such as ‘touch’ or ‘press.’ We take this array and filter for the ‘press’ type. For each press found, we add a new Rectangle body at its location, add it to the world, and dynamically add it to our entities. To differentiate some boxes, we also change every other box color. After adding a new Box entity, we return our new entities object, and update our state behind the scenes.

Now, let’s add CreateBox to the Systems array in the GameEngine component.

systems={[Physics, CreateBox]}

Restart the simulator, and along with our falling red box, we can now click to create boxes!

Create a box with just clicking!

Well, what should we do if we want to add some bounce to the boxes?

Adding Friction and Restitution

In order to make the Box bounce, we need to use a Matter JS body property called restitution.

Restitution defines the elasticity of the body it is applied to. A restitution of 0 means it is inelastic and no bouncing occurs. A restitution of 0.8 means the body bounces back with approximately 80% of its kinetic energy. This means if a box goes down at 100 units of speed, it’ll bounce back about at about 80 units of speed.

Let’s give this a try.

In our App.js, I’m going to update the CreateBox function’s let body statement with a new restitution property.

let body = Matter.Bodies.rectangle(
    t.event.pageX,
    t.event.pageY,
    boxSize,
    boxSize,
    { 
      frictionAir: 0.021,
      restitution: 1.0    // <--- Added restitution property
    }
);

By adding restitution, this is what happens when we create a box now:

Now our boxes have a little bounce when they land on the floor!

Conclusion

That’s it for Part 2! In Part 3 (under construction), I will talk about how to add trampolines and a score to turn this into a small game.

Here are the gists for what we went over in this part:

App.js

Box.js

Links and Resources

Once again, big thanks bberak and liabru for these awesome libraries! Wouldn’t be able to work with something awesome without these guys.

bberak/react-native-game-engine

liabru/matter-js

The GitHub repo with the code for this part can be found here:

m1771vw/MediumBouncingBlock