jeromeetienne / virtualjoystick.js

a virtual joystick library to emulate a joystick on touch screen in javascript

virtualjoystick.js

It is small library to emulate a virtual joystick for touchscreen. For details, see "Let’s Make a 3D Game: Virtual Joystick" post on "learningthreejs blog".

Show Don't Tell

• examples/basic.html [view source] : It shows a basic usage of the library.
• examples/dual.html [view source] : It shows how to have multiple virtual joystick on the same page
• examples/stationarybase.html [view source] : It shows how to have a stationary base. by @erichlof
• examples/LimitStickTravelDemo.html [view source] : It shows how to limit the distance that the stick can travel from its base. by @erichlof
• examples/LimitStickTravelDemoStationaryBase.html [view source] : Limited Stick (same as above), but with Stationary Base. by @erichlof

How To Install It

You can install it manually. Just do

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

You can install with bower.

bower install virtualjoystick.js

then you add that in your html

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

How To Use It ?

• opts.container is the dom element on which we display joystick
• opts.stickElement is the dom element which is display for the stick of the joystick.
• opts.baseElement is the dom element which is display for its base.
• Both elements are optional with sensible default
• you may set opts.mouseSupport to true during debug.
• you may set opts.stationaryBase to true for a permanent Stationary joystick base.
• if you do use a stationary base, you must also set opts.baseX to the desired X-coordinate on the webpage and opts.baseY to the desired Y-coordinate. The joystick base will now be fixed at this location.
• you may set opts.limitStickTravel to true in order to limit the distance that the stick can travel from its base. This will create an invisible circle barrier that the stick cannot leave.
• if you do use opts.limitStickTravel , you can also set opts.stickRadius to the desired radius (in pixels). The stick will now be confined to stickRadius. If you do not set opts.stickRadius , it will default to 100 pixels radius.