Joystick mit Javascript selbst schreiben

#1
Hallo liebe Community,

Ich arbeite gerade an einer Website die mehrere verschiedene Joysticks als Bedienelemente besitzt. Der jeweilige Joystick erscheint erst bei einem Touch in einem bestimmten Bereich bzw. auf einem Bild. Momentan verwende ich nipple.js
https://yoannmoinet.github.io/nipplejs/ .
Leider gibt es mit diesem Plugin diverse Probleme mit IOS Geräten (Joystick hängt sich auf, Seite bleibt hängen usw.) auf allen anderen Geräten Android, Windows funktioniert es wunderbar. Leider wird IOS Support gewünscht.
Deshalb habe ich nun versucht VirutalJoystick.js zu verwenden.
http://jeromeetienne.github.io/virtualjoystick.js/examples/basic.html
Leider habe ich hier diverse Probleme mit der Positionierung, außerdem scheinen nicht mehrere Joysticks auf einer Seite vorgesehen zu sein.
Nun da ich eine schnelle Lösung brauche und aus Mangel an Alternativen, habe ich mich entschlossen selbst etwas zu schreiben.
Meine Anforderungen sind eigentlich simpel.
Ich brauche mehrere Joysticks die bei touch auf ein Bild (einer pro Bild) erscheinen und bei touchend wieder verschwinden bzw. auf hidden gesetzt werden (am besten wäre es wenn sich die Instanz zerstört und bei erneuten Touch eine neue Instanz erstellt wird). Es reicht vollkommen wenn die 4 Richtungen erkannt werden, also Hoch , Runter, Rechts, Links genaue Positionen oder Transformationen brauche ich nicht.
Leider habe ich keine Ahnung wie ich das möglichst schnell und simple lösen kann. Verwendet werden kann HTML5, Javascript, Jquery.
Auch grafisch bestehen keine besonderen Anforderungen. Ein Kreis im Kreis ähnlich wie bei Virtualjoystick.js reicht vollkommen aus.

Ich würde mich sehr freuen, wenn mir jemand , eine grobe Richtung aufzeigen könnte oder ein kurzes Beispiel oder eine Idee hat.

Danke im Vorraus.

Gruß
Old_Pirate
 

Chakky

Member of Honour
#2
Schau dich mal in der Virtual Reality unterstützung um. Da braucht man oft auch mehr als nur einen Joystick um durch 3D-Welten zu navigieren. Der Browsersupport ist realtiv gut (aber noch oft am Anfang)

Mir fällt auf anhieb Babylon.js ein:

BabylonJS - 3D engine based on WebGL/Web Audio and JavaScript

Ist quasi ein Framework zum erstellen von 3D-Anwendungen mit Browserssupport. Dort raus könntest du die bedienelemente nehmen.
 
Oben