JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgithub.com/CreateJS/EaselJS/master/lib/easeljs-0.6.1.min.js"></script>
<script src="https://rawgithub.com/CreateJS/PreloadJS/master/lib/preloadjs-0.3.1.min.js"></script>
<canvas id="animationCanvas" width ='400' height='300'></canvas>
JavaScript
var startPosition = {x:50, y:50};
var imageUrl = "https://raw.github.com/CreateJS/EaselJS/master/examples/assets/runningGrant.png";
var assets = [];
var loader;
var spriteSheet;
$(function(){
// create a new stage and point it at our canvas:
var stage = window.stage = new createjs.Stage(document.getElementById("animationCanvas"));
//Then use the preload like this :
var manifest = [{
src: imageUrl,
id: "grant"
}
];
loader = new createjs.LoadQueue(false);
loader.onFileLoad = handleFileLoad;
loader.onComplete = onResourcesLoaded;
loader.loadManifest(manifest);
});
//and the callback functions :
function handleFileLoad(event) {
assets.push(event.item);
}
function onResourcesLoaded() {
for (var i = 0; i < assets.length; i++) {
var item = assets[i];
var id = item.id;
var result = loader.getResult(id);
if (item.type == createjs.LoadQueue.IMAGE) {
// this does NOT trigger the loading process, it can be removed
var bmp = new createjs.Bitmap(result);
spriteSheet = new createjs.SpriteSheet({
"animations": {
"none": [0, 0],
"run": [0, 25],
"jump": [26, 63]
},
//this line in YOUR version triggered an own loading process, independent from the queue
"images": [result],
"frames": {
"height": 292.5,
"width":165.75,
"regX": 0,
"regY": 0,
"count": 64
}
});
//add to the stage with my spritesheet :
var sprite = new createjs.BitmapAnimation(spriteSheet);
sprite.x = startPosition.x;
sprite.y = startPosition.y;
// Add the sprite to the stage.
...