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".
 

Stefania Mak

Member
GSOC/TSOC 2020
15/August/2020 Student half-Week Report

1. Work done

Game Over Screen rework

PR with till-then-done changed got merged!
- Things done

1.
got the final team scores to appear on the screen
Java:
    private void addTeamScore(DeathScreen deathScreen, GameOverEvent event){
        UILabel spadesTeamScore = deathScreen.find("spadesTeamScore", UILabel.class);
        UILabel heartsTeamScore = deathScreen.find("heartsTeamScore", UILabel.class);
        String blackScore = String.valueOf(event.blackTeamScore);
        String redScore = String.valueOf(event.redTeamScore);
        spadesTeamScore.setText(blackScore);
        heartsTeamScore.setText(redScore);
    }

2. created a more tidy, renewed version of adding the team scores to the UILabels
Java:
    private void addTeamInfo(DeathScreen deathScreen, GameOverEvent event){
        addTeamScore(deathScreen, "spadesTeamScore", event.blackTeamScore);
        addTeamScore(deathScreen, "heartsTeamScore", event.redTeamScore);
    }

    private void addTeamScore(DeathScreen deathScreen, String teamUILabelId, int finalScore){
        UILabel teamScore = deathScreen.find(teamUILabelId, UILabel.class);
        String score = String.valueOf(finalScore);
        teamScore.setText(score);
    }

3. formated the items inside the Details Page of the Game Over Screen based on the Mock-up

Changes made:
  • removed the Kills and Deaths name tags of the first row from the inside MigLayout of the Scrollable Area
  • wrapped the row of the team names MigLayouts at the Team's Name tag (formally the Player Name tag)
  • placed one more row at the MigLayout for the Details Screen, with another MigLayout containing the Kills, Deaths and Enemy Flags Captured name tags
  • alongside the final score of both teams, I placed a / and a number, which number indicated the Goal Score that should have been hit
  • wrote appropriate widths and heights for all the inside elements, so the screen is symmetrical
4. "froze" the first line of the MigLayouts containing the player names

I did that by:
  • placing the scrollable areas inside other MigLayouts
  • removing the first row (with the Team Name) from the MigLayout inside the scrollable area
  • docking MigLayout's line with the scrolling area including the player names, at the south, so it takes up the bottom part of the outer MigLayout, without getting affected of the column constraints I wanted to place
- Final Progress of the Game Over Screen

2678


Close up of the Game Details middle part of the screen, with Highlited MigLayout areas

2679
 
Last edited:

Stefania Mak

Member
GSOC/TSOC 2020
15/August/2020 Meeting Minutes
w/ Cervator, Casals and Stefania

Update:

We considered the chat we had about the following topics and updates this week's meeting.
  • We talked about our availability hours, and we set a new meeting time at Saturdays 2 PM UTC time.
  • Month 1 and Month 2 Trello board columns were archived
  • Some comments were on the work done till then were:
1. Game Over Screen
  • The Trello card for this element is almost ready to be moved at the Done column.
  • Not all symbols are supported by the Wicked Queen Font that LAS uses, so it might be best to have the default font for the displayed player names, considering there are no restrictions on what they can have as their names
This week's tasks:

1. Work on the following tasks about 1. Dialogue Answer Buttons:
  • create an 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? - decided this will be a feature
2. Update Trello Page

3. Write down the remaining tasks for the Game Over Screen, and start working on them
Remaining tasks:
  • change the backgrounds of the 2 UIBoxes [2h]
  • change the font size of some of the UILabels - don't know how to do that yet [3h]
  • change button's design, according to the background, font color ect.. (?) [3h]
  • change font-color for Victory-Defeat label [3h]
  • place player names at the start of the column, and not at the middle of it [5h]
  • add card assets that indicate the Enemy Flags Captured, like the mock-up [10h]
    • issue: what if the player places a too big of a number for the Goal Score? Would the assets get cramped up? Would they wrap to the next line? Will 1 point = 1 card change to 10 points = 1 card after above a certain number for the Goal Score?
2680
 

Stefania Mak

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

1. Work done

General
  • Trello page and Issues for elements were updated
Answer Buttons Rework

- Things done

