game

<game> creates a Phaser.Game. It must be the root native component. This means that it can be rendered under your own components (React classes that you create), but it should not be nested under any other react-phaser node.

A <game> node will initialize its children at the proper time. When the game is mounted a Phaser.State object is automatically created, implementing the preload, create and update methods.

• <state>. States are created immediately after the game is created. To start a state, set property stateName of the <game> node to the state name.
• <assets>. The defined assets are loaded during the preload method.
• <input>, <sprite>, <group>, and <graphics> nodes, when direct children of a <game>, are initially created during the create method.

Constructor properties

These properties are used only when the game is first created; they are not updated on later renders.

Property	Notes
width	Game width
height	Game height
physics	Phaser.Physics ID: Physics system to initialize (Arcade by default)
assets	A map between asset keys and their definition. See below for more information.

Properties

These properties are set when the component is first mounted, and updated in later renders, if their value changes.

Property	Notes
stateName	A string indicating the state that should start. The states are identified by their name property. When stateName changes, the corresponding state is started.

Assets

If your game requires to load external assets, they can be requested them by setting property assets in the <game> node.

assets must be an object with the following format:

{
    [assetKey]: {
        type: [type],
        {... type specific parameters}
    },
    ...
}

Currently two types are supported:

• image. Loads an image to the asset cache. Parameters:
  • src: image URL.
• spritesheet: Loads an sprite sheet. Parameters:
  • src: image URL.
  • width: Frame width
  • height: Frame height

This example code shows how to preload external assets.

Additionally it is possible to create assets using graphics. See <assets> for more information.