Adding HUD!
This commit is contained in:
parent
ff62b1e9f1
commit
f7720a9915
20 changed files with 1482 additions and 92 deletions
342
Assets/_Project/UI/HUD.uss
Normal file
342
Assets/_Project/UI/HUD.uss
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
/* ============================================================
|
||||
HUD.uss — Match HUD stylesheet
|
||||
Layout mirrors wintermaul_ui_v4.html; visual style is
|
||||
placeholder and will be replaced in Phase 2.
|
||||
============================================================ */
|
||||
|
||||
/* Root: covers full screen, transparent so the 3D scene shows through.
|
||||
PickingMode.Ignore is set in C# so clicks in the map area reach the scene. */
|
||||
.hud-root {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
flex-direction: column;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* ---- TOP BAR ------------------------------------------------ */
|
||||
|
||||
.top-bar {
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
background-color: rgba(22, 20, 10, 0.92);
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: rgba(90, 80, 32, 1);
|
||||
}
|
||||
|
||||
.res-group {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gold-label,
|
||||
.income-label,
|
||||
.wave-label,
|
||||
.dimmed-label {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.top-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.gold-label {
|
||||
color: rgb(255, 224, 102);
|
||||
font-size: 12px;
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
.income-label {
|
||||
color: rgb(136, 204, 255);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.wave-label {
|
||||
color: rgb(255, 170, 170);
|
||||
font-size: 11px;
|
||||
-unity-font-style: bold;
|
||||
background-color: rgba(58, 26, 26, 0.85);
|
||||
border-width: 1px;
|
||||
border-color: rgba(138, 58, 58, 1);
|
||||
border-radius: 3px;
|
||||
padding: 1px 7px;
|
||||
}
|
||||
|
||||
.dimmed-label {
|
||||
color: rgb(136, 136, 136);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ---- MAIN AREA ---------------------------------------------- */
|
||||
|
||||
.main-area {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Transparent viewport area. PickingMode set to Ignore in C#. */
|
||||
.map-area {
|
||||
flex: 1;
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.rejection-label {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
-unity-text-align: upper-center;
|
||||
color: rgb(255, 90, 90);
|
||||
font-size: 14px;
|
||||
-unity-font-style: bold;
|
||||
background-color: rgba(0, 0, 0, 0.65);
|
||||
padding: 4px 14px;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---- RIGHT SCOREBOARD PANEL --------------------------------- */
|
||||
|
||||
.right-panel {
|
||||
width: 130px;
|
||||
flex-shrink: 0;
|
||||
align-self: flex-start;
|
||||
flex-direction: column;
|
||||
background-color: rgb(22, 22, 16);
|
||||
border-left-width: 1px;
|
||||
border-left-color: rgba(58, 58, 32, 1);
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: rgba(58, 58, 32, 1);
|
||||
border-radius: 0 0 0 3px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 4px 6px;
|
||||
font-size: 10px;
|
||||
color: rgb(255, 224, 102);
|
||||
-unity-font-style: bold;
|
||||
-unity-text-align: upper-center;
|
||||
background-color: rgb(42, 36, 16);
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: rgba(58, 58, 32, 1);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
padding: 4px 6px 2px;
|
||||
font-size: 9px;
|
||||
color: rgb(102, 102, 80);
|
||||
}
|
||||
|
||||
.player-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.income-row {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.income-key {
|
||||
font-size: 10px;
|
||||
color: rgb(136, 136, 112);
|
||||
}
|
||||
|
||||
.income-val {
|
||||
font-size: 10px;
|
||||
color: rgb(255, 224, 102);
|
||||
}
|
||||
|
||||
/* ---- BOTTOM UI STRIP ---------------------------------------- */
|
||||
|
||||
.bottom-ui {
|
||||
height: 110px;
|
||||
flex-shrink: 0;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
background-color: rgb(19, 15, 4);
|
||||
border-top-width: 2px;
|
||||
border-top-color: rgba(90, 74, 16, 1);
|
||||
}
|
||||
|
||||
/* Minimap — RenderTexture applied as background-image at runtime */
|
||||
.minimap {
|
||||
width: 110px;
|
||||
flex-shrink: 0;
|
||||
background-color: rgb(10, 26, 10);
|
||||
border-right-width: 1px;
|
||||
border-right-color: rgba(42, 58, 26, 1);
|
||||
}
|
||||
|
||||
/* Portrait */
|
||||
.portrait-box {
|
||||
width: 84px;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
border-right-width: 1px;
|
||||
border-right-color: rgba(58, 48, 16, 1);
|
||||
}
|
||||
|
||||
.portrait-image {
|
||||
width: 58px;
|
||||
height: 72px;
|
||||
margin-bottom: 3px;
|
||||
background-color: rgb(13, 26, 13);
|
||||
border-width: 1px;
|
||||
border-color: rgba(58, 90, 58, 1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.portrait-name {
|
||||
font-size: 9px;
|
||||
color: rgb(255, 224, 102);
|
||||
-unity-text-align: upper-center;
|
||||
}
|
||||
|
||||
/* Command grid: 3 row-containers injected at runtime, each holding 4 buttons */
|
||||
.command-grid {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.cmd-row {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
/* Individual command buttons */
|
||||
.cmd-btn {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2px;
|
||||
background-color: rgb(26, 26, 10);
|
||||
border-width: 1px;
|
||||
border-color: rgba(58, 58, 26, 1);
|
||||
border-radius: 3px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
/* Icon area placeholder — replaced by background-image when art exists */
|
||||
.cmd-icon-placeholder {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
||||
.cmd-btn:hover {
|
||||
background-color: rgb(42, 42, 21);
|
||||
border-color: rgba(106, 106, 48, 1);
|
||||
}
|
||||
|
||||
.cmd-btn.active {
|
||||
background-color: rgb(42, 38, 16);
|
||||
border-color: rgb(255, 224, 102);
|
||||
}
|
||||
|
||||
.cmd-btn.unaffordable {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.cmd-btn.empty-slot {
|
||||
opacity: 0.12;
|
||||
}
|
||||
|
||||
.cmd-icon {
|
||||
font-size: 14px;
|
||||
-unity-text-align: upper-center;
|
||||
color: rgb(255, 255, 255);
|
||||
/* Icon is set as text on a Label; swap for background-image when art exists */
|
||||
}
|
||||
|
||||
.cmd-name {
|
||||
font-size: 7px;
|
||||
color: rgb(170, 170, 170);
|
||||
-unity-text-align: upper-center;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.cmd-cost {
|
||||
font-size: 7px;
|
||||
color: rgb(255, 224, 102);
|
||||
-unity-text-align: upper-center;
|
||||
}
|
||||
|
||||
/* Side column: Upgrade / (empty) / Sell */
|
||||
.side-col {
|
||||
width: 66px;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
padding: 4px;
|
||||
border-left-width: 2px;
|
||||
border-left-color: rgba(58, 48, 16, 1);
|
||||
}
|
||||
|
||||
.side-col > * {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
|
||||
.side-btn {
|
||||
flex: 1;
|
||||
/* inherits .cmd-btn styles */
|
||||
}
|
||||
|
||||
.side-empty {
|
||||
flex: 1;
|
||||
opacity: 0.12;
|
||||
}
|
||||
|
||||
/* Tooltip panel */
|
||||
.tooltip-box {
|
||||
width: 164px;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
border-left-width: 1px;
|
||||
border-left-color: rgba(58, 48, 16, 1);
|
||||
}
|
||||
|
||||
.tt-title {
|
||||
font-size: 11px;
|
||||
color: rgb(255, 224, 102);
|
||||
-unity-font-style: bold;
|
||||
margin-bottom: 4px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.tt-desc {
|
||||
font-size: 9px;
|
||||
color: rgb(170, 168, 144);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.tt-stats {
|
||||
font-size: 9px;
|
||||
color: rgb(136, 170, 136);
|
||||
margin-top: 3px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.tt-cost {
|
||||
font-size: 9px;
|
||||
color: rgb(255, 224, 102);
|
||||
margin-top: 4px;
|
||||
}
|
||||
12
Assets/_Project/UI/HUD.uss.meta
Normal file
12
Assets/_Project/UI/HUD.uss.meta
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
fileFormatVersion: 2
|
||||
guid: 7997d647c4888b94c870943338c17d41
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
unsupportedSelectorAction: 0
|
||||
71
Assets/_Project/UI/HUD.uxml
Normal file
71
Assets/_Project/UI/HUD.uxml
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<ui:UXML xmlns:ui="UnityEngine.UIElements" editor-extension-mode="False">
|
||||
<Style src="project://database/Assets/_Project/UI/HUD.uss?fileID=7433441132597879392&guid=7997d647c4888b94c870943338c17d41&type=3#HUD"/>
|
||||
<ui:VisualElement name="hud-root" class="hud-root">
|
||||
<ui:VisualElement name="top-bar" class="top-bar">
|
||||
<ui:VisualElement class="res-group">
|
||||
<ui:Label name="gold-label" text="0 g" class="gold-label"/>
|
||||
<ui:Label name="income-label" text="+? g/wave" class="income-label"/>
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement class="top-spacer"/>
|
||||
<ui:VisualElement class="res-group">
|
||||
<ui:Label name="wave-label" text="Wave ? / ?" class="wave-label"/>
|
||||
<ui:Label name="next-wave-label" text="next: --:--" class="dimmed-label"/>
|
||||
<ui:Label name="leaked-label" text="leaked: ?" class="dimmed-label"/>
|
||||
<ui:Label name="lives-label" text="lives: ?" class="dimmed-label"/>
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="main-area" class="main-area">
|
||||
<ui:VisualElement name="map-area" class="map-area">
|
||||
<ui:Label name="rejection-label" text="" class="rejection-label"/>
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="right-panel" class="right-panel">
|
||||
<ui:Label text="scoreboard" class="panel-header"/>
|
||||
<ui:Label text="name · lives · leaked" class="section-label"/>
|
||||
<ui:VisualElement name="player-list" class="player-list"/>
|
||||
<ui:Label text="income / wave" class="section-label" style="margin-top: 6px;"/>
|
||||
<ui:VisualElement class="income-row">
|
||||
<ui:Label text="base" class="income-key"/>
|
||||
<ui:Label name="income-base-label" text="+? g" class="income-val"/>
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement class="income-row">
|
||||
<ui:Label text="bonus" class="income-key"/>
|
||||
<ui:Label name="income-bonus-label" text="+? g" class="income-val"/>
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement class="income-row">
|
||||
<ui:Label text="total" class="income-key"/>
|
||||
<ui:Label name="income-total-label" text="+? g" class="income-val"/>
|
||||
</ui:VisualElement>
|
||||
<ui:Label text="race" class="section-label" style="margin-top: 4px;"/>
|
||||
<ui:VisualElement class="income-row">
|
||||
<ui:Label text="builder" class="income-key"/>
|
||||
<ui:Label name="race-label" text="?" class="income-val"/>
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="bottom-ui" class="bottom-ui">
|
||||
<ui:VisualElement name="minimap" class="minimap"/>
|
||||
<ui:VisualElement name="portrait-box" class="portrait-box">
|
||||
<ui:VisualElement name="portrait-image" class="portrait-image"/>
|
||||
<ui:Label name="portrait-name" text="" class="portrait-name"/>
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="command-grid" class="command-grid"/>
|
||||
<ui:VisualElement name="side-col" class="side-col">
|
||||
<ui:Button name="upgrade-btn" class="cmd-btn side-btn">
|
||||
<ui:Label text="↑" class="cmd-icon"/>
|
||||
<ui:Label text="Upgrade" class="cmd-name"/>
|
||||
</ui:Button>
|
||||
<ui:VisualElement class="side-empty"/>
|
||||
<ui:Button name="sell-btn" class="cmd-btn side-btn">
|
||||
<ui:Label text="✕" class="cmd-icon"/>
|
||||
<ui:Label text="Sell" class="cmd-name"/>
|
||||
</ui:Button>
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="tooltip-box" class="tooltip-box">
|
||||
<ui:Label name="tt-title" text="" class="tt-title"/>
|
||||
<ui:Label name="tt-desc" text="" class="tt-desc"/>
|
||||
<ui:Label name="tt-stats" text="" class="tt-stats"/>
|
||||
<ui:Label name="tt-cost" text="" class="tt-cost"/>
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
</ui:UXML>
|
||||
10
Assets/_Project/UI/HUD.uxml.meta
Normal file
10
Assets/_Project/UI/HUD.uxml.meta
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
fileFormatVersion: 2
|
||||
guid: eba711c1def2b194584102ceb5517c48
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
|
||||
52
Assets/_Project/UI/HUDPanelSettings.asset
Normal file
52
Assets/_Project/UI/HUDPanelSettings.asset
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
%YAML 1.1
|
||||
%TAG !u! tag:unity3d.com,2011:
|
||||
--- !u!114 &11400000
|
||||
MonoBehaviour:
|
||||
m_ObjectHideFlags: 0
|
||||
m_CorrespondingSourceObject: {fileID: 0}
|
||||
m_PrefabInstance: {fileID: 0}
|
||||
m_PrefabAsset: {fileID: 0}
|
||||
m_GameObject: {fileID: 0}
|
||||
m_Enabled: 1
|
||||
m_EditorHideFlags: 0
|
||||
m_Script: {fileID: 19101, guid: 0000000000000000e000000000000000, type: 0}
|
||||
m_Name: HUDPanelSettings
|
||||
m_EditorClassIdentifier: UnityEngine.dll::UnityEngine.UIElements.PanelSettings
|
||||
themeUss: {fileID: -4733365628477956816, guid: b37fce804ca93da429eeb014b35d9cc2, type: 3}
|
||||
m_DisableNoThemeWarning: 0
|
||||
m_TargetTexture: {fileID: 0}
|
||||
m_RenderMode: 0
|
||||
m_ColliderUpdateMode: 0
|
||||
m_ColliderIsTrigger: 1
|
||||
m_ScaleMode: 1
|
||||
m_ReferenceSpritePixelsPerUnit: 100
|
||||
m_PixelsPerUnit: 100
|
||||
m_Scale: 1
|
||||
m_ReferenceDpi: 96
|
||||
m_FallbackDpi: 96
|
||||
m_ReferenceResolution: {x: 1200, y: 800}
|
||||
m_ScreenMatchMode: 0
|
||||
m_Match: 0
|
||||
m_SortingOrder: 0
|
||||
m_TargetDisplay: 0
|
||||
m_BindingLogLevel: 0
|
||||
m_ClearDepthStencil: 1
|
||||
m_ClearColor: 0
|
||||
m_ColorClearValue: {r: 0, g: 0, b: 0, a: 0}
|
||||
m_VertexBudget: 0
|
||||
m_TextureSlotCount: 8
|
||||
m_DynamicAtlasSettings:
|
||||
m_MinAtlasSize: 64
|
||||
m_MaxAtlasSize: 4096
|
||||
m_MaxSubTextureSize: 64
|
||||
m_ActiveFilters: -1
|
||||
m_AtlasBlitShader: {fileID: 9101, guid: 0000000000000000f000000000000000, type: 0}
|
||||
m_DefaultShader: {fileID: 9100, guid: 0000000000000000f000000000000000, type: 0}
|
||||
m_RuntimeGaussianBlurShader: {fileID: 20300, guid: 0000000000000000f000000000000000, type: 0}
|
||||
m_RuntimeColorEffectShader: {fileID: 20301, guid: 0000000000000000f000000000000000, type: 0}
|
||||
m_SDFShader: {fileID: 19011, guid: 0000000000000000f000000000000000, type: 0}
|
||||
m_BitmapShader: {fileID: 9001, guid: 0000000000000000f000000000000000, type: 0}
|
||||
m_SpriteShader: {fileID: 19012, guid: 0000000000000000f000000000000000, type: 0}
|
||||
m_ICUDataAsset: {fileID: 0}
|
||||
forceGammaRendering: 0
|
||||
textSettings: {fileID: 0}
|
||||
8
Assets/_Project/UI/HUDPanelSettings.asset.meta
Normal file
8
Assets/_Project/UI/HUDPanelSettings.asset.meta
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
fileFormatVersion: 2
|
||||
guid: 6aa0af71585acea4db4995c3931dc946
|
||||
NativeFormatImporter:
|
||||
externalObjects: {}
|
||||
mainObjectFileID: 11400000
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
Loading…
Add table
Add a link
Reference in a new issue