Updates UI/UX project Weekly Updates

[Stefania Mak]

Project: Terasology Game HUD, Graphics improvement & Gameplay Guide​

Project details: Stefania - UI/UX Trello board
Proposal: https://docs.google.com/document/d/1c-OiEfS7YO7DDxYRKXVrhzXoQk68bzQD6V8c5yexKBs/edit?usp=sharing

Quick Summary
The goal of this project is to improve Terasology's HUD interfaces, general Design theme, and add gameplay hints/tutorials, providing the user with a more unique and guided gameplay.

 

[Stefania Mak]

18/May/2020 Meeting Minutes by skaldarnar

Take screenshots of existing screens:

• Metal Renegades (trading, quests, weapon slots/ammunition)
• Josharias Survival (inventory, crafting process, containers and fluids, skills, journal)
• Master of Oreon (books w/ different colors, building screens (variations for different types))
• Light and Shadow (dialog with the "fool" on the starting platform, score, end-of-game)
• Structure Template (toolbox)

Take blank screenshots from different game modes (hide the HUD with 'h' key).

Experiments Fonts with fonts should be moved to stretch goals.
We deliberately switched to the Google Noto font to have support for many character sets to not block translations.

Color Wheel website by Adobe (there are many more): https://color.adobe.com/create

 

[Stefania Mak]

24/May/2020 Student Weekly Report

• Screenshots added to the UI/UX Scratchpad GDoc file, under the section "Final Designs and Existing Screens"

 

[Stefania Mak]

25/May/2020 Meeting Minutes

Weekly tasks were set:

• Set up and attend weekly meeting
• Meeting minutes notes ( both @ Discord & @ Forum )
• Weekly work done summary ( @ the Forum )
• Constant update of the Board

This week's tasks:

• Structure and add cards to the project's Board
• Choose one of the "Mater of Oreon" HUD elements, and modify its UI to my liking
  • shall dig into how editing UI screens is done, by having skaldarnar's UI edit as reference:
    
    
    

 

[Stefania Mak]

01/June/2020 Student Weekly Report

• Project board GSOC 2020 - UI/UX was filled with cards
  • Completed Pre-GSOC task "Project board populated with initial items (draft stage)"
  • Completed Pre-GSOC task "Initial project board planning finalized (changes during project OK!)"
• Fixed local project build issues with (mostly) modules, with the help of the Terasology team
• Minimal work on the last task of the week: studied the pre-existent UI code of MOO

 

[Stefania Mak]

01/June/2020 Meeting Minutes

Update:

• Shared what work was done this week
• Talked about availability within the summer
  • 15th to 27th of June might possibly be busy because of the Exam period
• Resolved questions

This week's tasks:

• Create a PR with the re-worked screen from Master Of Oreon
• Have a review cycle of that PR
• Possibly finalize the general HUD design
• Make a start with the NUI PR

 

[Stefania Mak]

Month's Availability

• AVAILABLE
• POSSIBLY AVAILABLE (P. AV.) / MOSTLY AVAILABLE (M. AV.)
• POSSIBLE BUSY DAYS (P. BUSY) / MOSTLY BUSY (M. BUSY)
• BUSY

Exams Period : 10/6 till 31/7; possible unavailability, so any of these days can turn to P. BUSY ones, depending on the released dates.

Week​	Monday​	Tuesday​	Wednesday​	Thursday​	Friday​	Saturday​	Sunday​	Week's Total​
1​	x​	x​	x​	x​	x​	6/6 BUSY	7/6 BUSY	||||||||||||||||||||||||||||
2​	8/6 BUSY	9/6 BUSY	10/6 BUSY	11/6 BUSY	12/6 BUSY	13/6 M. AV.	14/6 M. AV.	||||||||||||||||||||||||||||
3​	15/6 M. AV.	16/6 M. BUSY	17/6 M. BUSY	18/6 BUSY	19/6 BUSY	20/6 M. AV.	21/6 M. BUSY	||||||||||||||||||||||||||||
4​	22/6 BUSY	23/6 M. BUSY	24/6 P. AV.	25/6 P. AV.	26/6 P. AV.	27/6 P. AV.	28/6 P. AV.	||||||||||||||||||||||||||||
Evaluation​	29/6 P. AV.	30/6 P. AV.	1/7 P. AV.	x​	x​	x​	x​	||||||||||||||||||||||||||||

 

[Stefania Mak]

11/June/2020 Student Weekly Report

• Posted Avalablity days for Jun, to this forum.
• Made two commits on a PR on Master of Oreon UI.

Before​	After​

 

[Stefania Mak]

01/June/2020 Meeting Minutes

