I will start off with a confession... I think we underestimated how much of a difference there is between Wii and iPhone controls. Toki Tori's touchscreen controls were easily adapted from Wii to iPhone, but for Swords & Soldiers there's a lot more involved.
Some aspects, such as using your finger to scroll through the level as if you’re scrolling through a webpage, worked beautifully with the game. Other aspects not so much however.
Aside from obvious screen size differences, the main reason for this is that Ronimo, the original creators of the game, are absolutely in love with tool tips and mouse-over effects. Having your finger hover over a button to learn what it does is not good practice on touch screen devices, so we needed to rethink this drastically. Fortunately, when we looked closer at the game we noticed it wasn’t strictly needed in many places. Needless to say, a tool tip for the credits button that says ‘view credits’ is easily removed and not missed by anyone.
The ingame GUI needed the most attention, which can be seen in the awesomely ugly mockup taken straight from our internal Wiki below:
Note: In case you wondered, the rainbow numbers will not be present in the game.
1. Upgrade Button
To make room for more icons in the row and to give the Upgrade button a static location, we’ve moved it to the bottom left part of the screen. No difference in function needed.
2. Gold/Mana Counter
The mana and gold counters have moved to the top instead of being displayed together below the icon row on the left, which obscured too much of the playfield. Since the mana related icons spawn on the right side of the icon row, we’ve separated the two counters. It means the colors of the icons and counters are now more connected visually.
3. Need More Gold!
That’s what the game shouts when an icon cannot be pressed because there is not enough gold available. This is the part where re run into the problem of not having a mouse-over effect, which the Wii version uses to communicate how much money is needed. Instead, we will allow players to press it, resulting in the amount of money needed blinking five times below the icon.
4. Cost Indicator
When you buy something by pressing the icon, it will show the amount it cost (-200) above the button, moving upwards to a predetermined height, standing still for a while before disappearing. Showing the costs below the icons was considered, but turned out to be too chaotic when ten icons were displayed close together.
5. Pause Button
The iPhone does not have a physical pause button, which means we need an on-screen pause button. This has been implemented and works well, giving balance to the display next opposite the Upgrade button.
When Spells or Towers are selected, Swords & Soldiers would totally remove the HUD and rely on a mouse cursor change to indicate what was possible at the cursor location. This was never going to work on iPhone so we changed it quite a bit.
We’ve kept the entire HUD visible but faded out the non-active icons and added a small cross to close the active icon. To re-enfore the feeling of being in a different mode, the corners of the screen will have a vignetting effect in your team’s color.
Units that can be used with the current spell get pulsating icons over their bodies, indicating interaction is possible. The screen can get quite busy when dozens of units are walking around, but it works out well in practice.
Overall I think we’ve created quite a good control interface for Swords & Soldiers, and I’m looking forward to seeing your reactions when the game gets released. Can’t wait that long? Why not report for duty and test the game for us at our office in Amersfoort!
