Mouse control for flash games

Another of my students hit me with a conundrum to solve, and as usual I can't resist the challenge.

They are constructing a flash game to help new computer users become more comfortable with using a mouse. The idea is to have a top down driving game in which the player must move the car side to side to avoid on coming traffic and bad guys.

My student is already aware that you can easily make the player character follow the mouse, but they were not happy with such instant precise movements for the game (cars, after all, just don't respond like that). So I have been looking at some code to add a dampening or easing effect on the car so there is a smoother response when the mouse is jerked.

Demo SWF



Easing with mouse chasing movieclips

To kick off, the frame rate of the movie is 30fps for nice smooth animation. Then chuck the following code into the first frame:

var easing = 0.1; //The higher the frame rate the lower this number must be

onEnterFrame = function () {
_root.player_mc._x += (_root._xmouse-_root.player_mc._x)*easing;
};

And it really is that simple. To tighten or loosen the easing just ammend the easing variable.

Then just whack a movie clip on the stage called player_mc and you're done.

Taking the game code further

It is too late at night to waffle about it now, but you may find the developed code helpful. I may even get round to finishing it:

/* Students are required to design and build a simple game that teaches mouse control. However one student complained that the mouse is too sensitive for his game idea (a topdown car game).

One solution to his problem is to have acar contolled only along the X axis (left and right) andthat we do some simple algbra to dampen or ease the control ofthe player car.

Here goes.*/

/*First declare some variables */

var easing = 0.1;
/*easing sensitivity, the greater the frame rate the smaller this value needs to be.*/

var crashcount = 0;

/*Then we hide the mouse cursor so the user is not distracted and can focus on the player movie clip instead (which will be constrained to follow the mouse only on the X axis.*/

Mouse.hide();

/*Now a function to implement the easing and test for collisions with the enemy*/

onEnterFrame = function () {
/*Here's the easing*/
_root.player_mc._x += (_root._xmouse-_root.player_mc._x)*easing;

/*Because of limitation on Flash's hit test (whole bounding box or just a single point) the following code checks for collisions on 2 single points on the player, the top right, and the top left of the player. Because all collisions will be front on, this will be sufficient to see if the player collided with the enemy. We choose the single point method because it allows us to lump all the enemies into one movie clip and for us to weave between the gaps without raising a collision as we would if we used the bounding box.*/

if (_root.enemy_mc.hitTest(_root.player_mc._x+(_root.player_mc._width/2), _root.player_mc._y-(_root.player_mc._height/2), true)) {
crashcount += 1;
} if (_root.enemy_mc.hitTest(_root.player_mc._x-(_root.player_mc._width/2), _root.player_mc._y-(_root.player_mc._height/2), true)) {
crashcount += 1;
}
};