Making unique UIs for the game, Part I


I have been very busy making UI’s for our character creation part of the game.  After spending a great deal of time researching UI’s in popular games and in Indie games, I finally sat down with a notebook and a pencil. I sketched out my ideas and shared them with the programmer who will be linking all the artwork together..and make it happen.

GUINotes

I talked to one of my lore guys and gave him some work to do writing up some blurbs regarding lore that will be used on the GUI.  My goal is to use the GUI to link the player directly to the lore, even before, he/she even walks in the world. Character creation is the beginning of character development in the mind of the player so we will start here.

I like a realistic art style but with simple layouts, easy to read and pleasant to the eye. I kept a consistent theme but used bits of color and flavor representing each of the culture present in the game.

First panel is the login panel.  At the top, all of the cultures are represented by small shields.  The image here and in the other panels were taken from in-game although they maybe updated later as things change.  This seemingly simple panel took the work of three people…Dylan created the beautiful title logo at the top of the page.  Kerensa worked on the shields, and I put it all together on the page along with a picture of the Bloodlands in game. Simple, easy to read, and already introducing the cultures to the player.

Screen Shot 01-09-16 at 08.13 PM

After logging in, the player can choose to create a new player or use one that is saved.  Once the player choose the character, the Enter Game button will become solid and he can enter the game. If he chooses to create a new character, he can do so now.  Yes, Buford is running around in his underwear again. He does have clothing, honestly. We will have to show those off soon.

Screen Shot 12-27-15 at 09.42 PM

Next step is diving deep into character creation.  The player will see an introduction to Aryiure and a bit of information useful to creating a character for the game. There first step is to chose from among the seven cultures available.  The backdrop below is a beautiful night time scene on an island off the coast of Caeril.Screen Shot 12-27-15 at 09.46 PM

The red flag alerts the player to important information in the box below. There, she is instructed to choose her culture by clicking on the scroll.  After clicking a map appears and the player can choose a culture by selecting it on the map.  Later, an optional link to more lore information will be added for those who wish to be better informed before making a choice.  The lovely map was made by Richard.

Screen Shot 12-27-15 at 09.46 PM 001

After choosing a culture, the player will be taken to a lore page about that particular culture. There he can read a bout about each culture and choose again if he prefers another.  He can also choose a birthplace, used mostly for role player purposes but will also be useful when the game advances and we can add in more towns and villages. After choosing a birthplace, a popup will give you information and the Next button will lead you to the next panel.

Screen Shot 12-27-15 at 09.47 PM

Each culture will have it’s own panel. Above is Sala and the church, created by a friend, Cobus, captures the deep religious faith of the Sala people.

Below are the Aethan’s, island dwelling people with a taste for adventure. I wanted a light, breezy feel for their page.  This is an in-game screenshot.  Text for the cultures will be filled in after we reduce our summaries to fit into those tiny little boxes! 🙂  Working on it!  The art work on this panel was made by me, Photoshop, and some lovely textures I found. I had lots of fun with it.

Screen Shot 01-01-16 at 12.50 AM

The Drulons are a unique culture that lives in a deep and beautiful swamp. I wanted to capture the mystery of their culture, shrouded in mist and symbolized by the stately living sentinels.

 

Screen Shot 01-01-16 at 12.51 AM

The screenshot for the Tarians was taken from an asset I purchased. I plan to pull out the modular parts in that pack and rebuild the castle in our game, along with the icy flows on the water. The Tarians live in a mountainous area, cold and snowy for a large part of the year due to the elevation. This picture reminds of Adoken, the main city of Tariana.

 

Screen Shot 01-01-16 at 12.55 AM

Those of you following my blog will be familiar with the next picture. The Bloodlands was the scene of a bloody battle but now is a peaceful farming area, dotted with small villages and fields.  It is also the home of Caeril, a multicultural city that will be  the first area featured in the game.  Kerensa created the beautiful top piece on the lore panel, which mimic’s the sun rising over the plains.

 

Screen Shot 01-01-16 at 03.37 PM

