From 642e2d3754cc2d5d3bb6c22a33e49b6940c8e0be Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Fri, 1 Dec 2017 00:02:16 +0100 Subject: [PATCH 01/10] Recompiled --- lib/Unity.js | 55 ++++++++++++++------------------------- lib/UnityLoaderService.js | 24 ++++++++++++----- 2 files changed, 38 insertions(+), 41 deletions(-) diff --git a/lib/Unity.js b/lib/Unity.js index 0292890..6c3c58c 100644 --- a/lib/Unity.js +++ b/lib/Unity.js @@ -31,8 +31,6 @@ var Unity = function (_Component) { var _this = _possibleConstructorReturn(this, (Unity.__proto__ || Object.getPrototypeOf(Unity)).call(this, props)); _this.state = { - progress: 0, - loaded: false, error: null }; _this.unityLoaderService = new _UnityLoaderService2.default(); @@ -44,6 +42,11 @@ var Unity = function (_Component) { value: function componentDidMount() { this.instantiate(); } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.unityLoaderService.unmount(); + } }, { key: 'instantiate', value: function instantiate() { @@ -59,51 +62,33 @@ var Unity = function (_Component) { this.setState({ error: error }); } else { this.unityLoaderService.append(this.props.loader).then(function () { - module.exports.UnityInstance = UnityLoader.instantiate('unity-container', _this2.props.src, { - onProgress: function onProgress(gameInstance, progress) { - _this2.setState({ - loaded: progress === 1, - progress: progress - }); - }, + var unityInstance = UnityLoader.instantiate('unity', _this2.props.src, { + onProgress: _this2.onProgress.bind(_this2), Module: _this2.props.module }); + module.exports.UnityInstance = unityInstance; }); } } + }, { + key: 'onProgress', + value: function onProgress(unityInstance, progression) { + if (typeof this.props.onProgress !== 'undefined') { + this.props.onProgress(progression); + } + } }, { key: 'render', value: function render() { - if (this.state.error !== null) { - return _react2.default.createElement( - 'div', - { className: 'unity' }, - _react2.default.createElement( - 'b', - null, - 'React-Unity-Webgl error' - ), - ' ', - this.state.error - ); - } return _react2.default.createElement( 'div', { className: 'unity' }, - _react2.default.createElement( - 'div', + this.state.error !== null ? _react2.default.createElement( + 'b', null, - _react2.default.createElement('div', { className: 'unity-container', id: 'unity-container' }) - ), - this.state.loaded === false && _react2.default.createElement( - 'div', - { className: 'unity-loader' }, - _react2.default.createElement( - 'div', - { className: 'bar' }, - _react2.default.createElement('div', { className: 'fill', style: { width: this.state.progress * 100 + '%' } }) - ) - ) + 'React-Unity-Webgl error ', + this.state.error + ) : _react2.default.createElement('div', { id: 'unity' }) ); } }]); diff --git a/lib/UnityLoaderService.js b/lib/UnityLoaderService.js index 44f0d12..35ecda8 100644 --- a/lib/UnityLoaderService.js +++ b/lib/UnityLoaderService.js @@ -11,22 +11,34 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons var UnityLoaderServer = function () { function UnityLoaderServer() { _classCallCheck(this, UnityLoaderServer); + + this.documentHead = document.getElementsByTagName('head')[0]; + this.unityLoaderScript = null; } _createClass(UnityLoaderServer, [{ key: 'append', value: function append(src) { + var _this = this; + return new Promise(function (resolve, reject) { - var unityLoaderScript = document.createElement('script'); - unityLoaderScript.type = 'text/javascript'; - unityLoaderScript.async = true; - unityLoaderScript.src = src; - unityLoaderScript.onload = function () { + _this.unityLoaderScript = document.createElement('script'); + _this.unityLoaderScript.type = 'text/javascript'; + _this.unityLoaderScript.async = true; + _this.unityLoaderScript.src = src; + _this.unityLoaderScript.onload = function () { resolve(); }; - document.getElementsByTagName('head')[0].appendChild(unityLoaderScript); + _this.documentHead.appendChild(_this.unityLoaderScript); }); } + }, { + key: 'unmount', + value: function unmount() { + if (this.unityLoaderScript !== null) { + this.documentHead.removeChild(this.unityLoaderScript); + } + } }]); return UnityLoaderServer; From 52c035f4e737dc2bed8c85a777aa18b910714ea9 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Mon, 4 Dec 2017 11:43:42 +0100 Subject: [PATCH 02/10] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index f81aefa..7181903 100644 --- a/README.md +++ b/README.md @@ -28,8 +28,8 @@ import Unity from 'react-unity-webgl'; export class App extends React.Component { render () { return + src='Public/Build/myGame.json' + loader='Public/Build/UnityLoader.js' /> } } ``` @@ -132,7 +132,7 @@ Legacy ways of calling JavaScript code from Unity. You can use the Application.E # Notes -Make sure your Unity build is in your public folder, this is due to the component **and** Unity itself will load files in Runtime and not Compile time. +Make sure your Unity build is in your public folder, this is due to the component **and** Unity itself will load files in Runtime and not Compile/Bundle time. ## 5.x to 6.x Upgrade note When upgrading from 5.x to 6.x, make sure you add the `loader` prop to the Unity component and remove the script tag from your HTML page refering to the UnityLoader.js file. See [Usage](#usage) for further details. From e324422f2e01a882c349418e3925c374a693e8b1 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Wed, 6 Dec 2017 22:00:54 +0100 Subject: [PATCH 03/10] Updated readme --- README.md | 7 +++++++ lib/Styles.js | 11 +++++++++++ lib/Unity.js | 16 ++++++++++++++-- source/Styles.js | 6 ++++++ source/Unity.js | 11 +++++++++-- 5 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 lib/Styles.js create mode 100644 source/Styles.js diff --git a/README.md b/README.md index 7181903..40007f4 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,13 @@ onProgress (progression) { } ``` +### Width and height +```js + + +// The default size is a width and height of 100% +``` + diff --git a/lib/Styles.js b/lib/Styles.js new file mode 100644 index 0000000..3bc31ba --- /dev/null +++ b/lib/Styles.js @@ -0,0 +1,11 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = { + unity: { + width: '100%', + height: '100%' + } +}; \ No newline at end of file diff --git a/lib/Unity.js b/lib/Unity.js index 6c3c58c..9dc8270 100644 --- a/lib/Unity.js +++ b/lib/Unity.js @@ -14,6 +14,10 @@ var _UnityLoaderService = require('./UnityLoaderService'); var _UnityLoaderService2 = _interopRequireDefault(_UnityLoaderService); +var _Styles = require('./Styles'); + +var _Styles2 = _interopRequireDefault(_Styles); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -77,18 +81,26 @@ var Unity = function (_Component) { this.props.onProgress(progression); } } + }, { + key: 'getContainerStyles', + value: function getContainerStyles() { + return { + width: this.props.width || '100%', + height: this.props.height || '100%' + }; + } }, { key: 'render', value: function render() { return _react2.default.createElement( 'div', - { className: 'unity' }, + { className: 'unity', style: this.getContainerStyles() }, this.state.error !== null ? _react2.default.createElement( 'b', null, 'React-Unity-Webgl error ', this.state.error - ) : _react2.default.createElement('div', { id: 'unity' }) + ) : _react2.default.createElement('div', { style: _Styles2.default.unity, id: 'unity' }) ); } }]); diff --git a/source/Styles.js b/source/Styles.js new file mode 100644 index 0000000..82ea4cf --- /dev/null +++ b/source/Styles.js @@ -0,0 +1,6 @@ +export default { + unity: { + width: '100%', + height: '100%' + } +} \ No newline at end of file diff --git a/source/Unity.js b/source/Unity.js index 4a4aea0..f746524 100644 --- a/source/Unity.js +++ b/source/Unity.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import UnityLoaderService from './UnityLoaderService' +import Styles from './Styles' export default class Unity extends Component { constructor (props) { @@ -42,13 +43,19 @@ export default class Unity extends Component { this.props.onProgress (progression) } } + getContainerStyles () { + return { + width: this.props.width || '100%', + height: this.props.height || '100%' + } + } render () { return ( -
+
{this.state.error !== null ? ( React-Unity-Webgl error {this.state.error} ):( -
+
)}
) From d063d8ecab45debb97313ec33b8b8ff51ef97266 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Wed, 6 Dec 2017 22:08:50 +0100 Subject: [PATCH 04/10] Updated package --- README.md | 6 ++++-- package.json | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 40007f4..3925456 100644 --- a/README.md +++ b/README.md @@ -3,15 +3,17 @@ When building content for the web, you might need to communicate with other elem + + # Installation -Install using npm. Make sure you download the release matching with your Unity version. I try to update this plugin in case of need as fast as possible. Check the [releases on GitHub](https://github.com/jeffreylanters/react-unity-webgl/releases) for the corresponding version. +Install using npm. Make sure you download the release matching with your Unity version. I try to update this plugin in case of need as fast as possible. Check the [releases on GitHub](https://github.com/jeffreylanters/react-unity-webgl/releases) for the corresponding version or [view on NPM](https://www.npmjs.com/package/react-unity-webgl). ```sh -$ npm install --save react-unity-webgl +$ npm install react-unity-webgl ``` diff --git a/package.json b/package.json index e52f484..297da72 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-unity-webgl", - "version": "6.1.0", + "version": "6.2.0", "description": "A Unity WebGL component for your React application", "main": "lib/index.js", "scripts": { From 5d8815c222f28fda41973df05c51d232701bd881 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Wed, 6 Dec 2017 22:10:45 +0100 Subject: [PATCH 05/10] Updated demo gif --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3925456..ac794de 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ When building content for the web, you might need to communicate with other elem - + From 63bc92b3e41c0e446c39f5b403ecd4e6ed421e84 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Wed, 6 Dec 2017 22:12:29 +0100 Subject: [PATCH 06/10] Added more details --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ac794de..f90fc4d 100644 --- a/README.md +++ b/README.md @@ -37,13 +37,16 @@ export class App extends React.Component { ``` ## Optional attributes -### Overruling the module +### Modules +> Override the module ```js this.myCustomModule = { ... } ``` ### Tracking progression +> The loading progression of the Unity player +> will be a value between 0 and 1 ```js onProgress (progression) { @@ -54,10 +57,10 @@ onProgress (progression) { ``` ### Width and height +> The default width and height is 100% ```js -// The default size is a width and height of 100% ``` From fc2f4d82b8009c37bf3ed055292177213e49aba8 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Wed, 6 Dec 2017 22:13:06 +0100 Subject: [PATCH 07/10] Small update --- README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index f90fc4d..816b98f 100644 --- a/README.md +++ b/README.md @@ -37,11 +37,11 @@ export class App extends React.Component { ``` ## Optional attributes -### Modules -> Override the module +### Width and height +> The default width and height is 100% ```js -this.myCustomModule = { ... } - + + ``` ### Tracking progression @@ -56,11 +56,11 @@ onProgress (progression) { } ``` -### Width and height -> The default width and height is 100% +### Modules +> Override the module ```js - - +this.myCustomModule = { ... } + ``` From 702a360409b9dcf9bc3db5f46288dd1700580611 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Wed, 6 Dec 2017 22:13:59 +0100 Subject: [PATCH 08/10] Updated titles --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 816b98f..e0a9033 100644 --- a/README.md +++ b/README.md @@ -38,15 +38,14 @@ export class App extends React.Component { ## Optional attributes ### Width and height -> The default width and height is 100% +The default width and height is 100% ```js ``` ### Tracking progression -> The loading progression of the Unity player -> will be a value between 0 and 1 +The loading progression of the Unity player will be a value between 0 and 1 ```js onProgress (progression) { @@ -57,7 +56,7 @@ onProgress (progression) { ``` ### Modules -> Override the module +Overrides the module object ```js this.myCustomModule = { ... } From aedcfa3d719a078542d6bd631979beed21fb0064 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Wed, 6 Dec 2017 22:16:19 +0100 Subject: [PATCH 09/10] Last small readme update --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e0a9033..2867206 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ $ npm install react-unity-webgl # Usage -To get started import the default Unity class from react-unity-webgl. +To get started import the default Unity class from react-unity-webgl and include it in your render while giving the public path to your src and loader files. ```js import React from 'react'; From 21cd6f9f87ea0c0182b18dda587445507ba9ba37 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Wed, 6 Dec 2017 22:20:26 +0100 Subject: [PATCH 10/10] Added index --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 2867206..175d625 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,22 @@ When building content for the web, you might need to communicate with other elem +- [Installation](#installation) +- [Usage](#usage) + - [Optional attributes](#optional-attributes) + - [Width and height](#width-and-height) + - [Tracking progression](#tracking-progression) + - [Modules](#modules) +- [Calling Unity scripts functions from JavaScript in React](#calling-unity-scripts-functions-from-javascript-in-react) +- [Calling JavaScript functions within React from Unity scripts](#calling-javascript-functions-within-react-from-unity-scripts) +- [Notes](#notes) + - [5.x to 6.x Upgrade note](#5x-to-6x-upgrade-note) +- [Contributing](#contributing) + + + + + # Installation Install using npm. Make sure you download the release matching with your Unity version. I try to update this plugin in case of need as fast as possible. Check the [releases on GitHub](https://github.com/jeffreylanters/react-unity-webgl/releases) for the corresponding version or [view on NPM](https://www.npmjs.com/package/react-unity-webgl).