Mouse Control for Flash Games - Part 2 - (Top Down Driving Game with Steering)

A couple of months ago I posted a solution for getting a MovieClip to follow the mouse, with easing. It was a quick solution for controlling the 'player' in a top-down car game.

Since then I have revised the code to also make the 'player' rotate in the direction of travel, to simulate the effect of the car steering.

Take a look:

Original Movie (without steering) - Demo SWF



Modified Code (with steering) - Demo SWF



As you can see the rotation produced by the modified code offers more realistic looking game play, allowing the 'player' car to appear to swerve as the player moves the mouse, and making the 'player' car straighten up as it comes to the end of its movement.

The Code

The code is actually remarkably simple, much simpler than I expected. As I look back through my development versions it gets progressively simpler as I cut out all the redundant code and am left with only what matters.

I will give you the code below, the comments explain how it works. Just paste it into your Flash Actionscript panel, and click the format button to make it nice and easy to read:

/* Includes code from http://dansinteractive.blogspot.com http://www.digitalarena.co.uk */
/* This code works best if your movie is set to run at 30fps. */

/* The higher the frame rate the lower this number must be. */

var easing = 10;

/* Influences how far the player_mc rotates in response to the mouse distance from the player_mc. The lower the number the greater the rotation. */

var rotatefactor = 4.5;

/* This function animates the player_mc in response to mouse moving. */

onEnterFrame = function () {

/* Works out the current distance between the X coordinate of the mouse and the X coordinate of the player_mc */

mousediff = _root._xmouse-_root.player_mc._x;

/* Moves the player_mc along the X axis towards the location of the mouse with easing to provide some delay and smooth movement. */

_root.player_mc._x += mousediff/easing;

/* Rotates the player_mc towards the mouse. The amount of rotation is determined by the difference between the player_mc location and the mouse location along the X axis, and the rotation factor defined in the variable at the top. The closer they are together the smaller the amount of rotation, the further apart the larger the rotation.
With the _rotation method a negative number means anti-clockwise (counter-clockwise) and a positive number means clockwise. Even so, we do NOT need to test which side of the player_mc the mouse is on to determine whether the angle of rotation should be positive or negative. This is because we base the rotation on the distance between the mouse and the player_mc, and if the mouse is to the left of the player_mc this code will return a negative number which in turn will give us a negative rotation factor. Cool.*/

_root.player_mc._rotation = mousediff/rotatefactor;
};


As you can see, the whole affect is achieved without trigonometry. As such it simulates the visual appearance of the 'player' car steering, but is not a mathematically accurate model of steering. But it is only intended to provide user mouse control of a car for a simple top-down driving game - accurate physics are not necessary.

The thing I am most pleased about (apart from the cool effect) is how little code it takes. Without comments, it is a mere 7 lines long. And yet it provides so much more engaging game play (I think so anyway). If you find it helpful, leave a comment.

Later.