Jump to content
Search Community

EaselJS: Ticker function confusion

Emanuel test

By Emanuel
in GSAP

Moderator Tag
 Share

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Emanuel test

Emanuel

Posted
Posted

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 sad.png! Not sure how to console debug it sad.png!


 


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. Emanuel!


 


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Easel Intro</title>

<script src="js/easeljs-0.6.0.min.js"></script>

<script>

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">

        <!-- Insert fallback content here -->

    </canvas>

</body>

</html>
Link to comment
Share on other sites
jamiejefferson test

jamiejefferson

Posted
Posted

Hi and welcome to the forums.

Correct me if I've missed something, but I think this question may be better suited to the EaselJS forums. These forums are dedicated to questions and issues relating to the GreenSock Animation Platform, which you don't appear to be using in your game. Maybe someone here has the knowledge/time to look at this for you, but you'll probably get a better response at a more relevant forum.

 

If you have any interest in using GSAP tweening in your application though, please don't hesitate to ask us here; we'd be glad to help you out with any questions you have.

Link to comment
Share on other sites
GreenSock test

GreenSock

Posted
Posted

We have answered this question at the CreateJS forum

http://community.createjs.com/discussions/easeljs/997-easeljs-ticker-implementation-confusion

 

We do our best to help out with issues when they come in - but we are a small team providing support, so my apologies that we took some time to answer this one.

 

Cheers!

 

We know exactly what you mean, Lanny. It can take a lot of time to dig into so many questions that come in on a regular basis and provide prompt answers. Thanks for chiming in and getting that question knocked out. Cheers to you and your team. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...