Within these PRs, the work completed was:
  • Transfer all UI and Skin changes to the main Dialogs repository, so this is a global feature and not a LightAndShadow only one
    • modified the files to match the old Dialog box, instead of the LAS's one
    • have the LAS skin file inherit from the Dialogs skin file, so that enabled me to remove inherited code from the LAS file
  • Added feature where the image appears only when the user hovers over an answer
  • Created two arrow assets, one for the default Dialog box, and one for LAS
    • Default one:
      2681
    • LightAndShadow one:
      2682
  • Modified widths and heights again, setting a min and max width that the above images can have
Change of Button's assets notes:

Some failed attempts to change the Button's assets were:
  1. I tried overriding the button's assets from the Engine folder, by copy-pasting the assets to the Dialog's texture folder (like I did with some other assets before). instead of overriding, the assets didn't appear at all
  2. Set a background at the skin file with the button asset that I copy-pasted at (1), but there was no asset appeared again
Some things I learned:
  1. Overriding or setting a background through the dialog module at the UIButtons apply to all buttons at the module, and not only the answer buttons. Thus, I am not sure if changing their background through the skin file is possible
Note on the above after working on the Game Over Screen:
  1. I managed to override the button's assets, it is possible that the issue was the order of the "families" and "elements" within the skin file.
  2. The changes might not have been applied to the other buttons as well, but the fact that there was an error on the buttons, that might have influenced the rest of them as well.
- Things remaining to do
  • Change the default button assets
  • Have the image keep its appearance when pushing the button as well (?)
- Current State

1.
Default Dialog box
2683


2. LAS Dialog box
2684



Game Over Screen

- Things done

Opened 2 new PRs:
Within these PRs, the work completed is:

1. Backgrounds of the 2 UIBoxes

My first approach was to have the Alice-in-Wonderland iconic black and white diamond pattern somehow on the screen, but the result ended up being kind of noisy and distracting.

Backgrounds created and tested:
2687


One of the results:
2688


In the end, we currently ended up with a combination of:
  • a white background for the outside UIBox
  • a green background for the inside box
  • a black 3D-like background for some parts of the inside box
Assets:
2692


2. Font sizes of some of the UILabels by adding more font sizes of the Wicked Queen (LAS) Font

After quite a lot of struggling (occasionally since the beginning of GSoC) about changing the size within the text of a UILabel, I figured out that the size changes by setting a wider .fnt file to the desired element, through the skin file.

After figuring that out, I had to find a way to get different .fnt files of the Wicked Queen Font that LAS was using, and no matter how hard I tried, even the creator had only a .ttf file available for downloading. Thankfully, I found a YouTube video named How to convert .ttf to .fnt [DBM Tutorial], that did just that, which required downloading an external software (which I tried to avoid) named "Hiero".
With this software, I managed to create different sizes .fnt files that I could use from the Wicked Queen Font, naming each one after the size I gave them.

2693



3. Button's design

2695


- Suggestions from Cervator about current design, and my replies

1.
Either make the Hearts Team label red or make both Spades Team and Hearts Team white
I did try using white, but it was quite lost within the screen, the same with the Red text in comparison with the Black. But I will try them again in case they match better with all the changes made.

2. Make the Game Over Victory label more clear, e.g. something like Game Over - Victory!
I was planning on making the Victory text-color blue and the Defeat red, but indeed this might also not be clear enough as well!

3. Font size for the player name might be too small
I think I tried the wider font, but it was enormously big, but I am not 100% sure I used it in this part of the screen, or another.

4. Flag stats aren't aligned with player boxes
The stats were supposed to be aligned in the middle of both the Team Label and the Player names, instead of just the player names. But indeed, considering we have the Player names inside the box now, that can seem quite asymmetrical. I will try out placing it in the middle of the Player Names box to see if it fits better!.

5. Heart icon at the bottom right is weirdly fuzzy
Indeed, I tried to use existing assets for decoration to avoid creating too many new assets, but maybe it is necessary to create a hearts icon with a border (like the spades icon) as well.

- Things remaining to do
  • Tidy up code
    • there are quite the repetitions that can be reduced
  • change font-color for Victory-Defeat label [5h]
  • place player names at the start of the column, and not in the middle of it [5h] - not that mandatory? I think it looks nice either way
  • add card assets that indicate the Enemy Flags Captured, like the mock-up [20h]
    • Quite complicated atm in my opinion. Considering we have no restrictions on how many points the user can set as Goal Score (not that they have the option to change the Goal Score currently), our best approach would be to incorporate labels that indicate
