Smartphones as Controllers
The smartphone controllers are simultaneously one of the biggest challenges in developing games for AirConsole and also the aspect with the most potential for true innovation.
When developing an AirConsole game, the smartphone controls should be an integral part of early gameplay prototyping, since some mechanics that work with a gamepad will often feel subpar when controlled with a smartphone.
While we are proud of the over 100 games the AirConsole store currently offers, we believe that we have barely scratched the surface of what is possible in regards to innovative, intuitive and fun smartphone controlled local multiplayer games.
- Use different controller views / layouts for different situations
- Label buttons / interactive areas with their actual function
- Make all buttons / interactive areas as big as possible
- Make use of personalized controllers for individual players
- Do not use d-pads and virtual joysticks
- Play existing AirConsole games to see which control schemes feel good and which don’t*
When designing a smartphone controller layout, the first and most important thing to realize and remember is that a smartphone screen is not a regular gamepad / xbox controller and should not be treated as such.
This provides some challenges, but also has its advantages:
Pro: Individual Layouts
The controller screen can be adjusted to meet any ingame situation and mechanic it needs to: whether you need it to only display a single big button or you want to let the player play an entire minigame on it.
Instead of having buttons (or other interactive areas) labelled with “A”, “B” or “X”, you can label all touch areas directly with their function and don’t need to include captions for them on the main screen.
Pro: Personalized Information
Every individual player can have their own controller view. This can be used for something as simple as displaying the player color, but you can also convey secret information (cards, items, secret objectives) or design asymmetrical input schemes where different players have different roles and input options.
Pro: Input Variety
Virtual buttons are not the only way to register input from a smartphone. Besides button taps, your game input can also use swiping and the phone's gyroscope, or even its camera, speakers or microphone. Everything that works in a mobile browser is possible on AirConsole.
Con: No Tactile Feedback
The most significant disadvantage smartphone controllers have over regular gamepads is the lack of tactile feedback: A player’s finger may slip over the screen while they are not looking down, and the player might not realize that their finger is no longer on the button or interactive area, which leads to frustration.
To combat this, interactive areas / buttons on AirConsole controllers should be made as big as possible, reducing the chance of players tapping empty space and growing frustrated.
What are views?
What we call views are different controller layouts for different ingame situations.
In the pictures below, you can see the “Ingame” and “Pause” views for Dust Squad - Tanks For Nothing.
Views can be updated for more specific and/or frequently changing situations too. Three examples from Dust Squad where the view shows that
- the player’s weapon is currently on cooldown
- the player is close to Hero Exclusive content and can buy a subscription here
- the player has died and is waiting for respawn
How do I change views?
We leave the exact implementation to you, but we recommend using Custom Device States and not messages to change your views.
We also recommend using the AirConsole View Manager. With it you can add the ‘view’ class to div containers and easily show one of them and hide all others.
Using Screen Estate
Input fields (buttons, swipe areas etc.) should always be as big as possible, so that they are hard to miss. Reduce the number of different input fields by only showing the ones that are currently needed and updating the controller view whenever necessary.
Bad:
Good:
The controller’s visual design should fit the ingame graphics and big screen UI, adding up to an aesthetically pleasing whole picture.
When it comes to developing a UI art style with smartphone controllers in mind, it is helpful to use elements that can be stretched instead of relying on exact angles or aspect ratios. This can make the implementation for different phone screen resolutions with HTML/css easier.
Virtual joysticks and movement D-Pads do not work for AirConsole. We have several games that use them, but free character movement with analogue sticks or directional buttons will always feel subpar on a smartphone controller in comparison to a gamepad.
This means that you cannot rely on including “character movement” in your game design without giving serious thought to how exactly it will work with a smartphone.
How character movement should work instead depends heavily on the game and there is no universal answer for how to solve this issue. This limitation should be considered in your game design from the very beginning.
