Showing posts with label UI. Show all posts
Showing posts with label UI. Show all posts

Sunday, 11 May 2014

Final week: the end is already here

I went to the university this Tuesday; finalised last paperwork and had some quick advice on how to manage word count in my dissertation so I stay below the 9 or 10K word limit mark. Just want to make sure, I will remove the danger of getting penalised in case the word count does matter.
I have also been working on my practical stuff with an odd interruption now and again to sort either the submission materials or things related to exposition. I have also asked a friend of mine to start proof reading some dissertation material which is a great help.

Tomorrow is 12th of May and my first submission is due by 4pm. So far I have been concentrating on getting my practical stuff ready. I was not a 100% sure on what I should concentrate so chose to improve an overall environment art and then just try and implement everything in to a gameplay video created by Adobe After Effects since  most of the lecturers seem to always stress the interactivy part of the art within games.

In my opinion an updated environment art (see image below) looks better now as I have polished the overall look and introduced a lot of details, like texture, various patterns etc (see images below).



Overall look of the game art (above)

Texture application method using Emboss Layer (image above)






A lot of the basic texture came through the use of digital brushes that replicate traditional media look (image above). 





I have used Texture  brush settings to give canvas look (see image  above)and stayed away from applying texture on top of everything mainly because in previous tests it looked quite unnatural and too overpowering. 



To address the composition seen on a screen during gameplay, a variety of different shapes were introduced in the form of trees and bushes (marked in yellow), a rolling forest and foreground edge (marked in red) to give more variety and guidance for the eye. The forest line has also been intersected by a few curvy cloud lines (marked in green).
The onscreen image had also been broken in to four tone bands which balance an overall view (top and bottom): the lightness of the sky is counterbalanced by the dark middle ground at the bottom of the screen and protruding shadowy foreground elements are offset by the very bright clouds at the top of the screen. (see image below)





I have also finished UI design. Not a 100% happy with it but I am really pressed for time and this is the best I can come up with (see image below).




UI in game with inventory window closed (image above)


At the moment still working on the gameplay video, but I am sure it will not be fully completed by Monday 4pm. I chose to concentrate on showing the art rather than animations (e.g. character walking) and gameplay since the whole idea of my project is the about the look of the art and prove that it can work within a game environment. Animations would be a great thing to have but I do not have time to complete it atm.

That brings me to another point- presentation and an exposition next week. I will try to complete and polish the gameplay video for both of them. That means that I will continue doing my practical work after the dissertation hand in is done. I hope having things completed or nearly completed would help with my presentation as well as exhibition as I will be marked for both of them and I would like to get the best mark I can. I would love to have a chance to have an option of doing Masters later on.


Hardly any Dissertation work had been done this week. I managed to get some parts proofread by my friend for whom I am really grateful and I have already fixed grammar and spelling mistakes he has found. I will go back to dissertation after tomorrows hand in and will work on it until Wednesday morning or noon before sending it to be printed and bound.


I have also moved forward with promotional stuff I need to have for exposition. On Wednesday I have ordered 100 mini business cards with a range of different designs taken from my final project piece and a few postcards (see images below). Both of them should arrive by the 16th of May so it gives plenty time before the exhibition.







 I have also bought a printing credit from photobox for a poster size 30"x20". I will order it on Tuesday or Wednesday next week. That should give me enough time to receive it by Thursday morning. I am planning on having a large poster at the top showing off the game environment (have not made up my mind if I will have UI also displayed or not) and then a few A3 posters explaining a little my process and maybe some zoomed in examples to show off my brushwork etc (as the ones seen in this blogpost) At the moment also considering to dedicate one poster for my aim and objectives so people can have a quick look and read what my honours year project is about. It is a bit confusing what space I will have since I will be exhibiting at HMC and there is no detailed info about the wall space allocated when exhibiting there but this is a rough plan I have made (see image below).





And The Conclusion: how do I feel about my honours year project?...
I feel really happy that I have chosen this topic because it is of interest to me as well as I think it is one of the next steps the 2D videogame art is already taking (Braid by Jonathan Blow, Amanita design games and this month’s new release from Ubisoft 'The Child of Light'). I think the art of 2D video games is still evolving and has a long way to go. I feel it is time to try and give more choice and perhaps more quality for the videogame players. With my project I have only scratched the very surface of the topic and there is so much still left to explore. Feeling passionate about it has definitely made me more determined and more stubborn to try and do my very best, but at this moment in time I feel very tired and need to have a little break to rest and to think what I am going to do next. I still love videogames and certainly want to do something meaningful. Around 7 years ago I have made a conscious choice to change my life and pursue my goal of creating art again and I am not done yet. Hell!!! I  have just started and have a long way to go and I know, I will find things to do: I want to continue improving my art, learn a bit of programming  which would hopefully help me to create my own games and I will look for likeminded people to team up and create things; things that matter.

Saturday, 12 April 2014

UIs of point-and-click adventure games

Since I have been working again on game design and game art I came to a point where I feel I have to have another look at some of the UIs of similar games.

I do not tend to play that many point- and-click adventure games these days but the ones I had a chance to look at are: The Whispered World (2009) and Memoria (2012) by Daedalic Entertainment and Botanicula (2012) and Machnarium (2009) by Amanita Design.

I chose these games because they resemble my game idea for honours year project and I have played them previously.


The Whispered World



The mouse cursor in a non-active state looks like in the image above.



The mouse cursor changes to a 'highlight' state (with a small blue light in the centre) when is placed above an interactable item. (see image above)



When clicked the cursor becomes active and opens up a context related menu where a player can select an action he/she wants to perform. (see image above)



