Merge pull request #134 from gabehollombe/touch_joystick_example

Added touch joystick example

examples/_site/examples.json

@@ -409,6 +409,10 @@
     {
       "file": "snap+on+drag.js",
       "title": "snap on drag"
+    },
+    {
+      "file": "touch+joystick.js",
+      "title": "touch joystick"
     }
   ],
   "loader": [

examples/_site/view_full.html

@@ -6,6 +6,7 @@
         <base href="../"></base>
         <script src="_site/js/jquery-2.0.3.min.js" type="text/javascript"></script>
         <script src="_site/js/purl.js" type="text/javascript"></script>
+        <script src="_site/js/gamecontroller.js" type="text/javascript"></script>
         <!--
             If you're wondering why we embed each script separately, and not just the single-file phaser lib
             it's because it makes debugging *significantly* easier for us. Feel free to replace all the below

examples/_site/view_lite.html

@@ -6,6 +6,7 @@
         <base href="../"></base>
         <script src="_site/js/jquery-2.0.3.min.js" type="text/javascript"></script>
         <script src="_site/js/purl.js" type="text/javascript"></script>
+        <script src="_site/js/gamecontroller.js" type="text/javascript"></script>
         <!--
             If you're wondering why we embed each script separately, and not just the single-file phaser lib
             it's because it makes debugging *significantly* easier for us. Feel free to replace all the below

examples/input/touch joystick.js

@@ -0,0 +1,68 @@
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+var ufo;
+var ufoSpeed = 200;
+
+function preload() {
+    game.world.setBounds(0,0,800, 600);
+    game.load.image('ufo', 'assets/sprites/ufo.png');
+}
+
+function create() {
+    // Create a ufo sprite as player.
+    ufo = game.add.sprite(320, 240, 'ufo');
+    ufo.anchor.setTo(0.5, 0.5);
+
+    // Use Austin Hallock's HTML5 Virtual Game Controller
+    // https://github.com/austinhallock/html5-virtual-game-controller/
+    // Note: you must also require gamecontroller.js on your host page.
+
+    // Init game controller with left thumb stick
+    GameController.init({
+        left: {
+            type: 'joystick',
+            joystick: {
+                touchStart: function() {
+                    // Don't need this, but the event is here if you want it.
+                },
+                touchMove: function(joystick_details) {
+                    game.input.joystickLeft = joystick_details;
+                },
+                touchEnd: function() {
+                    game.input.joystickLeft = null;
+                }
+            }
+        },
+        right: {
+            // We're not using anything on the right for this demo, but you can add buttons, etc.
+            // See https://github.com/austinhallock/html5-virtual-game-controller/ for examples.
+            type: 'none'
+        }
+    });
+
+    // This is an ugly hack to get this to show up over the Phaser Canvas
+    // (which has a manually set z-index in the example code) and position it in the right place,
+    // because it's positioned relatively...
+    // You probably don't need to do this in your game unless your game's canvas is positioned in a manner
+    // similar to this example page, where the canvas isn't the whole screen.
+    $('canvas').last().css('z-index', 20);
+    $('canvas').last().offset( $('canvas').first().offset() );
+}
+
+function update() {
+    // Check key states every frame.
+    if (game.input.joystickLeft) {
+        // Move the ufo using the joystick's normalizedX and Y values,
+        // which range from -1 to 1.
+        ufo.body.velocity.setTo(game.input.joystickLeft.normalizedX * 200, game.input.joystickLeft.normalizedY * ufoSpeed * -1);
+    }
+    else {
+        ufo.body.velocity.setTo(0, 0);
+    }
+}
+
+function render() {
+    game.debug.renderText('Use the virtual joystick to move the UFO.', 20, 20);
+    game.debug.renderText('This requires touch events, so try on your phone.', 20, 40);
+}
+