Updates UI/UX project Weekly Updates

Stefania Mak · Jul 20, 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 · Jul 20, 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:

Stefania Mak · Jul 27, 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

Merged feat(FlowLayout): add option for vertical spacing #4089

Horizontal: the feature still has some issues

Draft feat(FlowLayout): add option for horizontal spacing #4090

-There is extra spacing at the last element of each row
-Quickslot is not stuck at its position formating

- Score HUD

Open feat: score hud rework #138

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:

- Dialogue Screen

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

PR: Merged feat(dialogue): add fool image #137

2. Removed ScrollableArea's background

PR: Draft feat: dialogue screen skin rework #49

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

Black Background

White Border

No Border

Black Border

- Game Over Screen

PR: Draft feat: game over screen rework #130 - no additions yet

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)

Stefania Mak · Jul 27, 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
- spades vs hearts
- flag symbol
- text shadows (1h)
- darken hearts color (1h)
right-aligned quickslot bar
- vertical quickslot bar
- rotating items
- vertical spacing
- Flow layout: right-to-left directional flow (2h)
updated health bar
fool's dialog overhaul
- left-bottom
- avatar image
- white background/black text (2h)
- rounded corners (3h)
- image on answer button (3h)
loading screen image (2h)
(game over screen)
- arrange UIBoxes
- investigate and extend player stats (captured flags)
- update player stats layout
- investigate local multiplayer setup

Stefania Mak · Aug 3, 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:

Stefania Mak · Aug 3, 2020

03/August/2020 Student Weekly Report - Playtest Week!

1. Work done

- Dialogue box

Things done:

1. Removed or ScrollableArea's background

PR feat: removal of scrillableArea's background #49

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

PR feat: new dialogue box background #50

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

PR feat: turned white text to black #51

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

PR fix: dialogue box overlapping the health bar #143

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.

- Score element

1. Added shadows behind UILabels

PR feat: change score ui color, add text shadow #52

2. Darken heart's color
PR:

PR feat: change score ui color, add text shadow #52

3. Replaced spaces at the UILabel with offsets
PR:

PR feat: Score hud rework #138

- Quickslot

1. Right to left align

2. Asset change

PR feat: added custom slot backgrounds #55

3. Size change

PR feat: larger quickslot size and ammo slot reposition #144

- Loading screen

PR feat: custom loading screen #140

- Ammo slot

1. Placed Ammo slot next to the quickslot

PR feat: reposition of ammo slot #142
PR feat: larger quickslot size and ammo slot reposition (ended up needing to reposition it)

2. Slimmer the ammo slot

PR feat: slimmer ammo slot #54

2. Tasks on the list

Game over screen rework
New design for Dialogue Buttons
Ammo slot asset
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
Add indicators about buttons (e.g. E to capture the flag when you put your POV on the enemy flag)

Stefania Mak · Aug 3, 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.

Stefania Mak · Aug 10, 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

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

Stefania Mak · Aug 10, 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 · Aug 17, 2020

15/August/2020 Student half-Week Report

1. Work done

Game Over Screen rework

PR with till-then-done changed got merged!

feat: game over screen rework #136

- 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

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

Stefania Mak · Aug 17, 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?

Stefania Mak · Aug 22, 2020

22/August/2020 Student Weekly Report

1. Work done

General

Trello page and Issues for elements were updated

Answer Buttons Rework

- Things done

Merged DIalogs#15
Merged LASR#53
Merged LAS#139

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

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

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:

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

2. LAS Dialog box

Game Over Screen

- Things done
Opened 2 new PRs:

Draft feat: game gver screen UI rework #146
Draft feat: game gver screen skin rework #56

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:

One of the results:

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:

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.

3. Button's design

- 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

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

Stefania Mak · Aug 22, 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

Stefania Mak · Aug 29, 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)

Added outer border at the screen
PR:

feat: added outer border to the game over screen #149

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.

- Ammo slot background Image
PR:

Placed a new background for Ammo slot:

New Asset
Other tries

Result:

- 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
hover/push

- Issues Created

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 · Aug 30, 2020

29/August/2020 Meeting Minutes
w/ Cervator and Stefania

[under construction]

Stefania Mak · Aug 30, 2020

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:

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

Before	After

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

override Inventory module - done in https://github.com/Terasology/LightAndShadow/pull/123
move quickslot to the right of the screen - done in https://github.com/Terasology/LightAndShadow/pull/123
align the slots horizontally - done in https://github.com/Terasology/LightAndShadow/pull/123
change the order of the slot items from top-to-bottom to bottom-to-top - done in https://github.com/Terasology/LightAndShadow/pull/123
add feature to rotate items - done in https://github.com/Terasology/Inventory/pull/24
activate rotateItems within UI file - done in https://github.com/Terasology/LightAndShadow/pull/126
add vertical space between slot boxes - done in https://github.com/MovingBlocks/Terasology/pull/4089
add horizontal space between slot boxes - WIP https://github.com/MovingBlocks/Terasology/pull/4090
move skin file inventoryLaS.skin from LaS repo to LaSR repo - done in https://github.com/Terasology/LightAndShadow/pull/133/ & https://github.com/Terasology/LightAndShadowResources/pull/46
update reference to skin file - done in https://github.com/Terasology/LightAndShadow/pull/133/
align smaller slot boxes to the right - done in https://github.com/MovingBlocks/Terasology/pull/4108 & https://github.com/Terasology/LightAndShadow/pull/141
create a new design - done in https://github.com/Terasology/LightAndShadowResources/pull/55

Before	After

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

