Indie Game Studio

Powered by Blogger.

Darkness Revealed Update 29 - Tutorial UI!

Hello, everyone! How's it going?

In the last update we talked about our HUD's design. Today, we'll show some more of our game's UI design, this time more focused on our tutorial level. Let's get going!

Tutorial (Work in Progress)

Last Dive has some pretty unique mechanics. The original game had a slow tutorial done through dialogue boxes, which is something we want to improve for this remake. One of our first ideas was to create a "Diving Manual", connecting the tutorial to the game's universe by making it seem like Dave was remembering his diving lessons from way back. We also created two icons that activate the tutorial screens in the game, making them not only less obtrusive, but optional altogether. If you already know how to perform a High Jump, then by all means, just do it! :)



From the first version, we figured the book needed to be bigger to fit more text without sacrificing the size of our pixel art font. So we changed it to address that concern.



This second version felt a lot better but was still a bit off. The left page was kinda useless, the diver's symbol we made up was taking too much space and the elements in the right page felt a bit loose. So we worked on fixing those things.



This last version was working all right for now. Now both pages had useful information, and the pictogram can come in handy to explain the different jump mechanics in a more visual way. The diving symbol was toned down so that it works as a minor decoration element instead of competing with the text itself. We also made a test using a higher resolution font. Maybe some things in the game would look better if we broke the pixel perfect rule in some cases.



We liked this version too! The text is a bit blurry, but that's just due to Photoshop limitations. In the game engine, we could have that look without the blur. The main advantage of a higher res font is that we have a lot more freedom as to how we organize and prioritize information on screen. Space is a really big concern when working with low res fonts, so it was good to see high res fonts worked well without breaking the game's art direction. The tutorial is very much a work in progress, and all of this is surely gonna change. For now, we felt happy enough to move on to other things.

Stop by and give us your opinion on our tutorial screens! We are always hanging out on Twitter and Facebook, so feel free to say hello. Or, if you want to receive these updates complete and before everyone else, sign up for our Golden Chest

Thanks for stopping by! ;)


Click us! We know you want to!