Skip to content

πŸ‡ Boilerplate for Unity3D WebGL builds (on WebAssembly) using basic Create React App

License

Notifications You must be signed in to change notification settings

veej/unity3d-react-boilerplate

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

26 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Unity3D-React-Boilerplate

enter image description here

πŸ‘½βœ¨πŸŒŠ

πŸ‘½βœ¨πŸŒŠ

How to recreate

  1. Initial project setup
  2. Build Unity project for WebGL
  3. Integrate Unity build into your react webapp
  4. Two-way communication

1. Initial project setup

🌌 Follow the Quick Start on this repo: Heroku Buildpack for create-react-app With just a few easy steps you end with a static, frontend-only web site hosted on Heroku.

To update the site by pushing changes to heroku remote:

$ yarn build
$ git commit -m "wow :o"
$ git push heroku master

To open it:

`$ heroku open`

Wait what?? And just like that I have hosted a webpage? 🍰 🍷

Your package.json should look something like this (no babel, no webpack config πŸ™ˆ):

{
  "name": "unity3d-react-boilerplate",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

2. Build Unity project for WebGL

🌊 Unity documentation concerning WebGL development

πŸ’§ Your build settings should look something like on the picture below, please pay special attention to:

  • Setting build platform for WebGL
  • WebGL Memory Size
    • Can be set to quite low value when using WebAssembly
  • Compression Format
    • Safari doesn't support Brotli compression, it doesn't support fullscreen and curosor hiding neither. If you expect many Safari-only users to visit your Unity project on the web, then you need to carefully plan around some issues eg. no WebGL 2.0, no Brotli compression.
  • WebAssembly
    • Just 'tick' this option for the magic to happen.
    • Since Unity 2018.1 its no longer considered 'experimental' πŸ¦„

nay who needs image descriptions

  • πŸ”Ž Once building is finished, you should be most interested with a directory containing those files:

enter image description here

*You could most certainly use a better build name though. "DefaultWebGL", really? πŸ™‰

3. Integrate Unity build into your react webapp

a:cherry_blossom:. Add react-unity-webgl into your project, it's just so cool.

b:tulip:. Copy entire Unity build folder (mentioned above) into your public webapp folder.

c:hibiscus:. Follow Quick Start guide (it's really quick) and for

The most important part is loading

import React from "react";
import Unity, { UnityContent } from "react-unity-webgl";

export class App extends React.Component {
  constructor(props) {
    super(props);
    this.unityContent = new UnityContent(
      "MyGame/DefaultWebGL.json",
      "MyGame/UnityLoader.js"
    );
  }
  render() {
    return <Unity unityContent={this.unityContent} />;
  }
}

And thats all there is! With barely 5 lines of code your Unity build is imported and served in your React app. Isn't that cool? :o

For more info about UnityContent check out Mr. Lanters' github wiki (and don't forget to star his amazing repo πŸŽ‰).

d:blossom:. After these easy steps you should be ready to test your Unity webapp by simply running $ npm run start command in your console. Uploading to Heroku is just as easy using

If you cloned my project you would have to use yarn instead: $ yarn start

⚠️ If your Unity project runs only locally and doesn't load on heroku hosting service, check if your .gitignore doesn't mention /build directory (this may happen if you created your git repo with Unity .gitignore preset).

4. πŸ’¨ Two-way communication

Now to the fun stuff!

πŸ“˜ React to Unity communication

  1. 🌱 Calling Unity method with no parameters

You can now evoke any public method in your Unity project by sending a message to unityContent specifying a GameObject holding a C# script with that method.

this.unity.send(
   "FlyCube", // GameObject name
   "Randomize" // Public method name
);
  1. 🌾 Calling Unity method with a single parameter

⚠️ This may only be a (single!) number or a string

this.props.unityContent.send(
   "PlayArea",
   "SpawnCube",
   10
);

⚠️ You cannot directly use template literals when passing a string. Write it first to a variable, then pass it instead.

let  mouseCoords  =  `${this.state.pageX}  ${this.state.pageY};

if(this.state.isLoaded  ===  true) {
   this.unityContent.send(
      "TextDisplayer",
      "UpdateDoubleMousePosition",
      mouseCoords
   );
};
  1. 🌴 Calling ☎️ a method with more than one parameter - possible workaround.

As mentioned above GameObject.SendMessage(), here as this.unityContent.send(...), may only pass as value one argument that can be either a number or a string.

One possible workaround is passing multiple values in a string and then parsing it inside Unity method

Though I wouldn't do that in a method 'ticked' many many times per second πŸ™‰

In above ⚠️ about template literals we passed two numeric coords inside mouseCoords string variable to a method UpdateDoubleMousePosition inside TextDisplayer GameObject. To interpret that string as two separate numbers in C#:

public void UpdateDoubleMousePosition(string mouseCoords)
{
   string[] coords = mouseCoords.Split(' ');

   int[] coordsNumerical = new int[2];

   for(int i = 0; i < coords.Length; i++)
   {
      coordsNumerical[i] = Int32.Parse(coords[i]);
   }

   TextY.text = coords[0];
   TextX.text = coords[1];
}

πŸ“˜ Unity to React communication

pre. Creating .jslib plugin

4 steps for every single call

  1. creating javscript event handler
  2. adding a 'function frame' to jslib
  3. importing the 'function frame' in a unity c# script
  4. calling that function

Written with StackEdit.

About

πŸ‡ Boilerplate for Unity3D WebGL builds (on WebAssembly) using basic Create React App

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 39.0%
  • C# 30.7%
  • HTML 20.9%
  • CSS 7.4%
  • Dockerfile 2.0%