DEV Community

Cover image for Introducing Replay: a cross-platform JS game engine inspired by React
Ed Bentley
Ed Bentley

Posted on

Introducing Replay: a cross-platform JS game engine inspired by React

Today I'm publishing a new open-source library for creating games: Replay.

I've built many indie games over the years (such as The Impossible Game). I've also built many web apps using React.

Replay takes the ideas and concepts that makes React such a great library for building user interfaces, and brings them to game development. Take a look at how Replay manages state and rendering through a declarative API:

const Player = makeSprite({
  init() {
    // Initial state
    return {
      posX: 0,
      posY: 0,
    };
  },

  loop({ state }) {
    // Return new state at 60 fps
    return {
      posX: state.posX + 1,
      posY: state.posY + 1,
    };
  },

  render({ state }) {
    // Draw a circle based on current state
    return [
      t.circle({
        position: {
          x: state.posX,
          y: state.posY,
        },
        color: "#147aff",
        radius: 10,
      }),
    ];
  },
});
Enter fullscreen mode Exit fullscreen mode

Check out the docs on how to quickly get setup with a new JavaScript or TypeScript project, and then deploy to the web or iOS.

I hope you enjoy using it to build some new games!

Top comments (9)

Collapse
 
anuraghazra profile image
Anurag Hazra

Nice, any examples/live demos?

Collapse
 
edbentley profile image
Ed Bentley

I’ve got a tutorial with a live demo coming soon, I’ll keep you posted :)

Collapse
 
edbentley profile image
Ed Bentley

There’s now a tutorial here: replay.js.org/tutorial

And list of games here: replay.js.org/games

Collapse
 
anuraghazra profile image
Anurag Hazra

nice looks awesome thanks!

Collapse
 
matheusligabue profile image
Matheus Ligabue

I've been searching my whole week for something like this!!!! Was studying (and enjoying) Phaser, but was kinda lost on how to organize the code and reason about the game loop. Will definitely check this out!

Collapse
 
ofear profile image
Ofir Hadad

After searching for hours for the right JS game engine for our JS game hackathon that we are doing, I found replay, Damn what a great simplicty!
Everything is written pure and clean, really loved it!

I'm going to play with this a little.

Collapse
 
pavermakov profile image
Pavel Ermakov

Yes!!! Thank you!

Collapse
 
ganonbit profile image
Andrew Reese

neat

Collapse
 
robmeijeren profile image
Rob Meijeren

This is very nice. I am working on a game with a canvas. Am certainly gonna give this a try when it's a bit further down the road. (Wanna see if I can make it myself first 😉)