微件:Chibi

   <script src="https://pixijs.download/v4.8.9/pixi.js"></script> 
   <script src="https://gitlab.com/donnyjie/zjsnrwiki-pixi-spine/-/raw/master/pixi-spine.js"></script> 

<script>

   window.onload = chibiAnimation();
   function chibiAnimation() { 
       const app = new PIXI.Application({
           width:500,
           height:350,
           transparent:true
       });
       document.getElementById("chibiDiv").appendChild(app.view);

       app.stop();

       var spineLoaderOptions = { 
           metadata: { 
               image: PIXI.BaseTexture.fromImage(""),
               spineAtlasFile: 'https://gitlab.com/donnyjie/zjsnrwiki-pixi-spine/-/raw/master/images/Ship_girl_270_1.atlas'
           }
       };

       // load spine data
       app.loader
           .add('spineCharacter', 'https://gitlab.com/donnyjie/zjsnrwiki-pixi-spine/-/raw/master/images/Ship_girl_270_1.json', spineLoaderOptions)
           .load(onAssetsLoaded);

       let chibi = null;

       function onAssetsLoaded(loader, res) {

           chibiCage = new PIXI.Container()

           //载入骨架
           chibi = new PIXI.spine.Spine(res.spineCharacter.spineData); 
           chibi.update(0);
           chibi.autoUpdate = true;
                   
           //设定skin
           chibi.skeleton.setSkinByName('normal');
           chibi.skeleton.setSlotsToSetupPose();

           //设定animation
           chibi.state.setAnimation(0, 'normal', true, 0); 

           //设定小人位置
           chibi.x = 250; //你萌定的基准位置是Q版小人的脚下附近
           chibi.y = 325; 
           chibi.scale.x = 1; 
           chibi.scale.y = 1; 

           chibiCage.addChild(chibi);
           app.stage.addChild(chibiCage);

           //开始动画
           app.start(); 

           let rectangle = new PIXI.Graphics();
           rectangle.beginFill(0x000000,0);
           rectangle.drawRect(75, 0, 350, 350);
           rectangle.endFill();
           rectangle.x = 0;
           rectangle.y = 0;
           rectangle.cacheAsBitmap = true;
           chibiCage.addChild(rectangle);

       };

       //快照按钮
       const button1 = PIXI.Sprite.from('images/snap.png');

       button1.x = 0;
       button1.y = 0;

       button1.interactive = true;
       button1.buttonMode = true;
       button1.on('pointerdown', takeScreenshot);
       app.stage.addChild(button1);

       function takeScreenshot() {
           app.renderer.extract.canvas(chibiCage).toBlob((b) => {
               const a = document.createElement('a');
               document.getElementById("chibiDiv").append(a);
               a.download = 'screenshot';
               a.href = URL.createObjectURL(b);
               a.click();
               a.remove();
           }, 'image/png');
       }

       //切换Skin按钮
       const button2 = PIXI.Sprite.from('images/skin.png');

       button2.x = 50;
       button2.y = 0;

       button2.interactive = true;
       button2.buttonMode = true;
       button2.on('pointerdown', changeSkin);
       app.stage.addChild(button2);

       function changeSkin() {
           const currentSkinName = chibi.skeleton.skin.name;
           const newSkinName = (currentSkinName === 'normal' ? 'damage' : 'normal');
           chibi.skeleton.setSkinByName(newSkinName);
           chibi.skeleton.setSlotsToSetupPose();
       }

       //切换Animation按钮（spine居然没有成员变量储存当前动画名称）
       const button3 = PIXI.Sprite.from('images/animation.png');

       button3.x = 100;
       button3.y = 0;

       button3.interactive = true;
       button3.buttonMode = true;
       button3.on('pointerdown', changeAnimation);
       app.stage.addChild(button3);

       var count = 0;

       function changeAnimation() {
           count++;
           switch (count%6){
               case 0:
                   chibi.state.setAnimation(0, 'normal', true, 0);
                   break;
               case 1:
                   chibi.state.setAnimation(0, 'attack', true, 0);
                   break;
               case 2:
                   chibi.state.setAnimation(0, 'throw', true, 0);
                   break;
               case 3:
                   chibi.state.setAnimation(0, 'Antiaircraft', true, 0);
                   break;
               case 4:
                   chibi.state.setAnimation(0, 'damage', true, 0);
                   break;
               case 5:
                   chibi.state.setAnimation(0, 'wreck', true, 0);
                   break;
           }
       }
   } 

</script>