Add mobile support to Chickens

Chickens/JavaScript/Resources/Components/Input.js

@@ -24,6 +24,19 @@ var component = function(self) {
         // Use this frame's mouse motion to adjust camera node yaw and pitch. Clamp the pitch between -90 and 90 degrees
         var mouseMove = Atomic.input.mouseMove;
 
+        // if we are on mobile
+        if(Atomic.platform == "Android" || Atomic.platform == "iOS") {
+        //iterate through each TouchState, if it doesn't touch any widgets, use it as a `mouse`
+            for(var i = 0; i < Atomic.input.getNumTouches(); i++) {
+                var touchState = Atomic.input.getTouch(i);
+                if(touchState.touchedWidget == null) {
+                    var delta = touchState.delta;
+                    mouseMove[0] = delta[0];
+                    mouseMove[1] = delta[1];
+                }
+            }
+        }
+
         yaw += MOUSE_SENSITIVITY * mouseMove[0];
         pitch += MOUSE_SENSITIVITY * mouseMove[1];
 
@@ -37,16 +50,15 @@ var component = function(self) {
         node.rotation = QuatFromEuler(pitch, yaw, 0.0);
 
         // Read WASD keys and move the camera scene node to the corresponding direction if they are pressed
-        if (Atomic.input.getKeyDown(Atomic.KEY_W))
+        if (Atomic.input.getKeyDown(Atomic.KEY_W) || Atomic.input.getKeyDown(Atomic.KEY_UP))
             node.translate([0, 0, MOVE_SPEED * timeStep]);
-        if (Atomic.input.getKeyDown(Atomic.KEY_S))
+        if (Atomic.input.getKeyDown(Atomic.KEY_S) || Atomic.input.getKeyDown(Atomic.KEY_DOWN))
             node.translate([0, 0, -MOVE_SPEED * timeStep]);
-        if (Atomic.input.getKeyDown(Atomic.KEY_D))
+        if (Atomic.input.getKeyDown(Atomic.KEY_D) || Atomic.input.getKeyDown(Atomic.KEY_RIGHT))
             node.translate([MOVE_SPEED * timeStep, 0, 0]);
-        if (Atomic.input.getKeyDown(Atomic.KEY_A))
+        if (Atomic.input.getKeyDown(Atomic.KEY_A) || Atomic.input.getKeyDown(Atomic.KEY_LEFT))
             node.translate([-MOVE_SPEED * timeStep, 0, 0]);
 
-
     };
 
 };

Chickens/JavaScript/Resources/Modules/DPad.js

