Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

How to use the GamePad

FabRobot

By FabRobot,
in Questions & Answers

 Share

Recommended Posts

FabRobot Newbie

FabRobot

Posted
Posted

Hi, everyone !

I'm working to make a little shoot game 2d/3D ,this project allows me to test many features and i think babylon.js is quite fun and easy to use (and I'm not a devoleper).Thanks to Deltakosh.

I saw a gamepad module but i don't understand how to use it.

 

Is it possible to assign a gamepad button to a variable and is it cross-browser?

 

What is the "browsergamepad" parameters inside class gamepad?

 

if we can use it for anything else than the GamepadCamera ,it will be really good for any type of games.I use a 360 gamepad.

Thanks in advance.

You can have a look on the game here (it's still a WIP just a proof of concept for the moment but may be a real game soon...)

http://barbelabs.esy.es/labs/asteroid/

 

Link to comment
Share on other sites
davrous Newbie

davrous

Posted
Posted

Hi,

 

 I've written the gamepad part. I haven't written the wiki usage yet. I'm talking it in a way in this article: http://blogs.msdn.com/b/davrous/archive/2014/08/22/enhance-your-javascript-debugging-life-thanks-to-the-source-map-support-available-in-ie11-chrome-opera-amp-firefox.aspx and a basic sample is shown here: http://david.blob.core.windows.net/babylonjs/gamepad/index.html

 

 I've written 2 base classes for gamepad. The BABYLON.Gamepads to handle the global initialization of the gamepad logic that will return a BABYLON.Gamepad object when connected and will test also for support. It adds a overlay layer to ask to press the A button. 

 

 For the rest, the below code extracted from the sample I've linked should be self explicit. :)

 

Bye,

 

David

 

Code:

 

var xbox360pad;
var genericpad;
var buttonPressed = document.getElementById("buttonPressed");
var buttonReleased = document.getElementById("buttonReleased");
var xboxButtonPressed = document.getElementById("xboxButtonPressed");
var xboxButtonReleased = document.getElementById("xboxButtonReleased");
var dpadPressed = document.getElementById("dpadPressed");
var dpadReleased = document.getElementById("dpadReleased");
var leftStickValues = document.getElementById("leftStickValues");
var rightStickValues = document.getElementById("rightStickValues");
var leftTriggerValue = document.getElementById("leftTriggerValue");
var rightTriggerValue = document.getElementById("rightTriggerValue");
var Xbox360Section = document.getElementById("Xbox360Section");
var startingInstructions = document.getElementById("startingInstructions");
var padLogs = document.getElementById("padLogs");
var GenericPadSection = document.getElementById("GenericPadSection");
var gamepadConnected = function (gamepad) {
    startingInstructions.className = "hidden";
    padLogs.className = "";
    if (gamepad.index === 0) {
        gamepad.onleftstickchanged(function (values) {
            leftStickValues.innerHTML = "X: " + values.x + " Y: " + values.y;
        });
        gamepad.onrightstickchanged(function (values) {
            rightStickValues.innerHTML = "X: " + values.x + " Y: " + values.y;
        });
        if (gamepad instanceof BABYLON.Xbox360Pad) {
            Xbox360Section.className = "";
            xbox360pad = gamepad;
            xbox360pad.onlefttriggerchanged(function (value) {
                leftTriggerValue.innerHTML = value.toString();
            });
            xbox360pad.onrighttriggerchanged(function (value) {
                rightTriggerValue.innerHTML = value.toString();
            });
            xbox360pad.onbuttondown(function (button) {
                switch (button) {
                    case 0:
                        xboxButtonPressed.innerHTML = "A pressed";
                        break;
                    case 1:
                        xboxButtonPressed.innerHTML = "B pressed";
                        break;
                    case 2:
                        xboxButtonPressed.innerHTML = "X pressed";
                        break;
                    case 3:
                        xboxButtonPressed.innerHTML = "Y pressed";
                        break;
                    case 5:
                        xboxButtonPressed.innerHTML = "Back pressed";
                        break;
                    case 4:
                        xboxButtonPressed.innerHTML = "Start pressed";
                        break;
                    case 6:
                        xboxButtonPressed.innerHTML = "LB pressed";
                        break;
                    case 7:
                        xboxButtonPressed.innerHTML = "RB pressed";
                        break;
                    case 8:
                        xboxButtonPressed.innerHTML = "LeftStick pressed";
                        break;
                    case 9:
                        xboxButtonPressed.innerHTML = "RightStick pressed";
                        break;
                }
            });
            xbox360pad.onbuttonup(function (button) {
                switch (button) {
                    case 0:
                        xboxButtonReleased.innerHTML = "A released";
                        break;
                    case 1:
                        xboxButtonReleased.innerHTML = "B released";
                        break;
                    case 2:
                        xboxButtonReleased.innerHTML = "X released";
                        break;
                    case 3:
                        xboxButtonReleased.innerHTML = "Y released";
                        break;
                    case 5:
                        xboxButtonReleased.innerHTML = "Back released";
                        break;
                    case 4:
                        xboxButtonReleased.innerHTML = "Start released";
                        break;
                    case 6:
                        xboxButtonReleased.innerHTML = "LB released";
                        break;
                    case 7:
                        xboxButtonReleased.innerHTML = "RB released";
                        break;
                    case 8:
                        xboxButtonReleased.innerHTML = "LeftStick released";
                        break;
                    case 9:
                        xboxButtonReleased.innerHTML = "RightStick released";
                        break;
                }
            });
            xbox360pad.ondpaddown(function (button) {
                switch (button) {
                    case 1:
                        dpadPressed.innerHTML = "Down pressed";
                        break;
                    case 2:
                        dpadPressed.innerHTML = "Left pressed";
                        break;
                    case 3:
                        dpadPressed.innerHTML = "Right pressed";
                        break;
                    case 0:
                        dpadPressed.innerHTML = "Up pressed";
                        break;
                }
            });
            xbox360pad.ondpadup(function (button) {
                switch (button) {
                    case 1:
                        dpadReleased.innerHTML = "Down released";
                        break;
                    case 2:
                        dpadReleased.innerHTML = "Left released";
                        break;
                    case 3:
                        dpadReleased.innerHTML = "Right released";
                        break;
                    case 0:
                        dpadReleased.innerHTML = "Up released";
                        break;
                }
            });
        } else {
            GenericPadSection.className = "";
            genericpad = gamepad;
            genericpad.onbuttondown(function (buttonIndex) {
                buttonPressed.innerHTML = "Button " + buttonIndex + " pressed";
            });
            genericpad.onbuttonup(function (buttonIndex) {
                buttonReleased.innerHTML = "Button " + buttonIndex + " released";
            });
        }
    }
};
var gamepads = new BABYLON.Gamepads(gamepadConnected);
 
Link to comment
Share on other sites
JCPalmer Newbie

JCPalmer

Posted
Posted

Kind of off the topic, but related to the source.map link above.  When I type  'gulp typescript' I get a .map for every .ts.  Looked at one of them, but did not really know what it was for.  Is it possible to make just 1 big .map put in the build directory and get rid of all these little ones? Not a major issue, just screen space polution.

Link to comment
Share on other sites
FabRobot Newbie

FabRobot

Posted
  • Author
Posted

Yeah !!

That's work perfectly,a simple copy/paste with minor change adapted to the project, the mapping touch is cross browser ,really cool.

Thanks davrous and for your quickness.

I didn't test with a generic pad but i think if we follow the same logic of your code we can achieve the same result.

Just one thing works weird on Chrome, is when the gamepad is already plug and activated, reload the current web page the browser cannot detect the gamepad ,i must unplug/plug the gamepad.

It's not a big deal so...(maybe just the API behaviour on chrome).

On Firefox no problem.

Anyway davrous you solved my problem.

Link to comment
Share on other sites
JCPalmer Newbie

JCPalmer

Posted
Posted

Kind of off the topic, but related to the source.map link above.  When I type  'gulp typescript' I get a .map for every .ts.  Looked at one of them, but did not really know what it was for.  Is it possible to make just 1 big .map put in the build directory and get rid of all these little ones? Not a major issue, just screen space polution.

 

Fixed most of my very small issue, by adding a line onto my little go.sh in my log in directory.  Guess the .maps are nice to have, & will comment out my deletion of them if needed, but I'll probaby just use the babylon.js debug version when in trouble.

cd /babylon/Babylon.JS/Tools/Gulpgulp typescriptcp ./build/babylon.js /babylon/Babylon.JS/Exporters/Blender/blender-test/lib# only keep this stuff  below when needed, by commenting outrm ./build/babylon.d.tsfind /babylon/Babylon.JS/Babylon -name "*.map" -type f -delete
Link to comment
Share on other sites
  • 4 weeks later...
FreeFrags Newbie

FreeFrags

Posted
Posted

Could some one please add a tutorial which shows how to use the gamepadCamera? 

 

i thought something like the following would of been enough 

 

var gamepads = new BABYLON.Gamepads();camera = new BABYLON.GamepadCamera("camera1", new BABYLON.Vector3(0, 0, -15), scene);

But im obviously doing something wrong as i get this error:

 

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. babylon.js:16

 

which if i look in Babylon.js / Babylon / Tools / babylon.gamepads.ts points to this line:

document.body.removeChild(Gamepads.gamepadDOMInfo);

Link to comment
Share on other sites
  • 2 months later...
iiceman Newbie

iiceman

Posted
Posted

I think I figured out how to handle the problem with chrome not detecting the gamepad until it is unplugged and re plugged again. You can trigger the activation of the gampad by calling the _startMonitoringGamepads() methode of the BABYLON.Gamepads Class.

 

Here is an example of how to move a sphere with the gamepad (tested in chrome):

 

http://www.babylonjs-playground.com/#1F2ICL

 

 

EDIT: okay, now it doesn't work anymore. I was pretty sure it worked some minutes ago. If anybody has an idea how to make chrome to automatically detect the gamepad, I would love to here that! :(

 

 

I hope it helps somebody. If it is bad to call the _startMonitoringGamepads() manually please let me know :P

 

 

About the "Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. babylon.js:16" error: I had the same error when playing around with the GamepadCamera, but it seemed to appear randomly. I assume it it somehow related to the playground and not to just babylon itself. I couldn't figure out what the problem was, once time the error appeared when I hit the Run button, then I jsut copied the code and reloaded the playground to try the same code again and it worked perfectly fine. But since it disappeared I guess it's all good ;)

Link to comment
Share on other sites
Temechon Newbie

Temechon

Posted
Posted

Hey iiceman, 

 

I have a PR waiting for DK to bve validated. This pull request enable the Gamepad API for chrome.

The problem is babylon is checking if 'GamepadEvent' is supported. Chrome supports it, but not the 'gamepadconnected' event.

Here you can find what I fixed : https://github.com/Temechon/Babylon.js/commit/267cad455b4814ca6a170310b3372993d5f67c75

 

Is it for your Bomberman project ? We had the same idea :D

Link to comment
Share on other sites
iiceman Newbie

iiceman

Posted
Posted

Yeah, it is indeed for the bomberman project. Good to know that I am not the only one trying to figure that gamepad thing out. Well, I think I'll wait for your pull request to be accepted and check if that solves my problem (hopefully it goes as fast as the last time :D ).

 

I am still confused since I was pretty sure I already had it working. The problem is that even navigator.getGamepads() returns undefined for the gamepads again now. That was not the case when it worked for me. I don't know what I did but somehow chrome manged to remember the gamepad. I really hope your PR fixes things for me, too! In the mean time I check out what you changed to make it work ;)

Link to comment
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.

Guest
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.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...