News
Driving Monster Train to Mobile
Design
Games

Imagine a roguelike deck-builder set on a train being attacked by heaven’s forces as you protect the train that’s “hell-bent” on restoring the inferno and saving hell, you’ll get Monster Train.

Originally developed by Shiny Shoe, Monster Train is a turn-based roguelike deck-building game with multiplayer and endless replayability. Tasked with reigniting the flames of hell and preventing it from freezing over, this train ride will urge your tactical decision-making skills to defend your precious pyre from enemies as you strengthen your hellspawn army and navigate through the circles of hell.

The game is currently available on Steam and has received great reviews. It received the  PC Gamers Best Card Game of 2020 award and was a finalist nominee for the 2021 Dice Awards for Strategy/Simulation Game of the Year.

Secret 6 is proud to have worked closely with Good Shepherd Entertainment in bringing Monster Train to the iOS platform. We couldn’t contain our excitement when we knew we’d get to work on this!At the very start of the project, the goal was to “develop a fantastic version of Monster Train for iOS devices that has near-feature parity with PC”. The biggest challenge was in how to incorporate the game screens on mobile, which have a drastically smaller display than PC monitors.

Porting with user experience (UX) in mind

Ensuring the readability of UI elements, and designing responsive and intuitive touch controls were pillars of the UX-UI design process.

On a mobile device, UI directly ported from a PC game doesn’t always translate well: text being too small to read, buttons difficult to tap, or a screen layout, while workable on a monitor screen, now appears too compressed and dense on relatively smaller mobile devices. However, “Larger” isn’t always the solution, given the limited screen space we have to work with.

Mobile screenshot of the card info tooltip in a zoom view modal via tap-hold; zoom view modal only on mobile and Switch
PC screenshot of card info tooltip via mouse hover where all info is  shown as tooltips only

Understanding the mobile user experience for deck-building games and a lot of wireframing and iteration were involved to get closer to the goal. One of these instances would be the card information that appears as tooltips on PCs via mouse hover. On mobile, we made it so a few key tooltips would be visible when you tap on a card. But a tap-hold would allow you to view all information, which would appear via a module for better readability. This allowed for card details to still be available and accessible on touch-screen devices.

Creating a more concise Clan Select screen for mobile
Original PC Clan Select screen

Across several UI, we made the elements more concise, while still keeping enough of the same information available to the player, when they set up their run and play a level.

Optimizing and transferring features on mobile

Porting to the iOS platform posed unique engineering challenges.  We were facing an issue in the iOS builds where some cards just wouldn’t display properly on the device, this involved coding in asset compression so card images would appear properly.

Smartphones nowadays are powerful devices but to ensure smooth performance, we had to optimize for them.  Meta features such as achievements and cloud saving that are also present on Steam were made to work as we carried them over to the iOS platform.

Assuring porting quality

Overcoming UI and UX challenges, optimizing for mobile, as well as iOS platform issues were just part of the equation. Our QA team was thorough in planning test cases and performing rigorous tests across different iOS devices throughout production. All this is to ensure we have a faithful iOS port of Monster Train.

Thank you Good Shepherd Entertainment and Shiny Shoe for the opportunity to work on Monster Train for iOS!

It has been one hell of a train ride and we look forward to doing more porting projects in the future.

Play Monster Train, available on Steam, and now on the App Store!

Share this article
S6 Social FacebookS6 Social TwitterS6 Social LinkedIn