查看“微件:Chibi”的源代码

<includeonly>
    <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("https://gitlab.com/donnyjie/zjsnrwiki-pixi-spine/-/raw/master/images/Ship_girl_270_1.png"),
                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>
</includeonly>