An open inventory is made to look like an open bag/sack. It takes large part of the screen and contains all collected items. (see image above) Also, a general menu is hidden on the top right-hand corner. (see image above) 



When a mouse cursor is moved towards the top right-hand corner the hidden menu reveals itself ( the corner peels away). The mouse cursor functions the same way as during game play: when placed above active item highlights the item in blue as well as lights up blue in the centre. (see image above)



Entrances and exits within the game are marked by a red arrow which appears only when placed above an entrance or exit. (see image above)


I did like a lot the look of inventory as well as the general menu being hidden in the corner of the screen. I think it gives an impression of an illustration; however I think the strange shaped mouse cursor feels a bit strange/unusual. Most likely because the convention in games as well as UI's in general seems to use something that reminds an arrow or a pointing finger. I think it's the shape of it that makes it feel strange at first.



Memoria


This is another game released by Daedalic Entertainment. The developers seem to have changed the mouse cursor design for this game: the cursor takes a more traditional look of an arrow and a pointing finger icon that appears next to it when hovered above an interactable item. (see image below)



Inventory is hidden at the bottom of the screen and moving a mouse cursor to the bottom area reveals it (it slides up when opening and slides down when closing). Also game settings and questbook are located inside inventory (bottom right-hand corner). (see image below)




Botanicula



Very simple UI. Direction and some interactable objects being indicated by an arrow as seen in an image above.




The inventory slides down from the top of the screen and contains collectable cards icon as shown in the top left-hand corner of the screen as well as collectable items displayed at the top right-hand corner of the screen.



Machinarium


The game seems to be using the same Inventory principle as Botanicula (slides up and down when mouse pointer is moved to the top edge of the screen).  Standard mouse cursor in a shape of an arrow and a pointing finger icon when above an interactable object.  The collected objects are displayed on the top left-hand corner.



I think using standard arrow and pointing finger icons avoids confusion and looks very familiar to the player. If something else is used then best if design reminds an arrow or is in some sort of triangle shape. At least this is what I have encountered during my general video game play which is not limited by 2D point-and-click games mentioned in this post.


Amanita Design. 2012. Botanicula. Microsoft Windows. Amanita Design & Daedalic Entertainment
Amanita Design. 2009. Machinarium. Microsoft Windows. Amanita Design & Daedalic Entertainment
Daedalic Entertainment. 2013. Memoria. Microsoft Windows. Deep Silver
Daedalic Entertainment. 2009. The Whispered World. Microsoft Windows. Deep Silver

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. 2014. Cut the Rope FULL FREE.Google play. ZeptoLab


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

Wednesday, 22 January 2014

Progress evaluation so far and next steps for Semester 2

This week is an official Semester 2 start and on Monday I have met with my current supervisor Lynn. During this meeting we were discussing my project; all the work I have done so far as well as talked about my plans for Semester 2.


At the moment I am considering interviewing some local videogame industry professionals about the art for 2D games as well as UI design. I think I could learn some things about it that would help me with my own designs since this is one of my weak areas. Mainly because I am not a game designer and coming up with game mechanics which of course, have a major part in UI design requirements is really hard for me.

However, what this idea means is: if I do decide to seek advice from industry people I will have to reapply to the universities ethic committee for a new approval for my project as well as have to do a lot more paperwork which includes transcribing and analysing recorded interviews. So the question is: is it worth to undertake it considering the results that I’m most likely to get out of it?


I have also been toying with an idea of collaborating with other people. Possibly programmers or game designers to get help with my project as I do realise that my main weaknesses in this project are lack of knowledge about game asset implementation in to a game as well as game design and game mechanics. Last year I did not get lucky to be assigned on to a game design brief and ended up working on an animation brief instead, so the only game developing experience I have so far is from my year two Entertainment Design module which involved a group work on a small Flash game, some projects I have collaborated on as a member of Abertay Game  Developing Society and as a team 'Tartan Paint' member for last years Dare to be Digital competition entry (Can watch pitch video here.) as well as Ludum Dare entry (Can watch project video here and  read development process posts by Stewart Leadingham here.).
I think working with others would help me with the whole development process for this project as the technical or design input would be very beneficial. My supervisor also thought collaboration was a good idea if I felt it would benefit my project. I will look now for some opportunities to see if there is anyone I could collaborate with.


There have also been some changes regarding case studies for my dissertation. So far I have been given advice that Braid (2008)* may not be the most suitable choice as the art style was not the main concern of the Braid designer Jonathan Blow and perhaps Ōkami (2006)* is a much better choice. Since I have never played the game I will be borrowing a copy of it from the universities library to try it out. (Info about these two games you can find in my week 3 blog post.)

Also, this week I need to make a list of questions I would ask about game UI if I was going to interview someone working in the industry as next week I will discuss it with my supervisor to see if the information I am likely to get from it is worth the whole paperwork trouble.

Lynn has also suggested I play some games on a tablet to see how the UI and interaction differs from PC or console games. This would provide me with some information on UI and perhaps help me decide if I want my game (whatever that game will be) be for mobile device or PC or console. Also, study how interaction within games works and how interactive objects are presented on screen. In addition, I should also have a look what other, perhaps similar games to mine are already out there.

Overall, at the moment I feel really stressed and worried as I think I am still lacking knowledge in game design as well as some practical skills. On top of that, all the literature that I feel I need to go through to feel ready for my project seems to look more like a Mount Everest.

I am still making some media tests as I go along with my project as I want to try experimenting more with visual styles to help me decide what I really want my game art to look like.



* Number None, Inc. 2009. Braid. Microsoft Windows. Number None, Inc

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