Video details

How to Use a GamePad in ReactJS


In this tutorial i show how to use a GamePad within a React App. I render out all the buttons and their values and try out controlling styles of the app using the gamepad.
The Code:
Twitter: Github:
0:00 Intro 0:20 useGamepads hook 4:20 rendering Buttons 5:30 rendering Sticks 6:50 Labeling inputs 7:45 Controlling styles 9:30 Finishing words


How do you connect a gamepad to React if you want to control a game or a presentation from a controller like this, that's what we're gonna learn today. Follow me. Oh, okay. So what I've done so far is that I've done a createreact app and then installed this library called React Gamepads just using NPM install. So let's first remove the contents of the app here, remove the logo. And now let's import use games. Now let's call our hook use gamepads. So this takes a callback function where we receive the gamepad. And now we need to store the incoming gamepad somewhere. So we will import the use statehook state, and we will start with an empty array. So in here we can set gamepads. Let's just to not confuse ourselves, we will name it underscore game pads in here. Just get some nicer colors. There we go. It's a bit nicer to look at. Okay, so now I'm going to take my gamepad and plug it in. One good idea is to go to gamepadtester. Com and you'll see it will say no gamepad detected, but as soon as I press a button, it will detect an Xbox 360 controller, and we can make sure that our controller actually works properly in the browser. So let's start consolidating things here. So we get a lot of logs here. We can see that it's an object and it has a property of zero. And there we have a gamepad object. So maybe we first convert this object to an array. So instead of setting game paths like this, we do object values. Now if we console log gamepads from our state, now we have an array of gamepads instead. Let's first make a check for the state. If not gamepad return, you can return the string gamepad things, and then let's make a mapping over the gamepads. So we also have buttons on our gamepad. So let's create another loop of gamepad. So we see that our gamepad button is also an object. So we can use the value. Now we have the index and the value. Now we can see that as I start to press these buttons, they get the value. So for the buttons, they get zero and one for the trigger buttons in the back we get a value between zero and one as I press them down. The gamepad also has axes. So let's do the same for the axis. Now we got four more. So let's console log stick to see what we have. So we have access and on the axis we get the value of the axis immediately. So we don't have to do value here. Okay. So now we got zeros. And as I start to move the sticks around, we get the values of the sticks so I can see the top ones are for the left stick, and the first one is for X and Y left to right. And the second one is for up and down. So the third one is for left and right on the right stick, and the fourth one is up and down on the right stick. So now let's create some nicer labels for these so that we don't just use the index. Okay. So I went through the buttons and they came in this order and the access came in this order. So now instead of just doing the index, we can do there we go and let's do the same for the axis. There we go. Now it becomes a lot easier to see a little experiment to see if we can affect some styling by the gamepad inputs. Okay, so I added a style prop to the app. So here I made an experiment to change the red value. So this axis value will go from minus one to one. So I already have 128. So this whole parenthesis can be a minimum of minus 128 and a maximum of plus 128. So that creates a range for this red value between zero and 255 or 256. So the full range that I can affect with my stick now will be from zero to 255. So the whole range of values for the red color. So I will save it and let's try it out. Okay. So the background changed color. So now when I don't touch the controller, this value is zero. So we have 128, 128, 128. So let's inspect that. So now if I pull the stick to the left, I can go down all the way to zero for the rent value. And if I go to the right, it goes all the way up to almost the full range. I can reach 250 at least. So I can really quickly adjust the background of the site using the left sticker. Now, I will post this on GitHub so you can try it out and use your imagination to see what parts of your app you want to control using the gamepad. If you ever do like a presentation slide deck in React, then you could connect a gamepad to control the slides. I think there are lots of cool stuff, especially if you're creating a game in React. Like some of the tutorials that I have on YouTube, it would really need to implement a gamepad as the controller instead of the keyboard. But thank you so much for watching. I hope you learned a lot. Please. If you enjoyed the video, give it a thumbs up and subscribe to the channel, and I'll see you in the next one.