Add Spine 4.0 Plugin Support

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;
 	            }
 	          }
 	        }