So, it's time to add support for Mouse and mobile Touch input. As we saw with keyboard input, we could try to develop a helper library from scratch that handles all the various types of events for both Mouse and Mobile devices. But why re-invent the wheel? If there is already an existing library in place that we could use, let's use it!
Once again we turn to Jerome Etienne from Paris, France. Remember he's the one who developed the 'keyboardstate.js' helper that we used a couple of posts back. Well, it just so happens that Jerome also has a nifty helper file for adding Touch input as well as Mouse input - it's called 'virtualjoystick.js'. What Jerome was trying to accomplish with this helper is to make a tablet or smartphone behave like a joystick/gamepad. And since tablets and smartphones are flat, with no analog sticks protruding from them, Jerome made a virtual representation of a joystick that is displayed on the flat screen - hence the name 'Virtual'Joystick.
Let's take a moment and think about what a gamepad or joystick does. When you pull the controller stick/pad to the left, you expect the game character to go left. Same goes for right. When you push the stick up, you expect the character to move upwards (or similar action like 'jump'). And when you pull the stick down, you expect the character to move down (or similar action like 'crouch').
Jerome's virtualjoystick.js emulates this game-controller behavior by waiting for the user to touch the screen (or click if they only have a mouse). Once the player touches(or clicks), a blue circle is drawn on the screen precisely at the point of touch contact (or click location). This circle is called the 'base' and does not move. Now, while the base is sitting still, a smaller circle is drawn inside of the base - this is called the 'stick' and this DOES move. It can move completely outside the bigger circle if you want. Whenever the user swipes (or drags with the mouse button down) in a direction, the 'stick' will follow, just like a game controller stick.
So, if the user swipes right, the 'stick' circle will follow the user's finger and the controller stick will go right also. If the user swipes down, the stick moves down as well. Similarly, if the user only has a mouse, then when they move the mouse right, the 'stick' circle moves to the right also. Even if the user goes crazy and moves in circles, the virtual stick will accurately follow!
The only requirement for all this to work is that the user's finger must remain somewhere on the screen. If the user lifts their finger (or mouse users let go of the mouse button), then the base and stick both disappear. Not to worry though - nothing is lost. The cool thing is that you can just touch (or click) anywhere on the screen again, and that new point becomes your new joystick 'base'! It is now instantly ready to accept control movements from the player again.
At some point we may want to make the base always 'on' and permanently displayed onscreen, no matter what the user does. The solution will depend on the type of game we are making and the type of situation that we are dealing with.
Enough talk - let's add this helper library to our project so we can use it! Click on the following link:
virtualjoystick.js
Once you're there, Right-Click and Save as... 'virtualjoystick.js' . Place it next to our other .js files inside your 'js' folder.
We need to access this new file from our example01.html webpage. By now, you should be an expert at adding libraries to html pages, right? Just in case though, here's how to do it:
<script src="js/virtualjoystick.js"></script>Remember order matters when you are adding these libraries (or dependencies) to your project. Place the above line in between threex.keyboardstate.js and tempGame.js . 'virtualjoystick.js' will now be 3rd place in the list of 4 total .js files.
Here is our updated 'example01.html' file with the new 'virtualjoystick.js' library added in correct order:
<!DOCTYPE html>
<html>
<head>
<title> Hello Three.js </title>
</head>
<body>
<div id="help" style="position:fixed; left:40%; top:4%; color:grey;">
Desktop: Press W A S D keys, or Click/Drag Mouse to move the cube
</div>
<div id="help2" style="position:fixed; left:40%; top:8%; color:grey;">
Mobile: Hold finger down and slow Swipe to move the cube
</div>
<div id="debug1" style="position:fixed; left:5%; top:4%; color:grey;">
Debug Info
</div>
<div id="debug2" style="position:fixed; left:5%; top:8%; color:grey;">
Debug Info
</div>
<script src="js/three.min.js"></script>
<script src="js/threex.keyboardstate.js"></script>
<script src="js/virtualjoystick.js"></script>
<script src="js/tempGame.js"></script>
</body>
</html>
Copy and paste the above code and save it as 'example01.html', writing over the old one. Notice also that I added another div element with an id of "help2". This is another line of help text placed directly below the older help text. It tells the mobile (smartphone and tablet) users what to do in order to move the green cube on their devices.
In part 2 of this post, we will access this new helper file and learn how to apply it to our project. Then our demo/future games will be playable on any device - laptop, desktop, tablet, and smartphone!
(Continued in part 2)...
In part 2 of this post, we will access this new helper file and learn how to apply it to our project. Then our demo/future games will be playable on any device - laptop, desktop, tablet, and smartphone!
(Continued in part 2)...
