For my project I started by drawing up different ideas and appearances in a catalogue Word document that I used as reference for what I had done and why. Alongside this I took a copy of the project brief, so I could center my work around the Client and User needs shown, as well as allowing me to see what I needed to work on or research.
Within this catalogue there were examples of wireframes and drawn examples for the museum project and a list of additions I made to the prototype that I created with my reasoning.
These were based around these ‘User Needs’ and ‘Potential User Needs’
I created a number of different UI elements throughout the development of my
project and were featured within my video.
These developments included:
I started by creating a movement script in C# to allow the player to move around the map, before
then moving onto the Mini Map to show where the player was on the map at all
times.
I created the Mini Map to give the player a way of viewing
and traversing the map more effectively and easily. I posed it in a top down perspective to show the maps
layout from a bird's eye view with the intent of using the original concept
image I created. However, this would prove problematic due to the edits I made
within my museum model.
I ultimately decided to place the Mini Map in the bottom
left corner as it allows the users to see much of the screen without hindering
the ability to see items or information. In order to make this easier, I placed
all information on the right of the museum art pieces.
Next, I decided to create rotating planes that looked
towards the player, which was a script I coded in C# so the cubes would rotate
towards them. This allows the user to easily find information about what they
were looking at, which simplified the work needed and allowed the placement of
information to be more accurate.
These 'planes' were large, thin, semi-transparent cubes
that allowed me to add code and textures to them without problems, unlike when
I originally tried to use 2D planes, which would glitch and cause problems
constantly. However, due to how the rotating planes are designed, they can be
hard to read. This is because the writing is pasted onto an item in the game
world and the textures may not be too great in quality.
I created button activated doors so the player could
interact more with the game environment while entering rooms and to give a more
visual design when interacting with the game.
After I realised it was hard to centre the
mouse on the buttons. I made a small red cursor so the
player could see where their mouse was pointing during the game. This worked
well as it allowed users to point their mouse more effectively. However, it
also could get in the way and would cover images and text when trying to look
at them.
I added pickup-able objects to give more interaction
to the game world. Originally, I had the intention of creating inspectable
objects, where you could pickup and rotate them to inspect them more
effectively. However, this proved to be too difficult and instead I settled for
picking up and moving objects. There were some problems with picking up
objects, so I eventually fixed them later on. Some of the problems included:
being able to propel yourself upwards and the objects falling through the
floor.
Also I added a selection manager that would highlight
interactable objects blue once the player hovered over them with their cursor.
I did this because it allowed users to easily distinguish between interactable
and non-interactable items, while only showing it when it is selectable by the
player.
Finally I created the video by writing a script and using a text-to-speech website to speak the lines for me. This turned out well but had some minor problems such as; mispronounciation, speed of talking and correct emphasis on key words.
The editing process took incredibly long, as I added many different graphical elements to the video, alongside video capture and screenshots.
The Video can be found at:
During my video I forgot to include a segment on the UI and UX design on different platforms, such as: computer (PC), Playstation 4 (PS4), Xbox One and Mobile games. Many of these platforms have similarities and glaring differences. For example:
On PC, the UI and gameplay have many more options due to the large selection of controls available to the user. This sometimes leads to PCs having more UI options than other platforms such as PS4 and Xbox.
This can be seen in 'Battlefield V' (5) with a small weapon selection UI element, that is shown in the bottom right. This selection manager can only be seen constantly on computer, while on Xbox and PS4 the UI is hidden until a button is pressed to swap weapon. Afterwards it is momentarily shown before disappearing. PC can also deactivate chat boxes that can appear in the top left, whereas it is much harder to do so on other platforms.
In 'The Division', the menu system has a large assortment of options corrilating to different buttons. Despite this, the menu system still acts similar to other applications with the small difference of buttons pressed and the use of a mouse to select different parts of the menu.
On PS4, The UI layout and menu systems are portrayed differently to the PC. With layouts centering arround a controller layout rather than a keyboard or mouse layout. This often can lead to simpler UI designs.
In 'God of War 4', the menu's UI system has a hotbar at the top that makes it much easier to swap between sections using the R1 and L1 buttons on the controller. Giving people different views and options depending on the section the user picks, the UI shows in realtime on the left the armorment or addition the user can add, while showing the appearance/ effect on the character on the right.
Also, in 'Watch Dogs', the UI interface the character interacts with on their phone shows icons for different apps with brief descriptions through names, they are also layed out in a easy to read manner and allow the user to easily select what function they want to complete in the game.
On Xbox One, the UI shown within their games is extremely similar to PS4, with the very few differences being shown in the buttons pressed.
For example, in 'Battlefield V', the main menu system is relitivly the same on both PS4 and Xbox. With the same controls and menu layout. Whereas, on PC the user needs to click on icons rather than move thier highlight to the position they want to select. Also, PC has a few changes to the main menu's UI system, however they are only minor and it still has the same functions.
The gameplay for both Xbox and PS4 is almost exactly the same with very few differences, these differences can only realy be seen in the button prompts and controller/ control scheme. On the other hand, the PC has some (previously mentioned) differences in UI and a much better control scheme due to access to more controls, alongside higher sensitivity while using the mouse.
In Mobile games, the UI is displayed across the screen to allow the user to easily control the games actions and movements through touch screen. These UI interfaces are incredibly different to the other forms of UI, with many of the actions and buttons taking up most of the screen.
This can be seen with many different shooter games on mobile, including 'Call of Duty Mobile'. To mediate this, touch screen buttons are normally shown on the left and right of the screen, drawing focus towards the center.
The touch screen interface can, however, cause many different problems, for example: it makes some games much harder to control and interaction incredibly difficult, as well as leading to the users fingers obstructing the screen.
This is why many moblie shooter games decide to place their controls furthest from the centre of the screen.
Meanwhile, other games that use a touch sceen interface on mobile devices can be much easier, with a different point and click style of gameplay, such as with 'Candy Crush Saga'. This allows the user to, much more easily, interact with and play the games.
No comments:
Post a Comment