Updates UI/UX project Weekly Updates

Stefania Mak

New Member
GSOC/TSOC 2020
Last edited:

Stefania Mak

New Member
GSOC/TSOC 2020
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
 
Last edited:

Stefania Mak

New Member
GSOC/TSOC 2020
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:

      2573
 
Last edited:

Stefania Mak

New Member
GSOC/TSOC 2020
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
 
Last edited:

Stefania Mak

New Member
GSOC/TSOC 2020
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
 
Last edited:

Stefania Mak

New Member
GSOC/TSOC 2020
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 BUSY7/6 BUSY||||||||||||||||||||||||||||
2​
8/6 BUSY9/6 BUSY10/6 BUSY11/6 BUSY12/6 BUSY13/6 M. AV.14/6 M. AV.||||||||||||||||||||||||||||
3​
15/6 M. AV.16/6 M. BUSY17/6 M. BUSY18/6 BUSY19/6 BUSY20/6 M. AV.21/6 M. BUSY||||||||||||||||||||||||||||
4​
22/6 BUSY23/6 M. BUSY24/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​
||||||||||||||||||||||||||||
 
Last edited:

Stefania Mak

New Member
GSOC/TSOC 2020
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​
2584
2577
 

Stefania Mak

New Member
GSOC/TSOC 2020
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
 
Last edited:

Stefania Mak

New Member
GSOC/TSOC 2020
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

    • 2592
  • 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.

      2591
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
2588


Dialogue with the Fool
2587


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

Stefania Mak

New Member
GSOC/TSOC 2020
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
 
Last edited:

Stefania Mak

New Member
GSOC/TSOC 2020
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:
2616
2617
2619
2620

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
2622


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

2625
2626

- Details of match

2627


c) Quickslot rework

2628


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

2629


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
 
Last edited:

Stefania Mak

New Member
GSOC/TSOC 2020
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

New Member
GSOC/TSOC 2020
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
2636
2635


Dialogue with the fool NPC
PR
2631


Quickslot
PR
2632


Health bar
PR
2633


Ammunition slot for ranged weapons
PR
2634
 
Last edited:

Stefania Mak

New Member
GSOC/TSOC 2020
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:
2637


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:
2638


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
 
Last edited:
Top