Improved map and scene navigation with gamepad support

At the 2018 User Conference, we demonstrated a prototype of the Gamepad support integration in the ArcGIS API for JavaScript Road Ahead session. We showed how easy it could be to navigate with a Xbox One controller and fly through a WebScene in a fun and new way. To our great surprise, a lot of you expressed interest and inquiries in this new feature. Today, we are proud to announce that with the release of the ArcGIS API for JavaScript 4.9, gamepad navigation is enabled by default in MapView and SceneView.

Gamepads are better known as an essential accessory to a home gaming console and less so as a computer peripheral. Many modern gamepads can be used on desktop computers thanks to the adoption of technological standards like USB and Bluetooth and the general availability of device drivers.  Since 2015 the W3C has been gradually evolving an API for web developers to access gamepad devices.  Today, all modern browsers support the draft W3C’s gamepad specification.

Gamepads are often ergonomically designed for extended use, don’t require a flat surface, and have sufficient buttons and sticks to be used exclusively of other peripherals.  For these same reasons we believe that our users will find this gadget indispensable in some scenarios.  Below are some examples where a gamepad might be advantageous.

Example 1: New building proposal

The above demo shows you how you can showcase a new building proposal by giving a smooth 360 degree view of the proposed buildings using a gamepad. You can quickly descend to the surface and walk around the buildings, or ascend to the sky to get a holistic view of the buildings with the surroundings.

Example 2: Underground navigation

This above demo shows you an underground navigation among a city sewage system using a gamepad. It allows you to follow the sewage path fast and smoothly.

Example 3: Flight simulation

Or you might just want to have a simulated flight through your favorite national park. You can now easily do this with a 3D scene and a gamepad or 3D mouse. The gamepad’s control configuration should be very familiar to anyone that has previously flown an aircraft on a gaming console.

Can I use my gamepad from home?

Currently, we only support 3DConnexions devices and standard gamepads that follow the W3C standard with a layout similar to the image below. A standard gamepad has at least 16 buttons and two sticks.

The most popular gamepads are those associated with the Xbox and PlayStation game consoles, like XBox 360 controller and Dual Shock4(PS 4 controller). They are recognized by most computers as standard gamepads. They can be connected to computers via USB or Bluetooth and will be automatically detected and enabled in your application built with ArcGIS JavaScript API 4.9. We don’t currently support non-standard gamepads, like Switch controllers, that do not follow the W3C standard above. The only non-standard gamepads supported by the JavaScript API are the 3DConnexion devices.

How do I change the user experience?

Changing the user experience can be done through the properties of the  view.navigation.gamepad object. The gamepad object is an instance of the GamepadSettings Class. It allows you to change gamepad experience like flying mode and tilt direction.

For example, the default SceneView navigation mode is “pan” which maintains a constant altitude while panning and looking around. To have more of a flying sensation you can switch to the “zoom” mode as demonstrated below. This will provide you a flight simulator (or superman) feel.

view.navigation.gamepad.mode = "zoom";
 

What is the future of gamepad support?

The W3C Gamepad API is still draft and as such support across browsers may not be equivalent.  Please refer to GamepadInputDevice for a list of gamepad/OS combinations that we have found to be reliable. If your device is not currently supported, then please don’t hesitate to let us know.

Future releases will likely provide support for gamepad events.  These events provide a convenient way to subscribe to button and stick interactions. For example, pressing a button to perform an identify or iterate through scene bookmarks. In the meantime, button and stick properties can be accessed via the native gamepad object.  To access this object:

var nativeGamepadDevice = view.navigation.gamepad.device.native;
 

This blog shares some common use cases of using gamepad navigation in apps built with ArcGIS JavaScript API 4.9. We are confident that you will find other use cases where gamepad usage is advantageous or simply fun! We invite you to try out gamepad navigation on our samples or your favorite 2d or 3d map or scene and send us your feedback. We are eager to know your experience (good or bad) and how we can make it better.