Jump to content


Recommended Posts

Hi all ,

I've been trying to create a cannonball that flys relative to gravity

and relative to the player's mouse position on the canvas + velocity.


Further away the mouse cursor higher the velocity with gravity as a constant.


I'm using createjs and not wanting to include any physics engine.


Here is where I've got so far

     var w = canvas.width;      var h = canvas.height;     var ox = 20;     var oy = h - 20;    bullet1 = new createjs.Shape();    bullet1.graphics.beginFill( "black" ).drawCircle(5, 5, 10);    bullet1.graphics.beginFill( "white" ).drawCircle(2, 5, 2); // shiney spot on bullet1        bullet1.x = cannon.x;        bullet1.y = cannon.y;        bullet1.regX = 5;        bullet1.regY = 5;        bullet1.alpha = 0;        scene1.addChild(bullet1);  //  add cannonball   kaPow = false; // haven't fired the cannon yet oneback.on("click", function(){  //oneback is the background image        kaPow = true;        scene1.addChild(bullet1);        bullet1.x = cannon.x;        bullet1.y = cannon.y;     });          oneback.on("mouseup", function(){         kaPow = false;     });			    stage.on("tick", function(){    if(kaPow == true){        bullet1.rotation += 8;        bullet1.alpha = 1;     var vx = (stage.mouseX - ox) / 50;     var vy = (stage.mouseY - oy) / 50;        bullet1.x += vx;        bullet1.y += vy;        }            });

The cannonball (bullet1) moves along and across the stage.

cannon.rotation is working nicely. 

I've managed the cannonball velocity ok - ish.

and direction ok - ish. But there is heaps missing here such as time

and gravity.


Thanks for any insights

Link to comment
Share on other sites

        bullet1.rotation += 8;


This is not very accurate, because different frames may take up different amounts of time, but this code rotates the bullet the same way on every frame. You should use deltaTime(time passed since the last frame, in milliseconds).

I have not used createjs, but deltaTime is probably passed as a first argument of the tick function.

So it would be:

stage.on("tick", function(deltaTime){    if(kaPow == true){        bullet1.rotation += deltaTime * ROTATION_SPEED;

This way animations will be smoother and more accurate and have identical speeds on different machines.


This is a great use case for vectors. You can have 3 vectors: positionVector, velocityVector and  accelerationVector (=gravity, acceleration in 1 millisecond). Then, on every frame, you would have something like this(just a pseudocode, but Createjs probably includes a vector class with similar syntax):

stage.on("tick", function(deltaTime) {....positionVector = positionVector.addVector(velocityVector.multiplyByScalar(deltaTime));velocityVector = velocityVector.addVector(accelerationVector.multiplyByScalar(deltaTime));...
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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