Controlling your game character with the mouse has many advantages over keyboard control. The character can move more fluidly in all directions, rather than a rigid up-down-right-left movements. Mouse control is more intuitive and natural, particularly for people who do not play games regularly. And you can use the mouse button to shoot or perform some other action in the game.
I will be showing you how to control your game character with the mouse with precise movements. I will also show how to create lag in the character’s movement to give it a loose, floating effect. And lastly, we will hide the cursor so it really feels like you are moving the game character.
How to Control Game Character with Mouse-Precisely
First, open an AS 2 flash file: File> New> Flash File (ActionScript 2.0) and draw your game character image. Select your game character and go to Modify> Convert to Symbol.
Name it Player and select Movie clip as the type. Under Linkage check the box export for actionscript and put Player as the Identifier and the Class. Click okay and you are back to the stage.
Now create a new actionscript file: File> New> ActionScript File. Save this actionscript file in the same folder as your .fla file and name it Player.
In our Player class we will write the code that controls the game character movie clip, Player.
Here is the code that will go in our Player actionscript file and the explanation follows.
1 2 3 4 5 6 7 8 9 | class Player extends MovieClip { function onEnterFrame() { this._x = _root._xmouse; this._y = _root._ymouse; } } |
Line 6: We set the x coordinate of Player equal to the x coordinate of the mouse on the stage.
Line 7: We set the y coordinate of Player equal to the y coordinate of the mouse on the stage.
Code placed in the onEnterFrame event handler is executed continually at the frame rate so we now have continuous mouse control over our Player movie clip.
The mouse cursor will appear over the crosshair in your movie clip. If you want to reposition it so the cursor is not covering your character image, double click the movie clip in your .fla file and place the image wherever you like near the crosshair. Or you can hide the mouse cursor, as I explain below.
Mouse control with precise movement:
How to Create Lag in your Game Character Movement
Lagging character movement provides a different aesthetic for a game; it is good for making the game character seem like they are floating or moving underwater. It also affects the gameplay, often making a game more difficult. The person playing the game has to have more finesse in order to be successful.
To create this effect:
Follow the directions above for creating your game character movie clip, Player.
Open or create an actionscript document named Player.
Here is the code for our Player class:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | class Player extends MovieClip { function onEnterFrame() { var xMouse = _root._xmouse; var yMouse = _root._ymouse; if(Math.abs(xMouse - this._x) < 1) { this._x = xMouse; this._y = yMouse; } else { this._x -= (this._x-xMouse) / 7; this._y -= (this._y-yMouse) / 7; } } } |
Line 6-7: We set the variables xMouse and yMouse equal to the x and y positions of the Player movie clip on the stage.
Line 8-12: If the absolute value of the variable xMouse minus the x coordinate of Player is less than one, then the Player x and y coordinates will be the same as the x and y coordinates of the mouse. If the Player is less than one pixel away from the mouse cursor, it will be placed at the exact position as the mouse cursor.
Line 13-17: Otherwise, the distance between the Player movie clip and the cursor will decrease incrementally at a rate determined by subtracting the position of the cursor from the position of the Player and dividing by 7.
You can increase the number it is divided by to create a greater lag or you can decrease that number to lessen the lag. It depends on how great of control you want over the Player movie clip.
Mouse control with lagging movement:
How to Hide the Mouse Cursor
With the cursor hidden, the focus is on the game character. There is no chance that the character will be covered up by the cursor and it feels like you are controlling the game character, rather than leading them with the mouse. Hiding the mouse cursor is very simple.
In our Player actionscript file, we add the following code right above the function onEnterFrame().
1 2 3 4 | function onLoad() { Mouse.hide(); } |
Line 1-4: When the Player movie clip loads, the mouse cursor is hidden.
Mouse control with the cursor hidden and lagging movement:
