Gamasutra: The Art & Business of Making Gamesspacer
arrowPress Releases
September 1, 2014
PR Newswire
View All
View All     Submit Event





If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 
From keyboard and mouse to on-screen analog thumb sticks
by Matt Hackett on 08/07/11 12:00:00 am   Featured Blogs

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

You may have read before about some of the difficulties of porting Onslaught! to iOS. The first major hurdle we had to jump was getting a decent framerate. This and many other technical issues (including audio) were solved by Game Closure's SDK, but there were other critical issues to address, including a fundamental difference in user input.

Versions of Onslaught! Arena for Chrome and OSX rely on mouse and keyboard controls. Players can use the WASD keys (or arrow keys) to navigate, as well as the mouse for aiming and attacking. Obviously these input mechanisms are not compatible with touch devices. To make the jump to mobile as smooth as possible, we experimented with many different control schemes, and ended up providing players with two options:

  1. Touch to move. We labeled this as the "Beginner" option, informing players to "Use one finger." This is a streamlined, AI-assisted control scheme. Players touch the device where they want their character to move, and the character automatically attacks the nearest enemy or projectile.
  2. Analog thumb sticks. This is the (comparatively) "Advanced" scheme, asking players to "Use two thumbs." This mechanism provides players with complete control over where their character is moving, where he is facing, when to attack, and fine granular control over the angle of the thrown projectiles.

None of the decisions we made regarding user input were decided on lightly. First, we understood that analog thumb sticks have issues of their own, so we read up on best practices and studied the approach used by other popular games in the shoot 'em up genre (including Minigore and Geometry Wars). Based on this research, there seemed to be two very different approaches to the positioning of digital thumb sticks: dynamic and static.

Dynamic thumb sticks (like those used in Geometry Wars) appear on the screen only after the player touches the device, creating anchor points. Movement is then recorded as relative to those points. This has advantages such as user comfort; if one player likes to have his or her thumbs near the edge of the screen, that's fine. Likewise this method supports players who would prefer to reach farther into the device for stability or other reasons. One potential downside is that without prior visual indication, it may not be easily understood how to interact with the game or where to touch the device to begin input.

Static thumb sticks are typically always visible and in fixed positions on the screen. We decided to go with this option for a few reasons, including what we believe to be a more robust first-time experience; players new to the game could see at a glance where to put their thumbs. Additionally, it removed issues with monsters or traps being hidden beneath players' thumbs!

Technical approach

We strongly believe in code reuse so we wanted something that could easily be dropped into just about any project. This led to the creation of a Stick class that can be used like so:

var stick = new Stick(40); // 40 is the size of the input
document.addEventListener("mousemove", function (e) {
        e.preventDefault();
        stick.setInputXY(e.pageX, e.pageY);
});

This is easily rendered to the canvas element with code like:

context.beginPath();
context.arc(stick.limit.x, stick.limit.y, limitSize, 0, (Math.PI * 2), true);
context.stroke();

Examples

I have created and uploaded examples of this Stick class being used on the Lost Decade Games GitHub page. One of them uses this class as a dynamic thumbstick that should work in most browsers. The thumb stick does not appear until input begins and controls the velocity of the green circle on the screen.

There's also a static thumbstick example that uses the same class. This demo also controls the velocity of the green circle but it's been augumented with base and pivot graphics (the same graphics used in Onslaught!) to demonstrate how extensible the Stick class is.

This code is open source and available on our GitHub demos page. For developers who would also like to see how this is accomplished on an actual iPad, load up this page directly on your device.

Summary


The transition from keyboard and mouse to analog thumb sticks was certainly not a simple process. It involved heavy user testing, player feedback and iterations to feel natural. However, the extra development and research time turned out to be well worth the effort, as the iPad version of our game is now easily the best-selling.


Related Jobs

InnoGames GmbH
InnoGames GmbH — Hamburg, Germany
[09.01.14]

Software Developer JavaScript (m/f)
InnoGames GmbH
InnoGames GmbH — Hamburg, Germany
[09.01.14]

Backend Developer Marketing / CRM (m/f)
InnoGames GmbH
InnoGames GmbH — Hamburg, Germany
[09.01.14]

Software Developer Flash (m/f)
InnoGames GmbH
InnoGames GmbH — Hamburg, Germany
[09.01.14]

Mobile Developer iOS (m/f)






Comments


Michael DeFazio
profile image
thank you for an interesting article.



played around with the demo version of Onslaught! in the chrome store and it was loads of fun... (brought me back to the SmashTV "Big Money, Big Prizes... I Love it!" days)



went to Android Market and got the demo version of the game, and unfortunately it did not load... checked my Logcat (using a stock Iconia ATab 500 with Android 3.2) and got this error:



08-08 06:38:04.211: ERROR/InputDispatcher(130): channel '410ceef8 com.lostdecadegames.onslaughtlite/com.lostdecadegames.onslaughtlite.TeaLeaf (server)' ~ Consumer closed input channel or an error occurred. events=0x8



08-08 06:38:04.211: ERROR/InputDispatcher(130): channel '410ceef8 com.lostdecadegames.onslaughtlite/com.lostdecadegames.onslaughtlite.TeaLeaf (server)' ~ Channel is unrecoverably broken and will be disposed!



the game wouldn't start unfortunately. (I've used tealeaf before on last job, dunno why this would be a hard stop problem though...)



i'm primarily doing android tablet development at the moment and have been debating the merits of using the touchscreen or accelerometer for controls (think i'm going with a hybrid/dynamic touch scheme

though)... was interesting to get a new take on things.



cheers

Matthew Mouras
profile image
This is a great article. As a coder, I always appreciate seeing some technical information in post-mortems... even better when the source code is linked! Thanks so much for your post.

Matt Hackett
profile image
@Michael DeFazio: thanks a lot for the log, that is so valuable for finding a fix! We'll get on that.



@Matthew Mouras: sure, glad it was useful :-)


none
 
Comment: