Merge pull request #21 from rsredsq/RED-PLATFORMER-DPAD

Created DPad module for PhysicsPlatformer

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/Modules/DPad.js

@@ -0,0 +1,158 @@
+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/DPadSkin.ui");
+        DPad.skinLoaded = true;
+      }
+      //create a dpad layout
+      this.dpad = new Atomic.UILayout();
+      this.dpad.rect = this.view.rect;
+      //sets dpad position
+      this.dpad.setPosition(-width/3, height/4);
+      //move buttons a bit closer to each other
+      this.dpad.spacing = -30;
+      //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

@@ -60,5 +60,43 @@ 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");
+  //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();
+    //create a jump button
+    var jumpButton = new Atomic.UIButton();
+    //unset its skin, because we will use UIImageWidget
+    jumpButton.skinBg = "";
+    //create ours jump button image
+    var jumpButtonImage = new Atomic.UIImageWidget();
+    //load image
+    jumpButtonImage.setImage("UI/jumpButton.png");
+    //resize ours image by 2.2x
+    var jumpButtonWidth = jumpButtonImage.imageWidth*2.2;
+    var jumpButtonHeight = jumpButtonImage.imageHeight*2.2;
+    //calculate position
+    var posX = Atomic.graphics.width - Atomic.graphics.width/8-jumpButtonWidth/2;
+    var posY = Atomic.graphics.height - Atomic.graphics.height/4-jumpButtonHeight/2;
+
+    //sets jumpButton rect, specify position and end position
+    jumpButton.rect = [posX, posY, posX+jumpButtonWidth, posY+jumpButtonHeight];
+    //sets jumpButtonImage rect, we specify there only end position
+    jumpButtonImage.rect = [0, 0, jumpButtonWidth, jumpButtonHeight];
+    //adds image to jumpButton
+    jumpButton.addChild(jumpButtonImage);
+    //adds jumpButton to the dpad view
+    dpad.view.addChild(jumpButton);
+    //sets jumpButton capturing to false, because we wanna make it multitouchable
+    jumpButton.setCapturing(false);
+    //binds jumpButton to KEY_SPACE
+    Atomic.input.bindButton(jumpButton, Atomic.KEY_SPACE);
+  }
 }

PhysicsPlatformer/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