- Current State

2685


Notes taken within the week
  • The Wicked Queen Font that LAS uses doesn't support some symbols, e.g. _.
  • Wicked Queen Font is hard to read if in a small font size
  • Reading the Hearts and Spades at the score element is slightly tricky
  • Quickslot might extend the default Terasology window
  • How can we use different language fonts in the desired font size used?
  • When restarting a LAS game and completing it again, then the player names would appear again at the ending screen
 
Last edited:

Stefania Mak

Member
GSOC/TSOC 2020
22/August/2020 Meeting Minutes
w/ Cervator and Stefania

Update:

I sent the Student Weekly Report post at the discord chatroom, and form there Cervator went on to read the file and comment on some of the mentions. Afterward, we talked about what would be good to finish up within this week, and what can I submit for GSoC.

Some comments were on the work done till then were:

- Game Over Screen

1.
Background Images
  • Cervator mentioned that the background graphic with the red and black half-diamonds was kinda nice, but I commented that I couldn't use it because I could only stretch it as a background (which didn't look nice) or create an asset according to the UIBox's height and width.
2. Left to do
  • The "player name placed at the start of the column", yes doesn't have the highest priority
  • Likewise, placing cards for the score isn't a priority either
3. Side issues
  • "Reset button appears only on the host
    • I commented here that the game over event might be related, because I have noticed a variable named like "permission to restart".
  • When restarting and completing the game, the previous player names remain on the screen, alongside the new ones.
    • Here, I mentioned that I recall there being a "reset" method for the added variables at the Dialog Box, so I guessed that there was something similar to the game over screen.
Cervator said that the assorted little trivial UI issues would probably make good post-GSOC "Good First Issues".

This week's tasks:
  • Game Over Screen
    • Change font-color for Victory-Defeat label, and also make it more distinguishable (see comments from Student Weekly Report)
  • Dialog Box
    • Change answers button background images
  • Ammo slot
    • Change Ammo slot's background image
  • Write Post about the whole GSoC work done, and submit it to GSoC Page
  • Write info found about the Fonts at https://github.com/Terasology/TutorialAssetSystem/wiki and https://github.com/Terasology/TutorialNUI/wiki (I shall write it at one of them, and reference it at the other)
  • Stretched Goal: Work on the second side issue, where the names get repeated
 
Last edited:

Stefania Mak

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

1. Work done

- Game Over Screen

Cleaned General PRs
PR:
Things done within the above PRs:
  • Added new background images
  • Set red and black color to Team Labels
  • Increased font size of Player Name Labels
  • Cleaned up code
Changed font color of "Victory-Defeat" label
Concern:
I saw in other files that we are able to set the desired font-color to a label, but I couldn't incorporate them into the labels I wanted. I chose to set a different family at the UILabel so it gets the desired colors from the skin file. (More info about this concern at LAS PR#148)

2699
2700


Added outer border at the screen
PR:
I placed the white background at the Relative Layout (had an empty "" background previously) and placed a green background at the outer UIBox to create this illusion of a border.

image


- Ammo slot background Image
PR:
Placed a new background for Ammo slot:
  • New Asset
    ammo
  • Other tries
    image
Result:

image

image


- Answer Buttons

Background Images and new Issue

PR:
I changed the background images of the answer buttons, while also correcting an issue that wasn't there with previous tests - the arrow UIImage not being in the correct position with more than one answer.

- Concern about the background images used
Because the UIButtons match the width of their column, which matches the width of the wider button (the one with the most text in it), the image seems kind of weird to the buttons with less text.

The solution should be to set at each UIButtons the LayoutInfo of "use-content-width": true, but I am not aware of how to do that via code yet.

- Results:
  • default one
    black
  • hover/push
    blackPushed
Screenshot_4

Screenshot_5

Screenshot_6

- Issues Created
  1. Player names multiply at the ending screen after restarting the game #151
  2. Game Over Screen is wider than default window size #152
  3. Quickslot exceeds from the top of the screen #153
  4. Column constraints not working under certain circumstances #23
  5. Logic around Restart button at Game Over Screen #154
2. Work left to do
  • Update Trello page with this week's things done
  • Update Element Issues
  • Post final report and complete final evaluation (will be done by Sunday)
 

Stefania Mak

Member
GSOC/TSOC 2020
2702


Google Summer of Code 2020 Final Report
This Forum post is a replica of the actual GSoC Final report here


