Optimizing for HTML5: Controllers

June 22 2011, 10:13am

Billy Garretsen, head of GameSalad’s internal game team, has prepared a 3-part entry on “Best Practices” for designing for HTML5 and GameSalad Arcade within GameSalad Creator. This is part 2 of 3 — Controllers. CONTROLLER BEST PRACTICES FOR HMTL5 The controller or input method will be one of the most important components to deal with since it is the way the player will engage with your game. As you may know, bad controls can ruin an otherwise great experience and hurt your chances for genuine player attachment. Beyond the tightness of your controller feedback, you must also consider the hardware differences between a desktop browser and touch-screen devices – the biggest difference being lack of multitouch support on desktop. A single-touch game such as The Secret of Grisly Manor translates very well between iPhone and desktop because the single-touch mechanics carry over to mouse movement and clicks perfectly. No changes to the control scheme were made in the transition to web. A multi-touch game like Hobo With A Shotgun on the other hand does not carry over without customized changes for web. Hobo With A Shotgun for iPhone uses a typical multitouch control scheme to replicate a physical joystick and attack buttons since the iPhone does not offer physical buttons. For web the joystick and attack button graphics have been completely removed and player movement has been remapped to the keyboard and arrow keys. Ironically, the game handles even better now since you no longer are simulating physical buttons.

The easiest route to building a universal cross-platform control scheme is to limit yourself to single touch. Though, if your game uses multitouch here are some solutions to minimize your effort in the desktop conversion. TWO BIRDS WITH ONE STONE The most basic form of multiple controller support is utilizing more than one triggering mechanism for the same event. For example if you have a button on screen that causes your player to jump when pressed it may look like this in GameSalad:

You can simply add an extra condition to the rule and change ALL to ANY and just like that you have dual support for touch and keyboard for the same jump event.

MOVEMENT Direct character movement through a touch DPad or Analog Stick can be tackled in many different ways. We suggest using our CROSS PLATFORM CONTROLLER template project to ensure proper functionality of movement across the available HTML5 platforms. BUT WHAT ABOUT ACCELEROMTER?! This method of multiple triggers also applies to accelerometer inputs. Instead of mapping a character or object’s movement to the tilt of the touch device you can also include rules for arrow keys that succeed in the same result on desktop browsers. One thing to consider though, is that not all mobile devices will support accelerometer OR keyboard input so playing your game in a mobile browser may require on-screen inputs. We would suggest limiting designs built for accelerometer for specific devices like iPhone and iPad and avoid accelerometer when publishing for HTML5. THE EXTRA STEP: LETTING THE PLAYER DECIDE Whether your game is single touch, multi touch or keyboard controlled it may also be a friendly decision to let the player choose which control method they would prefer through an option in the game’s menu. Make sure your menu is single touch driven, even if the rest of the game is not, to ensure that the player can safely navigate your menu on all devices. Below is an example of how input can be organized by the user’s selected controller preference.

TAKEAWAYS:

Single touch games are the easiest to make cross-platform If you utilize multiple onscreen buttons, or multitouch, include keyboard assignments for each It is okay to include rules in an actor for multiple input options Use single touch for your menus and include controller options in the game settings