Quantcast
Viewing all articles
Browse latest Browse all 536

Creating a First-Class Touch Interface for Defense Grid: The Awakening

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Abstract

Defense Grid: The Awakening is a tower-defense style strategy game on PC and other gaming platforms. Hidden Path Entertainment*, the developer of Defense Grid, worked with Intel® Corporation to add a full touch-based interface to the game that ran well on Ultrabook™ PCs and Windows*-capable tablets. This article details the approach Hidden Path took to implement touch, and calls out relevant challenges for those seeking to add a touch-based interface to their games.

Defense Grid and Ultrabook

In early 2012, Defense Grid was already a successful game, and was available in retail stores, on Steam*, and on the Xbox* 360. The addictive, puzzle-like tower defense gameplay delivered a lot of fun with a relatively easy-to-play interface. After establishing that they had a proven seller, Hidden Path looked for ways to expand the reach of the game by porting it to additional gaming platforms. The timing of this coincided with a retail wave of highly capable Windows tablets and touch-screen Ultrabook PCs. Intel approached Hidden Path to offer help in updating the PC version of the game to add an intuitive touch interface. The result of this collaboration is a game that fully embraces new PC form factors without compromising the original, highly-effective mouse and keyboard interface.

Image may be NSFW.
Clik here to view.

Figure 1: Game in Mouse and Keyboard mode

Image may be NSFW.
Clik here to view.

Figure 2: Game in Touch mode – note additional icons for touch control

If you look at the differences in Figure 2 vs. Figure 1, you’ll see that the Touch UI adds tower selection buttons on the right edge of the screen, a Fast Forward button at the bottom left, and a Menu/Settings button at the top. Keeping the buttons close to the edges was a key design point offered to provide easy access to the controls when handling a touch based device (like a Tablet or an Ultrabook).

Image may be NSFW.
Clik here to view.

Figure 3: Tower Placement in Keyboard and Mouse mode

Image may be NSFW.
Clik here to view.

Figure 4: Tower Placement in Touch mode

Figures 3 and 4 show a tower placement action. Tower placement in keyboard / mouse mode involves selecting a tile to build on, and then choosing the appropriate tower from the context menu. In touch mode, to avoid going through list boxes, which are hard to access, you start by selecting the correct tower icon, before touching the tile to place it on.

Making Touchable Interface Elements

When adding touch to the game, we began by examining the visual design of the layout, seeking to make key UI elements easier to touch, without requiring too much precision. The key UI elements for Defense Grid are tower selection, tower placement, Menu/Pause, and Fast Forward.

The design moved these elements to the sides of the screen, in anticipation of running on a tablet PC where the user would primarily use their thumbs to activate the UI. A design prototype was made and it tested on a variety of touch-capable devices. It worked very well for tablets. When testing the prototype on a touch-capable Ultrabook, some of the advantages of putting the UI elements on the side of the screen were lost.

Hidden Path had considered other alternative UI approaches, including an option where the gamer would touch a tile to build on, producing a star burst of available tower choices around the touch area. This was intended to help retain the context of the tower placement action spatially, but it obstructed the neighboring tiles and map. In the end, Hidden Path decided this was too intrusive during gameplay.

Code Changes to Handle Touch Events

For Windows 8 Desktop apps like Defense Grid, there are two mutually-exclusive event models that can be used: WM_GESTURE and WM_TOUCH. Defense Grid uses WM_TOUCH, which is the lower-level API. WM_TOUCH requires the game to interpret each touch contact and movement without any automatic gesture detection. WM_GESTURE is greedier. It doesn’t release the message until the gesture is completed. This led to unacceptable lag. For example, a swipe across the screen to pan the map did nothing until the swipe is completed, at which time the map pans. Using WM_TOUCH, the game was able to fluidly handle swipe gestures and have the camera panning follow the finger movement during the gesture.

Implementing touch using WM_TOUCH was relatively simple for the Hidden Path engineers, but some issues arose that required additional time and effort to resolve. One of the early problems was implementing a satisfying pan and scan of the game map. Initially, the game treated swipe starts as taps, but after testing with actual devices, this was tweaked to recognize the swipe early on, providing an immediate response.

