Game Controller
Paywall.js now supports game controller input so users can make purchases while maintaining the native game controller experience.
Basic Setup
To attach an on-screen button to a game controller button, simply add the data-pw-gc-button
tag to the element. The value of this tag must match the unmappedLocalizedName
of the game controller button in iOS.
For example, the following button would purchase the primary product if a user pressed the "A" button on their game controller.
<div data-pw-purchase="primary" data-pw-gc-button="A Button">Purchase</div>
Styling
To allow users to style buttons, we will add and remove classes during the button press event. When the game controller input becomes depressed, we add pw-gc-press
. When the button is let up, we will remove that class. Many users will use these classes to slightly shirk the button on press and restore it on press end.
.pw-gc-press {
opacity: 0.9;
transition: all .2s ease-in-out;
transform: scale(0.93);
}
Advanced
Some users may want to take other actions based on the game controller input so we will automatically forward all game controller events to a function on the window if it is defined.
type DirectionalInput = {
controller_element: string
directional: true
x: number
y: number
}
type NonDirectionalInput = {
controller_element: string
directional: false
value: number
}
export type Input =
| DirectionalInput
| NonDirectionalInput
window.onGameControllerInput = (data: Input) => {
// Do anything you want with the input!
}
Updated 3 months ago