Games Development Year 4 - Ciaran Mooneys Journal | Ciaran Mooney - Specialist Portfolio Journal Page

This week I worked on getting the test results into a nicer format and summarize what we needed from our user testing. I also worked on the roadmap side of our group portfolio. 

Test Results

I gathered our results from last weeks user testing session in ABB and displayed them in a more functional way. I calculated out our SUS score into excel sheets and gave a general breakdown of what it means. We had a score of 60 which is just on the point of being a usable application. I expressed my thoughts on potential bias and how the SUS score is still only a general guideline that people follow. I also re-hashed what difficulties came about. I focused on specific areas where there were issues and noted all bugs people found when playing. These were all wrote out in the testing document set up between me and Kieran Keegan.

Mahara Roadmap

I attempted work on the Mahara road-map. I began thinking of a potentially viable way of constructing the road-map in Mahara using the knowledge from previous pages. I spent quite some time attempting to get some visual resources for the page and attempting CSS animations on parts that would need it. I had some difficulty getting this right as Mahara is tricky to develop these kinds of web designs in. I ended up leaving this as there were a number of issues I could not sort out from Mahara. I made the plans to then develop a poster version that could just be a large image to use instead. It would have been nice to have the interactivity and more responsiveness however I found it to be non-viable in Mahara.

Issues

The issue this week was on developing the road-map. I spent quite a number of hours attempting this before eventually summing up that it was not possible in the time we had.  

This week was prioritized around user testing in ABB. Since I was over laying out testing in our team, I took responsibility for organizing everything needed for our user testing session. I attempted to implement my animated buttons, however this had to be reverted as there was conflicts from scene changes between pulling and pushing. There was also an intro scene in this I had got working which ended up being reverted.

User Testing

This was a majorly important task for our team. I had the help of the whole team on this and each of us got involved in some way or another. We contacted ABB and organised for a suitable time for ABB to perform some user testing on our application. We organised the session and had the participation of two users, one of which was going to be testing with no prior information on the application. 

Leading up to this I had prepared consent forms for allowing us to use the data gathered and give the users some information on what it may be used for. It was noted that anything released outside of the team would not include names. It also asked for permission on recording the session. I also prepared a form for some focused feedback. This focused on areas we wanted feedback on and was in case no feedback was given for that area in our general feedback discussion. I also prepared SUS score forms which allowed us to mark our application on its usability.

For user testing I got the help of Charlie for visually recording on a Canon DSLR camera, Kieran for audio recording on a Zoom H2N mic, Arnas for technical help if there were issues as he knew the hololens best and also Cormac for our discussions. I kept the formalities in place and ensured it was all followed to plan.

The plan was for the user to first sign the consent form, play the demo, give SUS feedback, give focused feedback and then have a discussion with us on difficulties they had and anything they wanted to raise. 

Overall it went well and proved very insightful to what changes needed to be made to the application. 

Button Implementation

I put my animated buttons into the scene and fixed some minor bug that was occurring on the animation sometimes. The bug that was occurring was where the positions and anchor points would either reset or be off sometimes. This was when the button would change from the select state back to normal. I fixed this by adding the extra values needed for the button to always start at the exact same design.

The buttons were added to the main menu, and back panel buttons, I left the focus buttons as these needed an extra script for compound text and also had a nice look being square. The button on the scorecard was also left out since it was not a good fit and looked out of place. Arnas also changed the icons on the focus buttons to the ones I had got. Any interaction with a wire was given a wire icon, a new ABC was given a rotating arrow icon and the setting binary used a magnifying icon since the ABC was brought closer.

Intro Scene

I created a new scene which loaded the training day logo animation charlie had made. I used my own script to have everything load asynchronously while the animation played which was good design for later when our scene would have a load time. The files were all animated on their own but would only play after the initial load of the next scene started so as not to cause any frame drops and keep a smooth look. This took some time to get right.

Issues

My only issues this week were my own. My scene corrupted in one way or another and when merging and pushing, it had overwritten some changes that were just made. This caused them to get reverted. 

I spent this week working on getting ABB Training Day its own buttons instead of the microsoft buttons that were in the project. I animated these buttons and gave unique animations to the icons in these buttons. 

Button Concept

I started off as usual with creating concepts from ideas and seeing what worked well and what didnt visually. I spent some time checking color schemes and what button styles are popular at the moment. I went for a flat colored button style with reversed colors when it is focused on, and then a solid color all over for being selected.

I sourced the icons and sized them all to an appropriate size. I colored them all white for use in unity. With this we can easily change their colors through the animator or scripting. I also separated some parts for use with animations.

Button Creation and Animation