Also, touch-capable devices have different responsiveness and latency in their reaction to touch. The custom-designed gesture interpreter (built on WM_TOUCH) had to distinguish between taps and swipes, and the distinction relies heavily on the latency of the touch events. Engineers at Hidden Path tested their implementation on a variety of devices and tweaked their gesture recognizer code to work well within a range of expected latencies.

One last problem came from successfully transitioning between touch input and the keyboard and mouse input. Hidden Path wanted to design the interface so that a player could use either input method and switch between the two. The game was implemented to switch the interface on first detection of a new input mode. For example, if keyboard or mouse was used, the onscreen touch based icons would disappear. They returned on the first touch detection. The tutorials / control help updated dynamically to reflect the current input mode of the user. For example, the game advised you to pinch the screen or scroll the mouse wheel to zoom, based on which mode the game was in.

Rotation Events

One of the perks of a tablet or Ultrabook is its ability to function fully in both landscape and portrait mode. Yet, sometimes this amazing feature causes trouble. Some apps and games are designed to work well in only one of the modes. In the case of Defense Grid, you needed to have it in Landscape mode to get a playable experience.  But, Windows 8 allows AutoRotation of the Desktop and all apps that go with it. There wasn’t an obvious way to disable this autorotation if the user chose it.

This caused the game to crash if the device was rotated when Windows Display AutoRotation was enabled. Even a slight rotation became troublesome. 

To solve this, we found that there was an unpublished function in Win8 user32.dll we could call to limit orientation to Landscape (or Portrait).

typedef enum ORIENTATION_PREFERENCE
{
    ORIENTATION_PREFERENCE_NONE              = 0x0,
    ORIENTATION_PREFERENCE_LANDSCAPE         = 0x1,
    ORIENTATION_PREFERENCE_PORTRAIT          = 0x2,
    ORIENTATION_PREFERENCE_LANDSCAPE_FLIPPED = 0x4,
    ORIENTATION_PREFERENCE_PORTRAIT_FLIPPED  = 0x8
} ORIENTATION_PREFERENCE;
 
typedef BOOL (WINAPI *FPtrType)(ORIENTATION_PREFERENCE orientation);
 
char lpszModuleName[] = "user32.dll";
HMODULE hModule = LoadLibraryA(lpszModuleName);
if( hModule != NULL )
{
    char lpszFunctionName[] = "SetDisplayAutoRotationPreferences";
    FPtrType HookedSDARP = (FPtrType)GetProcAddress(hModule, lpszFunctionName);
    if( HookedSDARP != NULL )
            (*HookedSDARP)( ORIENTATION_PREFERENCE_LANDSCAPE );
}

Since this is an unpublished API call, the best way to call it is to check and see if this function is available in the current user32.dll, using GetProcAddress(). This will return as true on Win8, but fail on Win 7 and earlier OSes. This works well, as the AutoRotation is only available on Win8.

Conclusion

Modifying a successful game like Defense Grid so it used a whole new input method was a gutsy move that opened up the game to a new class of devices and enhanced the experience for consumers with touch-capable PCs. Hidden Path designed a new interface for touch without taking anything away from the existing keyboard and mouse interface. The coding went smoothly beyond the interesting edge cases that were eventually resolved. The end result is the same great gameplay available to a larger market.

References

Hidden Path Entertainment: http://www.hiddenpath.com

Auto-Rotation fix: http://software.intel.com/en-us/blogs/2013/01/10/handling-windows-8-auto-rotate-feature-in-your-application

About the Author

Doraisamy Ganeshkumar is a Senior Software Engineer on the Intel Developer Relations team. He helps PC game developers optimize games for Intel products. His current focus is to ensure the best Out of Box gaming experience for PC gamers.

Erica McEachern is a Technical Writer, a roller derby athlete, and an avid gamer. She rarely uses semicolons, and prefers compound sentences to simple ones. She also believes that coffee is the key to creativity and collaboration.

  • ultrabook
  • Windows 8*
  • defense style strategy game
  • Hidden Path Entertainment*
  • developer of Defense Grid
  • Developers
  • Windows*
  • Graphics
  • Touch Interfaces
  • User Experience and Design
  • URL

  • Viewing all articles
    Browse latest Browse all 536

    Trending Articles