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

Added DPad in ToonTown and Roboman3D examples.

PhysicsPlatformer/Resources/Modules/DPad.js

@@ -6,6 +6,8 @@ function 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) {
@@ -27,9 +29,10 @@ function DPad() {
       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;
+      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);
@@ -39,7 +42,15 @@ function DPad() {
         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() {
@@ -55,6 +66,7 @@ function DPad() {
       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";
@@ -62,14 +74,13 @@ function DPad() {
       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);
 
-      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);
@@ -145,11 +156,13 @@ function DPad() {
 
     //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;
     }
 
@@ -158,6 +171,10 @@ function DPad() {
       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);
     }

PhysicsPlatformer/Resources/Scripts/main.js

@@ -65,12 +65,14 @@ function run(daytime) {
   if(Atomic.platform == "Android" || Atomic.platform == "iOS") {
     //requiring a dpad module
     var DPad = require("DPad");
+    //create a new view
+    var uiView = new Atomic.UIView();
     //creating a new DPad
     var dpad = new DPad();
     //adding horizontal and vertical buttons
     dpad.addAll();
     //ok, then we could init ours dpad
-    dpad.init();
+    dpad.init(uiView);
     //create a jump button
     var jumpButton = new Atomic.UIButton();
     //unset its skin, because we will use UIImageWidget

RoboMan3D/Resources/Components/AvatarController.js

@@ -78,9 +78,9 @@ exports.component = function(self) {
 
     // Update the in air timer. Reset if grounded
     if (!onGround)
-      inAirTimer += timeStep;
+    inAirTimer += timeStep;
     else
-      inAirTimer = 0.0;
+    inAirTimer = 0.0;
 
     // When character has been in air less than 1/10 second, it's still interpreted as being on ground
     var softGrounded = inAirTimer < INAIR_THRESHOLD_TIME;
@@ -207,13 +207,13 @@ exports.component = function(self) {
     var MOUSE_SENSITIVITY = 0.1;
 
     //check input
-    if (input.getKeyDown(Atomic.KEY_W))
+    if (input.getKeyDown(Atomic.KEY_W) || input.getKeyDown(Atomic.KEY_UP))
         moveForward = true;
-    if (input.getKeyDown(Atomic.KEY_S))
+    if (input.getKeyDown(Atomic.KEY_S) || input.getKeyDown(Atomic.KEY_DOWN))
         moveBackwards = true;
-    if (input.getKeyDown(Atomic.KEY_A))
+    if (input.getKeyDown(Atomic.KEY_A) || input.getKeyDown(Atomic.KEY_LEFT))
         moveLeft = true;
-    if (input.getKeyDown(Atomic.KEY_D))
+    if (input.getKeyDown(Atomic.KEY_D) || input.getKeyDown(Atomic.KEY_RIGHT))
         moveRight = true;
 
     if (input.getKeyPress(Atomic.KEY_F))
@@ -221,9 +221,23 @@ exports.component = function(self) {
     if (input.getKeyPress(Atomic.KEY_SPACE))
         button1 = true;
 
-    //update mouse coordinates
-    mouseMoveX = input.getMouseMoveX();
-    mouseMoveY = input.getMouseMoveY();
+    //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;
+          mouseMoveX = delta[0];
+          mouseMoveY = delta[1];
+        }
+      }
+    //if its a desktop
+    } else {
+      // update mouse coordinates
+      mouseMoveX = input.getMouseMoveX();
+      mouseMoveY = input.getMouseMoveY();
+    }
 
   }
 
@@ -267,6 +281,7 @@ exports.component = function(self) {
 
     //if it's a FPS view
     if (cameraMode == 1) {
+
       var headPos = headNode.getWorldPosition();
       var offset = [0.0, 0.15, 0.2];
       vec3.add(headPos, headPos, vec3.transformQuat(offset, offset, [rot[1], rot[2], rot[3], rot[0]]));

RoboMan3D/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;

RoboMan3D/Resources/Scripts/main.js

@@ -1,3 +1,41 @@
 // This script is the main entry point of the game
 //Load scene
 Atomic.player.loadScene("Scenes/Test.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();
+
+  var jumpView = new Atomic.UIView();
+
+  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
+  jumpView.rect = [posX, posY, posX+jumpButtonWidth, posY+jumpButtonHeight];
+  jumpButton.rect = [0, 0, jumpButtonWidth, 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
+  jumpView.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);
+}

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

SpaceGame/Resources/Modules/DPad.js

@@ -6,6 +6,8 @@ function 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) {
@@ -27,9 +29,10 @@ function DPad() {
       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;
+      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);
@@ -39,7 +42,15 @@ function DPad() {
         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() {
@@ -55,6 +66,7 @@ function DPad() {
       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";
@@ -62,14 +74,13 @@ function DPad() {
       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);
 
-      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);
@@ -145,11 +156,13 @@ function DPad() {
 
     //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;
     }
 
@@ -158,6 +171,10 @@ function DPad() {
       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);
     }

ToonTown/Resources/Components/AvatarController.js

@@ -207,13 +207,13 @@ exports.component = function(self) {
     var MOUSE_SENSITIVITY = 0.1;
 
     //check input
-    if (input.getKeyDown(Atomic.KEY_W))
+    if (input.getKeyDown(Atomic.KEY_W) || input.getKeyDown(Atomic.KEY_UP))
         moveForward = true;
-    if (input.getKeyDown(Atomic.KEY_S))
+    if (input.getKeyDown(Atomic.KEY_S) || input.getKeyDown(Atomic.KEY_DOWN))
         moveBackwards = true;
-    if (input.getKeyDown(Atomic.KEY_A))
+    if (input.getKeyDown(Atomic.KEY_A) || input.getKeyDown(Atomic.KEY_LEFT))
         moveLeft = true;
-    if (input.getKeyDown(Atomic.KEY_D))
+    if (input.getKeyDown(Atomic.KEY_D) || input.getKeyDown(Atomic.KEY_RIGHT))
         moveRight = true;
 
     if (input.getKeyPress(Atomic.KEY_F))
@@ -221,9 +221,23 @@ exports.component = function(self) {
     if (input.getKeyPress(Atomic.KEY_SPACE))
         button1 = true;
 
-    //update mouse coordinates
-    mouseMoveX = input.getMouseMoveX();
-    mouseMoveY = input.getMouseMoveY();
+    //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;
+          mouseMoveX = delta[0];
+          mouseMoveY = delta[1];
+        }
+      }
+    //if its a desktop
+    } else {
+      // update mouse coordinates
+      mouseMoveX = input.getMouseMoveX();
+      mouseMoveY = input.getMouseMoveY();
+    }
 
   }
 

ToonTown/Resources/Components/Scene.js

@@ -29,6 +29,43 @@ exports.component = function(self) {
       musicSource.soundType = Atomic.SOUND_MUSIC;
       musicSource.play(musicFile);
 
+      //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();
+
+        var jumpView = new Atomic.UIView();
+
+        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
+        jumpView.rect = [posX, posY, posX+jumpButtonWidth, posY+jumpButtonHeight];
+        jumpButton.rect = [0, 0, jumpButtonWidth, 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
+        jumpView.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);
+      }
   }
 
   self.update = function(timeStep) {

ToonTown/Resources/Components/TouchInput.js

@@ -1,21 +0,0 @@
-
-// Atomic Component
-//TODO: TOUCH INPUT
-/*
-var game = Atomic.game;
-var node = self.node;
-var input = game.input;
-
-function start() {
-
-  // input.setTouchEmulation(true);
-    var layout = game.cache.getResource("XMLFile", "Data/ScreenJoystick.xml");
-    var uiStyle = game.cache.getResource("XMLFile", "UI/DefaultStyle.xml");
-    input.addScreenJoystick(layout, uiStyle);
-
-}
-
-function update(timeStep) {
-
-}
-*/

ToonTown/Resources/Components/TouchInput.js.asset

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

ToonTown/Resources/Data.asset

@@ -1,5 +0,0 @@
-{
-	"version": 1,
-	"guid": "6fe253b7934addd13908ccdb11cfc78f",
-	"FolderImporter": {}
-}

ToonTown/Resources/Data/ScreenJoystick.xml

@@ -1,28 +0,0 @@
-<?xml version="1.0"?>
-<element inherit="UI/ScreenJoystick.xml">
-    <replace sel="/element/element[./attribute[@name='Name' and @value='Button0']]/element[./attribute[@name='Name' and @value='Label']]/attribute[@name='Text']/@value">Jump</replace>
-    <add sel="/element/element[./attribute[@name='Name' and @value='Button0']]">
-        <attribute name="Is Visible" value="true" />
-        <element type="Text">
-        <attribute name="Name" value="KeyBinding" />
-        <attribute name="Text" value="SPACE" />
-        </element>
-    </add>
-    <add sel="/element/element[./attribute[@name='Name' and @value='Button1']]">
-        <attribute name="Is Visible" value="false" />
-    </add>
-    <add sel="/element/element[./attribute[@name='Name' and @value='Button2']]">
-        <element type="Text">
-            <attribute name="Name" value="KeyBinding" />
-            <attribute name="Text" value="SELECT" />
-        </element>
-    </add>
-    <replace sel="/element/element[./attribute[@name='Name' and @value='Hat0']]/attribute[@name='Position']/@value">12 -76</replace>
-    <add sel="/element/element[./attribute[@name='Name' and @value='Hat0']]">
-        <attribute name="Is Visible" value="true" />
-        <element type="Text">
-            <attribute name="Name" value="KeyBinding" />
-            <attribute name="Text" value="WSAD" />
-                    </element>
-    </add>
-</element>

ToonTown/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;

ToonTown/Resources/Scripts/main.js

@@ -1,3 +1,8 @@
 // This script is the main entry point of the game
 //Load scene
+if(Atomic.platform == "Android" || Atomic.platform == "iOS") {
+  Atomic.renderer.reuseShadowMaps = false;
+  Atomic.renderer.shadowQuality = Atomic.SHADOWQUALITY_LOW_16BIT;
+}
+
 Atomic.player.loadScene("Scenes/ToonTown.scene");

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