The Sakoians are the people of the desert.  Large dunes and rocky desert floors spread far and wide. A small village with a well is most welcome to travelers and traders who cross the desert on a daily basis.  This is an in-game shot.

Screen Shot 01-09-16 at 07.40 PM

Giant trees, children of the goddess Kainna rise above the forest floor and shelters the Dalmite people who live beneath their branches.  This is also taken from an in-game screenshot.  I had quite a challenge creating huge trees and finding a way to make them look realistic and yet unique. I plan to build villages and cities in the trees in the future.  Kerensa created the beautiful initials on several of the lore panels, including the tree-like letter D.

 

Screen Shot 01-09-16 at 07.48 PM

Once the player chooses her culture and is happy with her decision, she can select Next and go to the next panel, where she can choose her gender, name her character, and then use sliders to create a customized and unique character.Screen Shot 12-27-15 at 07.28 PM

No, this is not our characters as you can tell since this fellow does not at all resemble Buford from the above image. Ethan is a dear friend of mine and he visits all my terrains where I use him for scale. 🙂  He was kind enough to stand in for our characters.  While Dennis was setting them up, he suggested some changes to the way I created the customization, clothing, and hair tabs. So once I make those changes I will take some pictures and post Part II.  The same tabs are there, just different layouts on the pages.

Screen Shot 12-27-15 at 07.24 PM 001

As you can see, there are three pages for body, face, and head customization plus tabs for clothing, markings (freckles, scars, tattoes, etc.), and hairstyles.  Once the player chooses gender, suggestions will be given in the naming guide below with specific ideas for naming his character based on the culture he has chosen.   Skin, eye, and hair color available will also be based on the culture as well as the clothing and in some cases, the tattoos.  When finished, your character will be ready…at least his appearance and the beginnings of his background story. He has a culture and a hometown as well as an appropriate name.

You are probably wondering where all the stats are? When do I get to choose to be strong or intelligent or all those things?  In LoA, we will be doing things a little bit differently. You will have a chance to decide your character’s path forward as well as his past before you are fully immersed in the game…but how you will do that will have to wait for another post at another time.

So..next time, some better pictures of the customization with our actual characters.  I should have those done soon.

Please comment and let me know what you liked or didn’t like. I appreciate constructive criticism and I love to know how you like it.  It is big motivation for me and the others on the game.

Other updates on the coding front..Ryan has been chopping down trees in the forest and the character looks great, no longer looking at his feet and head doesn’t go through the tree. He is adding skill as expected. 🙂  Dennis is making a fabulous chat panel with all sort of great features that will help you to role play and chat during game play. Feel free to toss some suggestions…but better hurry as he is moving quickly.  Kerensa has promised me some more concept art.  Dylan is writing some great lore to round out the UI panels.  Oh..and I should be showing off some player house building soon, using a system similar to Rust, but much better. I hope to use it to show you how to build treehouses in those giant trees very soon.

See ya! Hope everyone had a wonderful holiday season and a Happy New Year!

Teila

This entry was posted in Uncategorized. Bookmark the permalink.

2 Responses to Making unique UIs for the game, Part I

  1. ozmono says:

    I really like the UIs. I like how you’ve taken the time to make them unique to each culture. I like how it’s not more of the same dark and gloomy interfaces that are trending. They feel fresh, full of life, different but still aesthetically pleasing. The scrolls make it feel like story like, I’m glad their is lore information in bite size chunks although I noticed some is missing in the above, tell that Dylan fellow to stop dragging his feet 😉

    Most importantly of all though, the theme for the cultures gives a distinct impression of each culture that is appropriate. I’m guessing those impressions will be worth more than a thousand words and easier to digest aswell.

    So hats off, especially for making each culture unique, I think it’s especially important for a roleplaying game. Well done.

    Like

  2. teilasblog says:

    Thanks, Oz! I appreciate the post. Playing a culture is a game in and of itself since each one is very different. So making distinct cultural pages rather than just one seemed important to me. I could never capture the essence of the game. Glad you like the colors. Making a niche game means making a decision not to follow the crowd. Hopefully, we will attract the players who want to play a different sort of game.

    Teila

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s