Created DPad module.

PhysicsPlatformer/Resources/Components/UI.js

@@ -1,82 +0,0 @@
-var component = function(self) {
-
-    var width = Atomic.graphics.width;
-    var height = Atomic.graphics.height;
-    var ratio = width/height;
-    var rect = [width/10, height/2, width/2, height];
-    // var rect = [0, 0, 200, 200];
-    self.start = function() {
-      //load a special skin
-      Atomic.ui.loadSkin("Ui/touchButtonsSkin.ui");
-      //create a new UIView special for ours ui
-      var view = new Atomic.UIView();
-      view.setPosition(-width/8, height/10);
-
-      var dpad = new Atomic.UILayout();
-      dpad.rect = view.rect;
-      // dpad.rect = rect;
-      //dpad.load("Ui/touchButtonsUI.ui");
-      var layoutParamsUpDown = new Atomic.UILayoutParams();
-      layoutParamsUpDown.minWidth = 61;
-      layoutParamsUpDown.minHeight = 75;
-      layoutParamsUpDown.width = 61*2;
-      layoutParamsUpDown.height = 75*2;
-      layoutParamsUpDown.maxWidth = 61*6;
-      layoutParamsUpDown.maxHeight = 75*6;
-
-      var layoutParamsLeftRight = new Atomic.UILayoutParams();
-      layoutParamsLeftRight.minWidth = 75;
-      layoutParamsLeftRight.minHeight = 61;
-      layoutParamsLeftRight.width = 75*2;
-      layoutParamsLeftRight.height = 61*2;
-      layoutParamsLeftRight.maxWidth = 75*6;
-      layoutParamsLeftRight.maxHeight = 61*6;
-
-      self.leftLayout = new Atomic.UILayout();
-      self.leftLayout.rect = dpad.rect;
-      self.leftButton = new Atomic.UIButton();
-      self.leftButton.skinBg = "TouchButtonLeft";
-      self.leftButton.layoutParams = layoutParamsLeftRight;
-      self.leftLayout.addChild(self.leftButton);
-      self.rightLayout = new Atomic.UILayout();
-      self.rightButton = new Atomic.UIButton();
-      self.rightButton.skinBg = "TouchButtonRight";
-      self.rightButton.layoutParams = layoutParamsLeftRight;
-      self.rightLayout.addChild(self.rightButton);
-
-      self.upDownLayout = new Atomic.UILayout();
-      self.upDownLayout.rect = dpad.rect;
-      self.upDownLayout.axis = Atomic.UI_AXIS_Y;
-      self.upDownLayout.spacing = 50;
-      self.upButton = new Atomic.UIButton();
-      self.upButton.skinBg = "TouchButtonUp";
-      self.upButton.layoutParams = layoutParamsUpDown;
-      self.upDownLayout.addChild(self.upButton);
-      self.downButton = new Atomic.UIButton();
-      self.downButton.skinBg = "TouchButtonDown";
-      self.downButton.layoutParams = layoutParamsUpDown;
-      self.upDownLayout.addChild(self.downButton);
-
-      self.rightLayout.layoutSize = Atomic.UI_LAYOUT_SIZE_PREFERRED;
-      self.leftLayout.layoutSize = Atomic.UI_LAYOUT_SIZE_PREFERRED;
-      self.upDownLayout.layoutSize = Atomic.UI_LAYOUT_SIZE_PREFERRED;
-
-      dpad.addChild(self.leftLayout);
-      dpad.addChild(self.upDownLayout);
-      dpad.addChild(self.rightLayout);
-
-      view.addChild(dpad);
-
-      self.leftButton.setCapturing(false);
-      self.rightButton.setCapturing(false);
-      self.upButton.setCapturing(false);
-
-      Atomic.input.bindButton(self.rightButton, Atomic.KEY_D);
-      Atomic.input.bindButton(self.leftButton, Atomic.KEY_A);
-      Atomic.input.bindButton(self.upButton, Atomic.KEY_SPACE);
-
-      Atomic.input.setTouchEmulation(true);
-    }
-}
-
-exports.component = component;

PhysicsPlatformer/Resources/Modules/DPad.js

@@ -0,0 +1,156 @@
+function DPad() {
+
+    var width = Atomic.graphics.width;
+    var height = Atomic.graphics.height;
+    //create a new view for ours dpad
+    this.view = new Atomic.UIView();
+    //horizontal buttons sizeX, sizeY
+    var horizButtonsSize = [75, 61];
+    var verticButtonsSize = [61, 75];
+    //init function should be called adding vertical/horizontal buttons
+    //it's like we are commiting ours buttons
+    this.init = function() {
+      //if  touch buttons skin is not loaded
+      if(!DPad.skinLoaded) {
+        //load skin
+        Atomic.ui.loadSkin("Ui/touchButtonsSkin.ui");
+        DPad.skinLoaded = true;
+      }
+      //sets its position by default
+      this.view.setPosition(-width/8, height/10);
+      //create a dpad layout
+      this.dpad = new Atomic.UILayout();
+      this.dpad.rect = this.view.rect;
+      //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);
+
+    }
+    //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.rect = this.view.rect;
+      //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.rect = this.view.rect;
+      //create a right button
+      this.rightButton = new Atomic.UIButton();
+      this.rightButton.skinBg = "TouchButtonRight";
+      this.rightButton.layoutParams = this.layoutParamsLeftRight;
+      this.rightLayout.addChild(this.rightButton);
+
+      this.rightLayout.layoutSize = Atomic.UI_LAYOUT_SIZE_PREFERRED;
+      this.leftLayout.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.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.rect = this.view.rect;
+      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) {
+      this.dpad.spacing = spacing;
+    }
+
+    //set vertical spacing
+    this.setSpacingY = function(spacing) {
+      this.upDownLayout.spacing = spacing;
+    }
+
+    //set view position
+    this.setPosition = function(x, y) {
+      this.view.setPosition(x, y);
+    }
+}
+
+module.exports = DPad;

PhysicsPlatformer/Resources/Scripts/main.js

@@ -61,5 +61,15 @@ function run(daytime) {
   require("GlobalVariables").dayTime = daytime;
   //load main scene!
   var scene = Atomic.player.loadScene("Scenes/Scene.scene");
-  scene.createChild("UI").createJSComponent("Components/UI.js");
+  //if we are running ours game on android
+  if(Atomic.platform == "Android" || Atomic.platform == "iOS") {
+    //requiring a dpad module
+    var DPad = require("DPad");
+    //creating a new DPad
+    var dpad = new DPad();
+    //adding horizontal and vertical buttons
+    dpad.addAll();
+    //ok, then we could init ours dpad
+    dpad.init();
+  }
 }

PhysicsPlatformer/Resources/Ui/touchButtonsSkin.ui

@@ -7,4 +7,3 @@ elements
 		bitmap buttonRight.png
 	TouchButtonDown
 		bitmap buttonDown.png
-	TBContainer.dpad