Add Spine 4.0 Plugin Support (#85)

* Add spine 4.0 dependency alias

* Add Spine 4.0 build support

* Add version flag

* Add 4.0 Example Assets

* Add Spine 4.0 builds

* Add Second 4.0 Example (Owl)

* Update owl40.html

Make the owl track the cursor position.

* Update owl40.html

cleanup

* Search for textures in page property

To support 4.0, textures are stored under the page property.

* Update Prebuilt Modules

* Update README.md

Update version support details and provide more information.

README.md

@@ -10,16 +10,23 @@ Examples such as the Hero above can be found in the `examples` folder. To run th
 
 ## Usage
 
-### Editor
+### Versions
 
-Add the plugin matching the Spine version used to export the animations, i.e `build/playcanvas-spine.X.X.min.js` and the PlayCanvas script `build/spine.js` to your project. The following plugins are available:
+The following plugins are available:
 
 | Spine Editor | PlayCanvas Engine |
 | ------------ | ----------------- |
 | 3.6          | Up to 1.65        |
 | 3.8          | Up to 1.65        |
+| 4.0          | 1.27 and later    |
 | 4.1          | 1.27 and later    |
 
+Each plugin provides both a Component System to PlayCanvas Engine and the corresponding `spine-core` runtime to your scripts as global variable called `spine`.  This allows developers to leverage the full spine library.
+
+### Editor
+
+Add the plugin matching the Spine version used to export the animations, i.e `build/playcanvas-spine.X.X.min.js` and the PlayCanvas script `build/spine.js` to your project.
+
 Create an entity with a script component and add the script `spine` to it. Upload your exported spine resources (atlas, skeleton json file, textures) and attach them to the spine script on your entity.
 
 Ensure the plugin file is listed before the PlayCanvas script in the [Scripts Loading Order](https://developer.playcanvas.com/en/user-manual/scripting/loading-order/).

build/playcanvas-spine.3.6.js

@@ -8797,6 +8797,7 @@ var spine = (function (pc) {
 	    this.skeletonVersion = semver.valid(semver.coerce(_skeletonData.version));
 	    this._spine_3_6_0 = semver.satisfies(this.skeletonVersion, '<=3.6.0');
 	    this._spine_3_7_99 = semver.satisfies(this.skeletonVersion, '<=3.7.99');
+	    this._spine_4_0_X = semver.satisfies(this.skeletonVersion, '~4.0.0');
 	    this._spine_4_1_X = semver.satisfies(this.skeletonVersion, '~4.1.23');
 	    this.skeleton = new spine$1.Skeleton(_skeletonData);
 	    this.skeleton.updateWorldTransform();
@@ -8935,26 +8936,32 @@ var spine = (function (pc) {
 	        } else if (attachment instanceof spine$1.MeshAttachment) {
 	          slot._active.type = ATTACHMENT_TYPE.MESH;
 	        }
-	        if (attachment.region && attachment.region.texture) {
-	          var texture = attachment.region.texture.pcTexture;
-	          if (texture) {
-	            if (texture instanceof pc__namespace.StandardMaterial) {
-	              this._materials[texture.name] = texture;
-	              slot.material = texture.name;
-	            } else {
-	              var key = null;
-	              if (texture.name) {
-	                key = texture.name;
-	              } else if (texture.getSource() instanceof Image) {
-	                key = texture.getSource().getAttribute('src');
-	              }
-	              if (key) {
-	                if (this._materials[key] === undefined) {
-	                  var material = this.createMaterial(texture);
-	                  this._materials[key] = material;
-	                }
-	                slot.material = key;
+	        var texture = null;
+	        if (attachment.region) {
+	          if (attachment.region.texture) {
+	            texture = attachment.region.texture.pcTexture;
+	          }
+	          if (attachment.region.page && attachment.region.page.texture) {
+	            texture = attachment.region.page.texture.pcTexture;
+	          }
+	        }
+	        if (texture) {
+	          if (texture instanceof pc__namespace.StandardMaterial) {
+	            this._materials[texture.name] = texture;
+	            slot.material = texture.name;
+	          } else {
+	            var key = null;
+	            if (texture.name) {
+	              key = texture.name;
+	            } else if (texture.getSource() instanceof Image) {
+	              key = texture.getSource().getAttribute('src');
+	            }
+	            if (key) {
+	              if (this._materials[key] === undefined) {
+	                var material = this.createMaterial(texture);
+	                this._materials[key] = material;
 	              }
+	              slot.material = key;
 	            }
 	          }
 	        }

build/playcanvas-spine.3.8.js

@@ -10305,6 +10305,7 @@ var spine = (function (pc) {
 	    this.skeletonVersion = semver.valid(semver.coerce(_skeletonData.version));
 	    this._spine_3_6_0 = semver.satisfies(this.skeletonVersion, '<=3.6.0');
 	    this._spine_3_7_99 = semver.satisfies(this.skeletonVersion, '<=3.7.99');
+	    this._spine_4_0_X = semver.satisfies(this.skeletonVersion, '~4.0.0');
 	    this._spine_4_1_X = semver.satisfies(this.skeletonVersion, '~4.1.23');
 	    this.skeleton = new spine$1.Skeleton(_skeletonData);
 	    this.skeleton.updateWorldTransform();
@@ -10443,26 +10444,32 @@ var spine = (function (pc) {
 	        } else if (attachment instanceof spine$1.MeshAttachment) {
 	          slot._active.type = ATTACHMENT_TYPE.MESH;
 	        }
-	        if (attachment.region && attachment.region.texture) {
-	          var texture = attachment.region.texture.pcTexture;
-	          if (texture) {
-	            if (texture instanceof pc__namespace.StandardMaterial) {
-	              this._materials[texture.name] = texture;
-	              slot.material = texture.name;
-	            } else {
-	              var key = null;
-	              if (texture.name) {
-	                key = texture.name;
-	              } else if (texture.getSource() instanceof Image) {
-	                key = texture.getSource().getAttribute('src');
-	              }
-	              if (key) {
-	                if (this._materials[key] === undefined) {
-	                  var material = this.createMaterial(texture);
-	                  this._materials[key] = material;
-	                }
-	                slot.material = key;
+	        var texture = null;
+	        if (attachment.region) {
+	          if (attachment.region.texture) {
+	            texture = attachment.region.texture.pcTexture;
+	          }
+	          if (attachment.region.page && attachment.region.page.texture) {
+	            texture = attachment.region.page.texture.pcTexture;
+	          }
+	        }
+	        if (texture) {
+	          if (texture instanceof pc__namespace.StandardMaterial) {
+	            this._materials[texture.name] = texture;
+	            slot.material = texture.name;
+	          } else {
+	            var key = null;
+	            if (texture.name) {
+	              key = texture.name;
+	            } else if (texture.getSource() instanceof Image) {
+	              key = texture.getSource().getAttribute('src');
+	            }
+	            if (key) {
+	              if (this._materials[key] === undefined) {
+	                var material = this.createMaterial(texture);
+	                this._materials[key] = material;
 	              }
+	              slot.material = key;
 	            }
 	          }
 	        }