Tuesday, 28 January 2014

Investigation of mobile games UIs and Ōkami gameplay as research

Last week I have presented my honours year work to the 4th year GDPM (Game Design & Production Management) students to see if anyone was interested in working together or helping during their free-time. Got a couple of responses and will be meeting them this week.

Also I have been told by my supervisor yesterday that I will need to do a game design or a game concept document if I want to do the art for 2D game assets. It is certainly an issue, because it means I will have to come up with a game idea, game mechanics and then write up a document. How I am going to do all, I have no idea. It is pretty scary and more than ever I feel like collaborating with someone just to help me with the game design. It just feels like my project instead of starting to 'shrink' is actually 'ballooning' out of proportion.  I have already so many things to cover:  fundamentals, colour, game UI, now literature on game design and the actual document and sooooo little time. I am starting to feel relieved that during last semester I made a decision not to code my own game. It is no way I would have had time for any of that. Overall feeling veeerrrrryyyy stressed.

Last week I was unable to get hold of a tablet through university, so decided to play some games on my Andriod mobile phone. Had a look at Google play for some artistic games, but could not find anything that is similar to what I am trying to achieve. I was not stressed about that, as searching for such games is almost like looking for a needle in a haystack. Also I am trying to keep an eye on news whenever I can to see if anything similar has been released. One of the main reasons why I am undertaking this project is the fact that there are so few games that have an interesting or unique art style. Especially trying to imitate somewhat the traditional media.
Research on UI showed that at least portable devices are using assets for UI very sparingly. Especially regarding HUD. Screen space is at a premium when using a small device and no one wants to clutter it with any unnecessary items. Game play, usually is very intuitive and simple. UI is made to stand out from the background  but at the same time made to fit well with the game art style and colour pallets. Interactable objects stand out because of their colour (complementary or cold vs. warm)

Here are some examples of different HUD solutions on portable devices.

Ubisoft Entertainment. 2014. Rayman Jungle Run. Android. Ubisoft.


Ubisoft Entertainment. 2014. Rayman Jungle Run – Example gameplay (9). [online image]. Google Play. Ubisoft. Available from:
http://www.androidtapp.com/rayman-jungle-run/rayman-jungle-run-example-gameplay-9/ [Accessed 28 January 2014]

As seen in an image above, probably because  most of the game screens have a sky at the top, game designers chose to have yellow icons.  Yellow collour against  blue  is much easier to spot and really stands out, therefore makes it easy for a player to keep an eye on what is happening: how well they are doing.



Another UI example comes from the game Cut the Rope. ZeptoLab have a different aproach with the games HUD. It is very simple and unintrusive as well as fits well with the game design. I would imagine they went for this kind of HUD because ineractable items within the game are brightly coloured therefore having a unintrusive HUD helps with gameplay immersion. (see image below)



ZeptoLab. 2014Cut the Rope FULL FREE.Google playZeptoLab


Unlike some games that perhaps have way too much clutter (including colour clutter) on their screen. I understand that some games are created to be suitable for children, but I  personally feel a bit overhelmed when looking at the Papa Pear Saga's screen.

King.com. 2014. Papa Pear Saga. Google play. King.


I have also borrowed a PS2 from a friend and the Ōkami (2006)* videogame from the library. The main reason for it is the game art style:  inspired by traditional ukiyo-e a woodblock printing as well as ink wash painting techniques. Game designers chose this type of art style because in their opinion it suited best the story they were telling and because it had so much cultural relevance. My intention was to play the game myself and see what choices they have made, how they have dealt with it and hopefully learn something that would benefit my project. Especially because the game is in 3D rather than 2D so I would think it made things more difficult.


My observations  that I had  so far on the art style and design of the game are these:


  • I really liked the art of the intro sequence. Background images, if I was going to be precise. I think it really looks similar to the traditional art and bits of colour (petals) stand out from the almost monochromatic image. I also think the border around the images makes it look more as an illustration image rather than a game screenshot. (see image below) 

