Using Gamepad Triggers in Adobe XD
When we think of video games, we often imagine 3D graphics, addictive gameplay, and in-depth stories. But in order to get to those enriching experiences, a well thought out UI is needed. To help development teams in this area, let’s take a look at Gamepad triggers in Adobe XD.
WHAT YOU’LL LEARN IN THIS VIDEO
Setting up prototype wires
Using the new “Gamepad” triggers to use controllers
Previewing your prototypes
Keyboard shortcut support
Right along side gamepad triggers, you’ll find support for keyboards, allowing you to set up shortcuts for your prototypes.
+ VIEW TRANSCRIPT
Hey, everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe. When we think of video games, we often imagine 3D graphics, addictive gameplay, and in-depth stories. But in order to get to those enriching experiences, a well thought out UI is needed. To help development teams in this area, let’s take a look at Gamepad triggers in Adobe XD.
Here’s a design that may be used as a navigation experience for a game or console application, and similar to how tap or drag triggers can be set up to interact with the prototype, gaming devices, such as the Xbox One or DualShock controller, can be used, as well. For this example, I have an Xbox One controller hooked up to my Mac via Bluetooth.
Just like with Voice and Keyboard triggers, any element on your artboards can be wired up to your gamepad, so I’ll go ahead and select this card and drag the blue handle over to the next state. Now, within the properties, I’ll want to select the Keys & Gamepad trigger, which will not only allow me to enter in a keyboard shortcut, but as I press the various buttons on my controller, those are being mapped to XD. I can then combine this with auto-animate to create a fluid transition to the next artboard.
Let’s hook up some more including a few cards going in both directions, then I’ll map the A button to launch this particular game, and because any element can be mapped, I can wire the icon at the top back to the home screen, as well.
Perfect. Let’s see this in action. Launching the prototype, I can now navigate through this interface using just my Xbox One controller, and if I had other triggers set up, like voice, I could definitely use those right along side.
Let’s look at one more example, put together by one of my co-workers, Yoshiki Takeoka, using sprites from Adobe Stock. To give the character a touch of motion, he set up a series of timed transitions that loops back after the last frame. From there, he added in a component of a Playstation controller and just like in the previous example, he wired up the various buttons leading to the additional looping animations over here to the right, which after they’re complete, also lead back to the idle state.
Then, to avoid having to re-wire up each artboard, copying the component from within Prototype mode allows me to paste it on multiple artboards while maintaining the links. I can also drop the opacity of these if I don’t want them showing up in the preview.
Kicking off the preview, I can now use the various buttons on the Dual Shock controller to initiate the animations no matter which idle state the character is in.
And that’s your look at gamepad support in Adobe XD. If you’re currently designing for game consoles, definitely give this a shot, and continue your XD journey head on over to LetsXD.com and subscribe to the Creative Cloud YouTube channel to catch the latest product updates and live streams. I’ll see you soon.