override CombatSystem quiverHud.ui module - done in https://github.com/Terasology/LightAndShadow/pull/125
move ammo slot next to the new possition of the quickslot - done in https://github.com/Terasology/LightAndShadow/pull/125
Add Ammo text above the slot - done in https://github.com/Terasology/LightAndShadow/pull/125
issue: ammo slot not appearing when game begins - resolved in https://github.com/Terasology/CombatSystem/pull/50
issue: figure out how to manipulate UILabels - resolved at https://github.com/Terasology/LightAndShadow/pull/125#issuecomment-657079106
modify Ammo slot's placement - done in https://github.com/Terasology/LightAndShadowResources/pull/54
create a new design
use new design - done in https://github.com/Terasology/LightAndShadowResources/pull/59
reposition of UILabel based on background changes of InventoryCell - done in https://github.com/Terasology/LightAndShadow/pull/155

Before	After

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

Before	After

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

Move skin file from LaS repo to LaSR repo - done in https://github.com/Terasology/LightAndShadow/pull/129
Update reference to skin file - done in https://github.com/Terasology/LightAndShadow/pull/129
Create a new design
Place UIImage at the middle - done in https://github.com/Terasology/LightAndShadow/pull/138
Place UILabels next to the current team scores, and connect it with GOAL_SCORE at LASUtils.java - done in https://github.com/Terasology/LightAndShadow/pull/138
Place UI images next to the scores, indicating which score is which team's - done in https://github.com/Terasology/LightAndShadow/pull/138
Create a PR for LASR, with the task to create and insert the Flag image in the middle of the UI - done https://github.com/Terasology/LightAndShadowResources/pull/47

Before	After

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

Place dialogue box to the bottom left - done in https://github.com/Terasology/LightAndShadow/pull/122
Place answer choices to the right of the dialogue box - done in https://github.com/Terasology/LightAndShadow/pull/122
Add skin file to LaSR - done in https://github.com/Terasology/LightAndShadowResources/pull/45
Update reference to skin file - done in https://github.com/Terasology/LightAndShadow/pull/122
Add fool card asset to LASR - done in https://github.com/Terasology/LightAndShadowResources/pull/45
Insert UIImage to the left of the speech text within the box - done in https://github.com/Terasology/LightAndShadow/pull/137
remove scrillableArea's background - WIP https://github.com/Terasology/LightAndShadowResources/pull/49
new dialogue box background - done in https://github.com/Terasology/LightAndShadowResources/pull/50
turn Fool's dialogue text from white to black - done in https://github.com/Terasology/LightAndShadowResources/pull/51
set ColumnLayout for the UIImages - done in https://github.com/Terasology/LightAndShadow/pull/139
add UIImages to new column according to prefab file - done in https://github.com/Terasology/Dialogs/pull/15
set a default asset for the answer button UIImage - done in https://github.com/Terasology/Dialogs/pull/15
set a custom asset for the answer button UIImage - done in https://github.com/Terasology/Dialogs/pull/15
create a binding of answer UIImages visibility and hovering over the answers - done in https://github.com/Terasology/Dialogs/pull/15
add a new column for the UIImages in the Dialogs module (other than the LAS module https://github.com/Terasology/LightAndShadow/pull/139) - done in https://github.com/Terasology/Dialogs/pull/15
insert new arrow asset - done in https://github.com/Terasology/Dialogs/pull/15
set UIImage to show the new arrow asset if the button next to it is hovered with the mouse - done in https://github.com/Terasology/LightAndShadowResources/pull/53 & https://github.com/Terasology/LightAndShadow/pull/156
Edit answer button's background and font color/shadow - WIP https://github.com/Terasology/Dialogs/pull/18

Before	After

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:

Move skin file from LaS repo to LaSR repo - done in https://github.com/Terasology/LightAndShadow/pull/128
Update reference to skin file - done in https://github.com/Terasology/LightAndShadow/pull/128
Place all elements inside the shown boxes at the screenshot above - done in https://github.com/Terasology/LightAndShadow/pull/136
Set Game Over and Victory/Defeat (currently You Win! and You Lost!(?)) UILabels to the top left - done in https://github.com/Terasology/LightAndShadow/pull/136
Add Hearts Team and Spades Team labels - done in https://github.com/Terasology/LightAndShadow/pull/136
Format spacing between details in the middle of the screen - done in https://github.com/Terasology/LightAndShadow/pull/136
Add final score result (the Enemy Flags Captured and points below that label) - done in https://github.com/Terasology/LightAndShadow/pull/136
Change position of Restart, Exit to Main Menu, Exit Terasology and Settings buttons, based on the screenshot below - done in https://github.com/Terasology/LightAndShadow/pull/136
Add team symbol images before Hearts Team and Spades Team - done in #146 & https://github.com/Terasology/LightAndShadowResources/pull/56
Add wider images close to the bottom of the wider of the two boxes - done in https://github.com/Terasology/LightAndShadow/pull/136
Set font sizes accordingly - done in #146 & https://github.com/Terasology/LightAndShadowResources/pull/56
Set new background images - done in #146 & https://github.com/Terasology/LightAndShadowResources/pull/56
Change button's design, according to the background, font color ect.. (?) - done in #146 & https://github.com/Terasology/LightAndShadowResources/pull/56
Add different font sizes - done in https://github.com/Terasology/LightAndShadowResources/pull/56
Asset, buttons and element placement - done in https://github.com/Terasology/LightAndShadow/pull/146 & https://github.com/Terasology/LightAndShadowResources/pull/56
Change font-color for Victory-Defeat label - done in https://github.com/Terasology/LightAndShadowResources/pull/57 & https://github.com/Terasology/LightAndShadow/pull/148
Add a border to outside UIBox - done in https://github.com/Terasology/LightAndShadow/pull/149 & https://github.com/Terasology/LightAndShadowResources/pull/58

New Victory Screen	New Defeat Screen

Updates UI/UX project Weekly Updates

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member

Stefania Mak

Member