Here is another article of the “Let’s Make a 3D Game” series. We have already seen how to handle other inputs like keyboard and device orientation. This post is about virtualjoystick.js It virtual joystick, another input you can use for your games. A virtual joystick emulates a joystick behaviour on a touch screen. virtualjoystick.js has been coded in a effort to port marblesoccer to mobile device. Show, dont tell, Try it out.
This demo works with mouse events too thus, it is easier to test/debug. virtualjoystick.js has been widely inpired by this post by Seb Lee-Delisle. The screencast below is short introduction about virtualjoystick.js
Let’s Get Started
The joystick is composed of 2 parts: the base and the stick. First the plare touch the screen, it gives the position of the base. Then it drags its fingers to gives the position of the stick
Let’s Use it
First step is to create the object from
The constructor has some options. They have sensible default. You can change them to fit your specific needs. See github README for a full API description. You may look at the index.html. It is an example which uses the library.
It is possible to read
joystick.deltaX() gives the delta x between the base and the stick in pixel.
joystick.deltaY() gives the delta y.
Those analogic coordinates may be interpreted as a
joystick with 4 switches.
in a way.
joystick.up() tells you if your joystick is up or not.
You guessed the meaning of
The source is available on github under MIT license. Later, a button may be implemented as well. It is alway usefull to able to fire in video games :) That’s all folks, have fun.