continue to work on UI
This commit is contained in:
+39
-17
@@ -1,5 +1,4 @@
|
||||
.container
|
||||
{
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 50px;
|
||||
@@ -9,28 +8,51 @@
|
||||
flex-grow: 1;
|
||||
height: 50px;
|
||||
max-width: 40px;
|
||||
background-image: url("project://database/Assets/Characters/pics/Sophie.png?fileID=2800000&guid=4999eb6bfdcacae48a7ed2020bd489d0&type=3#Sophie");
|
||||
background-image: url('"project://database/Assets/Characters/pics/Sophie.png?fileID=2800000&guid=4999eb6bfdcacae48a7ed2020bd489d0&type=3#Sophie"');
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-grow: 2;
|
||||
-unity-background-image-tint-color: rgba(2, 2, 2, 0.64);
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
align-items: auto;
|
||||
height: 40px;
|
||||
height: 25px;
|
||||
justify-content: left;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
width: 100px;
|
||||
height: 7px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
.top-elements-block {
|
||||
flex: 1
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: left;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-color: #00FF00;
|
||||
border-radius: 10px 0 0 10px; /* Rounded corners on the left side */
|
||||
.stat-container {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.progress-icon {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.top-bar-label{
|
||||
color: rgb(255, 255, 255);
|
||||
align-self: center;
|
||||
-unity-text-align: middle-left;
|
||||
}
|
||||
|
||||
.justify-center{
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
}
|
||||
@@ -2,9 +2,32 @@
|
||||
<Style src="project://database/Assets/UI/inGameHud.uss?fileID=7433441132597879392&guid=b1b33e86ffa27d840968609d368bc1ac&type=3#inGameHud" />
|
||||
<ui:VisualElement class="container">
|
||||
<ui:VisualElement name="CharacterImage" class="player-image" style="background-image: url("project://database/Assets/Characters/pics/Sophie.png?fileID=2800000&guid=4999eb6bfdcacae48a7ed2020bd489d0&type=3#Sophie");" />
|
||||
<ui:VisualElement name="Panel" class="panel">
|
||||
<ui:VisualElement name="VisualElement" class="progress-bar-container">
|
||||
<ui:VisualElement class="progress-bar-fill" name="progressFill" />
|
||||
<ui:VisualElement name="TopPanel" class="panel">
|
||||
<ui:VisualElement name="Stats" class="top-elements-block">
|
||||
<ui:VisualElement name="EnergyProgress" template="progressBar" class="stat-container">
|
||||
<Style src="project://database/Assets/UI/progressBar.uss?fileID=7433441132597879392&guid=755fc3f2b04b5014794dec9f2787b86e&type=3#progressBar" />
|
||||
<ui:VisualElement name="icon" class="progress-icon" style="background-image: url("project://database/Assets/3dAssets/Textures/EnergyIcon.png?fileID=2800000&guid=dfe1a973babd6cc4bb1a418ed2f3562e&type=3#EnergyIcon");" />
|
||||
<ui:VisualElement name="progressBarContainer" class="progress-bar-container">
|
||||
<ui:VisualElement name="progressFill" class="progress-bar-fill" />
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="HungerProgress" template="progressBar" class="stat-container">
|
||||
<Style src="project://database/Assets/UI/progressBar.uss?fileID=7433441132597879392&guid=755fc3f2b04b5014794dec9f2787b86e&type=3#progressBar" />
|
||||
<ui:VisualElement name="icon" class="progress-icon" style="background-image: url("project://database/Assets/3dAssets/Textures/FoodIcon.png?fileID=2800000&guid=bc479ad3f781c4540995d023a62d8c1d&type=3#FoodIcon");" />
|
||||
<ui:VisualElement name="progressBarContainer" class="progress-bar-container">
|
||||
<ui:VisualElement name="progressFill" class="progress-bar-fill" />
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="MoneyPanel" class="stat-container">
|
||||
<ui:VisualElement name="icon" style="background-image: url("project://database/Assets/3dAssets/Textures/MoneyIcon.png?fileID=2800000&guid=e46ce1f51442ea448bc1091e8d1367d9&type=3#MoneyIcon"); height: 15px; width: 30px; max-height: 15px;" />
|
||||
<ui:Label text="100000" class="top-bar-label" />
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="LocationInfo" class="top-elements-block justify-center">
|
||||
<ui:Label text="Nowhere" class="top-bar-label justify-center" />
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="TimeInfo" class="top-elements-block justify-center">
|
||||
<ui:Label text="Nowhere" class="top-bar-label" />
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
using UnityEngine;
|
||||
using UnityEngine.UIElements;
|
||||
|
||||
public class ProgressBar : MonoBehaviour
|
||||
{
|
||||
public VisualElement progressBarFill;
|
||||
private float progress = 0f;
|
||||
|
||||
void Start()
|
||||
{
|
||||
var root = GetComponent<UIDocument>().rootVisualElement;
|
||||
progressBarFill = root.Q<VisualElement>("progressFill");
|
||||
}
|
||||
|
||||
void Update()
|
||||
{
|
||||
// Update progress value here
|
||||
progress += Time.deltaTime * 0.1f; // Example increment
|
||||
progress = Mathf.Clamp01(progress);
|
||||
|
||||
// Update the width of the progress bar fill
|
||||
progressBarFill.style.width = new Length(progress * 100, LengthUnit.Percent);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 06b9647c1a0866f42968471850af5480
|
||||
@@ -0,0 +1,15 @@
|
||||
.progress-bar-container {
|
||||
width: 80px;
|
||||
position: relative;
|
||||
height: 7px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-color: #00FF00;
|
||||
border-radius: 10px 0 0 10px; /* Rounded corners on the left side */
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
|
||||
<Style src="project://database/Assets/UI/progressBar.uss?fileID=7433441132597879392&guid=755fc3f2b04b5014794dec9f2787b86e&type=3#progressBar" />
|
||||
<ui:VisualElement name="ImageContainer" />
|
||||
<ui:VisualElement name="VisualElement" class="progress-bar-container">
|
||||
<ui:VisualElement name="progressFill" class="progress-bar-fill" />
|
||||
</ui:VisualElement>
|
||||
</ui:UXML>
|
||||
@@ -0,0 +1,10 @@
|
||||
fileFormatVersion: 2
|
||||
guid: d1f095cbac9cb9c4a8df0d12f5567b30
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
|
||||
Reference in New Issue
Block a user