Is anyone having problems getting EaselJS to run properly

Question

I just started trying to use EaselJS, and I'm following the tutorials that I have found online. As far as I can tell, I have copied the code exactly, and all works fine until I add the "addEventListener" function command. After that I get a blank canvas. No errors in the console either. (BTW I have jQuery loaded also, but the problems were there before I added jQuery, so there shouldn't be any conflict between the two libraries)

Here is my code:

    <script src="js/easeljs.js"></script>
    <script>

$(document).ready(function(){
    window.canvas = document.getElementById("myCanvas");
    stage = new createjs.Stage(canvas);
    shape = new createjs.Shape();

    shape.graphics.f("purple").r(50,50,100,100);

    stage.addChild(shape);

    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener(function(){
        shape.rotation += 8;
        stage.update();
    });
});

</script>

I was just wondering if there is some other preparation, or libraries that I need to be linking to that is causing the animation to fail. I have tried multiple tutorials, and they all seem to fail when the addEventListener, or eventListener commands are used. I've also had some fail when the ticker is initiated. CreateJS is supposedly a really good engine for creating JavaScript games, but so far it's not working at all, so any advice to make it function properly would be awesome. Thank you in advance.

`element.addEventListener(type, listener, useCapture);` You are not setting any type — A. Wolff, Dec 18 '13 at 18:20
in the tutorial video I found, he didn't set a type either, and it worked for him. — Jeff Walters, Dec 18 '13 at 18:21
Strange i don't know this plugin but addEventListener() need a type otherwise on each event are you listening??? Here there are some examples http://www.createjs.com/Docs/EaselJS/modules/EaselJS.html They always set a type — A. Wolff, Dec 18 '13 at 18:22
Here's the video, it's a Lynda.com tutorial, so it should be of very good quality, with no errors like I'm getting. http://www.youtube.com/watch?v=jC-YCbv_4cE — Jeff Walters, Dec 18 '13 at 18:22
I'm not sure why it is event creating an event listener because it's supposed to be a command to rotate the square in a circle. It'd be easier to just use the jQuery animate command, but this is all centered around CreateJS, which is an up and coming JavaScript game engine that Adobe is backing. I figured it'd be better that this, I'm having some real problems with every tutorial I check out. — Jeff Walters, Dec 18 '13 at 18:25
Yeah. Whenever I used "addListener" I get an error in the console, "Object function (){throw"Ticker cannot be instantiated."} has no method 'addListener'" — Jeff Walters, Dec 18 '13 at 18:58
That's my entire code. other than the canvas tag. I wish it was just a typo or something, but some of the code I've straight copied, and pasted from a working html, and it breaks when I save it. This is just frustrating. — Jeff Walters, Dec 18 '13 at 19:07
Tested your code here, it works: http://jsfiddle.net/Heyp3/ Of course using **addListener()** not addEventListener() — A. Wolff, Dec 18 '13 at 19:15
cool! So I guess the problem is something with my implementation of createJS. I'll have to figure out on my own why it won't load correctly. — Jeff Walters, Dec 18 '13 at 19:36
Small update. I checked the createjs.js code, and addListener function is not found in document, I've tried downloading the code from github, and linking straight to the website, and neither are working. Why am I having such trouble with this one function, what js file has this function? If I could get the code for it, I'd copy it into my create.js file, and all would be fixed. — Jeff Walters, Dec 18 '13 at 20:05
In network tab of your browser, be sure the script easeljs is correctly loaded. I guess you have already check your console for error but if not, do it. Copy paste code from working jsfiddle with all dependencies, set a minimal page, and then see if it works — A. Wolff, Dec 18 '13 at 20:10
`addListener` is a very old approach, and was deprecated a few versions ago. The new Event model using `addEventListener` is way more powerful, and inline with HTML DOM events. — Lanny, Dec 19 '13 at 13:19

score 0 · Answer 1 · answered Jan 21 '14 at 00:00

Not sure if this helps but here is updated code

$(document).ready(function(){
window.canvas = document.getElementById("myCanvas");
stage = new createjs.Stage(canvas);
shape = new createjs.Shape();

shape.graphics.f("red").r(50,50,100,100);

stage.addChild(shape);

createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener('tick', onTick)

function onTick() {
    shape.rotation += 8;
    stage.update();
}

);

Is anyone having problems getting EaselJS to run properly

1 Answers1