@@ -0,0 +1,183 @@
+function DPad() {
+
+    var width = Atomic.graphics.width;
+    var height = Atomic.graphics.height;
+    //create a new view for ours dpad
+    //horizontal buttons sizeX, sizeY
+    var horizButtonsSize = [75, 61];
+    var verticButtonsSize = [61, 75];
+    var dpadSpacingX = -30;
+    var dpadSpacingY = 30;
+    //init function should be called adding vertical/horizontal buttons
+    //it's like we are commiting ours buttons
+    this.init = function(view) {
+      if (view) this.view = view;
+      else this.view = new Atomic.UIView();
+      //if  touch buttons skin is not loaded
+      if(!DPad.skinLoaded) {
+        //load skin
+        Atomic.ui.loadSkin("UI/DPadSkin.ui");
+        DPad.skinLoaded = true;
+      }
+      //create a dpad layout
+      this.dpad = new Atomic.UILayout();
+      this.dpad.rect = this.view.rect;
+      if(this.leftLayout)
+        this.leftLayout.rect = this.dpad.rect;
+      if(this.rightLayout)
+        this.rightLayout.rect = this.dpad.rect;
+      if(this.upDownLayout)
+        this.upDownLayout.rect = this.dpad.rect;
+      //sets dpad position
+      //move buttons a bit closer to each other
+      this.dpad.spacing = dpadSpacingX;
+      if(this.upDownLayout)
+        this.upDownLayout.spacing = dpadSpacingY;
+      //if layouts are exists, add them
+      if(this.leftLayout)
+        this.dpad.addChild(this.leftLayout);
+      if(this.upDownLayout)
+        this.dpad.addChild(this.upDownLayout);
+      if(this.rightLayout)
+        this.dpad.addChild(this.rightLayout);
+      //ok, add ours dpad to the view
+      this.view.addChild(this.dpad);
+      //if we are using special view for dpad
+      if(!view) {
+        //update its size and position
+        this.updateViewSize();
+        this.setPosition(width/20, height/2);
+      } else {
+        //if we are using custom view, then just set dpad position
+        this.dpad.setPosition(-width/3, height/4);
+      }
+    };
+    //adds horizontal and vertical buttons
+    this.addAll = function() {
+      //adds horizontal buttons
+      this.addHorizontal();
+      //adds vertical buttons
+      this.addVertical();
+
+    };
+    //adds horizontal buttons
+    this.addHorizontal = function() {
+      //if layout params doesn't exist create a new one
+      if(!this.layoutParamsLeftRight) this.initLeftRightLayoutParams();
+      //new layout for left button
+      this.leftLayout = new Atomic.UILayout();
+      this.leftLayout.layoutSize = Atomic.UI_LAYOUT_SIZE_PREFERRED;
+      //create a left button
+      this.leftButton = new Atomic.UIButton();
+      this.leftButton.skinBg = "TouchButtonLeft";
+      this.leftButton.layoutParams = this.layoutParamsLeftRight;
+      this.leftLayout.addChild(this.leftButton);
+      //new layout for right button
+      this.rightLayout = new Atomic.UILayout();
+      this.rightLayout.layoutSize = Atomic.UI_LAYOUT_SIZE_PREFERRED;
+      //create a right button
+      this.rightButton = new Atomic.UIButton();
+      this.rightButton.skinBg = "TouchButtonRight";
+      this.rightButton.layoutParams = this.layoutParamsLeftRight;
+      this.rightLayout.addChild(this.rightButton);
+
+
+      //it makes ours buttons uncaptured, this is used for the multiTouch, to don't `concentrate` only on one button
+      this.leftButton.setCapturing(false);
+      this.rightButton.setCapturing(false);
+
+      //bind our ui button to the specified Keyboard Key
+      Atomic.input.bindButton(this.rightButton, Atomic.KEY_RIGHT);
+      Atomic.input.bindButton(this.leftButton, Atomic.KEY_LEFT);
+
+    };
+    //adds vertical buttons
+    this.addVertical = function() {
+      //if layout params doesn't exist create a new one
+      if(!this.layoutParamsUpDown) this.initUpDownLayoutParams();
+      //create a new layout for up and down buttons
+      this.upDownLayout = new Atomic.UILayout();
+      this.upDownLayout.axis = Atomic.UI_AXIS_Y;
+      this.upDownLayout.spacing = 50;
+      //create an up buttons
+      this.upButton = new Atomic.UIButton();
+      this.upButton.skinBg = "TouchButtonUp";
+      this.upButton.layoutParams = this.layoutParamsUpDown;
+      this.upDownLayout.addChild(this.upButton);
+      //create a down button
+      this.downButton = new Atomic.UIButton();
+      this.downButton.skinBg = "TouchButtonDown";
+      this.downButton.layoutParams = this.layoutParamsUpDown;
+      this.upDownLayout.addChild(this.downButton);
+
+      this.upDownLayout.layoutSize = Atomic.UI_LAYOUT_SIZE_PREFERRED;
+
+      //it makes ours buttons uncaptured, this is used for the multiTouch, to don't `concentrate` only on one button
+      this.upButton.setCapturing(false);
+      this.downButton.setCapturing(false);
+
+      //bind our ui button to the specified Keyboard Button
+      Atomic.input.bindButton(this.upButton, Atomic.KEY_UP);
+      Atomic.input.bindButton(this.downButton, Atomic.KEY_DOWN);
+
+    };
+
+    //inits layout prams for up/down buttons
+    this.initUpDownLayoutParams = function() {
+
+      this.layoutParamsUpDown = new Atomic.UILayoutParams();
+
+      this.layoutParamsUpDown.minWidth = verticButtonsSize[0];
+      this.layoutParamsUpDown.minHeight = verticButtonsSize[1];
+
+      this.layoutParamsUpDown.width = verticButtonsSize[0]*2;
+      this.layoutParamsUpDown.height = verticButtonsSize[1]*2;
+
+      this.layoutParamsUpDown.maxWidth = verticButtonsSize[0]*6;
+      this.layoutParamsUpDown.maxHeight = verticButtonsSize[1]*6;
+
+    };
+
+    //inits layout params for left/right buttons
+    this.initLeftRightLayoutParams = function() {
+
+      this.layoutParamsLeftRight = new Atomic.UILayoutParams();
+
+      this.layoutParamsLeftRight.minWidth = horizButtonsSize[0];
+      this.layoutParamsLeftRight.minHeight = horizButtonsSize[1];
+
+      this.layoutParamsLeftRight.width = horizButtonsSize[0]*2;
+      this.layoutParamsLeftRight.height = horizButtonsSize[1]*2;
+
+      this.layoutParamsLeftRight.maxWidth = horizButtonsSize[0]*6;
+      this.layoutParamsLeftRight.maxHeight = horizButtonsSize[1]*6;
+
+    };
+
+    //set horizontal spacing
+    this.setSpacingX = function(spacing) {
+      dpadSpacingX = spacing;
+      this.dpad.spacing = spacing;
+    };
+
+    //set vertical spacing
+    this.setSpacingY = function(spacing) {
+      dpadSpacingY = spacing;
+      this.upDownLayout.spacing = spacing;
+    };
+
+    //set view position
+    this.setPosition = function(x, y) {
+      this.view.setPosition(x, y);
+    };
+
+    this.updateViewSize = function() {
+      this.view.setSize(horizButtonsSize[0]*4+verticButtonsSize[0]*2+dpadSpacingX, horizButtonsSize[1]*2+verticButtonsSize[1]*4+dpadSpacingY);
+    };
+
+    this.remove = function() {
+      this.view.removeChild(this.dpad);
+    };
+}
+
+module.exports = DPad;

Chickens/JavaScript/Resources/Scripts/main.js

@@ -2,3 +2,11 @@
 
 //Load a Scene
 Atomic.player.loadScene("Scenes/Scene.scene");
+
+//init DPad if its a mobile platform
+if(Atomic.platform == "Android" || Atomic.platform == "iOS") {
+  var DPad = require("DPad");
+  var dpad = new DPad();
+  dpad.addAll();
+  dpad.init();
+}

Chickens/JavaScript/Resources/UI/DPadSkin.ui

@@ -0,0 +1,9 @@
+elements
+	TouchButtonLeft
+		bitmap buttonLeft.png
+	TouchButtonUp
+		bitmap buttonUp.png
+	TouchButtonRight
+		bitmap buttonRight.png
+	TouchButtonDown
+		bitmap buttonDown.png