Proposal Terasology Game HUD, Graphics improvement & Gameplay Guide

Organization Terasology



GSoC Display name: Stefania Mak

Full Name: Makrygiannaki Stefania

Location: Thessaloniki, Greece

EMAIL: stefania.mak.project@hotmail.com |
stefaniamakk@gmail.com


Table of Contents
  • Table of Contents
  • Introduction
  • Main Report
    • Educational
    • Productive
      • Documentation
      • Master of Oreon
      • LAS element rework
        • Quickslot
        • Ammunition slot
        • Health bar
        • Score
        • Dialogue box
        • Game over screen
    • Fun!
  • References
Introduction

My Project had to do mainly with redesigning screens, and more specifically HUD elements. We ended up working and renewing a total of 6 screen/elements, which I am going to get into more detail further within the report.


If I had to describe this summer in three words, these would be: educational, productive, and fun! Based on these three words, I am going to structure later the rest of the report and thus my time in the program.


You can track all progress and updates from the Forum thread: UI/UX project Weekly Updates.


Main Report

Educational

Terasology introduced me to a lot of new experiences, and with them, a bunch of new information as well. The whole summer was a constant learning experience in coding, designing, GitHub, and teamwork.


Coding. I’ll start by the fact that I have never worked on such a large project! It has a coding structure that was way more complicated and outstanding than any other project I have worked on. This introduced me firstly to ways of how multiple people can work on a single whole project, and secondly to different things I can create and use like events, prefabs, UI files, reacting to events, and many more little things. The main coding section I focused on revolved around UI elements, which even if I have worked with on my projects before, was still quite new to me. My mentors were also always there to help me out with explaining or introducing that new method to me, so I can use it.


Design. I already had few mockups done for my proposal, but through the summer I got the chance to make more designs, study, give and receive feedback on different design ideas, mainly on my project, and secondary on fellow students.


GitHub. I learned how to write properly structured PR, Issues, and how to effectively work with Forks which’s the main purpose is to contribute to the main repository.


Teamwork. The communication between me and my mentors, but also the rest of the Terasology members, was great! I felt comfortable asking many questions, give and receive feedback, and make progress updates, while simultaneously learned how to do all of the above more effectively.


Productive

This is the main part of the review, during this time period we managed to upgrade a great deal of a module’s HUD interface! Totally, we had:
In this section of the review, I am going to write down all the work that was done from the beginning of the summer until the end. Like mentioned at the start of the Report, you can track all progress and updates from the Forum thread: UI/UX project Weekly Updates.



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


2701



Before​
After​



LAS element rework

Within the end of the first month, and the whole second month, the focus shifted 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.

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.




Before​
After​

BeforeAfter

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

BeforeAfter
the fool dialogue oldnew hud

Ammunition slot

What I had to do first, was to find which module provided this feature, which ended up being the CombatSystem module. Mainly what we did was to change its positioning and background image (19). In more detail, what was done is (12):

BeforeAfter
lns endScreenshot_8

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
BeforeAfter
the fool dialogue oldnew hud

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):
BeforeAfter
lns endScreenshot_8
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. Afterward, we changed the Answer buttons, by positioning an arrow asset to each answer's left (18), and changed the answer button's background image (19). The changes made were (13):

BeforeAfter
lns endScreenshot_8

Game over screen

This screen was one of the last things that were worked on during the summer, and also one of the most significant changes in comparison with the previous version (16) (16) (17) (18) (19). The changes that were made were link:

New Victory ScreenNew Defeat Screen
lns endScreenshot_8

Fun!

Other than the fact that I enjoy software development problem solving, the highlight of this section would be the Play Test Weekend (15). Other than showing and seeing mine and other student's work, it was really fun playing Terasology with other members of the organization. You can watch the video from the Light and Shadow live at Terasology Play Test - Light and Shadow - GSoC Highlight.

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

(15) 03/August/2020 Student Weekly Report - Playtest Week! https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/post-16850

(16) 10/August/2020 Student Weekly Report https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/post-16859

(17) 15/August/2020 Student half-Week Report https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/post-16873

(18) 22/August/2020 Student Weekly Report https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/post-16876

(19) 29/August/2020 Student Weekly Report https://forum.terasology.org/threads/ui-ux-project-weekly-updates.2321/post-16896
 
Last edited:
Top