Xbox thumbstick using touch in phaser js

[rajeev90km]

Hi

 

I'm working on a 2d plane shooter game. the plane's movements are now touch based with the plane doing a back flip when left side of the screen is pressed and similarly for the front flip using the right side of the screen.

 

I would like to emulate an X-Box Thumbstick- type touch control for the plane. i'm not sure where to start and go about building such a touch control wheel. Any help would be greatly appreciated. Thanks in advance!

[Heppell08]

i personally used this for my game to have the onscreen touch joypad. You can choose different looks and styles etc with it and its pretty responsive too.

My code for it is:

if (this.game.device.desktop)         {            return;        }         else            GameController.init({                left: {                    type: 'joystick',                    joystick: {                        touchMove: function (details) {                            if (details.dx < -5) {                                left = true;                            } else if (details.dx > 5) {                                right = true;                            } else {                                left = false;                                right = false;                            }                        },                        touchEnd: function () {                            left = false;                            right = false;                        },                    }                },                right: {                    position: {                        right: '5%'                    },                    type: 'buttons',                    buttons: [{                            label: 'jump',                            fontSize: 13,                            touchStart: function () {                                function jumpTouch() {                                    console.log('Jump Pressed');                                    if (player.body.onFloor()) {                                        player.body.gravity.y = 120;                                        player.body.velocity.y = -120;                                    }                                    if (player.body.gravity.y < 0 && player.body.blocked.up === true) {                                        player.body.gravity.y = -120;                                        player.body.velocity.y = 120;                                    }                                }                                jumpTouch();                            },                        },                        false, false, false                    ]                }            });    },

and the link to the gamecontroller js file is here: https://github.com/austinhallock/html5-virtual-game-controller

[dec0y]

There are also some examples in the input section of examples.phaser.io

 

http://examples.phaser.io/_site/view_full.html?d=input&f=touch+joystick.js&t=touch%20joystick

 

http://examples.phaser.io/_site/view_full.html?d=input&f=virtual+gamecontroller.js&t=virtual%20gamecontroller

 

 

@Heppell08 - I dig what your doing there, I am going to check that stuff out!

[rajeev90km]

@heppell08 , @dec0y -  Great. Thanks a lot guys, I didn't know phaser had a support for virtual game controller. guess i missed it in the examples. Thanks again