joystick begin

src/Marble.hx

@@ -1350,6 +1350,10 @@ class Marble extends GameObject {
 			if (Key.isDown(Settings.controlsSettings.powerup) || MarbleGame.instance.touchInput.powerupButton.pressed) {
 				move.powerup = true;
 			}
+			if (MarbleGame.instance.touchInput.movementInput.pressed) {
+				move.d.y = -MarbleGame.instance.touchInput.movementInput.value.x;
+				move.d.x = MarbleGame.instance.touchInput.movementInput.value.y;
+			}
 		}
 
 		playedSounds = [];

src/touch/CameraInput.hx

@@ -31,7 +31,11 @@ class CameraInput {
 							return;
 
 						case Move:
-							MarbleGame.instance.world.marble.camera.orbit(touch.deltaPosition.x, touch.deltaPosition.y);
+							var scaleFactor = 1.0;
+							#if js
+							scaleFactor = js.Browser.window.devicePixelRatio / Settings.zoomRatio;
+							#end
+							MarbleGame.instance.world.marble.camera.orbit(touch.deltaPosition.x / scaleFactor, touch.deltaPosition.y / scaleFactor, true);
 							return;
 
 						case _:

src/touch/MovementInput.hx

@@ -0,0 +1,104 @@
+package touch;
+
+import src.Util;
+import h2d.col.Point;
+import src.Settings;
+import h2d.col.Bounds;
+import gui.GuiControl;
+import h3d.Vector;
+import gui.GuiGraphics;
+
+class MovementInput {
+	var area:GuiGraphics;
+
+	var added:Bool = false;
+
+	var collider:h2d.Interactive;
+
+	var joystick:GuiGraphics;
+
+	public var pressed = false;
+
+	public var value:Vector = new Vector();
+
+	var touchId = -1;
+
+	public function new() {
+		var g = new h2d.Graphics();
+		g.beginFill(0xffffff, 0.4);
+		g.drawRoundedRect(0, 0, 300, 300, 50);
+		g.endFill();
+
+		this.area = new GuiGraphics(g);
+		this.area.position = new Vector(100, 40);
+		this.area.extent = new Vector(300, 300);
+		this.area.vertSizing = Top;
+
+		this.collider = new h2d.Interactive(300, 300, g, h2d.col.Bounds.fromValues(0, 0, 300, 300));
+
+		var g2 = new h2d.Graphics();
+		g2.beginFill(0xffffff, 0.7);
+		g2.drawCircle(0, 0, 50);
+		g2.endFill();
+
+		this.joystick = new GuiGraphics(g2);
+		this.joystick.position = new Vector(150, 150);
+		this.joystick.extent = new Vector(50, 50);
+
+		this.area.addChild(this.joystick);
+
+		collider.onPush = (e) -> {
+			this.area.graphics.alpha = 1;
+			this.joystick.graphics.alpha = 1;
+
+			if (!pressed) {
+				pressed = true;
+
+				this.touchId = e.touchId;
+
+				var xPos = Util.clamp(e.relX - this.area.graphics.x, 50, 250);
+				var yPos = Util.clamp(e.relY - this.area.graphics.x, 50, 250);
+
+				this.value.x = (xPos - 150) / 150;
+				this.value.y = (yPos - 150) / 150;
+
+				this.joystick.graphics.setPosition(this.area.graphics.x + xPos, this.area.graphics.y + yPos);
+
+				collider.startCapture((emove) -> {
+					if (emove.kind == EMove) {
+						var xPos = Util.clamp(emove.relX, 50, 250);
+						var yPos = Util.clamp(emove.relY, 50, 250);
+
+						this.value.x = (xPos - 150) / 150;
+						this.value.y = (yPos - 150) / 150;
+
+						this.joystick.graphics.setPosition(this.area.graphics.x + xPos, this.area.graphics.y + yPos);
+					}
+					if (emove.kind == ERelease || emove.kind == EReleaseOutside) {
+						collider.stopCapture();
+					}
+				}, () -> {
+					this.area.graphics.alpha = 0;
+					this.joystick.graphics.alpha = 0;
+
+					pressed = false;
+
+					this.value = new Vector(0, 0);
+				}, e.touchId);
+			}
+		}
+
+		this.area.graphics.alpha = 1;
+		this.joystick.graphics.alpha = 1;
+	}
+
+	public function add(parentGui:GuiControl) {
+		parentGui.addChild(this.area);
+		added = true;
+	}
+
+	public function remove(parentGui:GuiControl) {
+		parentGui.removeChild(this.area);
+		added = false;
+	}
+}

src/touch/TouchInput.hx

@@ -36,6 +36,8 @@ class TouchEventState {
 class TouchInput {
 	var cameraInput:CameraInput;
 
+	public var movementInput:MovementInput;
+
 	public var jumpButton:JumpButton;
 
 	public var powerupButton:PowerupButton;
@@ -48,6 +50,7 @@ class TouchInput {
 
 	public function new() {
 		this.cameraInput = new CameraInput();
+		this.movementInput = new MovementInput();
 		this.jumpButton = new JumpButton();
 		this.powerupButton = new PowerupButton();
 		this.currentTouchState = new TouchEventState();
@@ -75,6 +78,7 @@ class TouchInput {
 				}
 				var t = new Touch(Move, new Vector(touch.clientX, touch.clientY), prevDelta, touch.identifier);
 				currentTouchState.changedTouches.push(t);
+				touches.set(touch.identifier, t);
 				// trace("Touch Move");
 			}
 		});
@@ -98,10 +102,12 @@ class TouchInput {
 	public function showControls(parentGui:GuiControl) {
 		jumpButton.add(parentGui);
 		powerupButton.add(parentGui);
+		movementInput.add(parentGui);
 	}
 
 	public function hideControls(parentGui:GuiControl) {
 		jumpButton.remove(parentGui);
 		powerupButton.remove(parentGui);
+		movementInput.remove(parentGui);
 	}
 }