HTML and CSS Reference
With any game, major decisions need to be made in the investigation phase and then ongoing throughout the
project: What is the game? How does the user play it? How deep should the experience be? How will the the project
objectives be achieved using the available technologies? This chapter will look at these major building blocks with
Funfair Freak-Out and consider how they were calculated and resolved in a way that delivers to multiple platforms.
The first consideration for any game should be control method. How is a user going to input his or her choices into
the game? Anything that is a barrier to easy control is a negative. Does the game have five-point control? Make it three.
Need mouse and keyboard? Make it a mouse or keyboard. As the controls become more complicated, the number of
engaged users will lessen drastically. Surely, maximizing the number of players is an imperative for most games. This
is the primary reason for wanting to make a game that will work on multiple platforms.
Want your game to work on as many devices as possible? Then, you will need to come up with a control method
that will work well on keyboard, mouse, touch pad, touch screen, and joypad. This is no easy task. A Venn diagram
showing great games that work across all devices (desktop, smartphone, tablet, smart television) will have a very small
area overlapped by all.
Of course, it is possible to make a virtual joypad on a touch screen that can implement all the clever
interpretation features that can be thrown at the system—auto centering to first touch, analogue style “amount”
metrics, velocity change consideration for recentering. Yet, one major factor makes this an ultimately poor experience:
the user really just has “pictures under glass.” 2
With a console joypad, ergonomics plays a huge role in giving the user subconscious information about the
position of the controls and how they are being engaged. With a keyboard the user has access to discrete controls.
These only afford eight directions, but there is constant sensory feedback. With mobiles and tablets the glass interface
gives no positive feedback. This is a big problem and probably the main reason it is really hard to name a great
smartphone game with joypad like controls.
An option in the application (app) space for mobiles/tablets is the gyroscope. This can be excellent for certain
types of games. On the mobile Web, however, access to the gyroscope via HTML5 is problematic; the inability to lock
the browser orientation, the specification for Screen.lockOrientation() , has yet to be stabilized, 3 meaning that, in
practice, it is inadvisable to use the gyroscope. Also, if a goal is to make a game that will really work on desktop, too,
then don't expect users to be spinning their laptops around.
Taking all this into consideration, big compromises will need to be made, in game design or in the number of
platforms on which the game functions well.
With Scooby Doo Fun Fair Freak-Out , we acknowledged the control issues and designed the game to take
advantage of them. The school of thought was that the simpler the control method, the better the game experience
and the more inclusive the proposition.
The game design focused on how we could get the Scooby gang into a predicament that would allow us to use
the very simple controls in a compelling way. We took this to a binary extreme by coming up with a stop-and-go
mechanic. Scooby, Shaggy, and the gang are hypnotized at the spooky fun fair.The only commands a player can give
are to stop (tap the screen/keyboard/mouse) and to go (release the tap). Everything is then down to the level designs.
With big wheels, moving and collapsing platforms, falling crates, zombies, wolf men, ghosts, and Total Wipeout -style
boxing gloves, timing becomes everything. The scene now set, we have a game that is a platformer, a constant runner,
and a puzzler.
Funfair, rollercoaster, and haunted house zones provide the settings. Each zone has ten levels, with a different
monster in each and the need to trap the baddie to finish the zone (see Figure 14-2 ). Once captured, the criminal is
unmasked. All great fun and exactly right for the brand.
2 Brett Victor, “A Brief Rant on the Future of Interaction Design,”
http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign , November 2011.
3 Mozilla Developer Network, “Screen.lockOrientation,” https://developer.mozilla.org/en-US/docs/Web/API/Screen.