Using the Gamepad API for a Better Gaming Experience on the Web

Rate this content
Bookmark

This talk explores the usage and impact of the Gamepad API in the web gaming space. The Gamepad API lets you connect and use various gaming controllers with browsers, but since this API is in very early stages, tracking different controller inputs across browsers becomes extremely challenging. For this very purpose I have released an open source library which provides support for button press, axis movement events as well as vibration play effect in browsers. We’ll be focusing on how we can leverage this library for providing better gaming experiences to consumers on the web.

This talk has been presented at JS GameDev Summit 2023, check out the latest edition of this JavaScript Conference.

FAQ

The speaker is Arun, a senior engineer at Bloomberg who works with web technologies and is an open-source enthusiast.

The main topic is the web gamepad API and how it can be extended and used effectively for making games on the web.

The web gamepad API is an interface that allows developers to connect gamepads and similar devices to the browser and use them in gaming applications.

The web gamepad API supports devices such as the DualShock, Joy-Con, DualSense, and Xbox Series X controllers.

The web gamepad API provides the GamepadConnected and GamepadDisconnected events.

JoypadJS is an open-source library created by Arun that allows connection and use of various gaming controllers with browsers that support the Gamepad API.

JoypadJS supports button presses, axis movements, gamepad connection and disconnection events, and provides a vibrate method for haptic feedback.

You can find more information about JoypadJS at bit.ly/joypad_js.

Some enhancements include ambient light events, GPU-accelerated graphics, file system access, and lower-level APIs providing native control and hardware access.

Arun suggests using the requestAnimationFrame method to effectively track gamepad button presses and joystick movements within a game loop.

Arun Michael Dsouza
Arun Michael Dsouza
21 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Talk discusses the web gamepad API and its use in game development on the web platform. It explores the GamePad API, which allows developers to connect gaming devices to the browser and use them in gaming applications. The implementation of the GamePad API involves tracking button presses and joystick movements using request animation frame. The Talk also introduces the JoypadJS library, which extends the GamePad API to track button presses, axis movements, and provides haptic feedback. JoypadJS works on modern browsers with GamePad API support and is used in games, interactive applications, and IoT projects.

1. Introduction to Web Gamepad API

Short description:

Hello, and welcome to my talk for this year's JS Game Dev Summit. Today, I'll be talking about the web gamepad API and how we can extend it and use it effectively for making games on the web. Let's talk about the web platform for a moment before jumping into the web gamepad API. The web has grown a lot over the last half decade or so, and it continues to grow at a rapid pace. The browser has become more than just a renderer or document viewer, and it's because of this growth and the continuous addition of feature-rich APIs that has enabled developers to create much more interactive and efficient web applications.

Hello, and welcome to my talk for this year's JS Game Dev Summit. My name is Arun. And today, I'll be talking about the web gamepad API and how we can extend it and use it effectively for making games on the web.

First, a bit about myself. I'm a senior engineer at Bloomberg, and I mostly work with web technologies, building enterprise web software and browser-based tools. I'm also an open-source enthusiast. I've contributed to several open-source projects, and some of my own projects, mostly extension libraries and modules for Node, React, Angular, etc. You can check out my website if you want to learn more about me and my work.

All right, so without any further ado, let's get straight into it. Let's talk about the web platform for a moment before jumping into the web gamepad API. I guess we first need to acknowledge the fact that the web has grown a lot over the last half decade or so, and it continues to grow at a rapid pace. We all know that the browser has become more than just a renderer or document viewer, and it's because of this growth and the continuous addition of feature-rich APIs that has enabled developers to create much more interactive and efficient web applications. Enhancements such as ambient light events, GPU-accelerated graphics, file system access, and lower-level APIs that provide native control and hardware access not only allow developers to cater to a wider variety of users but it also allows them to support various types of use cases. Which would have not been possible without these enhancements to the web platform. Even though some of these APIs are in very early stages at the moment, they seem to be really, really promising and tend to provide an idea on how web development in the coming years might look like.

2. Introduction to GamePad API

Short description:

