Gamasutra is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Gamasutra: The Art & Business of Making Gamesspacer
The Evolution of Puzzle Craft
View All     RSS
August 23, 2019
arrowPress Releases
August 23, 2019
Games Press
View All     RSS







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


 

The Evolution of Puzzle Craft


October 25, 2012 Article Start Previous Page 3 of 4 Next
 

The Interface

Designing a game is one thing, and communicating the design to the players is another cup of tea altogether. In Puzzle Craft players need to be able to collect tiles, buy new buildings, tools, and workers, check their resources and trade them, buy IAPs, and prepare supplies for the mine. They also need to understand all mechanisms of the game.


Click for larger version, with all three steps in the evolution

The final interface is pretty simple, but the first approach was far more complicated.

Starting with all types of upgrades stuffed under one button and then divided among several not-so-intuitive tabs, we finished with every type of upgrade (buildings, workers, tools) under a separate button and accessible with just one tap.

Dropping the tabs allowed us to design a universal upper bar with all the most vital information.

At first we perceived preparing supplies as a vital part of the gameplay cycle, and there a whole separate screen dedicated to that process.

However the screen did not feel fun enough, so we started adding more and more graphics.


Click for larger version, with all three steps in the evolution

Until we realized that the best option was to drop the screen altogether and just use a popup --it improved the players’ experience, and give us some space on the bottom bar (which we needed to change the aforementioned tabs into separate buttons).


Click for larger version, with all three steps in the evolution

We also moved the resources summary from a separate screen to an easy-accessible side tab (BTW take a look on how the iron-, silver-, and gold bar icons changed).


Click for larger version, with all three steps in the evolution

But the hardest part was to inform the player how the game rules actually work.


Click for larger version, with all three steps in the evolution

The first idea was this elaborate and totally incomprehensible stats / relations screen. Sensing that something is wrong we split it into the town hall screen (which survived to the release) and a beautiful, elaborate and still totally incomprehensible relations screen.


Click for larger version, with all three steps in the evolution

After many days of debates and brainstorming, we threw the screen away and presented the same information in the places and at the moments, it was actually needed. And it worked.

Tutorial

The game was almost ready when we realized that we had no idea how to explain all the mechanisms to new players. We obviously could not afford to send one of the game developers to every customer!

We started with great big popups with lots of text. This, of course, didn’t work at all. Nobody reads the text, and everybody skips popups. Animated images were sort of okay, but we had no time or free space to animate all tutorials.


The midpoint in the evolution. Click for larger version, with all three steps in the evolution


Article Start Previous Page 3 of 4 Next

Related Jobs

Cold Iron Studios
Cold Iron Studios — San Jose, California, United States
[08.22.19]

Senior Content Designer
Cold Iron Studios
Cold Iron Studios — San Jose, California, United States
[08.21.19]

Senior Systems Designer
Street Smarts VR
Street Smarts VR — San Antonio, Texas, United States
[08.21.19]

Senior Producer/Game Designer
The Walt Disney Company
The Walt Disney Company — Glendale, California, United States
[08.21.19]

Game Designer, Creative Development





Loading Comments

loader image