May 5th, 2014

Chessmonger is an iPad app to help novice players explore, learn and play chess by Mill+ creative director Yann Mabille and programmer Arthur Hennequin. Yann shares the app's simple yet elegant design philosophy and the challenging process bringing his passion project to life below.

The Goal

Chessmonger was driven by the will to learn how to make content on the iOS platform and the desire to improve on a classic. Obviously there's an incredible amount of chess games already out there but we found that there was absolutely no chess app that was either intuitive or beautiful. On top of that, we realized there were many more people than we thought that had never played chess and often had an overly complicated perception of the game.

Promo 02 1

This led us to integrate app content that would introduce the game to new players using a simple language and complementary approaches like a short history of chess, annotated historic games, a simple tutorial, and visual guides that allow a first time player to play without having to learn rules beforehand.

Chesssmongerappimagegallery 2

Another simple but efficient feature we implemented was the ability to tilt the chessboard along the central axis using the iPad's accelerometer. We took advantage of the fully 3D chessboard and chessmen to add perspective without going overboard with alternative angles that would confuse the player.

Our goal was to propose a holistic and simple view of the game to the widest range of potential players as possible. We did not want to create an app that is fundamentally different, we wanted to make a better app. If players can have fun playing chess after using our app about three times, then we reached our goal.

Chesssmongerappimagegallery 3

The Visual Approach and UI Design

The best physical interfaces manage to hide complexity under an elegant and clutterless envelope. It's this envelope that invites and guides the user, eventually making the most of the product's essence. When the iPhone first came out, I was thoroughly impressed by the tangible aspect of the skeuomorphic interface.

Skeuomorphic design is the practice of incorporating design cues from real objects to provide contextual clues and familiarity to convey a complex or new concept like displaying a metal slider on the (new at the time) touch screen to indicate a swiping motion. After multiple iterations of iOS, developers fell into the trap of too much clutter for the sake of representing reality and the efficiency was often lost. The latest iOS updates and design trends show indicate a movement toward flat, simplified graphics over realism.

Iphonesflatskeu 4

What I wanted to do is keep a skeuomorphic approach that taps into the heritage of chess while also making sure the main game screen and interface were streamlined. For the chess set and chessmen, I tried to recreate a realistic and beautiful chess set with just enough stylization to preserve a clear read. I've always been surprised by the amount of apps out there which display the chessmen horrendously through an approximate design, bad color combinations and difficult readability. For the sake of readability, we chose the classic Staunton chess set style and modeled all the pieces in 3D rather than representing the pieces with the usual 2D icons. While they are usually clearer to read, the 2D icons don't provide the elegance and depth of the classic set.

Initial Concept 5

Rather than just stick to a simple physical representation of a chess set, I wanted to embrace what the iPad essentially is, a condensation of modern technology. By blending a few modern graphical elements such as metal, transparency and animated graphical hints that guide the player, I tried to find the balance between the traditional heritage of the classic game and new technologies.

Interface Progress 6

The AI Solution

We decided to develop our own AI solution after looking at a range of open source options and realizing the code was usually too messy and rigid to adapt. Although far from high level, our AI is challenging enough to be fun while still allowing beginners to occasionally grasp victory. The tricky part was making the AI think fast enough to create a fluid gameplay experience. In most chess apps, the openings are actually pre defined movements that do not utilize the processing power of the device. If the CPU had to think about all the opening variations, then the the first turn would sometimes take more than 30 seconds. However, once the game develops, the opportunity to use pre defined movements becomes irrelevant and the user has to wait a long time between each turn. The AI optimizations in our engine were mainly made to improve thinking speed. For comparison, the first version took about 2 minutes to compute its first move.

The Optimization

The base of the interface design was created in 3D and enhanced in 2D. The assets were created for the newer retina resolution and reduced by 50% for the original iPad. While this sounds simple in essence, important details were sometimes lost during size reductions requiring separate enhancements. The backbone of Chessmonger is built as a combination of animated 3D layers. Everything is built in openGL ES which is a low-level, hardware-focused API providing the most powerful and flexible graphics processing tools. It required building our own interface system from scratch including font optimization, texture atlas and gesture recognition to match the iOs behavior.

The memory management and file size are crucial for a responsive user experience. We condensed visual assets in as few images as possible to accelerate loading times and decided to load all the assets at the launch of the app, including sound files and themes available for purchase, to speed up any type of interaction later down the road.

The Final Product

Chessmonger has been an immense pleasure to create and we hope you will enjoy it. The experience gained from this project has been a great source of motivation and we cannot wait to develop our next project which will be completely different and hopefully very surprising.

Download the free app at the iTunes App Store and leave a review!