However, I do not think that the speech/story bubble looks very pleasing even though it seems to blend well colour wise. To me it looks perhaps slightly messy and out of place. Nevertheless, I think there are much more noticeable things that stand out as being out of place or not too consistent with the artwork presented in the background and that is the characters of the story. They are represented as silhouettes (see images below)


 Orochi 



Shiranui and Nagi



Nagi and Nami
They dont look to bad when presented on their or in pairs, however when placed in a screen with a dragon I think it becomes more difficult to quickly distinguish what is happening on the screen. (see image below)


 Orochi, Shiranui and Nagi


I think the blackness of the silhouettes are overpowering. Also because there is no difference between the characters except the their shapes it is quite hard to pick up what is happening where. I can see that Nagi looks a little more gray then black and I think that was the solution to indicate the fact that he was further away (behind the Shiranui). In my opinion having some colour indication for each character or patterns on the silhouette would have worked much better, but perhaps just like a lot of the games there was lack of time to hit the deadlines and just a silhouette version was chosen to save precious production time. Which in my opinion is understandable but as a player I think I can pick up a subliminal message that tells me somebody perhaps done a 'rush job'.


  • Another thing that bothers me a little is the thickness of the black lines throughout the environment and the characters. (see images below)










I am aware that they are an essential part of the ukiyo-e a woodblock printing technique however there are much more examples where the outlines are not as pronounced as in game. In fact majority of the images have thin and I would say quite delicate lines. (see images below)



 Example of environment.
Hokusai. 19th century. Tsunami. [online image]. Available from: http://commons.wikimedia.org/wiki/File:Tsunami_by_hokusai_19th_century.jpg [Accessed 28 January 2014]



Example of a character

Artist unknown. Early 1900s. Japanese woodcut of Geisha. [online image]. Available from: http://www.flickriver.com/photos/etchingsplus/5751466858/ [Accessed 28 January 2014]


In fact, after quick search I have found only this image that the game art resembled more closely. However, the outlines, still not as tick and not as many as in the games art. Note: ticker lines around the character in the image and much finer lines in environment which is not the case in the game where all lines are the same thickness therefore, in my opinion,  characters do not stand out as much. (see image below)



Example of outlines

Torii Kiyomasu.1690s - 1720. Ichikawa Danjuro I in role of Takenuki Goro. [online image]. Available from: http://en.wikipedia.org/wiki/Torii_Kiyomasu [Accessed 28 January 2014]



  • I think the game has pretty clear HUD in general. (see images below)





Picking up an item



Item goes in to inventory




Map of the area being explored.


Merchant UI also quite clear to see/understand. (see images below)







  • One more thing that I think could have been done better was the main Menu. Some tabs looked a bit cluttered perhaps because of so many colours and the backgroundbeing a little bit crammed: especially on the right hand side. (see image below)



Menu: Inventory


Menu: Brush Techniques


I think Log Book Menu was the most easiest to read visually. Darker background and lighter foreground objects worked really well in my opinion. (see image below)



Menu: Log Book

Also when selected Tabs hardly change their size, therefore for a new player it can be hard to see/understand which tab he/she have selected (see image below). I think a greyed out version or a much larger size would have been a better solution in this case.



Tabs are almost the same size.


You can see menu in detail in this YouTube video posted by SMGSSBBFAN2





During my meeting with my supervisor (Lynn) I have also had time to discuss my idea of interviewing industry professionals to find out about the videogame industry practices in general as well as 2D game asset creation, implementation but most importantly about UI design. I did come to a conclusion that the interview process would probably be too time consuming and the results probably would be worth the time spent. Some of the information I can probably aquire by having a look at how other games conpanies done it and possibly reading about it in books or other gamedesign literature.

I also need to make a much more detailed Semester one Learning Plan/Schedule.


* Clover studio. 2006. Ōkami. Play Station 2. Capcom

No comments:

Post a Comment