• 中文
  • spine-canvas贴图显示不完整

我模拟spine-canvas的demo加载绘制自己这边的资源,效果是这样的。然后我尝试把demo的资源地址换成我的,也是同样的效果,但这个资源在spine-web-player中却可以正常播放

不知道是不是我忽略了什么配置项,以下是我的主要代码

mounted() {
    this.load();
  },
  methods: {
   async load() {
      canvas = document.getElementById("canvas");
      context = canvas.getContext("2d");
      skeletonRenderer = new spine.SkeletonRenderer(context);
    skeletonRenderer.debugRendering = true;
    skeletonRenderer.premultipliedAlphaBlendModes = false;
    skeletonRenderer.premultipliedAlphaColors = true;
    console.log(skeletonRenderer)
      // Load the assets.
      assetManager = new spine.AssetManager("/sketch/");
      assetManager.loadText("jibeichen/jibeichen.json");
      assetManager.loadTextureAtlas("jibeichen/jibeichen.atlas");
    assetManager.loadText("wanwan/wanwan.json");
      assetManager.loadTextureAtlas("wanwan/wanwan.atlas");
      await assetManager.loadAll();
  console.log(assetManager)
      // Create the texture atlas and skeleton data.

  // Start rendering.
  requestAnimationFrame(this.run);
   },
  loadSkeleton(name,animation,skin){
    let atlas = assetManager.require(`${name}/${name}.atlas`);
    let json = assetManager.require(`${name}/${name}.json`);
      let atlasLoader = new spine.AtlasAttachmentLoader(atlas);
      let skeletonJson = new spine.SkeletonJson(atlasLoader);
      let skeletonData = skeletonJson.readSkeletonData(json);

  // Instantiate a new skeleton based on the atlas and skeleton data.
  skeleton = new spine.Skeleton(skeletonData);
skeleton.setSkinByName(skin)
  skeleton.setToSetupPose();
  skeleton.updateWorldTransform();
  bounds = skeleton.getBoundsRect();

  // Setup an animation state with a default mix of 0.2 seconds.
  var animationStateData = new spine.AnimationStateData(skeleton.data);
  // animationStateData.defaultMix = 0.2;
  animationState = new spine.AnimationState(animationStateData);
  console.log(animationState.setAnimation)
  // Set the run animation, looping.
  animationState.setAnimation(0, animation, true);
  },
  run () {
    if (assetManager.isLoadingComplete()) {
      this.loadSkeleton('jibeichen', 'jbc_010_1', "xizhuang");
      requestAnimationFrame(this.render);
    } else {
      requestAnimationFrame(this.run);
    }
  },
   render() {
      // Calculate the delta time between this and the last frame in seconds.
      var now = Date.now() / 1000;
      var delta = now - lastFrameTime;
      lastFrameTime = now;

  // Resize the canvas drawing buffer if the canvas CSS width and height changed
  // and clear the canvas.
  if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) {
     canvas.width = canvas.clientWidth;
     canvas.height = canvas.clientHeight;
  }
  context.clearRect(0, 0, canvas.width, canvas.height);

  // Center the skeleton and resize it so it fits inside the canvas.
  skeleton.x = canvas.width / 2;
  skeleton.y = canvas.height - canvas.height * 0.1;
  let scale = canvas.height / bounds.height * 0.8;
  skeleton.scaleX = scale;
  skeleton.scaleY = -scale;

  // Update and apply the animation state, update the skeleton's
  // world transforms and render the skeleton.
  animationState.update(delta);
  animationState.apply(skeleton);
  skeleton.updateWorldTransform();
  skeletonRenderer.draw(skeleton);

  requestAnimationFrame(this.render);
   }
  },
Related Discussions
...
  • Изменено