react-unity-webgl - npm Package Compare versions

Comparing version 8.2.5 to 8.2.6

package.json

 {
   "name": "react-unity-webgl",
-  "version": "8.2.5",
+  "version": "8.2.6",
   "description": "React Unity WebGL provides an easy solution for embedding Unity WebGL builds in your React application, with two-way communication between your React and Unity application with advanced API's.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -162,3 +162,3 @@ <div align="center">
 
-> When using parameters, some types might need the usage of special methods in order to read their values. You can read more about parameters and [JavaScript to Unityscript types](#javascript-to-unityscript-types) here.
+> Simple numeric types can be passed to JavaScript in function parameters without requiring any conversion. Other data types will be passed as a pointer in the emscripten heap (which is really just a big array in JavaScript). For strings, you can use the Pointerstringify helper function to convert to a JavaScript string. You can read more about parameters and [JavaScript to Unityscript types](#javascript-to-unityscript-types) here.
 
@@ -177,3 +177,3 @@ ```ts
 
-A basic implementation could look something like this. In the following example we'll create a new Event Listener with the event name "GameOver" which passes along an interger container the score. When the Event is emitted we'll change the State.
+A basic implementation could look something like this. In the following example we'll create a new Event Listener with the event name "GameOver" which passes along a userName and an interger container the score. When the Event is emitted we'll change the State.
 
@@ -191,2 +191,3 @@ ```jsx
       isGameOver: false,
+      userName: "",
       score: 0,
@@ -202,5 +203,6 @@ };
 
-    this.unityContext.on("GameOver", (score) => {
+    this.unityContext.on("GameOver", (userName, score) => {
       this.setState({
         isGameOver: true,
+        userName: userName,
         score: score,
@@ -214,4 +216,4 @@ });
       <div>
-        {this.state.isGameOver == true && (
-          <p>Game over! Your score: {this.state.score}</p>
+        {this.state.isGameOver === true && (
+          <p>{`Game Over: ${this.state.userName} score: ${this.tate.score}`}</p>
         )}
@@ -225,5 +227,5 @@ <Unity unityContext={this.unityContext} />
 
-To emit the Event Listener we've just created, we'll have to create a new JSLib file within our Unity Project first. This JSLib file will be places within the "Assets/Plugins/WebGL" directory. The JSLib itself has nothing to do with this module, it is natively supported by Unity.
+To emit the Event Listener we've just created, we'll have to create a new JSLib file within our Unity Project first. This JSLib file will be places within the "Assets/Plugins/WebGL" directory. The JSLib itself has nothing to do with this module, it is natively supported by Unity and is used for all communication between your CSharp and JavaScript in any given context.
 
-We'll start of by creating a new method inside of our JSLib. The name of this method can be anything, but in this example we'll give it it the same name as our Event Name to keep things clean. In the body of the method, we'll emit our Event Listener by invoking a method on the "ReactUnityWebGL" object exposed by the module. All of your Event Listeners are available as a property using the Event Name on the object. We'll pass along the score.
+We'll start of by creating a new method inside of our JSLib. The name of this method can be anything, but in this example we'll give it it the same name as our Event Name to keep things clean. In the body of the method, we'll emit our Event Listener by invoking a method on the "ReactUnityWebGL" object exposed by the module. All of your Event Listeners are available as a property using the Event Name on the object. We'll pass along the userName and the score. The userName has to go through the built-in "Pointer_stringify" method in order to get the value, otherwise a int pointer will be passed instead. You can read more about parameters and [JavaScript to Unityscript types](#javascript-to-unityscript-types) here.
 
@@ -234,4 +236,4 @@ ```js
 mergeInto(LibraryManager.library, {
-  GameOver: function (score) {
-    ReactUnityWebGL.GameOver(score);
+  GameOver: function (userName, score) {
+    ReactUnityWebGL.GameOver(Pointer_stringify(userName), score);
   },
@@ -254,6 +256,6 @@ });
   [DllImport("__Internal")]
-  private static extern void GameOver (int score);
+  private static extern void GameOver (string userName, int score);
 
   public void SomeMethod () {
-    GameOver (100);
+    GameOver ("Player1", 100);
   }
@@ -310,3 +312,3 @@ }
       <div>
-        <p>Loading... {this.state.progression * 100}%</p>
+        <p>{`Loading... ${this.state.progression * 100}%`}</p>
         <Unity unityContext={this.unityContext} />
@@ -362,5 +364,6 @@ </div>
     return (
-      <div style={{ visibility: this.state.isLoaded ? "visible" : "hidden" }}>
-        <Unity unityContext={this.unityContext} />
-      </div>
+      <Unity
+        style={{ visibility: this.state.isLoaded ? "visible" : "hidden" }}
+        unityContext={this.unityContext}
+      />
     );
@@ -616,4 +619,4 @@ }
   render() {
-    return this.state.didError == true ? (
-      <div>Oops, that's an error {this.state.errorMessage}</div>
+    return this.state.didError === true ? (
+      <div>{`Oops, that's an error ${this.state.errorMessage}`}</div>
     ) : (
@@ -854,3 +857,3 @@ <Unity unityContext={this.unityConext} />
       unityContext={unityContext}
-      matchWebGLToCanvasSize={true}
+      matchWebGLToCanvasSize={false}
       style={{ width: "100px", height: "100px" }}
@@ -864,4 +867,2 @@ />
 
-when sending messages to your Unity Player through a Unity Context object, there are various restrictions to the parameter types.
-
 Simple numeric types can be passed to JavaScript in function parameters without requiring any conversion. Other data types will be passed as a pointer in the emscripten heap (which is really just a big array in JavaScript). For strings, you can use the Pointerstringify helper function to convert to a JavaScript string.
@@ -873,2 +874,28 @@
 
+#### Example implementation
+
+A basic implementation could look something like this. In this example a series of methods is merged into the Unity library making this methods availble in CSharp. Each of these methods contain an example on how to handle specific types of data. No worries, the methods used for the conversion such as "Pointer_stringify" and "HEAPF32" are available natively.
+
+```js
+// File: MyPlugin.jslib
+
+mergeInto(LibraryManager.library, {
+  GameOver: function () {
+    ReactUnityWebGL.GameOver();
+  },
+  NextWave: function (waveNumber) {
+    ReactUnityWebGL.NextWave(waveNumber);
+  },
+  ShowPopup: function (text) {
+    ReactUnityWebGL.ShowPopup(Pointer_stringify(text));
+  },
+  SubmitScores: function (scoresFloatArray, arraySize) {
+    var scores = [];
+    for (var i = 0; i < arraySize; i++)
+      scores.push(HEAPF32[(scoresFloatArray >> 2) + arraySize]);
+    ReactUnityWebGL.SubmitScores(scores);
+  },
+});
+```
+
 # Contribution and Development
@@ -875,0 +902,0 @@

No alert changes

Improved metrics

Total package byte prevSize

115128

increased by1.37%

Number of lines in readme file

930

increased by2.99%

No dependency changes