Making Games

with React

Nice to meet you

Don't be afraid

of what you don't know

There's never enough time!

React is Javascript

Game engines are great

...but, it's just as fun to learn how they work

It's ok to not finish

Javascript

  1. Getting started with Parcel and Codepen

  2. How the game loop works

  3. Handling player input

  4. Detecting collisions

React

  1. Drawing with React

  2. When to use state

  3. When to use refs

  4. How to use higher-order components

Pixi

  1. Getting started with Pixi

  2. Animating sprites

React Native

  1. Getting started with iOS

  2. Rendering elements on Native

  3. Using Pixi on Native (almost)

React on the desktop

  1. ReactXP (Windows)

  2. React Native macOS

  3. Electron

Javascript (again)

  1. Using gamepads for player input

  2. Playing sounds and music

Wrapping up

  1. Game libraries worth checking out

  2. How to learn more

Getting Started

with Parcel and Codepen 

// terminal
npm install -g parcel-bundler
// index.html
<html>
    <body>
        <script src="./index.js"></script>
    </body>
</html>

// index.js
console.log("hello world")
// terminal
parcel index.html
// terminal
npm install babel-preset-env --save-dev
npm install babel-plugin-transform-object-rest-spread --save-dev
// .babelrc
{
    "presets": [
        ["env", {
            "targets": {
                "browsers": [">0.25%"]
            }
        }]
    ],
    "plugins": [
        "transform-object-rest-spread"
    ]
}

How the game loop works

  1. Draw the player

  2. Animate the player 60 frames per second

Handling player input

  1. Capture mouse and keyboard input

  2. Move player with WASD

  3. Accelerate and decelerate player

Detecting collisions

with circles

  1. Use pythagorean theorem

  2. Stop movement on collisions

Detecting collisions

with rectangles

  1. Use axis-aligned bounding boxes

  2. Talk about caveats

How can we?

  1. Add gravity

  2. Make stairs

  3. Make ladders

  4. Make mobs

  5. Add health

  6. Add projectiles

Drawing with React

  1. Look briefly at React

  2. Encapsulate player and boxes

  3. Animate all the things

// terminal
npm install react react-dom

When to use state

When to use refs

How to use higher-order components

reactjs.org/docs/forwarding-refs.html

Getting started with Pixi

// terminal
npm install pixi.js react-pixi-fibre

github.com/michalochman/react-pixi-fiber

  1. animated sprites

  2. masking

  3. blend modes

  4. particles

  5. filters

  6. bluring

  7. shaders

Getting started with iOS

facebook.github.io/react-native/docs/getting-started.html

// terminal
cd SuperGame2000
react-native run-ios

To the editor!

React on the desktop

Gamepads!

developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API

Sounds!

html5rocks.com/en/tutorials/webaudio/games

github.com/assertchris/dpcon-challenge/issues

Wrapping up

  1. Phaser

  2. Crafty

  3. React Game Kit

  4. BabylonJS

youtube.com/watch?v=PBpugV5l90c

Thanks

twitter.com/assertchris

joind.in/talk/f8407

Bonus round:

Gravity

Ladders

Stairs

Camera locking

Mobs

Projectiles

Health

Animated sprites

Sounds and music

Gamepads

Making Games with React

By Christopher Pitt

Made with Slides.com

Making Games with React

  • 2,121

More from Christopher Pitt