This is a tutorial for using my Puggle library and the Corona SDK. if you are not a Corona user ( and why not? ) then this will not be of much interest to you.

Getting an object to follow the mouse cursor, or any other position such as a touch point or player character, is very common in 2D games and with Puggle it’s only a couple of lines of code so I figured it would make for a nice first tutorial.

The first thing you want to do, as will all future Puggle tutorials, is to include the library in your main.lua file like so:

require( "puggle.core" )

Next you’ll need an object that will act as our player, in your game this would naturally be a lot more interesting than a triangle ( unless of course you’re making an adaption of Flatland ) but for the purpose of this tutorial it is fine.

local object = display.newPolygon( display.contentCenterX, display.contentCenterY, { 0, 0, -5, 30, 5, 30 } )

Now we need an update function, and for this we’ll use a basic ‘enterFrame’ event handler. However this is where the magic happens, in it we’ll use two Puggle systems; ‘mouse’ and ‘maths’.

The first will be used to get the current cursor position, we pass ‘true’ to this method to tell Puggle that we want the position returned as a table with ‘x’ and ‘y’ properties instead of returning as two separate values.

local position = puggle.mouse:getPosition( true )

And then when we have that position, we can use the ‘maths’ system to get the angle between our current object and the mouse position, like so:

local angle = puggle.maths:angleBetweenVectors( object, position )

And then finally, we set the object’s rotation to the angle.

object.rotation = angle

All together inside the ‘enterFrame’ function it looks like this:

local enterFrame = function( event )

local position = puggle.mouse:getPosition( true )

local angle = puggle.maths:angleBetweenVectors( object, position )

object.rotation = angle


Runtime:addEventListener( "enterFrame", enterFrame )

Assuming you have are running a supported browser you should see our lovely triangle rotating to your mouse cursor in the window below.

The next step is to make the triangle move towards the cursor, which is also very easy to do with just one more function call, this time to get the vector for this angle.

Vectors are beyond the scope of this tutorial so for now all you need to know is that this will be a table with an ‘x’ and ‘y’ property, both between -1 and 1, that describe the direction of our rotation angle.

local vector = puggle.maths:vectorFromAngle( angle )

Now all we have to do is increment our object’s position using these values, like so:

object.x = object.x + vector.x
object.y = object.y + vector.y

And that’s it! Now you can make things a little more interesting, for instance giving the player a max turn rate so that it’s not so immidiate. To do this simply replace the ‘angleBetweenVectors()’ function with this one:

local angle = puggle.maths:limitedAngleBetweenVectors( object, position, object.rotation, 2 )

This new method still passes the two positions but it also includes the objects current rotation and a max number of degrees that we’re allowed to turn each frame.

The lower the value, the larger the turning circle will be.

Maybe you want the object to travel faster or slower? That’s easy to do as well, just adjust the position lines like so:

object.x = object.x + ( vector.x * speed )
object.y = object.y + ( vector.y * speed )

With a speed variable assigned higher in the code:

local speed = 2

And finally, just for fun, here’s a bunch of triangles all randomly positioned and given random speed and turnRate values following your cursor.

The code for this final project can be downloaded here.