From 4349a6c53a4f760f3dbd4be09bb85225c74b86f4 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Thu, 23 Nov 2017 13:55:13 +0100 Subject: [PATCH 1/8] Added automatic UnityLoader unmounting --- source/Unity.js | 3 +++ source/UnityLoaderService.js | 20 +++++++++++++------- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/source/Unity.js b/source/Unity.js index 6e708393..3dd12d5f 100644 --- a/source/Unity.js +++ b/source/Unity.js @@ -14,6 +14,9 @@ export default class Unity extends Component { componentDidMount () { this.instantiate () } + componentWillUnmount () { + this.unityLoaderService.unmount () + } instantiate () { let error = null diff --git a/source/UnityLoaderService.js b/source/UnityLoaderService.js index 1d8f7829..022ca8cc 100644 --- a/source/UnityLoaderService.js +++ b/source/UnityLoaderService.js @@ -1,17 +1,23 @@ export default class UnityLoaderServer { constructor () { - + this.documentHead = document.getElementsByTagName ('head')[0] + this.unityLoaderScript = null } append (src) { return new Promise ((resolve, reject) => { - let unityLoaderScript = document.createElement ('script') - unityLoaderScript.type = 'text/javascript' - unityLoaderScript.async = true - unityLoaderScript.src = src - unityLoaderScript.onload = () => { + this.unityLoaderScript = document.createElement ('script') + this.unityLoaderScript.type = 'text/javascript' + this.unityLoaderScript.async = true + this.unityLoaderScript.src = src + this.unityLoaderScript.onload = () => { resolve () } - document.getElementsByTagName ('head')[0].appendChild (unityLoaderScript) + this.documentHead.appendChild (this.unityLoaderScript) }) } + unmount () { + if (this.unityLoaderScript !== null) { + this.documentHead.removeChild (this.unityLoaderScript) + } + } } \ No newline at end of file From d7e326b5cc7d9d7ddf8cedbda187f4d432fa1ffd Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Thu, 23 Nov 2017 14:00:12 +0100 Subject: [PATCH 2/8] Updated readme --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index a1a4a14a..63a74d7e 100644 --- a/README.md +++ b/README.md @@ -144,5 +144,14 @@ The following hierarchy will be applied to the React Unity WebGL component. Feel +# Notes +Make sure your Unity build is in your public folder, this is due to the component **and** Unity itself will load the content in Runtime and not Compile 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. + + + + + # Contributing When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. Before commiting, please compile your code using `npm run compile` and open a pull request. Thank you very much! From 70a236dae92ab1ad8468e2b0448be8049e33f299 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Thu, 23 Nov 2017 14:03:33 +0100 Subject: [PATCH 3/8] Another small readme update --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 63a74d7e..9902fa01 100644 --- a/README.md +++ b/README.md @@ -120,7 +120,8 @@ Legacy ways of calling JavaScript code from Unity. You can use the Application.E -# Styling +# Styling (DEPRICATED) +> DEPRICATED: Styling will be removed in the future. It will be replaced with callbacks including progression updates instead! The following hierarchy will be applied to the React Unity WebGL component. Feel free to apply any styles to the component. ```scss @@ -145,7 +146,7 @@ The following hierarchy will be applied to the React Unity WebGL component. Feel # Notes -Make sure your Unity build is in your public folder, this is due to the component **and** Unity itself will load the content 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 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 3df5c635b73edadc282825c199da09515dc43d9f Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Thu, 23 Nov 2017 14:14:08 +0100 Subject: [PATCH 4/8] Added progression and dropped styling --- README.md | 9 +++++++++ package.json | 2 +- source/Unity.js | 37 +++++++++++++------------------------ 3 files changed, 23 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 9902fa01..006a3b12 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,16 @@ export class App extends React.Component { ```js // Overruling the module +this.myCustomModule = { ... } + +// Loading progression + +onProgress (progression) { + console.log (`Loading ${(progression * 100)} % ...`) + if (progression === 1) + console.log (`Loading done!`) +} ``` diff --git a/package.json b/package.json index 3497f8ec..e52f484d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-unity-webgl", - "version": "6.0.0", + "version": "6.1.0", "description": "A Unity WebGL component for your React application", "main": "lib/index.js", "scripts": { diff --git a/source/Unity.js b/source/Unity.js index 3dd12d5f..d9f701d7 100644 --- a/source/Unity.js +++ b/source/Unity.js @@ -5,8 +5,6 @@ export default class Unity extends Component { constructor (props) { super (props) this.state = { - progress: 0, - loaded: false, error: null } this.unityLoaderService = new UnityLoaderService () @@ -31,36 +29,27 @@ export default class Unity extends Component { } else { this.unityLoaderService.append (this.props.loader).then (() => { - module.exports.UnityInstance = UnityLoader.instantiate ('unity-container', this.props.src, { - onProgress: ((gameInstance, progress) => { - this.setState({ - loaded: progress === 1, - progress: progress - }) - }), + let unityInstance = UnityLoader.instantiate ('unity-container', this.props.src, { + onProgress: this.onProgress.bind (this), Module : this.props.module }) + module.exports.UnityInstance = unityInstance }) } } + onProgress (unityInstance, progression) { + if (typeof this.props.onProgress !== 'undefined') { + this.props.onProgress (progression) + } + } render () { - if (this.state.error !== null) { return ( -
- React-Unity-Webgl error {this.state.error} -
- )} return (
-
-
-
- {this.state.loaded === false && -
-
-
-
-
- } + {this.state.error !== null ? ( + React-Unity-Webgl error {this.state.error} + ):( +
+ )}
) } From 19796c0db50907cee38aaebc541c729afd399042 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Thu, 23 Nov 2017 14:14:35 +0100 Subject: [PATCH 5/8] Removed styling from readme --- README.md | 25 ------------------------- 1 file changed, 25 deletions(-) diff --git a/README.md b/README.md index 006a3b12..ee643661 100644 --- a/README.md +++ b/README.md @@ -129,31 +129,6 @@ Legacy ways of calling JavaScript code from Unity. You can use the Application.E -# Styling (DEPRICATED) -> DEPRICATED: Styling will be removed in the future. It will be replaced with callbacks including progression updates instead! -The following hierarchy will be applied to the React Unity WebGL component. Feel free to apply any styles to the component. - -```scss -.unity { - .unity-container { - canvas { - /* don't forget to set my width and height! */ - } - } - .unity-loader { - .loading-bar { - .loading-fill { - /* the width will be set by the component */ - } - } - } -} -``` - - - - - # 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. ## 5.x to 6.x Upgrade note From 681fe6dbdcb28b736180746dc7ff21146799a77f Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Thu, 23 Nov 2017 14:16:20 +0100 Subject: [PATCH 6/8] YA readme update --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ee643661..8e1bd9ea 100644 --- a/README.md +++ b/README.md @@ -35,11 +35,14 @@ export class App extends React.Component { ``` ## Optional attributes +### Overruling the module ```js -// Overruling the module this.myCustomModule = { ... } +``` +### Tracking progression +```js // Loading progression onProgress (progression) { From 89732ed407c92a66b6c7ff5ca4d3275b986661c8 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Thu, 23 Nov 2017 14:16:55 +0100 Subject: [PATCH 7/8] =?UTF-8?q?Typo=20=F0=9F=A4=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 8e1bd9ea..f81aefa8 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,6 @@ this.myCustomModule = { ... } ### Tracking progression ```js -// Loading progression onProgress (progression) { console.log (`Loading ${(progression * 100)} % ...`) From 4424ed4a69f1e945015489de9a1d66f66e208167 Mon Sep 17 00:00:00 2001 From: Jeffrey Lanters Date: Thu, 23 Nov 2017 14:18:32 +0100 Subject: [PATCH 8/8] Renamed container --- source/Unity.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/Unity.js b/source/Unity.js index d9f701d7..4a4aea0b 100644 --- a/source/Unity.js +++ b/source/Unity.js @@ -29,7 +29,7 @@ export default class Unity extends Component { } else { this.unityLoaderService.append (this.props.loader).then (() => { - let unityInstance = UnityLoader.instantiate ('unity-container', this.props.src, { + let unityInstance = UnityLoader.instantiate ('unity', this.props.src, { onProgress: this.onProgress.bind (this), Module : this.props.module }) @@ -48,7 +48,7 @@ export default class Unity extends Component { {this.state.error !== null ? ( React-Unity-Webgl error {this.state.error} ):( -
+
)} )