Forums » Help » Updated angle on projectile following creep

Hi, I'm currently making a tower defense game, and I've got a creep entity, a tower entity and a projectile entity.

When a creep enters the towers radius, the tower spawns a projectile entity - this projectile entity has an animation sheet, and i want that animation sheet of an arrow to follow head first as it is traveling towards the creep entity.

I've tried to come up with a solution, but honestly i lack the mathematical skills required.

##
r = Math.atan2(creepCenterY - this.tower.pos.y, creepCenterX - this.tower.pos.x);
this.anims.move.angle = r;
##

I've put this in the projectile entity in the update function.

Can anybody out there help me out?

Take a look at this and see if it helps http://www.helixsoft.nl/articles/circle/sincos.htm look at the Using atan2(): homing missiles section.

this.currentAnim.angle = this.tower.angleTo( creep_ent );

That’s making it to easy quidmonkey... sorry keep forgetting that method.

:)

Impact's documentation yields all sorts of gems.

thanks for the response guys! much appreciated!

Although the method you pointed out quidmonkey, does take care of the angle rotation of the projectile (thanks for that!).. the animation still seems to be flying sideways.. what could be the cause of that? I'm sorry - its my first javascript project ever, so I'm a bit of a newbie..

Post your code.

make sure you are setting the angle to the currentAnim as quidmonkey pointed out in his example: this.currentAnim.angle.

json data:
'projectile' : {
'speed' : 20000,
'sprite' : 'projectile_arrow.png',
'anim' : { 'name' : 'move', 'time' : 0.5, 'seq' : [0] },
'size' : { x: 5, y: 10},

ig.module(
  'game.entities.projectile'
)
.requires(
  'impact.entity'
)
.defines(function(){

  EntityProjectile = ig.Entity.extend({

    // Set some of the properties
    collides: ig.Entity.COLLIDES.PASSIVE,
    maxVel: {x: 500, y: 500},
    flip: false,
    color: '#000',
		framesToKill: 5,
		deadFrames: 0,
    
    // projectile properties
	/** 
	 * speed = time passes before hitting the target
	 * sprite: sprite of projectile,
	 * anim: array of animations,
     * anim.name -> name of animation
     * anim.time -> time between sprite switch
     * anim.seq -> sequence of animation
	 */
	 
init: function( x, y, settings ) {
  this.parent( x, y, settings );  
  this.animSheet = new ig.AnimationSheet( 'media/' + this.sprite, this.size.x, this.size.y );
  if ( !ig.global.wm ) {
    this.addAnim( this.anim.name, this.anim.time, this.anim.seq );
    this.addAnim( 'dead', 0.1, [1,2,3] );
  }
},

    update: function() {

			pCenterX = this.pos.x + (this.size.x - (this.size.x / 2));
			pCenterY = this.pos.y + (this.size.y - (this.size.y / 2));
			creepCenterX = this.target.pos.x + (this.target.size.x - (this.target.size.x / 2));
			creepCenterY = this.target.pos.y + (this.target.size.y - (this.target.size.y / 2));
			
			diffX = creepCenterX - pCenterX; 
			diffY = creepCenterY - pCenterY; 
			
			currSpeed = (diffX * diffX) + (diffY * diffY);
			cFact = this.speed / currSpeed;
			
			this.vel.x = Math.sqrt(cFact) * diffX;
			this.vel.y = Math.sqrt(cFact) * diffY;

			if ( (pCenterX <= creepCenterX + 3) && (pCenterY <= creepCenterY + 3) &&
				(pCenterX >= creepCenterX - 3) && (pCenterY >= creepCenterY - 3) )  {

				// TODO: CORRECT ANGLE ALGORITHM
				this.currentAnim.angle = this.tower.angleTo( this.target );

				if (this.deadFrames == 0) {
					this.currentAnim = this.anims.dead;	
					// Remove health from creep, with a roll from tower damage
          this.target.health -= Math.floor(Math.random() * this.tower.dmg_max) + this.tower.dmg_min;

          // Add projectile effects
          if(this.effects) {
            for(i=0; i < this.effects.length; i++) {
              this.target.addEffect(this.effects[i]);
            }
          }
				}
				else if (this.deadFrames == this.framesToKill) {
					this.kill();
				}
					this.deadFrames += 1;
			}
			this.parent();
    },

test:
dev11.reload.dk/blomster


As of now the image follows the creep and angle's it - but it follows on the side, not with the arrows head first..

please help :-)

Not tested but:

this.currentAnim.angle = this.tower.angleTo( this.target );

should it be:

this.currentAnim.angle = this.angleTo( this.target );

Thanks stuart, it gave me a better angling of the projectile when following creep

but still i have the same problem of getting the animation to launch head first.. it's still lauching the projectile from the side .. any suggestions?

Do you have the demo updated on line so I can take a look ?

dev11.reload.dk/blomster

(It's an arrow :D) - the white point needs to be heading towards the creep..

you need to type "s" to spawn a single creep

build the guard tower for test..

Thanks for your time!

I'd simplify to something like this:

range: 100, //target within range will be shot at

update: function(){
    if( this.distanceTo( this.target ) < this.range ){
        var angle = this.angleTo( this.target );
        this.currentAnim.angle = angle;
        this.vel.x = Math.cos( angle ) * this.speed;
        this.vel.y = Math.sin( angle ) * this.speed;
    }
    //projectile effect code
    this.parent();
}

I also strongly encourage you to use var in front of all local variables. If you don't, all variables get patched into the global scope, which is bad style, non-performant and leads to namespace conflicts.

Thanks for the help quidmonkey - I will absolutely change the variables, I simply thought it was the other way around! and for the simplification of the code, I most definitely will clean it up and use your advice!

Do you have any advise as to the current launching of the projectile? how it is coming out flipped almost 270 degrees ?

Very many thanks for the help!

Did you change this.currentAnim.flip.x or .y?

No, sir, I have not :/

Thought it could have been the pictured that was designed the wrong way, but that wasn't it. I also tried other pictures and other json input to try and fix it, but either it didn't show or it was flipped the same way. I'm currently out of ideas... its annoying!

Try: this.currentAnim.angle = -angle.

Elvar, in vector math, 0 degrees points due East (positive x). Your texture file, projectile_arrow.png, is oriented such that it represents a projectile rotated at -90 degrees (pointing North).

Not a big deal, you could compensate by adding (90).toRad() to your angle calculations. Simpler still would be to rotate (in your graphics editor) the image at the source by +90. The head will point East, as it should when its current animation angle is at the default of 0.

Then, this.currentAnim.angle = this.angleTo(this.target) should work like a charm.

PS: doing this continuously (in update) doesn't look very realistic. Your arrows are acting like guided missiles. You might want to set this only once, at spawn time.

quidmonkey - that made the projectile spin a little off :/

Thanks so much alexandre! that did it. I appended the (90).toRad() to the angle and that worked as I hoped it would! The guided missile act is really a question of taste i think :D I think it looks dope!

Thank you very much! I love this forum, so quick answers. - Thanks guys!!!