Prince of Persia Touch Interface Design

PoP logo2

Project Length: 4 Weeks (7/12/11 – 8/11/11)
Team: N/A
My Roles: Gameplay Mechanics, UI Design
End Product: Full Interface Conversion & Demo

One of the most important elements of gaming is the user interface. Even an immaculately designed game can come crashing down if it controls poorly or the player can’t ascertain the information they need. As a test of skill, this project was a challenge to take a console-based game — one that has plenty of buttons available — and translate it to an Apple product format. The game needed to convert logically and remain as intuitive to play as it was on its home platform.

To meet this challenge, I chose the 2008 Prince of Persia. Neverminding that this is one of my favorite games, I felt that it had a control scheme that I could condense without losing the essence of the game itself. Prince of Persia is and always has been about fluidity of motion, and as such I believed it would benefit from simplified controls anyway.

controlscheme

Many of my peers took the route of creating what was essentially a D-pad on the touch screen, which I felt was not in keeping with the spirit of this exercise. If gamers are going to bother to get a pre-existing game in a new format, that new format ought to give them a different experience from the original version. I resolved that my game would inherently be more intuitive to the index finger rather than the thumb.

First thing’s first: Let’s examine the Xbox 360 game’s configuration.

PoPxboxcontrols

This is actually rather promising to me because there are already buttons being layered for various uses, depending on the situation. I examined the game more carefully with this idea in mind, and determined that there were three predominant modes in the game: Combat, Parkour, and Magic. Furthermore, I noted that the colors of the rightmost Xbox buttons corresponded to the colors of the plates used in the magic sequences. The obvious answer to me was to combine these concepts, since many players would already be familiar with the configuration anyway if they were coming off a console. Other controls, such as camera adjustment and speaking with Elika, were easily incorporated through touching the game screen itself instead of a button.

I did find myself in a bind when it came to the right trigger/bumper control. The abilities mapped to those two buttons were also varied between the three modes, but I’d run out of colored plates to align them with. Luckily, I was quick to remember the Epilogue DLC for this game. One of the elements of this game extension was, in fact, a fifth plate. It turned out to be especially fitting since this plate’s function was to create new surfaces in order to progress. I solved my problem by incorporating this new plate into the interface and noting that the DLC chapter would be automatically included in the Apple version of the game.

applecontrols

Please note that all interface elements are shown in this image at full opacity. The in-game use lowers the opacity to 55% to decrease distraction.

As can be seen in the diagram, each button (represented by the actual in-game graphic of the magic plates) serves three purposes, depending on game mode. The top row represents Magic Mode, the middle Combat Mode, and the bottom Parkour Mode. It was necessary to keep the button size somewhat large to reduce the risk of fat-fingering, but I didn’t like how much of the screen space this forced it to take. Therefor, the control board is faded to 55% opacity during normal gameplay. Buttons brighten to full opacity when used, then fade back down to 55% after one second.

There are a couple of other functions not specifically mentioned in the controls screen, but that do turn up in-game at the first instance of use. The first is when Elika heals the fertile grounds. Just as the Xbox 360 version prompts the player to repeatedly tap Y when needed, the touch version of the game will prompt the player to repeatedly tap the yellow plate.

The second allows the Prince to maintain his running momentum when jumping from ledges. Like many Legend of Zelda games, this game makes jumps automatic when the character runs off the end of a surface. This will allow the player to maintain the flow of their gameplay, as the alternative would be to let go of the Prince (thereby stopping his movement), pressing jump, and then moving the Prince again mid-air. The jump button pertains more to sequences of parkour, when forward motion isn’t necessarily needed.

One other interface detail, the enemy health bar (which sits at the top-middle of the screen), is also not shown in this diagram due to the fact that health bars only appear during combat. It can be seen later in this article during the interface demonstration.


interfaceribbon

There was one concern that players might not be able to remember all of the functions of each button; after all, the reason we remember them on a controller is because our thumb knows where to go, not due to looking at it. This was an especially high concern with regard to new players. To solve this problem, I decided to add secondary graphics to each plate that would change depending on the mode.

interfaceribbon

The icon for Elika’s assistance does not change because I don’t see the point in making a new image for essentially the same effect.

During Magic Mode, the plates remain clean, as those are exactly what the player is using in-game at that time. For Combat Mode, the secondary graphics appear, indicating to the player that they have the options of a gauntlet throw, strafing, Elika’s assistance, sword swings, and blocking. When the game switches over to Parkour Mode, the overlays swap out with new ones to indicate hook grappling, jumping, Elika’s assitance, wall running, and wall grinding.


menusystem

I made sure to be thorough in working out all of the menus that appear in the original game; I even went so far as to include the concept art gallery, complete with artwork. The main menu options follow the exact same layout order as they do in the Xbox 360 version, with the addition of an option to turn the tutorial buttons (aka the secondary overlays for the control bar) on or off.

This slideshow requires JavaScript.

pop-demo

To illustrate how the design would work in-game in a more visceral manner, I’ve composed an animated image to simulate a gameplay sequence.

gameplay2

This sequence makes use of every button in the interface ribbon.

Even though I couldn’t deliver a playable demo, I believe this conveys the usefulness of the touch design almost as effectively. It makes use of every button on the interface ribbon to illustrate exactly how the gameplay keeps its flow while utilizing its touch format. The extensive nature of the sequence makes it easier to imagine what it would be like to play this version of the game — which has elicited reactions pining for this project to be a real Ubisoft release.

The only parts of the interface that this sequence does not cover are the sub-menus of the main menu and the map screen.

legalcrap2

© 2008 Ubisoft Entertainment. All Rights Reserved. Based on Prince of Persia® created by Jordan Mechner. Ubisoft, Ubi.com, and the Ubisoft logo are trademarks of Ubisoft Entertainment in the U.S. and/or other countries. Prince of Persia is a trademark of Jordan Mechner in the U.S. and/or other countries used under license by Ubisoft Entertainment.

Prince of Persia touch interface design is 100% me.

Advertisements

About Leedzie

Leda "Leedzie" Clark is a writer and game designer with a sharp eye for detail and a kooky sense of humor. She's been a nerd as long as she can remember, and always seems to notice the wrong thing first in any given situation.

Posted on April 24, 2013, in Consoles, Game Idea, Game_Design, Interface, Portfolio, Video Games and tagged , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: