react-unity-webgl

A Unity WebGL component for your React application

5.7.0
Source
npm

Version published: 8 years ago

Weekly downloads: 14K; increased by2.54%

Maintainers: 1

Weekly downloads

Created: 8 years ago

Source

react-unity-webgl

Easy to use Unity 5.6 or newer WebGL player component for your React application. Embed your Unity application in your react application for writing interactive interfaces with two way Unity and react communication.

installation

Install using npm. Make sure you download the version matching with your Unity version. I try to update this plugin in case of need as fast as possible. Check the releases on GitHub for the corresponding version.

# example
$ npm install --save react-unity-webgl

usage

To get stated import the Unity component from 'react-unity-webgl'. Once imported you can use the Unity component to load in your Unity content. Place the Unity tag along with a src to the json file Unity exported.

Notice

Don't forget to add a script tag to load the UnityLoader.js file, exported by Unity in your base html file.

import React, { Component } from 'react';
import { Unity } from 'react-unity-webgl';

export class App extends Component {
    render() {
        return (<div className="app">
            <Unity src="Build/myGame.json" />
        </div>)
    }
}

communication

Unity allows you to send Javascript messages to the Unity content. In order to do so using React you have to import the Message function from 'react-unity-webgl'. The first parameter is the target game object name, the next is the method name, and the last is a optional parameter value.

import React, { Component } from 'react';
import { Message } from 'react-unity-webgl'

export class Menu extends Component {
    onClick () {
        Message ("myGameObjectName", "myMethodName", "paramterValue");
    }
    render() {
        return (<div className="menu">
            <div onClick={this.onClick.bind(this)}>
                Click me
            </div>
        </div>)
    }
}

styling

The player will be injected in the a component with the className "unity-container". To style to player use the following sass styling. To style the loader you can style the component with the className "unity-loader". See the example below.

.unity {
    .unity-container {
        canvas {
            
        }
    }
    .unity-loader {
        .bar {
            .fill {
                /* the width will be set by the component */
            }
        }
    }
}

html example

<!DOCTYPE html>
<html lang="nl">
    <head>
        <title>My Unity Game</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script src="build_unity/Build/UnityLoader.js"></script>
    <script src="compiled/bundle.js"></script>
</html>

Keywords

FAQs

What is react-unity-webgl?

Is react-unity-webgl popular?

Is react-unity-webgl well maintained?

Package last updated on 19 May 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install