Merge pull request #22 from rsredsq/RED-SPACEGAME-DPAD

Added DPad in the SpaceGame

PhysicsPlatformer/Resources/Modules/DPad.js

@@ -3,13 +3,14 @@ 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() {
+    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
@@ -19,6 +20,12 @@ function DPad() {
       //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
       this.dpad.setPosition(-width/3, height/4);
       //move buttons a bit closer to each other
@@ -48,7 +55,6 @@ function DPad() {
       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";
@@ -56,7 +62,6 @@ function DPad() {
       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";
@@ -81,7 +86,6 @@ function DPad() {
       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
@@ -153,6 +157,10 @@ function DPad() {
     this.setPosition = function(x, y) {
       this.view.setPosition(x, y);
     }
+
+    this.remove = function() {
+      this.view.removeChild(this.dpad);
+    }
 }
 
 module.exports = DPad;

SpaceGame/Resources/Components/AI.js

@@ -1,3 +1,5 @@
+'atomic component';
+
 exports.component = function(self) {
 
   var game = Atomic.game;

SpaceGame/Resources/Components/AI.js.asset

@@ -2,6 +2,6 @@
 	"version": 1,
 	"guid": "bd8cbe4bba850f8cf9af5a58df303008",
 	"JavascriptImporter": {
-		"IsComponentFile": false
+		"IsComponentFile": true
 	}
 }

SpaceGame/Resources/Components/Bullet.js

@@ -1,3 +1,5 @@
+'atomic component';
+
 exports.component = function(self) {
 
   var game = Atomic.game;

SpaceGame/Resources/Components/Bullet.js.asset

@@ -2,6 +2,6 @@
 	"version": 1,
 	"guid": "078f1732d962b6672d6c478e48e93417",
 	"JavascriptImporter": {
-		"IsComponentFile": false
+		"IsComponentFile": true
 	}
 }

SpaceGame/Resources/Components/CapitalShip.js

@@ -1,3 +1,5 @@
+'atomic component';
+
 exports.component = function(self) {
 
   var game = Atomic.game;

SpaceGame/Resources/Components/CapitalShip.js.asset

@@ -2,6 +2,6 @@
 	"version": 1,
 	"guid": "54caa665294949b3ad81810940577a9d",
 	"JavascriptImporter": {
-		"IsComponentFile": false
+		"IsComponentFile": true
 	}
 }

SpaceGame/Resources/Components/Enemy.js

@@ -1,3 +1,5 @@
+'atomic component';
+
 exports.component = function(self) {
 
   var game = Atomic.game;

SpaceGame/Resources/Components/Enemy.js.asset

@@ -2,6 +2,6 @@
 	"version": 1,
 	"guid": "ac09ff19e260ab183bdccbbc00d65a4a",
 	"JavascriptImporter": {
-		"IsComponentFile": false
+		"IsComponentFile": true
 	}
 }

SpaceGame/Resources/Components/Explosion.js

@@ -1,3 +1,5 @@
+'atomic component';
+
 exports.component = function(self) {
 
   var game = Atomic.game;

SpaceGame/Resources/Components/Explosion.js.asset

@@ -2,6 +2,6 @@
 	"version": 1,
 	"guid": "411d541f2b2f8f1976415cdeb827842e",
 	"JavascriptImporter": {
-		"IsComponentFile": false
+		"IsComponentFile": true
 	}
 }

SpaceGame/Resources/Components/HUD.js

@@ -1,3 +1,5 @@
+'atomic component';
+
 exports.component = function(self) {
 
   var game = Atomic.game;

SpaceGame/Resources/Components/HUD.js.asset

@@ -2,6 +2,6 @@
 	"version": 1,
 	"guid": "632be57d8a025039d817b061aeb52119",
 	"JavascriptImporter": {
-		"IsComponentFile": false
+		"IsComponentFile": true
 	}
 }

SpaceGame/Resources/Components/Player.js

@@ -1,3 +1,5 @@
+'atomic component';
+
 exports.component = function(self) {
 
   var game = Atomic.game;

SpaceGame/Resources/Components/Player.js.asset

@@ -2,6 +2,6 @@
 	"version": 1,
 	"guid": "96394b4b186f01cfcffea56473a9f485",
 	"JavascriptImporter": {
-		"IsComponentFile": false
+		"IsComponentFile": true
 	}
 }

SpaceGame/Resources/Components/SpaceBackground.js

@@ -1,4 +1,4 @@
-
+'atomic component';
 
 exports.component = function(self) {
 

SpaceGame/Resources/Components/SpaceBackground.js.asset

@@ -2,6 +2,6 @@
 	"version": 1,
 	"guid": "dbf1079dee807143996ec05b4fb782ca",
 	"JavascriptImporter": {
-		"IsComponentFile": false
+		"IsComponentFile": true
 	}
 }

SpaceGame/Resources/Components/SpaceGame.js

@@ -1,3 +1,5 @@
+'atomic component';
+
 var UI = require("UI/ui");
 var options = require("UI/options")
 
@@ -113,7 +115,13 @@ exports.component = function(self) {
   }
 
   self.cleanup = function() {
-
+    //if its a mobile
+    if(Atomic.platform == "Android" || Atomic.platform == "iOS") {
+      //remove dpad
+      Atomic.game.dpad.remove();
+      //remove fireButton
+      Atomic.game.uiView.removeChild(self.fireButton);
+    }
     game.renderer.setViewport(1, null);
 
     self.hud.cleanup();
@@ -194,6 +202,49 @@ exports.component = function(self) {
 
     var hudnode = self.myscene.createChild();
     self.hud = hudnode.createJSComponent("Components/HUD.js");
+    //if its a mobile
+    if(Atomic.platform == "Android" || Atomic.platform == "iOS") {
+      //require ours dpad module
+      var DPad = require("DPad");
+      //create dpad
+      var dpad = new DPad();
+      //add only horizontal buttons
+      dpad.addHorizontal();
+      //init with existing ui
+      dpad.init(Atomic.game.uiView);
+      //set X spacing
+      dpad.setSpacingX(50);
+
+      Atomic.game.dpad = dpad;
+
+      //create a jump button
+      self.fireButton = new Atomic.UIButton();
+      //unset its skin, because we will use UIImageWidget
+      self.fireButton.skinBg = "";
+      //create ours fire button image
+      var fireButtonImage = new Atomic.UIImageWidget();
+      //load image
+      fireButtonImage.setImage("UI/fireButton.png");
+      //resize ours image by 2.2x
+      var fireButtonWidth = fireButtonImage.imageWidth*2.2;
+      var fireButtonHeight = fireButtonImage.imageHeight*2.2;
+      //calculate position
+      var posX = Atomic.graphics.width - Atomic.graphics.width/8-fireButtonWidth/2;
+      var posY = Atomic.graphics.height - Atomic.graphics.height/4-fireButtonHeight/2;
+
+      //sets fireButton rect, specify position and end position
+      self.fireButton.rect = [posX, posY, posX+fireButtonWidth, posY+fireButtonHeight];
+      //sets fireButtonImage rect, we specify there only end position
+      fireButtonImage.rect = [0, 0, fireButtonWidth, fireButtonHeight];
+      //adds image to fireButton
+      self.fireButton.addChild(fireButtonImage);
+      //adds fireButton to the dpad view
+      dpad.view.addChild(self.fireButton);
+      //sets fireButton capturing to false, because we wanna make it multitouchable
+      self.fireButton.setCapturing(false);
+      //binds fireButton to KEY_SPACE
+      Atomic.input.bindButton(self.fireButton, Atomic.KEY_SPACE);
+    }
 
     spawnPlayer();
     spawnEnemies();

SpaceGame/Resources/Components/SpaceGame.js.asset

@@ -2,6 +2,6 @@
 	"version": 1,
 	"guid": "ecd3b3a804041f3427e4542ff71208c6",
 	"JavascriptImporter": {
-		"IsComponentFile": false
+		"IsComponentFile": true
 	}
 }

SpaceGame/Resources/Components/TouchInput.js

@@ -1 +0,0 @@
-

SpaceGame/Resources/Components/TouchInput.js.asset

@@ -1,7 +0,0 @@
-{
-	"version": 1,
-	"guid": "a6fef33a9f12400ae231ed8ce7389ca4",
-	"JavascriptImporter": {
-		"IsComponentFile": false
-	}
-}

SpaceGame/Resources/Modules/DPad.js

@@ -0,0 +1,166 @@
+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];
+    //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
+      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();
+      //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();
+      //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.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);
+    }
+
+    this.remove = function() {
+      this.view.removeChild(this.dpad);
+    }
+}
+
+module.exports = DPad;

SpaceGame/Resources/Scripts/main.js

@@ -29,7 +29,7 @@ function start() {
 
 	// play some music!
 	utils.playMusic("Music/battle.ogg");
-
+	
 }
 
 // called per frame

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