Updates UI/UX project Weekly Updates

Stefania Mak

Member
GSOC/TSOC 2020
20/July/2020 Meeting Minutes

Update:

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

1. Quickslot: add space between slot boxes
- Yes, I could add a feature for vertical spacing in FlowLayout

2.
Quickslot: align smaller slot boxes to the right
- Best solution atm might be setting a left-to-right to align to the items inside the FlowLayout (--> will have to add a new feature to do that)
- Wait for an update from Skaldarnar before moving on with the above solution

3. Trello Page
- There were some mistakes on the Ammo's card description

4. New PRs
- New PRs for Game Over Screen, Scord and Dialogue box will be merged, and new ones for the actual file modifications shall be created

This week's tasks:

for 20/7
  • Move rest of skin files (for quickslot and ammo) to LaSR repository
  • Make corrections on Vertical Spacing
  • Horizontal spacing: make a new branch and work on adding that feature to FloatLayout based on how Vertical Spacing was done
for 21/7 and on
  • Start working on the UI files (see (4) in the Update section of this post)
  • Edit Trello page's mistakes (see (3) in the Update section of this post)
  • Set small slot boxes from Quickslot to the right (see (2) in the Update section of this post)
  • Do extra tasks that were set set
 

Stefania Mak

Member
GSOC/TSOC 2020
Proposals

Dialogue box
Might be a stretch goal, but how do you find the idea of removing the use of the mouse for choosing an answer when speaking with an NPC? What changes I propose on doing to achieve this, are to: - have a preselected answer (currently: no answer is selected, it becomes selected when you hover over with the mouse) - move around the answers by up and down button (currently: have to hover over that answer with the mouse) - press enter to choose the answer you want (currently: left click with the mouse on the desired answer; not sure if clicking enter works too) I don't think we should remove the function to select with a mouse, but use it only if the mouse is moved while in dialogue mode. I believe the most (maybe and only) fitting place to use the mouse would be within menus, and avoid using it for main HUD elements.(edited)

Niruandaleth's comment:
- yes I like the idea and I agree, that we shouldn't replace mouse selection but add another interaction option (arrow keys)

