Learning Three.js

or WebGL for Dummies

Let’s Make a 3D Game: Virtual Joystick

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

First step, you download virtualjoystick.js from its github Then include it in your own code.

<script src="virtualjoystick.js"></script>

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 VirtualJoystick class.

var joystick = new VirtualJoystick()

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 analogic coordinates. 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. Similar to arrow keys in a way. joystick.up() tells you if your joystick is up or not. You guessed the meaning of .down(), .right() and .left().


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.