eva-engine / eva.js

Eva.js is a front-end game engine specifically for creating interactive game projects.
https://eva.js.org
MIT License
1.75k stars 108 forks source link

更换资源,在资源加载成功前移除资源会报错 #175

Closed fanmingfei closed 2 years ago

fanmingfei commented 2 years ago

Expected Behavior

Current Behavior

Sprite Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'image') at Img.componentChanged (system.ts:60)

Image Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'image') at Sprite.componentChanged (system.ts:88)

Possible Solution

Steps to Reproduce

Environment

fanmingfei commented 2 years ago
import { RendererSystem } from "@eva/plugin-renderer"
import { Game, GameObject, RESOURCE_TYPE, resource } from "@eva/eva.js"
import { Sprite, SpriteSystem } from "@eva/plugin-renderer-sprite";

export const name = 'sprite';
export async function init(canvas) {

  resource.addResource([
    {
      name: 'spriteName',
      type: RESOURCE_TYPE.SPRITE,
      src: {
        image: {
          type: 'png',
          url: 'https://g.alicdn.com/eva-assets/eva-assets-examples/0.0.2/sprite/TB1ONLxOAL0gK0jSZFAXXcA9pXa-900-730.png',
        },
        json: {
          type: 'json',
          url: 'https://g.alicdn.com/eva-assets/eva-assets-examples/0.0.2/sprite/ad317f6aea149d9a8b34a517e5df2caf.json',
        },
      },
      preload: false,
    }, {
      name: 'spriteName1',
      type: RESOURCE_TYPE.SPRITE,
      src: {
        image: {
          type: 'png',
          url: 'https://g.alicdn.com/eva-assets/eva-assets-examples/0.0.2/sprite/TB1ONLxOAL0gK0jSZFAXXcA9pXa-900-730.png?a=1',
        },
        json: {
          type: 'json',
          url: 'https://g.alicdn.com/eva-assets/eva-assets-examples/0.0.2/sprite/ad317f6aea149d9a8b34a517e5df2caf.json?a=1',
        },
      },
      preload: false,
    },
  ]);
  const game = new Game({
    systems: [
      //@ts-ignore
      new RendererSystem({
        canvas,
        width: 750,
        height: 1000,
        backgroundColor: 0x101010,
      }),
      //@ts-ignore
      new SpriteSystem(),
    ],
  });

  const go = new GameObject('symbol_5', {
    size: { width: 200, height: 244 },
    position: {
      x: 300,
      y: 365,
    },
  });

  //@ts-ignore
  const sprite = new Sprite({
    resource: 'spriteName',
    spriteName: 'symbol_5',
  });

  go.addComponent(sprite)

  setTimeout(() => {
    sprite.resource = 'spriteName1'
    sprite.spriteName = 'symbol_4'
    setTimeout(() => {
      go.removeComponent(Sprite);
    }, 16)
  }, 1600)
  game.scene.addChild(go);
}
fanmingfei commented 2 years ago
import { RendererSystem } from "@eva/plugin-renderer";
import { Game, GameObject, RESOURCE_TYPE, resource } from "@eva/eva.js"
import { Img, ImgSystem } from "@eva/plugin-renderer-img";
export const name = 'image';
export async function init(canvas) {
  resource.addResource([
    {
      name: 'imageName',
      type: RESOURCE_TYPE.IMAGE,
      src: {
        image: {
          type: 'png',
          url: 'https://gw.alicdn.com/tfs/TB1DNzoOvb2gK0jSZK9XXaEgFXa-658-1152.webp',
        },
      },
      preload: true,
    },
    {
      name: 'imageName1',
      type: RESOURCE_TYPE.IMAGE,
      src: {
        image: {
          type: 'png',
          url: 'https://gw.alicdn.com/tfs/TB1DNzoOvb2gK0jSZK9XXaEgFXa-658-1152.webp?a=1',
        },
      },
      preload: true,
    },
  ]);
  const game = new Game({
    systems: [
      new RendererSystem({
        canvas,
        width: 750,
        height: 1000,
      }),
      new ImgSystem(),
    ],
  });

  const image = new GameObject('image', {
    size: { width: 750, height: 1319 },
    origin: { x: 0, y: 0 },
    position: {
      x: 0,
      y: -319,
    },
    anchor: {
      x: 0,
      y: 0,
    },
  });

  const img = image.addComponent(
    new Img({
      resource: 'imageName',
    }),
  );

  setTimeout(()=>{
    img.resource = 'imageName1'
    setTimeout(()=>{
      image.removeComponent(Img)
    },16)
  }, 1000)
  game.scene.addChild(image);