This week's tasks:

• Complete the MOO PR
• Make sketches/mockups for Light&Shadow HUD elements:
  • Dialogue with the fool NPC
  • Score / Points
  • Game over
  • Quickslot
  • Health bar
  • Ammunition slot for ranged weapons
  • (maybe) the quest screen

 

[Stefania Mak]

15/June/2020 Student Weekly Report

1. Applied Skaldarnar's suggestions for PR on Master of Oreon UI.

• Tab buttons
  • Removed "offset"
  • Added hirozontalSpacing property to create a gap
    
    
  • 

• Selection happens through the Confirm box, not by selecting the item
• Preview Image
  • Changed UILabel to UIImage
  • Renewed the Preview Image to a simple Blueprint themed image. Used skaldarnar's screenshot as a baseline.
    
    
    

2. Made Light&Shadow sketches/mockups:
I mainly focused on the placement of the HUD elements, rather than the exact design:

• Top centre : Score / Points
• Middle center : Game over
• Bottom right : Dialogue with the fool NPC
• Bottom right : Quickslot
• Bottom middle : Health bar
• Bottom right (left from quickslot) : Ammunition slot for ranged weapons
• Top left : Objective (the quest screen)

Main UHD interface​

Dialogue with the Fool​

Found a logo by a band named "Defeat", which I think we can use as a reference for "Defeat" and "Victory" Game Over screens

 

[Stefania Mak]

15/June/2020 Meeting Minutes

Update:

• Shared what work was done this week
• Future idea: have more ammo slots to UI, and choose the desired ammo with hot-keys
• Talked about the project's progress

This week's tasks:

• Correct design according to UI/UX flaws - minor task
• Fetch newest Light & Shadow version to my local repository
• Check out L&S files, familiarize with them and the code (can change some UI, like with MOO)
• Border design ideas for the bottom right (quick slot) and top middle (points)
• Design Defeat-Victory screen ideas
• Update Trello board according to new plans, and edit descriptions with more information

 

[Stefania Mak]

22/June/2020 Student Weekly Report

1. Master of Oreon

All changes can be found to this PR: Assets #71

a) Blueprint images
Designed 10 new preview images (11 with the blank, background one).

Samples:

b) Task Selection Screen background

• Made two new assets, taskSelectionScreenSkinBox.png and taskSelectionScreenSkinScroll.png
• Created a Skin with those assets
• Used the skin to the Task Selection Screen

2. Light & Shadow

a) Set workspace with Light & Shadow current version

I had some issues with having light and shadow work at first, but everything worked out. The issue seemed to be that my forked repository wasn't up-to-date.

b) End Screen

Decided to separate the end screen to two screens:

- Declaration of Defeat or Victory

- Details of match

c) Quickslot rework

d) Added an Answer option to The Fool's text

e) Familiarize with code

I managed to find a few UI elements that I was able to modify, and had trouble finding how to edit the core ones.

3. Trello board

Made some adjustments to the Project's Trello board:

• Removed some too generic cards
• Placed any other's mode card to the BackLog
• Tried to make L&S's cards more

 

[Stefania Mak]

22/June/2020 Meeting Minutes

Update:

We went through the Forum Post and showcased the work done this week.

Notes taken:

• End screen: Filling the cards according to the points gained is not that clear; it might be better to have them appear according to the points
• Trello board: It's better to not include tasks at the HUD element cards, and add them on valid, specific information

This week's tasks:

• Separate commits at PR: Assets #71
• Ask the at the Terasology Discord channel about how to modify global elements into a specific module
• Work on modifying L&S elements, approximately 4-5 for this week

 

[Stefania Mak]

29/June/2020 Student Weekly Report

- Figured out how Deltas and Overrides work

Info gained from tests run:
Delta's skin replaces the whole Override's skin.

The test I run
Made two new Skins:

• One skin with red quickslot background and red boarder to selected item
• A second skin with grey (default) quickslot background and blue boarder to selected item

The tests:
* Test 1, by giving the "red" themed skin to the override and the "blue" one skin to the delta
Result was that both grey background and blue boarder was used
* Test 2, by giving the "blue" themed skin to the override and the "red" one to delta
Result was that both background and boarder was red

I will be updating the Deltas and Overrides Wiki page with the info above, but also with how to override or use delta for UI and skins.

- Set the base branches, files and minor changes on the HUD elements

Test Assets
PR

Dialogue with the fool NPC
PR

Quickslot
PR

Health bar
PR

Ammunition slot for ranged weapons
PR

 

[Stefania Mak]

29/June/2020 Meeting Minutes

Update:

