previewer.js

document.addEventListener("DOMContentLoaded",function(){let s=document.getElementById("drop-area"),o=document.getElementById("drop-text"),r=document.getElementById("file-list"),d=document.getElementById("myCanvas"),w,l,p,h=new spine.webgl.Matrix4,m,g,c,u,f,v,x,b,y,S,C,T;class A{json;atlas;texture;add(e){e.name.endsWith(".json")?this.json=e:e.name.endsWith(".atlas")?this.atlas=e:e.name.endsWith(".png")&&(this.texture=e),this.json&&this.atlas&&this.texture&&this.startLoad().finally(),console.log("load:",e.name)}async startLoad(){console.log("构建骨骼数据");var e=await this.atlas.text();let t=await createImageBitmap(this.texture,{premultiplyAlpha:"none",colorSpaceConversion:"none"});var n,e=new spine.TextureAtlas(e,()=>new spine.webgl.GLTexture(w,t)),e=(v.textureLoader(t),new spine.AtlasAttachmentLoader(e)),e=new spine.SkeletonJson(e),a=(e.scale=1,JSON.parse(await this.json.text())),e=e.readSkeletonData(a),i=(x=new spine.Skeleton(e),S=e.defeaultSkin?e.defeaultSkin.name:"default",b=e.skins.map(e=>e.name),y=e.animations.map(e=>e.name),$("#skins"));i.empty();for(n of b){var s=$("<option></option>");s.attr("value",n).text(n),n===S&&s.attr("selected","selected"),i.append(s)}var o,r=$("#animations");let d;r.empty();for(o of y){var l=$("<option></option>");l.attr("value",o).text(o),o===S&&l.attr("selected","selected"),r.append(l),d=d||o}var p,h,a=new spine.AnimationStateData(x.data);C=((e=x).setToSetupPose(),e.updateWorldTransform(),p=new spine.Vector2,h=new spine.Vector2,e.getBounds(p,h,[]),{offset:p,size:h}),(T=new spine.AnimationState(a)).setAnimation(0,d,!0),i.change(()=>{x.setToSetupPose();var e=$("#skins option:selected").text();x.setSkinByName(e),x.setSlotsToSetupPose()}),r.change(()=>{x.setToSetupPose();var e=$("#animations option:selected").text();T.setAnimation(0,e,!0)}),f=Date.now()/1e3,requestAnimationFrame(k)}}function k(){if(!$("#pause").is(":checked")){var e=w,t,n=(t=Date.now()/1e3)-f,t=(f=t,d.clientWidth),a=d.clientHeight;if(d.width==t&&d.height==a||(d.width=t,d.height=a),C){var t=C.offset.x+C.size.x/2,a=C.offset.y+C.size.y/2,i=C.size.x/d.width,s=C.size.y/d.height;let e=2*Math.max(i,s);e<1&&(e=1);i=d.width*e,s=d.height*e;h.ortho2d(t-i/2,a-s/2,i,s),w.viewport(0,0,d.width,d.height)}e.clearColor(.3,.3,.3,1),e.clear(e.COLOR_BUFFER_BIT),T.update(n),T.apply(x),x.updateWorldTransform(),l.bind(),l.setUniformi(spine.webgl.Shader.SAMPLER,0),l.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX,h.values),p.begin(l),t=$("#pma").is(":checked"),m.premultipliedAlpha=t,m.draw(p,x),p.end(),l.unbind(),(a=$("#debug").is(":checked"))&&(c.bind(),c.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX,h.values),g.premultipliedAlpha=t,u.begin(c),g.draw(u,x),u.end(),c.unbind())}requestAnimationFrame(k)}var e;s.addEventListener("dragover",function(e){e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect="copy"}),s.addEventListener("drop",function(e){e.preventDefault(),e.stopPropagation(),console.log(e.dataTransfer.files);for(var t=new A;r.firstChild;)r.removeChild(r.firstChild);r.style.display="block",o.style.display="none",s.style.justifyContent="end";var n=e.dataTransfer.files;for(let e=0;e<n.length;e++){var a=n[e],i=document.createElement("li");i.textContent=a.name,a.type?["image/png","application/json"].includes(a.type)&&(t.add(a),r.appendChild(i)):a.name.endsWith(".atlas")&&(t.add(a),r.appendChild(i))}}),d.width=window.innerWidth,d.height=window.innerHeight,e={alpha:!1},(w=d.getContext("webgl",e)||d.getContext("experimental-webgl",e))?(l=spine.webgl.Shader.newTwoColoredTextured(w),p=new spine.webgl.PolygonBatcher(w),h.ortho2d(0,0,d.width-1,d.height-1),m=new spine.webgl.SkeletonRenderer(w),v=new spine.webgl.AssetManager(w),(g=new spine.webgl.SkeletonDebugRenderer(w)).drawRegionAttachments=!0,g.drawBoundingBoxes=!0,g.drawMeshHull=!0,g.drawMeshTriangles=!0,g.drawPaths=!0,c=spine.webgl.Shader.newColored(w),u=new spine.webgl.ShapeRenderer(w),(e=w).clearColor(.3,.3,.3,1),e.clear(e.COLOR_BUFFER_BIT)):alert("WebGL is unavailable.")});