Browsers have become powerful enough to handle complex graphics computations for playing video games. The primary form of input for web games has been keyboard or mouse based, which can be hindering for touch screen devices. The GamePaths specification allows developers to connect gaming devices to the browser and use them in gaming applications. The API exposes a method on the Navigator interface to retrieve information about connected GamePads and their buttons. The GamePad API recommends a de facto standard layout called the Standard GamePad Layout.

Browsers have become extremely powerful and capable enough to handle complex graphics computations, especially for playing video games. From 2D site scrollers, retro emulation, to even high end 3D games. It's possible to play almost any type of game on the web today.

And for a majority of these games that we see and play on the web, the primary form of input has always been keyboard or mouse based. And for touch screen devices, you've seen on screen control layouts like these, which at times can hinder the game experience. And using these types of controls can turn out to be quite a daunting task for gamers who prefer more natural controls, you know, like a directional pad or a joystick for character movements.

Now, desktop games provide this flexibility of using external devices like game pads and joysticks, maybe because they have native support for this built right in. But when it comes to the web, for a long time, there has been no native support for this at all. Developers had to design these complex mouse or keyboard based interfaces for game controls that can be quite tricky to operate.

So, a few years back, the W3C introduced the GamePaths specification, which defines a low level interface to represent gaming devices. Which means using this API, developers will be able to connect GamePaths and similar devices to the browser and then be able to use them in their gaming applications. Which means you'll be able to use devices such as the DualShock, Joy-Con and even next gen devices like the DualSense and Xbox Series X controllers.

Now, as of today, the GamePaths specification is still a work in progress. It's published as a working draft. The specification is intended to become a W3C recommendation. For now we can see that the API itself is supported by all modern browsers, which is definitely a good sign. So let's take a look at the details of the API itself. So the API exposes a method on the Navigator interface which returns a list of GamePad objects and each GamePad object represents a GamePad that is connected to the browser. Now this GamePad interface returns useful information about the connected GamePad. Information related to the buttons, the axis, which are the joysticks basically. The current states and other information like the device ID, status, et cetera. If we look closely at the GamePad buttons, we see that every button is an instance of the GamePad button interface. This represents an individual button on the GamePad and allows access to the current state of button. Using this, we can determine whether the button was pressed or not and carry out the appropriate action in the game. Now, every GamePad manufacturer creates many different kinds of products and each might have a unique style or a layout of buttons and axis. But it's the job of the user agent, of course, to support as many of these as possible, which is why the GamePad API recommends a de facto standard layout, which is called a Standard GamePad Layout. And this layout has been made popular by many gaming consoles. And in this layout, buttons and axis are laid out in a particular order that we'll see. So this is how the Standard GamePad Layout looks. And in this layout, button locations are placed out in a left cluster of four buttons, a right cluster of four buttons, a center cluster of three buttons.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.
Tiny Game Live Coding Workshop
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Tiny Game Live Coding Workshop
Workshop
Frank Force
Frank Force
Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.
Managers Are From Mars, Devs Are From Venus
TechLead Conference 2024TechLead Conference 2024
111 min
Managers Are From Mars, Devs Are From Venus
Workshop
Mo Khazali
Mo Khazali
A Developer’s Guide to Communicating, Convincing, and Collaborating Effectively With Stakeholders
It’s a tale as old as time - collaboration between developers and business stakeholders has long been a challenge, with a lack of clear communication often leaving both sides frustrated. The best developers can deeply understand their business counterparts’ needs, effectively communicate technical strategy without losing the non-technical crowd, and convince the business to make the right decisions. Working at a consultancy, I’ve both failed and succeeded in architecting and “selling” technical visions, learning many lessons along the way.Whether you work at a product company, are a consultant/freelancer, or want to venture beyond just being a developer, the ability to convince and clearly communicate with stakeholders can set you apart in the tech industry. This becomes even more important with the rise of GenAI and the increasingly competitive developer market, as problem-solving and effective communication are key to positioning yourself.In this workshop, I’ll share real-world examples, both good and bad, and guide you through putting the theory into practice through dojos.