jiangwei小站
103 字
1 分钟
uniapp网页端使用pixi播放spine动画

uniapp 和 h5 的 pixi 使用有些兼容性问题

pixi.js 下载地址 pixi-spine.js 下载地址

<view id="pixiDom" ref="pixiDom" class="pixiDemo"></view>
import * as PIXI from "@/utils/pixi.js";
import "@/utils/pixi-spine.js";

mounted(){
  const dom = document.getElementById("pixiDom");
  let type = "WebGL"
  if (!PIXI.utils.isWebGLSupported()) {
    type = "canvas"
  }
  const app = new PIXI.Application({
    antialias:true,
    resolution:1,
    transparent: true,
    autoResize:true
  });

  dom.appendChild(app.view);
  app.renderer.resize(dom.clientWidth, dom.clientHeight);
  app.loader
  .add("spineCharacter", "/static/spine/cloud/Cloud.json")
  .load(function (loader, resources) {
    const animation = new PIXI.spine.Spine(resources.spineCharacter.spineData);
    animation.x = 200;
    animation.y = 350;
    animation.scale.x = 0.5;
    animation.scale.y = .3;
    animation.state.addAnimation(0, "animation", true);
    app.stage.addChild(animation);
  });
}
<style scoped lang="scss">
.pixiDemo {
  height: 600px;
}
</style>