Merge pull request #31 from gritsenko/multiple-atlas-pages

Multiple atlas pages, release 1.12.0

src/addon.json

@@ -3,7 +3,7 @@
   "type": "plugin",
   "name": "Spine",
   "id": "Gritsenko_Spine",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "author": "Mikal and Igor Gritsenko",
   "website": "https://gritsenko.github.io/c3_spine_plugin",
   "documentation": "https://gritsenko.github.io/c3_spine_plugin",

src/c3runtime/actions.js

@@ -62,8 +62,9 @@
 
         SetAttachment(slotName, attachmentName)
         {
-            // XXX Not implemented
-            return;
+            const skeleton = this.skeletonInfo.skeleton;
+
+            skeleton.setAttachment(slotName,attachmentName);
         }
     };
 }

src/c3runtime/instance.js

@@ -75,61 +75,60 @@
         async initSpine() {
             this.initSpineInProgress = true;
             var uid = this.GetInstance().GetUID()
-            this._elementId = "SpineCanvas_" + uid;
+            this._elementId = uid;
             this.DEMO_NAME = this._elementId;
 
             // Get C3 canvas gl context
             // Context already exists and we want to use (for render to texture)
-            // XXX Can't change existing context attributes (though we may want to for PMA)
-            // var config = { alpha: false };
+            this.canvas = globalThis.c3_runtimeInterface.GetCanvas() // C3 canvas
             let config = {}
             this.gl = this.canvas.getContext("webgl2", config) || this.canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
             let gl = this.gl
-            if (!gl) {
-                alert('WebGL is unavailable.');
-                return;
-            }
 
             // Init spineBatcher (only initializes once), add here after canvas, etc. are ready, adding inside type.js OnCreate() was too early for iOS (canvas not ready)
-            spineBatcher.init(this.canvas, this.gl)
-
-            let version = 0;
-            this.isWebGL2 = false;
-            let glVersion = gl.getParameter( gl.VERSION );
-
-            if ( glVersion.indexOf( 'WebGL' ) !== - 1 )
-            {
-               version = parseFloat( /^WebGL\ ([0-9])/.exec( glVersion )[ 1 ] );
-               this.isWebGL2 = ( version >= 2.0 );
-            } else if ( glVersion.indexOf( 'OpenGL ES' ) !== - 1 )
-            {
-
-               version = parseFloat( /^OpenGL\ ES\ ([0-9])/.exec( glVersion )[ 1 ] );
-               this.isWebGL2 = ( version >= 3.0 );
-            }
+            spineBatcher.init()
 
             // Init Spine elements
             this.mvp = new spine.webgl.Matrix4();
-            this.shader = spine.webgl.Shader.newTwoColoredTextured(gl);
-            this.batcher = new spine.webgl.PolygonBatcher(gl);
+            // this.shader = spine.webgl.Shader.newTwoColoredTextured(gl);
+            // this.batcher = new spine.webgl.PolygonBatcher(gl);
             this.mvp.ortho2d(0, 0, 0, 0); // XXX Render to texture size unknown until skeleton loaded.
-            this.renderer = new spine.webgl.SkeletonRenderer(gl);
-            this.shapes = new spine.webgl.ShapeRenderer(gl);
+            // this.renderer = new spine.webgl.SkeletonRenderer(gl);
+            // this.shapes = new spine.webgl.ShapeRenderer(gl);
             this.assetManager = new spine.SharedAssetManager();
-            this.bgColor = new spine.Color(0.0, 0.0, 0.0, 0.0);
+            // this.bgColor = new spine.Color(0.0, 0.0, 0.0, 0.0);
 
             if (this._sdkType._skeletonData.notInitialized)
             {
-                // console.log("[Spine] Loading textures, json, atlas");
+                console.log(this.GetInstance().GetUID(),'[Spine] Loading skeleton, textures, json, atlas');
                 // Only load textures once for creation of skeletonData, not for each instance
                 // Disable PMA when loading Spine textures
                 spine.webgl.GLTexture.DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL = true;
-                this.pngURI = await globalThis.c3_runtimeInterface._localRuntime._assetManager.GetProjectFileUrl(this.pngPath);
+                // this.pngURI = await globalThis.c3_runtimeInterface._localRuntime._assetManager.GetProjectFileUrl(this.pngPath);
+                // this._sdkType._assetPaths[this.pngPath] = this.pngURI;
+                // Path translation for json and atlast (1:1)
+
                 this.atlasURI = await globalThis.c3_runtimeInterface._localRuntime._assetManager.GetProjectFileUrl(this.atlasPath);
+                this._sdkType._assetPaths[this.atlasURI] = this.atlasURI;
+                this._sdkType._assetPaths[this.atlasPath] = this.atlasURI;
                 this.jsonURI = await globalThis.c3_runtimeInterface._localRuntime._assetManager.GetProjectFileUrl(this.jsonPath);
-                let textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+                this._sdkType._assetPaths[this.jsonURI] = this.jsonURI;
+                this._sdkType._assetPaths[this.jsonPath] = this.jsonURI;
+
                 this.assetManager.loadJson(this.DEMO_NAME, this.jsonURI);
-                this.assetManager.loadTexture(this.DEMO_NAME, textureLoader, this.pngURI);
+
+                let textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
+
+                // Load multiple textures and set up path translation (for C3 preview with 'blob' URIs)
+                let assetPaths = this.pngPath.split(" ");
+                for(let i=0;i<assetPaths.length;i++)
+                {
+                    this.pngURI = await globalThis.c3_runtimeInterface._localRuntime._assetManager.GetProjectFileUrl(assetPaths[i]);
+                    this._sdkType._assetPaths[assetPaths[i]] = this.pngURI;
+                    this.assetManager.loadTexture(this.DEMO_NAME, textureLoader, this.pngURI);
+                }
+                console.log('[SpineInit] paths',this._sdkType._assetPaths)
+
                 this.assetManager.loadText(this.DEMO_NAME, this.atlasURI);
             }
             this.isSpineInitialized = true;
@@ -185,7 +184,7 @@
                 const atlasURI = assetManager.get(this.DEMO_NAME, this.atlasURI);
                 this._sdkType._atlas = new spine.TextureAtlas(atlasURI, function(path) {
                     // console.log(`Loading png atlas ${path} replaced with ${self.pngURI}`);
-                    return assetManager.get(self.DEMO_NAME, self.pngURI);
+                    return assetManager.get(self.DEMO_NAME, self._sdkType._assetPaths[path]);
                 });
                 this._sdkType._atlasLoader = new spine.AtlasAttachmentLoader(this._sdkType._atlas);
                 let skeletonJson = new spine.SkeletonJson(this._sdkType._atlasLoader);

src/c3runtime/spine-draw.js

@@ -28,20 +28,16 @@ class SpineBatch {
         this._tickCount = tick
     }
 
-    init(canvas,gl)
+    init()
     {
         if (this._initialized) return 
 
-        this.gl = gl
-        this.canvas = canvas
-
         // Get C3 canvas gl context
         // Context already exists and we want to use (for render to texture)
-        // let config = {}
-        // this.canvas = globalThis.c3_runtimeInterface.GetCanvas() // C3 canvas
-
-        // this.gl = this.canvas.getContext("webgl2", config) || this.canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
-        // let gl = this.gl
+        this.canvas = globalThis.c3_runtimeInterface.GetCanvas() // C3 canvas
+        let config = {}
+        this.gl = this.canvas.getContext("webgl2", config) || this.canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
+        let gl = this.gl
 
         if (!gl) {
             alert('WebGL is unavailable.');
@@ -63,22 +59,17 @@ class SpineBatch {
            this.isWebGL2 = ( version >= 3.0 );
         }
 
-        // Create VAO for SpineDraw
-        if (!this.isWebGL2)
+        if (this.isWebGL2)
         {
-            var extOESVAO = gl.getExtension("OES_vertex_array_object");
+            this.myVAO = gl.createVertexArray();
+        } else
+        {
+            let extOESVAO = gl.getExtension("OES_vertex_array_object");
             if (!extOESVAO)
             {
                 alert("Spine plugin error: webGL1 with no OES_vertex_array_object support");  // tell user they don't have the required extension or work around it
                 return;
             }
-
-        }
-        if (this.isWebGL2)
-        {
-            this.myVAO = gl.createVertexArray();
-        } else
-        {
             this.myVAO = extOESVAO.createVertexArrayOES();
         }
 
@@ -88,7 +79,7 @@ class SpineBatch {
         this.renderer = new spine.webgl.SkeletonRenderer(gl);
         this.shapes = new spine.webgl.ShapeRenderer(gl);
 
-        this._initialized = true
+        this._initialized = true;
     }
 
     addInstance(instance, skeletonScale, uid)
@@ -139,6 +130,12 @@ class SpineBatch {
 
         // Save C3 webgl context, may be able to reduce some
         // Save VAO to restore
+
+        if (!this.isWebGL2)
+        {
+            var extOESVAO = gl.getExtension("OES_vertex_array_object");
+        }
+
         if (this.isWebGL2)
         {
             var oldVAO = gl.createVertexArray();

src/c3runtime/type.js

@@ -20,6 +20,7 @@
             this._skeletonInstances = {};
             this._rendered = false;
             this._tickCount = -1;
+            this._assetPaths = {};
         }
 
         LoadTextures(renderer)

src/lang/en-US.json

@@ -17,8 +17,8 @@
             "desc": "path to atlas file i.e. \"character.atlas\""
           },
           "png": {
-            "name": ".png path",
-            "desc": "path to png file i.e. \"character.png\""
+            "name": ".png path(s)",
+            "desc": "path to png file(s) i.e. \"character.png\" or \"character.png character2.png\""
           },
           "skin": {
             "name": "Skin",

src/plugin.js

@@ -2,7 +2,7 @@
 {
 
     const PLUGIN_ID = "Gritsenko_Spine";
-    const PLUGIN_VERSION = "1.11.2";
+    const PLUGIN_VERSION = "1.12.0";
     const PLUGIN_CATEGORY = "general";
 
     const PLUGIN_CLASS = SDK.Plugins.Gritsenko_Spine = class SpinePlugin extends SDK.IPluginBase {