Merge pull request #20 from jeffreylanters/development

UnityEvents

Author: Jeffrey Lanters

.npmignore

@@ -0,0 +1,7 @@
+node_modules
+.npm
+.node_repl_history
+logs
+*.log
+npm-debug.log*
+source

README.md

@@ -1,4 +1,5 @@
-# React Unity WebGL
+# React Unity WebGL · [![license](https://img.shields.io/badge/license-MIT-red.svg)]() [![npm](https://img.shields.io/npm/v/react-unity-webgl.svg)]() [![npm](https://img.shields.io/badge/react-v12%3E-blue.svg)]() [![npm](https://img.shields.io/badge/build-passing-brightgreen.svg)]() [![npm](https://img.shields.io/npm/dt/react-unity-webgl.svg)]()
+
 When building content for the web, you might need to communicate with other elements on React Application. Or you might want to implement functionality using Web APIs which [Unity](https://unity3d.com) does not currently expose by default. In both cases, you need to directly interface with the browser’s JavaScript engine. React Unity WebGL provides an easy library for Unity 5.6 / 2017 or newer with different methods to do this. 
 
 <img src="https://raw.githubusercontent.com/jeffreylanters/react-unity-webgl/master/resources/readme/logo.png" width="300px"><br />
@@ -85,28 +86,28 @@ this.myCustomModule = { ... }
 
 <br/><br/><br/>
 # Calling Unity scripts functions from JavaScript in React
-Sometimes you need to send some data or notification to the Unity script from the browser’s JavaScript. The recommended way of doing it is to call methods on GameObjects in your content. To get started import the function SendMessage from react-unity-webgl.
+Sometimes you need to send some data or notification to the Unity script from the browser’s JavaScript. The recommended way of doing it is to call methods on GameObjects in your content. To get started import the class UnityEvent from react-unity-webgl.
 
 ```js
-SendMessage (objectName: String, methodName: String, value: Object): void;
+UnityEvent (objectName: String, methodName: String);
 ```
 
-Where objectName is the name of an object in your scene; methodName is the name of a method in the script, currently attached to that object; value can be a string, a number, or can be empty. For example:
+Where objectName is the name of an object in your scene; methodName is the name of a method in the script, currently attached to that object. When you've created a new UnityEvent, you can call the 'emit' function to fire it into Unity. You can pass an optional parameter value.
 ```js
 import React from 'react'
-import { SendMessage } from 'react-unity-webgl'
+import { UnityEvent } from 'react-unity-webgl'
 
 export class App extends React.Component {
-    spawnEnemy (count) {
-        SendMessage ('SpawnBehaviour', 'SpawnEnemies', count)
+    constructor () {
+        this.spawnEnemies = new UnityEvent ('SpawnBehaviour', 'SpawnEnemies')
     }
     render () {
-        return <div onClick={ this.spawnEnemy.bind(this, 5) }>
+        return <div onClick={ this.spawnEnemies.emit (5) }>
             Click to Spawn 5 Enemies</div>
     }
 }
 ```
-While in Unity, for example:
+While in Unity the following script is attached the a game object named 'SpawnBehaviour'.
 ```cs
 using UnityEngine;
 
@@ -187,4 +188,4 @@ Simple numeric types can be passed to JavaScript in function parameters without
 
 <br/><br/><br/>
 # 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!
+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!

library/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SendMessage = exports.RegisterExternalListener = undefined;
+exports.UnityEvent = exports.SendMessage = exports.RegisterExternalListener = undefined;
 
 var _Unity = require('./components/Unity');
 
@@ -13,8 +13,11 @@ var _RegisterExternalListener = require('./modules/RegisterExternalListener');
 
 var _SendMessage = require('./modules/SendMessage');
 
+var _UnityEvent = require('./modules/UnityEvent');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.default = _Unity2.default;
 exports.RegisterExternalListener = _RegisterExternalListener.RegisterExternalListener;
-exports.SendMessage = _SendMessage.SendMessage;
+exports.SendMessage = _SendMessage.SendMessage;
+exports.UnityEvent = _UnityEvent.UnityEvent;

library/modules/RegisterExternalEmitter.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.UnityEvent = UnityEvent;
+function UnityEvent(gameObjectName, functionName) {
+    return new function (parameter) {}();
+}

library/modules/RegisterExternalListener.js

@@ -4,23 +4,16 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.RegisterExternalListener = RegisterExternalListener;
-/**
- * Registers a listener to this window. When a message is sent
- * from Unity using 'CallExternal', the listener will forward it
- * into your React Application.
- * @param {string} functionName 
- * @param {function} callback 
- */
-function RegisterExternalListener(functionName, callback) {
+function RegisterExternalListener(methodName, callback) {
     /**
      * LEGACY
      *  bind the function to the window to allow
      *  the user to use the legacy functions
      *  Application.ExternalCall and
      *  Application.ExternalEval.
      */
-    window[functionName] = function (paramterValue) {
-        callback(paramterValue);
+    window[methodName] = function (parameter) {
+        callback(parameter);
     };
 
     /**
@@ -29,7 +22,7 @@ function RegisterExternalListener(functionName, callback) {
      * to make direct calls into React.
      */
     if (typeof window.ReactUnityWebGL === 'undefined') window.ReactUnityWebGL = {};
-    window.ReactUnityWebGL[functionName] = function (paramterValue) {
-        callback(paramterValue);
+    window.ReactUnityWebGL[methodName] = function (parameter) {
+        callback(parameter);
     };
 }

library/modules/SendMessage.js

@@ -7,16 +7,7 @@ exports.SendMessage = SendMessage;
 
 var _Unity = require('../components/Unity');
 
-/**
- * Sends a message to the Unity content. This works the same
- * as Unity's internal 'SendMessage' system. The paramaterValue
- * is an optional field.
- * @param {string} gameObjectName 
- * @param {string} methodName 
- * @param {object} paramterValue 
- */
 function SendMessage(gameObjectName, methodName, paramterValue) {
-    if (typeof paramterValue === 'undefined') paramterValue = '';
-
-    if (typeof _Unity.UnityInstance !== 'undefined') _Unity.UnityInstance.SendMessage(gameObjectName, methodName, paramterValue);else console.warn('Wait for Unity to be instantiated before sending a message to \'' + gameObjectName + '\'');
+    console.warn('SendMessage is deprecated since version 6.4.0, use UnityEvent instead.');
+    if (typeof _Unity.UnityInstance !== 'undefined') _Unity.UnityInstance.SendMessage(gameObjectName, methodName, paramterValue || '');else console.warn('Wait for Unity to be instantiated before sending a message to \'' + gameObjectName + '\'');
 }

library/modules/UnityEvent.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.UnityEvent = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _Unity = require('../components/Unity');
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var UnityEvent = exports.UnityEvent = function () {
+    function UnityEvent(gameObjectName, methodName) {
+        _classCallCheck(this, UnityEvent);
+
+        this.gameObjectName = gameObjectName;
+        this.methodName = methodName;
+    }
+
+    _createClass(UnityEvent, [{
+        key: 'emit',
+        value: function emit(parameter) {
+            if (this.canEmit() === true) _Unity.UnityInstance.SendMessage(this.gameObjectName, this.methodName, parameter || '');else console.warn('Wait for Unity to be instantiated before sending an event \'' + this.methodName + '\'');
+        }
+    }, {
+        key: 'canEmit',
+        value: function canEmit() {
+            return typeof _Unity.UnityInstance !== 'undefined';
+        }
+    }]);
+
+    return UnityEvent;
+}();

package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-unity-webgl",
-  "version": "6.3.1",
+  "version": "6.4.0",
   "description": "A Unity WebGL component for your React application",
   "main": "library/index.js",
-  "types": "source/types.d.ts",
+  "types": "./types.d.ts",
   "scripts": {
     "compile": "babel --presets react source --out-dir library"
   },

source/index.js

@@ -1,6 +1,7 @@
 import Unity from './components/Unity'
 import { RegisterExternalListener } from './modules/RegisterExternalListener'
 import { SendMessage } from './modules/SendMessage'
+import { UnityEvent } from './modules/UnityEvent'
 
 export default Unity
-export { RegisterExternalListener, SendMessage }
+export { RegisterExternalListener, SendMessage, UnityEvent }

source/modules/RegisterExternalListener.js

@@ -1,20 +1,13 @@
-/**
- * Registers a listener to this window. When a message is sent
- * from Unity using 'CallExternal', the listener will forward it
- * into your React Application.
- * @param {string} functionName 
- * @param {function} callback 
- */
-export function RegisterExternalListener (functionName, callback) {
+export function RegisterExternalListener (methodName, callback) {
     /**
      * LEGACY
      *  bind the function to the window to allow
      *  the user to use the legacy functions
      *  Application.ExternalCall and
      *  Application.ExternalEval.
      */
-    window[functionName] = paramterValue => {
-        callback (paramterValue)
+    window[methodName] = parameter => {
+        callback (parameter)
     }
 
     /**
@@ -24,7 +17,7 @@ export function RegisterExternalListener (functionName, callback) {
      */
     if (typeof window.ReactUnityWebGL === 'undefined')
         window.ReactUnityWebGL = {}
-    window.ReactUnityWebGL[functionName] = paramterValue => {
-        callback (paramterValue)
+    window.ReactUnityWebGL[methodName] = parameter => {
+        callback (parameter)
     }
 }