EaselJS: Ticker function confusion

Emanuel · March 9, 2013

Hi Team,

I am a wireless specialist by trade and a very amateur programmer in my spare time. So I may ask some funny questions and my understanding may not be on par with most of you.

I am trying to program a basic asteroid avoidance game in easeljs. Basically I am drawing 10 asteroids on the canvas and making them move towards the left and offscreen. I will later initialise them offscreen to the right, move left and recycle them once they hit the left edge of the canvas to give a continuous asteroid field effect.

Underneath is my code.

All is working except my tick function (animate function). The tick function is actually part of createjs.Ticker class, so I am not actually calling this function with tick() anywhere in my code as the createjs.Ticker.addListener(this) is doing the work. The stage.update(); call in the tick function redraws the canvas. This is working but every frame it is not animating my asteroids. The for loop before the stage.update() seems to not do anything ! Not sure how to console debug it !

The Documentation surrounding the ticker class is very confusing. I have gone through a number of demos and they have similarly used the ticker function with bitmap image instead of circles.

Could any of you who have some Easeljs experience please give me a brief rundown on how to fix the issue, how to correctly call the ticker.addlistener function and if there are any rules with adding additional functionality to the tick() function as the easeljs library has a number of attributes already defined in the tick() function.

I could write my own animate function but I would rather use the Easeljs way for now as it cuts down on the code substantially.

Thank you for taking the time to read this post. Hope you have a great evening and Thank you in advance.

<!DOCTYPE html>

<html>

<head>

<title>Easel Intro</title>

var canvas;

var stage;

var Asteroid;

var numAsteroids;

var radius;

var asteroidsARRAY;

var canvasWidth = 800;

var canvasHeight = 600;

function init(){

canvas = document.getElementById("canvas");

stage = new createjs.Stage(canvas);

drawAsteroids();

}

function drawAsteroids(){

var container = new createjs.Container();

stage.addChild(container);

var numAsteroids = 10; // Number of Asteroids to be reproduced on screen.

asteroidsARRAY = []; //Array to store Asteroids.

for (var i=0; i<numAsteroids; i++){ //for loop to draw 10 Asteroids on canvas.

radius = 5+(Math.random()*10);

templateAsteroid = new createjs.Graphics();

templateAsteroid.setStrokeStyle(1);

templateAsteroid.beginStroke(createjs.Graphics.getRGB(0,0,0, .7));

templateAsteroid.drawCircle(0,0, radius);

Asteroid = new createjs.Shape(templateAsteroid);

Asteroid.x = Math.floor(Math.random()*canvasWidth);

Asteroid.y = Math.floor(Math.random()*canvasHeight);

Asteroid.speed = (Math.random()*5)+2;

container.addChild(Asteroid);

Asteroid.name = "asteroid"+i;

asteroidsARRAY.push();

}

stage.addChild(Asteroid);

createjs.Ticker.addListener(window);

}

function tick(){

var l = asteroidsARRAY.length;

for (var i=0; i<l; i++) {

var a = asteroidsARRAY;

a.x -= a.speed;

document.write(a.x);

}

stage.update();

}

</script>

</head>

<body onLoad="init();">

<canvas id="canvas" width="800" height="600">

</canvas>

</body>

</html>

CodeJunkie · March 29, 2013

I see this was a while back, and you may have solved it on your own by now. I am new to HTML5 and have been using the CreateJS libraries as well. Replace

   asteroidsARRAY.push();

with this   asteroidsARRAY.push(Asteroid);

You are not pushing the Asteriod object to the array, therefore when it looks for the length of the array in the tick function it is 0. Also, you can use the console and debugger in your browser to create breakpoints and step through your code to find issues. This has helped me quite a bit.

Sign In

EaselJS: Ticker function confusion

Recommended Posts

Emanuel

Link to comment

Share on other sites

CodeJunkie

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity