微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在 vue.cli 中导入 pixi.js Spine

如何解决如何在 vue.cli 中导入 pixi.js Spine

需要在vue页面引入pixi.js的spine动画功能 我可以导入 pixi.js 但 Spine 函数总是显示“未捕获的类型错误:无法读取未定义的属性 'Spine'”[在此处输入链接描述][1]spineboy.atlas/spineboy.json/spineboy.png/在此链接中 npm install pixi.js import * as PIXI from 'pixi.js'

 <template>
   <div>
     import spine
   </div>

 </template>
 
 <script>
 
 import * as PIXI from 'pixi.js'
 
 mounted: function () {
   var app = new PIXI.Application();
   document.body.appendChild(app.view);
 
   // load spine data
   app.loader
     .add('spineboy','assets/pixi-spine/spineboy.json')
     .load(onAssetsLoaded);
 
   app.stage.interactive = true;
 
   function onAssetsLoaded(loader,res) {
       // create a spine boy
       var spineBoy = new PIXI.spine.Spine(res.spineboy.spineData);
 
       // set the position
       spineBoy.x = app.screen.width / 2;
       spineBoy.y = app.screen.height;
 
       spineBoy.scale.set(1.5);
 
       // set up the mixes!
       spineBoy.stateData.setMix('walk','jump',0.2);
       spineBoy.stateData.setMix('jump','walk',0.4);
 
       // play animation
       spineBoy.state.setAnimation(0,true);
 
       app.stage.addChild(spineBoy);
 
       app.stage.on('pointerdown',function() {
           spineBoy.state.setAnimation(0,false);
           spineBoy.state.addAnimation(0,true,0);
       });
     }
   }
 
 
 </script>

 ```


[1]: https://github.com/pixijs/examples-v4/tree/main/examples/assets/pixi-spine

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。