I created the button layout in unity with canvas' and panels. I used a text object and image for an icon. I had this created from the Microsoft button object so as to take most of the functionality from that and ensure there was no difficulties with applying the button to the project. The button has a rectangular 3d mesh behind it for better look in Augmented Reality. 

I animated the button for each of the button states; normal, focused and selected. I set up the animator to cycle through all of these and handled the transitions differently for each. From these i also set an event in the focused animation. This sets an icon animator to true and allows an icon animation to start. 

Icon Animation

I went about animating all of the icons individually. Each has a fitting animation and helps the button have a bit more responsiveness. It looks very clean but took some time to do. The animators all had to be set up individually as well and is the only more manual issue when setting up the buttons. I will fix this at a later date. The icons are animated only when they are being hovered over. Icon animations are stopped and the normal state set when the button is selected or not being focused anymore. This had to be done via script as the animator plays through the last animation before switching normally which did not look clean. 

Icon broken into separate components to animate

From a technical view, the animator from the icon button has an event that triggers a method for turning on icon animations and also another event for turning them off. The event sets a Boolean called "shouldAnimate" in all animators in the children of the button to true or false. The icon animators are counted in this and once the Boolean should animate is set to true, they transition into the animation for animating the icon. The transitions are set to be 0 in length so as the animation starts and stops instantly. This is because UI response should be instant and not delayed in any way.

Icon animator

Icon animation transition (has exit time unchecked = no transition)

Conclusion

I set up a button prefab with example animation and text but not a prefab for each button. I did not implement this myself into the project as I did not want to mess with the button functionality already there. 

Issues

No big issues this week. I have thought of a better way of using the animator for icons that I could implement at a later date however its working as is right now. 

This weeks time went to doing work on my sound game project while the other team members were away. I spent all my time working on my individual Game Project for my Sound Design module. I worked on a lot of different parts of unity that I could use and apply in our ABB Training Day project. I worked on using the unity animator a lot.

Issues

Most of the team was away this week and so there was little work done on the project. I used this time for my own projects so as I dont have to worry too much in the next sprint. 

This week i worked on creating the end screen which is a report card. This card is for feedback to the user and should display their grade, the actions they performed and whether these actions are wrong or right and lastly it should display the time taken to complete the scenario. 

Report Card Creation

For the report card i started by creating some concept for what it might look like. I had a few different iterations and tried to keep to the theme of Training Day. I found one concept which followed the UI guidelines as closely as possible and kept the color scheme of the project. I created each of the graphical components in photoshop to be used in unity on the canvas' and panels. 

I created the card in unity using the Canvas UI elements and panels and text objects. I included a close button and then began tying in some functionality. I edited some existing scripts to keep track of the time the scenario is taken to complete and each action in between. I created a button manager to keep track of button actions also. I created a script that used the information from the game to populate and display the scorecard. This was called when the scenario was finished. For animations I used cormacs serial UI animator. This was to display each action one after another.

Issues

My issue this week was that I had to animate the list of actions and I had not learnt the Unity Animator. I used cormacs component for animating however it didnt work and needed changes to make it work.I have since learned the animator and have been putting it to proper use in Unity.

Update: Arnas went back over and added some animations to the score card himself.  

This week I worked on implementing the Guiding Line Tool for GUS and also a shader for showing the flow of power in wires. The wires are not implemented at the moment however I still added in the shader and required functionality to show the power flow.

Guiding Line Implementation

I implemented the guiding line by simply adding the Render Line component and Guiding Line script i created for this functionality earlier on. I had to add some extra functionality into the Voice Commands for the game and then call the script correctly and pass into the script a game object of which object was being said. I used this time to change up some of the voice commands code to make it more efficient and remove one bug within the object selection.

Power Flow

I began working on the power flow tasks by creating a power flow shader. This shader is emmissive. This means it produces light and effects nearby objects lighting. This took quite some time to get right. Since the shader was also moving I needed to update the emission texture as this does not usually happen. I created a script and limited the update to once every half a second to ensure performance was not affected too much as this is a taxing task. 

I then also created the functionality for starting and stopping the power flow shader. A dictionary of wire components was added to keep track of all the wires that needed this functionality and it is updated with the power flow shader or normal shader depending on which action the user has taken. One piece of functionality not added yet is setting all objects being static to display the power shaders emmissive lights. Since the scene is not fully finished, this was left as there could be more moving parts in before it is finished and setting objects to static may affect the project.

Issues

This week I had an issue with git reverting part of my work with the power flow shader. I had to redo this shader and I couldnt get it back to exactly what it was before just yet. This was extremely annoying but it was my own fault. I have since also spent time reading up on git documentation to ensure nothing like this happens again. 

