CODEWITHSUNDEEP
javascriptanimationspriteeaseljs
Tristan Dubé
Tristan Dubé

Reputation: 740

Using SpriteStage in EaselJS makes a Sprite's mask not work

I'm doing animations with Sprites in EaselJS and due to performance issues I have to use the SpriteStage class to help with the perf. I'm also using alot of masks to make the sprites get clipped in certain parts.

Now when using a SpriteStage all my masks are not applied anymore. I'm thinking its because a SpriteStage do not support adding shapes to the childrens but I thought it could work since I'm not really adding it to the stage's children, merely applying it to a Sprite.

I used this fiddle from another SO question, adding some code to show that masks are not working under SpriteStage.

var maskRect = new createjs.Graphics().drawRect(0, 0, 16, 16);
var shape = new createjs.Shape(maskRect);

var animation = new createjs.Sprite(ss);
animation.mask = shape; // Clip is applied

Is there any way to use masks under SpriteStage ? Or is there any way of getting the same effect ?

Upvotes: 0

Views: 423

Answers (1)

Lanny
Lanny

Reputation: 11294

SpriteStage is meant for WebGL-based rendering, which currently has no support for Graphics/vector content at this time. This means that EaselJS Shapes, and vector masks are not supported.

You could probably create masked content, cache it, and then use the .cacheCanvas as your SpriteSheet. This is not ideal, and would be difficult to use with multiple sprites. You might be able to use SpriteSheetBuilder to generate a useful SpriteSheet. These are just suggestions, and nothing I have tested before.

Upvotes: 1

Related Questions