@snakesilk/react-presenter v0.2.0

Snakesilk React Presenter

A React component suitable for bundling games with React created using Snakesilk.

The component will facilitate the following behaviors:

• Add the game renderer to the DOM.
• Resize render to its DOM node parent.
• Provide pause and resume game state with an overlay.
• Provide and handle full screen toggle.

Quickstart.

• Install.

yarn add @snakesilk/react-presenter

• Require component.

import Presenter from '@snakesilk/react-presenter';

• Setup game and render.

import React, { Component } from "react";
import { Game } from "@snakesilk/engine";
import Screen from "@snakesilk/react-presenter";

// Setup a game instance.
const game = new Game();

class MyGame extends Component {
  render() {
    return (
      <div className="MyGame">
        <Presenter
          game={game}
          aspectRatio={16/9}
          maxResolution={{x: 1280, y: 720}}
        />
      </div>
    );
  }
}

export default MyGame;

Props

game Game

Instance of a Snakesilk Game object and is the game instance to attach to.

const game = new SnakesilkEngine.Game();
<Presenter
  game={game}
/>

aspectRatio Number

The aspect ratio given as a decimal number to render the game canvas in. Typical aspect ratios written like 4:3, 16:9 are fully synonymous with 4/3, 16/9 etc. Defaults to 16/9.

<Presenter
  aspectRatio={16/9}
/>

maxResolution Object

Maximum resolution to draw game canvas for when the canvas becomes bigger than what performance allows to render. Given as an object with the following shape where each number is number of pixels.

{
  x: 1280,
  y: 720,
}

Defaults to 1280x720 pixels.

<Presenter
  maxResolution={{x: 640, y: 480}}
/>

fillWindow Bool

Flag determining if the game render area fills the browser window by default or is contained in its parent element. Defaults to false.

<Presenter fillWindow />