Forums » Code » Shoot Where I Click Short Tutorial

This short tutorial is going to help you aim using the mouse for a character in a side scrolling platformer.

It assumes that you already have moving and shooting code done and just want to add directional aiming via the mouse.

A short demonstration is available at http://www.mikedg.com/impact/sht/
Move with WASD or the Arrow keys.
Jump with space or X

Switch between three weapons with Tab
First, Standard gun which uses this aiming
Second, Grenades that don't use this aiming
Third, Spread gun that uses this aiming
-----------------------

In your players update function, where you normally trigger firing a bullet

 if( ig.input.pressed('shoot') ) { //Basic shoot command
     var mx = (ig.input.mouse.x + ig.game.screen.x); //Figures out the x coord of the mouse in the entire world
     var my = (ig.input.mouse.y + ig.game.screen.y); //Figures out the y coord of the mouse in the entire world

     var r = Math.atan2(my-this.pos.y, mx-this.pos.x); //Gives angle in radians from player's location to the mouse location, assuming directly right is 0
     /*
     Honestly, the above should probably take into account offsets of where your gun is located, 
     but that greatly overcomplicates this snippet since most of you are going to have different exit points for the barrel of your weapons

     Furthermore, each weapon might even have different exit points, so you might want to move the angle calculation into the init method of
     each bullet
     */
     ig.game.spawnEntity( this.activeWeapon, this.pos.x, this.pos.y, {flip:this.flip, angle:r} ); //Nothing to special here, just make sure you pass the angle we calculated in
}

In your bullets init(), you will want to set the acceleration or velocities for your bullet.

     var vely = Math.sin(this.angle) * this.desiredVel; //.desiredVel is just the velocity I would want if we were going in a straight line directly out of the right of the player. I just put it as a property of the entity since I refer to it in multiple locations
     var velx =  Math.cos(this.angle) * this.desiredVel;
     /*
     I'm a fan of fullspeed projectiles with no acceleration so we set the velocity, max velocity and for good measure acceleration too.
     You might want to start with a bit of velocity and some sort of acceleration so your projectile starts off slower and speeds up for something like a rocket 
     If that's the case, you'll want to do something like the following
     this.maxVel.x = whatever max you want;
     this.accel.x = Math.sin(this.angle)  * desiredAcceleration;
     this.accel.y = Math.cos(this.angle)  * desiredAcceleration;
     this.vel.x = Math.sin(this.angle)  * desiredStartingVelocity;
     this.vel.y = Math.cos(this.angle)  * desiredStartingVelocity;
     */
     this.maxVel.x = this.vel.x = this.accel.x = velx;
     this.maxVel.y = this.vel.y = this.accel.y = vely;

If you need some understanding of the math behind breaking velocity/acceleration into vertical and horizontal components check out http://www.physicsclassroom.com/class/vectors/u3l2f.cfm There's a bit of extra crap there, but it will probably help your understanding. That was the first thing I could find quickly Googling for an explanation that might help people who don't remember their trig that well.

good stuff with the angles

This is very helpful

I don't know what I'm doing wrong but whatever velocity I put in it just goes into a straight line.