• We went through the Forum Post and showcased the work done this week.
• I stated what wasn't done according to what was extra could have been done within the week
  • GDoc file for LaS was not ready and posted at the Light and Shadow discord channel yet
  • Still yet to update the Delta and Overrides wiki page
• Showed some references from the game Alice: Madness Returns which seemed to match part of LaS aesthetic

Conversation on the PRs:

1. Dialogue with the fool NPC
The Dialogue box could be changed either to

• a Tarot card, which will contain the text within it. --> careful, might not be clear that it is a card, and need to change the box from horizontal to vertical
• a horizontal box (already how it is) but with a small card to the left part, indicating the speaker. Idea and sketch by Skaldarnar:

2. Quickslot inventory
The quickslot could be changed to a ring-like structure while keeping the chosen item always at the bottom slot. Example through sketching:

3. Health bar
Talked about my issue of not being able to change the icon's size.

Requested things to do to solve this issue:

• change the background and see if bar gets resized
• check the bar where UI of health changes when it is reduced

Generally, the size is probably somewhere hardcoded.

4. Ammunition slot
Talked about the issue that the ammo box does not appear if the preselected quickslot item uses it when the game starts.
Solutions suggested:

1. Find where the inventory is set and try to spot the actual issue (Spend 30-60 minutes max to this solution)
2. If the first solution doesn't succeed, try and change the first item with one that doesn't use the ammo box and write an issue about that problem

This week's tasks:
1- Write a comment about what I meant with the label issue I mentioned at PR Ammo Override UI
2- Try solutions written for

• Health bar
• Ammo

3- Sketch out designs based on the two The Fool Dialogue ideas proposed
4- Try to apply the circled, ring idea for the quickslot
5- Write the LightAndShadow doc file link to the LightAndShadow Discord channel, even if not done yet

 

[Stefania Mak]

06/June/2020 Student Weekly Report

Issues worked:

-Ammo not appearing
More details within this PR: Ammo slot issue fixed, and name change of method used #50.

-Managed to change the size of health-bar
Mode details within this PR: Health bar UI size increase #41 [draft because the size might change within UI's development]

-Quickslot ring-like design
Made research and had conversations over Discord about the issue. A solution was not yet found.

-Dialogue box
Started reading about dialog boxes in RPG games. I wasn't pleased with my first sketches, made some digital samples:

• Dialogue box as Tarot Card

I think this looks more like an ID, rather than a dialogue box.

• Skaldarnar's idea

This idea could also work well in a bestiary screen.

• Extra idea

Not too fond of it, kind looks like a "WANTED" poster.

 

[Stefania Mak]

07/June/2020 Meeting Minutes

Update:

• We went through the Forum Post and showcased the work done this week. Some comments were:

1. Health bar size
I pointed out that it may be a bit inefficient to change the size in all (3) skin files there is for the health, so Skaldarnar suggested I check the default file written at "inherit": "default" line in each health bar skin. Through that file, it might be possible to set a preferred size that then gets inherited to the skin files.

2. Ammo slot
Wait for update from Skaldarnar according to Issue: Reacting to OnAddedComponent and OnChangedComponent #4067

3. Dialogue boxes
Commented that the 3rd mock-up's fool "WANTED - theme" image might look nice for Metal Renegades, in a more old looking like paper though. (shall post it at the Metal Renegades discord channel for reference)

This week's tasks:

1. Try the above suggestion about Health-bar
2. Work on Ammo slot after update from Skaldarnar
3. Create a base for the new format for the inside of the dialogue box; something like: Image to the left and Text to the right.
4. Make an update of the project's Trello page, GSOC 2020 - UI/UX
5. Work on the Score's design and code
6. Start working on the End Screen's details page code

 

[Stefania Mak]

13/July/2020 Student Weekly Report

1. Work done

- Quickslot
Made the items move around the slot based on Skaldarnar's directions Draft PR: 'Rotating the items' navigation for quickslot #24

• Need to make some more changes according to comments

- Inheritance of Health bar skin files
Merged PR: Health bar skin files organization #42
Merged PR: Health Override UI #124

At first, I changed the inheritance within the three skin files within LaSR from the default health skin file, to the one located at LaS. It was noted that the dependency seemed to be LaSR

LaS instead of LaSR

LaS. Thus, we decided to move all the skin files within LaSR, starting from the health bar's one, and later on with the rest ones as well.

- Made two MOO Issues

• Associate preview PNG images to list items #73 (link https://github.com/Terasology/MasterOfOreon/issues/73)
• Merge of Task Selection Screen list and Plant Selection list #74 (link https://github.com/Terasology/MasterOfOreon/issues/74)

