Jump to content
Search Community

Emanuel

Members
  • Posts

    2
  • Joined

  • Last visited

Emanuel's Achievements

0

Reputation

  1. Thank you for pointing me in the right direction. I was not sure. Unfortunately the easel forums take so long to have your post moderated ! I guess it is a patience game now ! Enjoy your day!
  2. 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. 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>
×
×
  • Create New...