舰R百科是靠无数自愿编辑者持续地建设更新完善的。编辑非常简单，请勇于更新页面！
编辑入门 | 资助百科 | 留言讨论页 | 微博@舰R百科 | 百科编辑讨论Q群：366818861

微件:Chibi：修订间差异

来自舰R百科
跳转到导航 跳转到搜索
交互式浏览历史
可视化wikitext
（创建页面，内容为“ <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"></s…”）
 
无编辑摘要
 
（未显示同一用户的71个中间版本）
第1行： 第1行：
     <script src="https://pixijs.download/v4.8.9/pixi.js"></script>  
<includeonly>
     <script src="https://gitlab.com/donnyjie/zjsnrwiki-pixi-spine/-/raw/master/pixi-spine.js"></script>  
     <script src="https://0v0.zjsnrwiki.com/gameRes/chibi/pixi.js"></script>  
     <script src="https://0v0.zjsnrwiki.com/gameRes/chibi/pixiv5-spine3.8.js"></script>  
<script>  
<script>  
    window.onload = chibiAnimation();
     function chibiAnimation(index, loadButton) {  
     function chibiAnimation() {  
         loadButton.style.display = "none";
         const app = new PIXI.Application({
 
            width:500,
        const pngFile = 'https://0v0.zjsnrwiki.com/gameRes/chibi/spine/' + index + '/Ship_girl_' + index + '.png';
            height:350,
         const atlasFile = 'https://0v0.zjsnrwiki.com/gameRes/chibi/spine/' + index + '/Ship_girl_' + index + '.atlas';
            transparent:true
        });
         document.getElementById("chibiDiv").appendChild(app.view);


         app.stop();
         var jsonFile = index + '/Ship_girl_' + index + '.38.skel';
        //特殊修复（记得atlas文件去空格）。转码工具：https://naganeko.pages.dev/chibi-gif/
        if (index == '1050' || index == '1057' || index == '256' || index == '408_2')
            jsonFile = index + '/Ship_girl_' + index + '.38.json';


        //分别加载png，atlas文件
         var spineLoaderOptions = {  
         var spineLoaderOptions = {  
             metadata: {  
             metadata: {  
                 image: PIXI.BaseTexture.fromImage("https://gitlab.com/donnyjie/zjsnrwiki-pixi-spine/-/raw/master/images/Ship_girl_270_1.png"),
                 image: PIXI.BaseTexture.from(pngFile),
                 spineAtlasFile: 'https://gitlab.com/donnyjie/zjsnrwiki-pixi-spine/-/raw/master/images/Ship_girl_270_1.atlas'
                 spineAtlasFile: atlasFile
             }
             }
         };
         };


         // load spine data
         //调整半透明渲染模式
         app.loader
        if (index != '40')
             .add('spineCharacter', 'https://gitlab.com/donnyjie/zjsnrwiki-pixi-spine/-/raw/master/images/Ship_girl_270_1.json', spineLoaderOptions)
            spineLoaderOptions.metadata.image.alphaMode = PIXI.ALPHA_MODES.PMA;
            .load(onAssetsLoaded);
 
        //加载播放器
         const app = new PIXI.Application({
            width:800,
            height:600,
             transparent:true
        });
        loadButton.parentNode.appendChild(app.view);
 
        app.stop();
 
        loader = new PIXI.Loader('https://0v0.zjsnrwiki.com/gameRes/chibi/spine/');
        loader.add('spineCharacter', jsonFile, spineLoaderOptions);
        loader.onComplete.once(onAssetsLoaded);
        loader.load();


         let chibi = null;
         let chibi = null;
        let rectangle = null;


         function onAssetsLoaded(loader, res) {
         function onAssetsLoaded(loader, res) {
            chibiCage = new PIXI.Container()


             //载入骨架
             //载入骨架
第37行： 第52行：
                      
                      
             //设定skin
             //设定skin
             chibi.skeleton.setSkinByName('normal');
             if (chibi.skeleton.data.findSkin('normal') != null)
                chibi.skeleton.setSkinByName('normal');
                else chibi.skeleton.setSkinByName('default');
             chibi.skeleton.setSlotsToSetupPose();
             chibi.skeleton.setSlotsToSetupPose();


第44行： 第61行：


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


            //把小人塞到容器里，再把容器塞到播放器里
            chibiCage = new PIXI.Container()
             chibiCage.addChild(chibi);
             chibiCage.addChild(chibi);
             app.stage.addChild(chibiCage);
             app.stage.addChild(chibiCage);
第55行： 第74行：
             app.start();  
             app.start();  


             let rectangle = new PIXI.Graphics();
             //画透明矩形撑大容器，方便固定截图分辨率
             rectangle.beginFill(0x000000,0);
            rectangle = new PIXI.Graphics();
             rectangle.drawRect(75, 0, 350, 350);
             rectangle.beginFill(0x00FF00);
             rectangle.drawRect(0, 0, 800, 600);
             rectangle.endFill();
             rectangle.endFill();
            rectangle.alpha = 0;
             rectangle.x = 0;
             rectangle.x = 0;
             rectangle.y = 0;
             rectangle.y = 0;
             rectangle.cacheAsBitmap = true;
             rectangle.cacheAsBitmap = true;
             chibiCage.addChild(rectangle);
             app.stage.addChild(rectangle);
 
            app.stage.setChildIndex(rectangle, 0);
           
            rectangle2 = new PIXI.Graphics();
            rectangle2.beginFill(0xFFFFFF);
            rectangle2.drawRect(0, 0, 800, 600);
            rectangle2.endFill();
            rectangle2.alpha = 0;
            rectangle2.x = 0;
            rectangle2.y = 0;
            rectangle2.cacheAsBitmap = true;
            app.stage.addChild(rectangle2);
            app.stage.setChildIndex(rectangle2, 0);
         };
         };


         //快照按钮
         //快照按钮
         const button1 = PIXI.Sprite.from('images/snap.png');
         const button1 = PIXI.Sprite.from('https://0v0.zjsnrwiki.com/images/5/54/Spine_player_snap.png');


         button1.x = 0;
         button1.x = 0;
第80行： 第112行：
             app.renderer.extract.canvas(chibiCage).toBlob((b) => {
             app.renderer.extract.canvas(chibiCage).toBlob((b) => {
                 const a = document.createElement('a');
                 const a = document.createElement('a');
                 document.getElementById("chibiDiv").append(a);
                 loadButton.parentNode.append(a);
                 a.download = 'screenshot';
                 a.download = 'Ship_girl_' + index;
                 a.href = URL.createObjectURL(b);
                 a.href = URL.createObjectURL(b);
                 a.click();
                 a.click();
第89行： 第121行：


         //切换Skin按钮
         //切换Skin按钮
         const button2 = PIXI.Sprite.from('images/skin.png');
         const button2 = PIXI.Sprite.from('https://0v0.zjsnrwiki.com/images/4/4e/Spine_player_skin.png');


         button2.x = 50;
         button2.x = 50;
第101行： 第133行：
         function changeSkin() {
         function changeSkin() {
             const currentSkinName = chibi.skeleton.skin.name;
             const currentSkinName = chibi.skeleton.skin.name;
             const newSkinName = (currentSkinName === 'normal' ? 'damage' : 'normal');
             let newSkinName = 'default';
            if (currentSkinName === 'normal') newSkinName = 'damage';
            if (currentSkinName === 'damage') newSkinName = 'normal';
             chibi.skeleton.setSkinByName(newSkinName);
             chibi.skeleton.setSkinByName(newSkinName);
             chibi.skeleton.setSlotsToSetupPose();
             chibi.skeleton.setSlotsToSetupPose();
第107行： 第141行：


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


         button3.x = 100;
         button3.x = 100;
第139行： 第173行：
                 case 5:
                 case 5:
                     chibi.state.setAnimation(0, 'wreck', true, 0);
                     chibi.state.setAnimation(0, 'wreck', true, 0);
                    break;
                case 6:
                    chibi.state.setAnimation(0, 'w', true, 0);
                    break;
                case 7:
                    chibi.state.setAnimation(0, 's', true, 0);
                     break;
                     break;
             }
             }
         }
         }
     }  
 
        //切换绿幕按钮
        const button4 = PIXI.Sprite.from('https://0v0.zjsnrwiki.com/images/c/cf/Spine_g.png');
 
        button4.x = 0;
        button4.y = 50;
 
        button4.interactive = true;
        button4.buttonMode = true;
        button4.on('pointerdown', switchGreenCurtain);
        app.stage.addChild(button4);
 
        function switchGreenCurtain() {
            rectangle.alpha == 0 ? rectangle.alpha = 1 : rectangle.alpha = 0;
        }
       
        //切换白幕按钮
        const button5 = PIXI.Sprite.from('https://0v0.zjsnrwiki.com/images/4/44/Spine_W.png');
 
        button5.x = 50;
        button5.y = 50;
 
        button5.interactive = true;
        button5.buttonMode = true;
        button5.on('pointerdown', switchWhiteCurtain);
        app.stage.addChild(button5);
 
        function switchWhiteCurtain() {
            rectangle2.alpha == 0 ? rectangle2.alpha = 1 : rectangle2.alpha = 0;
        }
     }
</script>
</script>
</includeonly>

2024年4月1日 (一) 11:32的最新版本

取自“https://www.zjsnrwiki.com/index.php?title=微件:Chibi&oldid=95087”