- Ammo slot issue
Open Issue: Reacting to OnAddedComponent and OnChangedComponent #4067
Merged PR: Ammo slot issue fixed, and name change of method used #50

Fixed Ammo slot issue, by following Niruandaleth's directions.

- Reviewed code
Merged PR: fix: item orientation #51

To do the review I:

• Run the build locally
• Checked the changed files
• Checked if there are other similar files were modified accordinally
• Run Test to the module and got a Build Succesful Result
• Made the above review as a comment, and then approved the PR all together

- Ideas about the journal from lost
Made an Issue with my ideas Issue: UI Improvement #29

- Added links to repositories at the HUD Element's cards on Trello
GSoC 2020 - UI/UX

- Merged health bar and quickslot PRs

2. New tasks added on the list

• Loading screen for LaS
• Move all skin files from LaS to LaSR
• Create new PR for the Quickslot
• Update descriptions of PRs with checkboxes, to keep track of what was done or needs to be done (as mentioned by Niruandaleth here as well)
• I want to add checkboxes about was done or needs to be done at the Trello cards

3. Tasks I didn't manage to start working on

- Dialogue screen
Open PR: Dialog Screen Override UI #122- No additions since last week

Made an asset to be used for the dialog box. Haven't committed it to LaSR yet, because I might make modifications to it after I work on changing the structure of the dialogue box. Current asset:

- Score HUD
Made a new branch to push commits on this task. No additions were made yet.

- Game over details screen
Made a new branch to push commits on this task. No additions were made yet.

 

[Stefania Mak]

13/July/2020 Meeting Minutes

Update:

We went through the Forum Post and showcased the work done this week. Some comments were:

• We will possibly have a session about dependencies within the week, in which any other interested in that topic can join.
• New stretch goal: showcase the slot's number next to each quickslot item.
• Possible to implement this change on Dialog boxes: Add replicate fields to DialogComponent #14. It will be discussed in another student's meeting about its progress.

This week's tasks:

1. Work on previous week's tasks that weren't able to be worked on

Which are:

• Dialogue Screen
• Score HUD
• Game over details

Also described in slightly more detail at "3. Tasks I didn't manage to start working on" section of 13/July/2020 Student Weekly Report forum post.

2. New tasks that were added on the list

As mentioned at "2. New tasks added on the list " section of 13/July/2020 Student Weekly Report forum post. I shall work on the listed tasks from bottom to top.

3. Quickslot current final changes needed

• Add space between slot boxes
• Alight smaller slots to the right
• Set the rotateItems boolean as true at inventoryHud.ui file, so the rotating-style quickslot is used within LaS

 

[Stefania Mak]

20/July/2020 Student Weekly Report

1. Work done

- Quickslot: add space between slot boxes

• PR: feat(FlowLayout): added option to add vertical spacing between included items #4089

I added a feature at FlowLayout, which allows you to add horizontal spacing between elements added into it.

Q: Should I look into adding a feature about vertical spacing as well? Considering this might be done a similar way.

- Quickslot: align smaller slot boxes to the right

Based on my research, there isn't a way to do this yet. Now considering each element is placed next to each other, and wrapping the item only if it does not fit, I think one way I can think we can implement aligning smaller items to the right is by placing the remaining space from the right of each row, to the left of it. Now I am not sure how possible it is placing the remaining space before the elements in that row, considering we would have to place them to see the remaining space in the first place.

- Trello Page and PR descriptions

• GSOC 2020 - UI/UX

Added tasks in each Element card and PR. Within the card's tasks, I added tasks to Merge for each PR mentioned in the description, just to make sure that everything related to this card is done before moving it to Done. (<-- still need to add that last feature to 2 more cards)

- Move skin files from LaS to LaSR repository

: Skin file has been moved

: Skin hasn't been moved

Elements:

• Score
  
• Game Over Screen
  
• Dialogue box
  
• Quickslot
  
• Health bar
  
• Ammo slot
  

- New PRs

For Game Over Screen

• chore: move game over screen skin file to LASR #128
• chore: move game over screen skin file from LAS #43

For Score

• chore: move score skin file to LASR #129
• chore: move score skin file from LAS #44

For Dialogue box

• chore: move dialogue skin file from LAS #44

2. Tasks I didn't manage to start working on

- Ammo slot
Move skin file and make a PR to change the asset for it.

- Quickslot
Move skin file and make a PR for it.

3. New tasks added on the list

Side tasks

• Create an asset inspired from the "WANTED"-like an asset for LaS and post it at discord or forum for Metal Renegades
• Give my feedback on TheShubham99 latest design idea