Sound-effect
I believe we did mention this topic quite briefly again, I think while talking about quickslot. I would like to add as a main goal, possibly around the end of August, or generally after the current main goals for LaS, to add some sound effect on the elements. E.g.: - small click sound when spinning the quickslot
  • sound when scoring a point
  • sound when the game is over
  • (maybe) sound when taking the enemy flag (without scoring)
  • when dropping the flag sound? (is that a feature? I haven't played multiplayer to test it)
And so on, if it's a plan, we can talk about which and what might be needed

Niruandaleth's comment:
- adding sounds would be cool, not sure if that's a main goal though, as we scoped your project to be mainly visual improvements and I believe that we might opt to rather include additional screens to overhaul as main goals than sounds

When you have chosen a team
I think a screen writing "You have joined the Red Team" with the symbol of the red team (do the teams have symbols? that would be cool. I might search the LaS forum in case I don't recall it being there). Might be a stretched goal though.

Niruandaleth's comment:
  • yes I believe a screen text would be nice for that, maybe a bit like you victory/defeat screen mock-up
  • it could also hold a quick goal hint, e.g. "Capture the <other team color> team's flag with 'E' and drop it onto your own team's base platform with 'E' to score." - that one I think would make a nice main goal
Score: indicator to say at how many points the game ends
Currently, you don't really know till you score the max amount of points, thus, I suggested I showcase the maximum amount points you can get through the score element, showing how Overwatch Capture the flag mode as a reference:

2648
 

Stefania Mak

Member
GSOC/TSOC 2020
27/July/2020 Student Weekly Report

1. Work done

- Moved the remaining skin files from LAS to LASR
Moved the last two skin files (ammo's and inventory's) to LASR.

- Trello cards and PR/Issue's descriptions

Trello:
  • Edited Quickslot's and Ammo's cards that were left from last week
  • Added new tasks and PR to all rest of the element cards
PR/Issues:
  • Updated PR's descriptions with tasks (wherever needed)
  • Updated Issue's descriptions with the above new tasks and PR mentions
- FlowLayout: Vertical and Horizontal spacing

Vertical: the feature was added
Horizontal: the feature still has some issues
-There is extra spacing at the last element of each row
-Quickslot is not stuck at its position formating

2649



- Score HUD
Things done:

-Added a UIImage in between the scores of the two teams (ToDo: set new asset when that is committed at LASR)
-Added team images left and right of the element

-Added UILabels next to the current team scores, and
-Connected the above UILabels with GOAL_SCORE at LASUtils.java

-Added new asset, and set layout according to it - asset at feat: new asset for score ui element #47
-Removed "Score" text from the UILabels
-Move "Red" UILabel right before the heart symbol at the right end of the element

-Set equal widths for Black and Red UILabels
-Changed UILabels Black to Spades and Red to Hearts
-Added more spacing between the team name and the score
-Placed the element correctly in the middle of the screen
-Flipped flag asset - done in feat: flip the new flags asset #48

Result:

2650


2651



- Dialogue Screen

1. Added The Fool's image next to the text
2652


2. Removed ScrollableArea's background
2653


3. Tried out some background ideas

White Background

  • Try again after figuring out how to change text color
    • Tried setting a specific text color for the Widget
      JSON:
      BrowserWidget":
      { 
               "text-color": "000000"
      }
    • Tried setting a text color generally, but only changed the Button's text
    • Looked a bit into MagicFool.perfab to see if I could change the color from there. The color was not set anywhere already, so I would have to search somewhere else to see if that is possible.
      • issue: changes made at the MagicFool.perfab and previously worked, now did not
2654

2655


Black Background

White Border
2656


No Border
2657


Black Border
2658



- Game Over Screen
I read about the used container MigLayout, and though a little bit how to structure the UI file based on the changes needed.

2. Tasks I didn't manage to start working on
  • Quickslot: align smaller slot boxes to the right
3. New tasks added on the list
  • Score: Change score's Hearts UILabel color to a darker red, to see if that makes it more visible
  • Dialogue: Test ScrollableArea's scroll bar, by adding more text (lorem ipsum)
 
Last edited:

Stefania Mak

Member
GSOC/TSOC 2020
27/July/2020 Meeting Minutes
w/ Skaldarnar, Niruandaleth and Stefania

Update:

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

1. FlowLayout: Horizontal Spacing
There are still things to try out so I solve my problems. Other than that, I should commit with any work I reach, alongside comments on that code, so people can check the progress and maybe help out.

2. Score HUD
Two last things left for next review:
  • use the heart icon's color as the font color for the "Hearts" team name
  • use text shadows for the team names and scores
3. Dialogue Screen
Background
  • I should use the full opaque white background, so the asset and the background merge together
  • Use curved corners like the mockup, as it resembles more to a poker card
Text color
- I could check HTML tags for browser widget

This week's tasks:

Get LAS and LASR Develop branch ready for play test day

below check-list is under construction

  • score hud overhaul
    • :white_check_mark:
      spades vs hearts
    • :white_check_mark:
      flag symbol
    • :question:
      text shadows (1h)
    • :question:
      darken hearts color (1h)
  • right-aligned quickslot bar
    • :white_check_mark:
      vertical quickslot bar
    • :white_check_mark:
      rotating items
    • :white_check_mark:
      vertical spacing
    • :question:
      Flow layout: right-to-left directional flow (2h)
  • :white_check_mark:
    updated health bar
  • fool's dialog overhaul
    • :white_check_mark:
      left-bottom
    • :white_check_mark:
      avatar image
    • :question:
      white background/black text (2h)
    • :question:
      rounded corners (3h)
    • :question:
      image on answer button (3h)
  • :question:
    loading screen image (2h)
  • :question:
    (game over screen)
    • arrange UIBoxes
    • investigate and extend player stats (captured flags)
    • update player stats layout
    • investigate local multiplayer setup
 

Stefania Mak

Member
GSOC/TSOC 2020
GSoC ⅔ Progress Summary

Project: Terasology Game HUD, Graphics improvement & Gameplay Guide (1)

First month

The first month went quite slow, because of some University projects and exams. The major progress done revolved around documentation and Master or Oreon.

Documentation

During the bonding GSoC period, me and my mentors created a Google Doc file to collect information regarding Terasology’s main UI and Heads-Up Display (HUD) elements. On that file, we added screenshots of these features from Terasology and other games, alongside some notes of what we like and don’t like on these references.
One of the first things done was in the first month had to do with the development of that file, by adding references from other game modes of Terasology, like Metal Renegades, Light and Shadow, and more. (2) (3)

Master of Oreon

Master of Oreon (MOO) was my first interaction with how the UI works for Terasology. To get more familiar with editing the elements, I was given the task to edit the Task Selection Screen of MOO, based on an edit that Skaldarnar made on another screen of that module. (3) (4)

The modifications I made included the addition of a title, a close x and a confirm button, and a section which will host previews of the list items within the screen. (5) (6) While I did make all the assets, I did not incorporate them into the design but rather created two issues on GitHub with what was next for them. (11)

Below I present some samples of the assets that were made and the current state of the Task Selection Screen of MOO:






Second month

Within the end of the first month, and the whole second month, the focus swift from MOO to Light And Shadow (LAS). The goal was to make a full update on its HUD elements, to distinguish them from the original Terasology interfaces, and give it its own unique new look. The upgrade done till now, covered the quickslot, ammunition slot, health bar, score, and dialogue box.

LAS element rework

First things first, I had to look into how to edit each element. That lead me into reading more about the Delta and Override files (7), which’s wiki page I updated with the research I did (8), and then I applied overrides for LAS element UI modifications.

The current state of LAS:






Changes per element

Quickslot


Quickslot was probably the element that got the most attention out of all. To achieve the above result, we had to both heavily modify the structure and appearance, but also add more features to some layouts that we needed to have. In bullet points, the changes and additions made by referencing the mock-up (6) were (12):
  • Reposition to the right of the screen
  • Changed horizontal alight, to a vertical one
  • Set a wider size to the selected slot
  • Placed the selected slot at the bottom of the slot
  • Added option for a ring-like rotation of the items
  • Added option for both vertical and horizontal spacing between the slots
  • Added option for right-to-left alight of elements within a FlowLayout
  • Changed the background assets
Ammunition slot

What I had to do first, was to find which module provided this feature, which ended up being the CombatSystem module. What came after overriding that module, were (12):
  • the move of the ammo slot next to the new position of the quickslot
  • the addition Ammo text above the ammo slot
  • resolved the issue about ammo slot not appearing when the game began
Health bar

The health bar got the least modification so far, which was about its size and position (7) (8). Basically:
  • Size increased, for all three different styles of it - circle, spades, and hearts
  • Considering the empty space created below it, after quickslot moved, the health bar was placed right at the bottom of the screen
Score

The score had a total rebrand in my opinion! It now matches better the theme of the module, and also provides the user with tiny pieces of information about the game through its design. The changes made were (10):
  • Create and place an image with flags in the middle
  • Place team indicator images at the sides of each score
  • Showcase the max amount of points needed to be scored to win the game
  • Change label names from “Black Team” and “Red Team”, to “Spades” and “Hearts”
  • Place element in the middle again
Dialogue box

Following on the list, we have the also noticeable update to the Dialogue box. The whole element got a new feeling with its new design, and matched nicely with the Alice in Wonderland theme that goes around LAS; as commented by Skaldarnar: it looks a bit like a poker card. The changes made till now were (13):
  • To place it at the bottom left of the screen
  • Reposition of the answers list at the right of the box
  • Creation and placement of a card-like asset left to the text of the box
  • Removal of scrollable area’s background
  • Change of the text’s color to black
Game over screen

Yes, this screen was not mentioned at the above list of elements, the reason being it not having any code changes yet. Currently, the progress here is the creation of mockups, and plan on how to move on with the changes (6) (14).

Current mockup:

2664


References

(1) Project Details https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/
(2) 18/May/2020 Meeting Minutes https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/#post-16644
(3) 25/May/2020 Meeting Minutes https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/post-16646
(4) 11/June/2020 Student Weekly Report https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/#post-16723
(5) 15/June/2020 Student Weekly Report https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/#post-16731
(6) 22/June/2020 Student Weekly Report https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/#post-16752
(7) 29/June/2020 Student Weekly Report https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/post-16765
(8) Deltas and Overrides https://github.com/Terasology/TutorialAssetSystem/wiki/Deltas-and-Overrides
(9) 06/Jule/2020 Student Weekly Report https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/post-16783
(10) GitHub Issue: Score HUD Element Overhaul #131 https://github.com/Terasology/LightAndShadow/issues/131
(11) 13/July/2020 Student Weekly Report https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/post-16807
(12) GitHub Issue: Inventory Overhaul #134 https://github.com/Terasology/LightAndShadow/issues/134
(13) GitHub Issue: Dialogue Screen Overhaul #132 https://github.com/Terasology/LightAndShadow/issues/132
(14) GitHub Issue: Game OverScreen Overhaul #130 https://github.com/Terasology/LightAndShadow/issues/130
 
Last edited:

Stefania Mak

Member
GSOC/TSOC 2020
03/August/2020 Student Weekly Report - Playtest Week!
:partyparrot:


1. Work done

- Dialogue box

2666


Things done:

1. Removed or ScrollableArea's background
Removed the background so it blends nicely with the Box's new background. I also did some further tests by adding more text to the fool's dialogue, to see if the appeared scroll appeared correctly.

1. Placed new white background with curved corners
I created a new white asset with curved corners, and placed it as the background.

2. Changed text background color from the default white to black
The issue I had with Prefab changes on the Dialogue box not appearing, seemed to be because of the invincible fool; when I clicked on the visible fool then all the changes appeared. Thus, I re-tried the following code that "didn't" work the first time, but worked now:
JSON:
BrowserWidget":
{
         "text-color": "000000FF"
}
I did have to try out a few different colors until I find out which turned the letters black, till I settle with 000000FF. Through that process, we ended up learning that the last two numbers indicated the opacity of the color and the first six being the actual color.

4. Dialogue box overlapping Health bar issue
3. Answer button

I started working on the upgrade of the Answer buttons, but this ended up having more tasks that could be done before the playtest, so it was moved for after the playtest.

2665


- Score element

2667


1. Added shadows behind UILabels
2. Darken heart's color
PR:
3. Replaced spaces at the UILabel with offsets
PR:
- Quickslot

2668


1. Right to left align
2. Asset change
3. Size change
- Loading screen
2669


- Ammo slot

1.
Placed Ammo slot next to the quickslot
2. Slimmer the ammo slot
2. Tasks on the list
  • Game over screen rework
  • New design for Dialogue Buttons
  • Ammo slot asset
    2670
  • Remove the mini-map (?)
  • Modify quest element with directions (?)
  • Add FlowLayout feature: up-down align (?)
  • Set ammo to ammo slot automatically (?)
  • Change score black flag's border from black to white
    2671
  • Add indicators about buttons (e.g. E to capture the flag when you put your POV on the enemy flag)
 
Last edited:

Stefania Mak

Member
GSOC/TSOC 2020
03/August/2020 Meeting Minutes

Update:
  • We talked a bit about the playtest, and this week's progress.
Considering that our current tasks are almost completed, we talked about what already planned it left and what is next for the rest of the summer. These plans are:

1. Game over screen
We already have a mockup of this screen, which I will refer at to modify the current game over screen.

Issue / Tasks : Game OverScreen Overhaul #130

2. Dialogue buttons
This section was started last week, with three new PR which all had some feedback from Skaldarnar.

PRs:
3. Ammo slot asset
This task is nice, but not a priority.

4. Remove the mini-map
Not a priority, but a stretch goal.

5. Modify quest elements with directions
This was mentioned as a plan for the rest of the summer.

The first idea proposed by Niruandaleth and Skaldarnar was to have a tutorial for the user when you talk for the Fool. The Fool will gladly accept the user's request, and provide them with the task of bringing him a flag, which will probably be located on the platform he is on. By this tutorial the user will learn how to capture a flag and gain a point.

The second idea proposed was to have a booklet like screen, which will provide the user with information about how to play the game. The information would be provided through pictures and text, while the user would have the ability to open this screen whenever they need to check the tutorial.

6. Add FlowLayout feature: up-down align
This feature was suggested based on the need to have a vertical-align on the new quickslot. But this is rather a stretch goal, as it can be done with another method (e.g. the one used for the quickslot: set the FlowLayout's width the same size as the larger widget placed within it).

7. Set ammo to ammo slot automatically
Niruandaleth mentioned that this issue is a bit tricky to solve, but also in very low priority, and a bit irrelevant with the whole project.

8. Change score black flag's border from black to white
The black flag's asset isn't that visible in a dark background, thus it should have some kind of different - more visible - border. Niruandaleth suggested that we place a black border outside of each texture of the score element, and a white shadow outside of them.

This task is mainly a stretched goal, but if I do find time to spend on it I should spend around 1h to complete it.

9. Add indicators about buttons (e.g. E to capture the flag when you put your POV on the enemy flag)
This is something that is planned to be done within the summer.

This week's tasks:

Work on tasks 1. Game Over Screen and 2. Dialogue Answer Buttons, based on the descriptions written above.
 
Last edited:

Stefania Mak

Member
GSOC/TSOC 2020
10/August/2020 Student Weekly Report

1. Work done

Answer Buttons Rework

- Things done

  • Placed a default image before each answer button of the dialogue box - WIP DIalogs#15
  • Removed the previously placed background through the skin file - WIP LASR#53
  • Used a responseImage within the prefab - WIP LAS#139
- Things left to do
  • create asset and set it as the default image (if the user has set it) [1h]
  • appear the image only when the hovering happens [2h]
  • scale the image appropriately according to the answer button (cause as we can see at the screenshot again, it is way larger than the button, thus if more images are added, the total height of the images together would be more than the total height of the buttons) [3h]
  • (maybe) have the option to enable the image before the answers? or shall this feature be used nevertheless?
- Current State

2674


Game Over Screen

- General changes of UI file

  • added the existing widgets into UIBoxes
  • changed the UIButotn's positions
  • added UIImages to the sides of the game over screen
- Game Details

1.
Separated the MigLayout with the game details in two MigLayouts which contain each team's players

I placed the code for the player's details into a new method, and then called it twice according to the player's team. I wrote a comment regarding the line String playerTeam = localPlayer.getCharacterEntity().getComponent(LASTeamComponent.class).team; which stated that I am unsure if localPlayer.getCharacterEntity() works correctly in multiplayer too, and Cervator gave a reply that I was not yet available to review.

2. Added UILabels for the total score

I placed two new UILabels, at which I tried to showcase the final score of the two teams. To do that, I created two getters inside ClientScoreSystem.java (which later I moved to ScoreSystem.java) and tried to read the final scores from there. I did not manage to find which object to call these two methods from; which is what's left to be done here.

- Things remaining to do
  • Check if the placement of the names happen correctly in multiplayer too [2h]
  • Have the teams' final scores appear [2h]
  • Add on to the structure of the final scores (currently there is only one label which holds the number of the score) [5h]
  • Place the MigLayouts at the start of the scrolling areas [2h]
    • do more tests by changing the column and row constraint of MigLayout
  • Change background assets [2h]
  • Change Player in MigLayouts with the team's name [<1h]
  • Add a small team image before the team's name [depends on below task]
  • Freeze the top row of each MigLayout, so when scrolling the top row remains visible [4h]
    • I possibly need to place the 1st row of each Miglayout separately, above the MigLayout
  • Figure out how to change the size of the UILabels [3h]
  • Possibly change up the placement of the migLayouts in the game details [2h]
- Current State

2675
 
Last edited:

Stefania Mak

Member
GSOC/TSOC 2020
10/August/2020 Meeting Minutes

Update:
  • We went through the Forum Post and showcased the work done this week. Some comments were:
1. Image to answer buttons
This mode could be a new feature at the default dialogue box.

2. Game Over Screen

- According to String playerTeam = localPlayer.getCharacterEntity().getComponent(LASTeamComponent.class).team;
Niruandaleth wrote down that there is the entityManager.getEntitiesWith(AliveCharacterComponent.class) which might be helpful to my issue.

- According to get the final score of both teams
Considering the score already exists in an event, I should get it from there. What was suggested, was to probably send the event at https://github.com/Terasology/LightAndShadow/blob/develop/src/main/java/org/terasology/ligthandshadow/componentsystem/controllers/ScoreSystem.java#L151
Java:
client.send(new GameOverEvent(winningTeam, hasRestartPermission));
This week's tasks:

Work on tasks 2. Game Over Screen and then 1. Dialogue Answer Buttons, based on the 20/July/2020 Student Weekly Report 's "Things left/remaining to do".
 
Top