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

微件:Chibi：修订间差异

来自舰R百科
跳转到导航 跳转到搜索
交互式浏览历史
可视化wikitext
无编辑摘要
无编辑摘要
第1行： 第1行：
<includeonly>
<includeonly>
     <script src="https://pixijs.download/v4.8.9/pixi.js"></script>  
     <script src="https://pixijs.download/v4.8.9/pixi.js"></script>  
     <script src="https://cdn.jsdelivr.net/gh/pixijs/pixi-spine/bin/pixi-spine.js"></script>  
     <script src="pixi-spine.js"></script>  
<script>  
<script>  
     window.onload = chibiAnimation();
     function chibiAnimation(index) {
    function chibiAnimation() {
        document.getElementById("chibiLoad_" + index).style.display = "none";
 
        const pngFile = 'images/Ship_girl_' + index + '.png';
        const atlasFile = 'images/Ship_girl_' + index + '.atlas';
        const jsonFile = 'images/Ship_girl_' + index + '.json';
 
        //加载播放器
         const app = new PIXI.Application({
         const app = new PIXI.Application({
             width:500,
             width:500,
第10行： 第16行：
             transparent:true
             transparent:true
         });
         });
         document.getElementById("chibiDiv").appendChild(app.view);
         document.getElementById("chibiDiv_" + index).appendChild(app.view);


         app.stop();
         app.stop();


        //分别加载png，atlas和json文件
         var spineLoaderOptions = {  
         var spineLoaderOptions = {  
             metadata: {  
             metadata: {  
                 image: PIXI.BaseTexture.fromImage("https://www.zjsnrwiki.com/images/c/c3/Ship_girl_270_1.png"),
                 image: PIXI.BaseTexture.fromImage(pngFile),
                 spineAtlasFile: 'https://www.zjsnrwiki.com/images/3/34/Ship_girl_270_1.txt'
                 spineAtlasFile: atlasFile
             }
             }
         };
         };


        // load spine data
         app.loader
         app.loader
             .add('spineCharacter', 'https://www.zjsnrwiki.com/images/e/e8/Ship_girl_270_1.json', spineLoaderOptions)
             .add('spineCharacter', jsonFile, spineLoaderOptions)
             .load(onAssetsLoaded);
             .load(onAssetsLoaded);


第29行： 第35行：


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


             //载入骨架
             //载入骨架
第45行： 第49行：


             //设定小人位置
             //设定小人位置
             chibi.x = 250; //你萌定的基准位置是Q版小人的脚下附近
             chibi.x = 250; //小人的基准锚点是脚下附近
             chibi.y = 325;  
             chibi.y = 300;  
             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);
第56行： 第62行：
             app.start();  
             app.start();  


            //画透明矩形撑大容器，方便固定截图分辨率
             let rectangle = new PIXI.Graphics();
             let rectangle = new PIXI.Graphics();
             rectangle.beginFill(0x000000,0);
             rectangle.beginFill(0x000000,0);
第68行： 第75行：


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


         button1.x = 0;
         button1.x = 0;
第81行： 第88行：
             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);
                 document.getElementById("chibiDiv_" + index).append(a);
                 a.download = 'screenshot';
                 a.download = 'Ship_girl_' + index;
                 a.href = URL.createObjectURL(b);
                 a.href = URL.createObjectURL(b);
                 a.click();
                 a.click();
第90行： 第97行：


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


         button2.x = 50;
         button2.x = 50;
第108行： 第115行：


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


         button3.x = 100;
         button3.x = 100;
第144行： 第151行：
         }
         }
     }  
     }  
</script>
</script>  
</includeonly>
</includeonly>

2020年7月7日 (二) 22:22的版本

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