Jump to content

Xbox thumbstick using touch in phaser js

Go to solution Solved by Heppell08,

Recommended Posts



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!

Link to post
Share on other sites
  • Solution

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

Link to post
Share on other sites

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







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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...