This week i was working on our group Mahara page. I was in charge with updating our entire Mahara Group Portfolio. I had help from Arnas Cibulskis on CSS animations for this.

Group Mahara 

My entire work this week was based around our group Mahara page. I was redesigning the main page and all of the pages linked off of this. I worked on creating our own style in terms of Icons, and also looked at just how much we can personalize Mahara. This all started off with creating icons for the main page through the week. Each icon took a considerable amount of time to source ideas and create. I created these in Photoshop over the entire week. After this I created a plan for each Mahara page and assigned work to everyone in the team for what content is needed. I then got help from arnas for CSS animations. I added the animation through the mahara page and have future animations planned.

This week I was mostly working on other assignments and had little time devoted towards the team project. The time I did spend ended up being fixing some git issues I had in relation to the team project. This was not for a task under scrum and so went as unmarked time spent toward the project. 

Unity Highlight Shader

I spent some time on creating a shader that would highlight an object. This would be used when an object would be selected. I looked at Unity and Microsoft Mixed Reality documentation to see best practices. I found that occasionally there can be issues with the hololens and complicated shaders however the shader I created was extremely simple and so was ok for the project. This highlight shader created an outline around an object. This could be coloured any colour and is visible even through walls.

Issues

I spent a lot of time on my other CA's this week and my part of the scrum suffered for this. Everyone else on the team also devoted a lot of time for the projects and so this caused little progress for our burndown. 

This week we had to present our portfolios and as such we each worked mainly on our individual portfolios. I had assigned the work of implementing an inventory system. This went severely astray. I spent some extra time attempting something new with the Guiding Line. I did not use what I created and so went to use Git to revert my changes. Unfortunately I made the mistake of not immediately pushing my finished work from the last week through to our origin. This meant when I did revert changes I accidentally reverted my work from the previous week too. This put a serious set back in my work. I had to now re-do my Guiding Line work as I had no way of obtaining my work back. 

Portfolio Work

My portfolio work was most important to me this week. I spent some time creating and re-iterating over my designs and adding content to fill. We were each working on our portfolios just as much so this was no problem. I got some valuable feedback on Thursday and spent more time as such fixing and making my portfolio better again.

Guiding Line Re-Work

I spent all my available free time not working on the portfolio making the Guiding line again. This work was frustrating and off putting as it was my own work that I was trying to re-create from memory. It took some time to get each step working again and I couldn't even fully get it back to the way it was this week alone as I was working on other things also. It is currently detecting objects and drawing around them again however there is no shader and also the line is not matching fully each side yet to be straight through the object. 

Issues

The issues this week were huge for me personally. A weeks worth of work went back and had to be redone. I was busy with other work as well and couldn't catch up enough to do my other task. This was dealt with by working with my scrum master Cormac to push my work from this current week forward to the following work. 

I felt like I couldn't get enough work done this week and it frustrated me to fall off my schedule. This will seriously effect how I show in the Scrumwise re-cap. 

This week I was working on GUS' user guiding line tool. This was originally labelled as a 12 hour task on scrumwise before being lowered to 9 hours. 

GUS Guiding Line

Gus' user guiding line is the tool which shows the user a path to a component. It is a UI Component considered to be a Spatial Representation. It is part of the game environment however it is not part of the story. This is an important UI element as it potentially removes annoyance for the user if they cannot locate a component. The guiding line will be drawn from GUS to the component. 

I started by looking at solutions online to drawing a line through C# in Unity. I found that using the line renderer seems like the best way for what we wanted to do. We add Vector positions to the line renderer and specify color and width to decide where the line will be drawn.  

I use the starting GUS position vector and the target component position vector, cast a ray between them and take the positions of all objects hit in between. I created a method that when given these positions will get fifty vector points around it. This also uses the bounding box size of the object to decide how big of a radius is given. The start and end points are found by taking the normal of the two positions and then adding or subtracting them from a position. 

I then made it so it detected multiple objects. It draws around each of them. There is small issues where two objects close to each other will cause two rings to potentially overlap however I will fix this in a later sprint as it is not game breaking and the line behaves as needed. 

I also created an animated shader to use with the lines that are rendered. This gives the line a kind of directional feel and helps the user more again. I will include a light to be animated along as a pulse at a later date. This will give the line a clean feel  and will remove the need for such a hard looking texture.

Issues

An issue I had this week was how the task was going to be overestimated before we started the sprint. We fixed this before the sprint started however and it did not become an issue as such. Other issues I had were difficulty creating a type of shader I wanted to. I had to settle with a simpler looking one in the meantime.