diff --git a/README.md b/README.md index a1a4a14a..f81aefa8 100644 --- a/README.md +++ b/README.md @@ -35,11 +35,22 @@ export class App extends React.Component { ``` ## Optional attributes +### Overruling the module ```js -// Overruling the module +this.myCustomModule = { ... } ``` +### Tracking progression +```js + +onProgress (progression) { + console.log (`Loading ${(progression * 100)} % ...`) + if (progression === 1) + console.log (`Loading done!`) +} +``` + @@ -120,25 +131,10 @@ Legacy ways of calling JavaScript code from Unity. You can use the Application.E -# Styling -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 +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. 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 6e708393..4a4aea0b 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 () @@ -14,6 +12,9 @@ export default class Unity extends Component { componentDidMount () { this.instantiate () } + componentWillUnmount () { + this.unityLoaderService.unmount () + } instantiate () { let error = null @@ -28,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', 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} + ):( +
+ )}
) } 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