CODEWITHSUNDEEP
javascriptanimationwebglspriteeaseljs
CatalinBerta
CatalinBerta

Reputation: 1724

Create EaselJS sprite animation with SpriteStage (WebGL)

I have this sprite animation in EaselJS created with the classic Stage, here is the fiddle:

Fiddle: http://jsfiddle.net/6sygocvb/

EaselJS now has SpriteStage, which translates to WebGL and falls back to canvas if needed.

How do I create the example above with SpriteStage? Can you guys help me with a fiddle? Even though it is a very simple example, I just can't get it to work. I would be forever greatful if you can help me out with a working fiddle

Note: SpriteStage and SpriteContainer are in BETA and need to be included separately

https://github.com/CreateJS/EaselJS/blob/master/src/easeljs/display/SpriteContainer.js https://github.com/CreateJS/EaselJS/blob/master/src/easeljs/display/SpriteStage.js

The reason behind this is that I want to create some sprite animations in WebGL (for obvious reasons) that fallback on canvas when WebGL is not supported. EaselJS is now offering a fast and simple solution with SpriteStage, but I'm open to other solutions as well

Any kind of help is highly appreciated, thanks!

EDIT:

Thanks to Lanny, I have a fiddle with a somewhat working version of my sprite animation using SpriteStage, however, here it's not loading, all I see is a black background. it seems that it's not managing to load the background, any idea how to fix this? His fiddle http://jsfiddle.net/6sygocvb/1/

UPDATE:

Problem solved, thanks to Lanny, here is his Fiddle with loading the images before successfully. Also, a separate thread about loading images successfully with SpriteStage is on the CreateJS Community Forum

SOLUTION: After many researches and with the awesome help from the CreateJS guys (Lanny & gskinner), I have created a repo with a setup that works well with SpriteStage. The repo is here and it contains a custom version of SpriteStage.js (thanks gskinner) that has a fix for loading the images before rendering them.

Thanks and enjoy!

Upvotes: 0

Views: 1459

Answers (1)

Lanny
Lanny

Reputation: 11294

Here is an update fiddle. http://jsfiddle.net/6sygocvb/1/

Note that all elements added to a SpriteContainer must have the same SpriteSheet.

The 2 bits I added are:

1) Change to SpriteStage. I also moved the canvas element to the HTML block of the fiddle:

var stage = new createjs.SpriteStage("canvas");

2) Create a SpriteContainer to add your Sprite to:

var container = new createjs.SpriteContainer(ss);

Hope that helps!

[EDIT] Here is an updated fiddle using a power-of-2 image, and served from a CORS-enabled server. http://jsfiddle.net/lannymcnie/6sygocvb/5/

Upvotes: 2

Related Questions