Animate库的StageGL跨域错误

Question

I'm building a game using Animate as an asset builder, using StageGL to handle the objects. All of my objects are SPOT bitmap textures stored in the main spritesheet that Animate generates.

If I try to create a new Bitmap to manually code an effect on one of the sprites (I want to split the bitmap into fragments using sourceRect and then 'dissolve'), I get a cross-origin error - despite the fact I am running the site through a Webpack dev server (ie, localhost:3000) and the sprites load fine elsewhere (say, if I just add a MovieClip already containing a bitmap to the stage).

var srcImg = new lib.MySourceImage(); //This is the Sprite in the Animate library
var bmp = new createjs.Bitmap(srcImg);
stage.addChild(bmp);

The bitmap will add fine as part of its parent library MovieClip, but I need the bitmap to be able to perform the sourceRect slicing... Any ideas?

Answer 1

I have found a solution, altho I still don't fully understand the cross-origin restriction.

    var img = new Image();
    img.crossOrigin = "Anonymous";
    img.src = loader.getItem("mySpriteSheet").src; // Get the spritesheet source image again
    var frame = new lib.MySourceImage().currentFrame; // In case the sprite moves around in later versions of the spritesheet, get the current position from the library
    var thisFrameData = ss["mySpriteSheet"].getFrame(frame);

I don't see why I should need to mark the crossOrigin property of the image again, as I presume it must be loaded as such when the Animate lib loads it for the first time (altho I can't see anywhere that specifically defines that).

Once I've got the frame's source data (basically a rectangle), I can use the x,y,width,height to define the new sprites from this image, along the lines of this suggestion from Lanny. This does exactly what I need to do, and seems performant enough.

It does strike me as inefficient/unnecessary to have to 'load' the image again, but I can't see an obvious alternative. Any suggestions welcome!