Basic DPad implementation

CharacterAnimation2D/Resources/Components/UI.js

@@ -25,7 +25,6 @@ function createButton(self, text, event, layout) {
 }
 //UI component
 exports.component = function(self) {
-
     // root view
     self.uiView = new Atomic.UIView();
     // Create a layout, otherwise child widgets won't know how to size themselves

PhysicsPlatformer/Resources/Components/UI.js

@@ -0,0 +1,82 @@
+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/Scripts/main.js

@@ -60,5 +60,6 @@ function run(daytime) {
   //require GlobalVariables module, and set its dayTime value to the current daytime
   require("GlobalVariables").dayTime = daytime;
   //load main scene!
-  Atomic.player.loadScene("Scenes/Scene.scene");
+  var scene = Atomic.player.loadScene("Scenes/Scene.scene");
+  scene.createChild("UI").createJSComponent("Components/UI.js");
 }

PhysicsPlatformer/Resources/Ui/touchButtonsSkin.ui

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

PhysicsPlatformer/Resources/Ui/touchButtonsUI.ui

@@ -0,0 +1,6 @@
+TBLayout: axis: y, distribution: gravity
+	TBContainer: gravity: all
+		TBButton: text: Left, gravity: left top bottom, id: left
+		TBButton: text: Right, gravity: right top bottom, id: right
+		TBButton: text: Up, gravity: top left right, id: up
+		TBButton: text: Down, gravity: bottom left right, id: down