RobiiAragon/FueraDeEscala
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive UI for MainMenu & LoadingScreen

Browse Source 
Convert MainMenu and LoadingScreen UXML/USS to responsive layouts (percent-based sizing, media queries for wide/tall screens), adjust spacing, fonts and colors, and refine spaceship icon and button styles. Update MainMenu and LoadingScreen controllers to force the root TemplateContainer to occupy the full screen. Add Assets/Resources.meta. Update metadata and LFS object IDs for several Unity assets (ReflectionProbe-0.exr.meta importer fields and AssetOrigin, Komikax font LFS oid, Loading.unity, DefaultVolumeProfile.asset, and project settings hashes) to reflect import/serialization changes.
This commit is contained in:
Robii Aragon
2026-02-25 04:34:26 -08:00
parent 0e961ba4b1
commit 7d62bba411
13 changed files with 265 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
Assets/Game/Menus/MainMenu/MainMenu.uss
View File

@@ -1,54 +1,110 @@
/* 1. Fondo y Contenedor Principal */
.main-container {
width: 100%;
height: 100%;
flex-grow: 1;
align-items: center;
justify-content: center;
background-color: #2b0057;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background-color: rgb(43, 0, 87);
overflow: hidden;
padding-left: 6%;
right: 0;
bottom: 0;
top: 0;
left: 0;
}
/* 2. Título "Loco" */
.game-title {
font-size: 120px;
color: #ffffff;
color: rgb(255, 255, 255);
-unity-font-style: bold;
text-shadow: 5px 5px 0px #000000;
margin-bottom: 50px;
rotate: -5deg;
text-shadow: 5px 5px 0 rgb(0, 0, 0);
margin-bottom: 40px;
rotate: -5deg;
-unity-text-align: upper-left;
white-space: normal;
}
/* 3. Botones Base */
.menu-button {
width: 300px;
width: 20%;
min-width: 220px;
height: 80px;
margin: 15px;
background-color: #ffffff;
border-radius: 40px;
margin-top: 12px;
margin-bottom: 12px;
background-color: rgb(255, 255, 255);
border-radius: 40px;
border-width: 6px;
border-color: #000000;
font-size: 40px;
border-color: rgb(0, 0, 0);
font-size: 30px;
-unity-font-style: bold;
color: #000000;
color: rgb(0, 0, 0);
transition-property: scale, rotate, background-color;
transition-duration: 0.2s;
transition-timing-function: ease-out-back;
transition-timing-function: ease-out-back;
align-self: flex-start;
align-items: center;
justify-content: center;
-unity-text-align: middle-center;
}
/* 4. Estado Hover */
.menu-button:hover {
scale: 1.1 1.1;
rotate: 3deg;
background-color: #ffec00;
color: #2b0057;
scale: 1.1 1.1;
rotate: 3deg;
background-color: rgb(255, 236, 0);
color: rgb(43, 0, 87);
}
/* 5. Estado Pressed */
.menu-button:active {
scale: 0.95 0.95;
background-color: #ff8800;
scale: 0.95 0.95;
background-color: rgb(255, 136, 0);
}
/* Estilo botón Salir */
.button-exit { border-color: #ff0044; }
.button-exit:hover { background-color: #ffcccc; }
.button-exit {
border-color: rgb(255, 0, 68);
}
.button-exit:hover {
background-color: rgb(255, 204, 204);
}
/* === Responsive: 19:9 (ultra ancho, ej. 2280x1080, 3040x1440) === */
@media (min-width: 2200px) {
.game-title {
font-size: 150px;
margin-bottom: 50px;
}
.menu-button {
width: 18%;
min-width: 280px;
height: 95px;
font-size: 36px;
border-radius: 48px;
margin-top: 15px;
margin-bottom: 15px;
}
.main-container {
padding-left: 5%;
}
}
/* === Responsive: 16:10 (ej. 1920x1200, 2560x1600) === */
@media (min-height: 1150px) and (max-width: 2199px) {
.game-title {
font-size: 125px;
margin-bottom: 45px;
}
.menu-button {
width: 20%;
min-width: 230px;
height: 85px;
font-size: 32px;
border-radius: 42px;
margin-top: 14px;
margin-bottom: 14px;
}
.main-container {
padding-left: 6%;
}
}

12
Assets/Game/Menus/MainMenu/MainMenu.uxml
View File

@@ -1,11 +1,11 @@
<ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<Style src="project://database/Assets/Game/Menus/MainMenu/MainMenu.uss?fileID=7433441132597879392&amp;guid=01b499cb526398648b8a68e04b25779e&amp;type=3#MainMenu"/>
<ui:VisualElement name="Container" class="main-container" style="aspect-ratio: 1.777778;">
<ui:Label text="FUERA DE&#10;ESCALA!" name="Title" class="game-title" style="-unity-font-definition: url(&quot;project://database/Assets/Game/Menus/Fonts/KOMIKAX_.ttf?fileID=12800000&amp;guid=afbd8b3e208400c4ebf47631612ef61f&amp;type=3#KOMIKAX_&quot;); -unity-text-outline-width: 0; left: auto; top: auto; -unity-text-align: upper-center; transform-origin: center; translate: -500px -103px;"/>
<ui:VisualElement name="ButtonPanel" class="button-panel" style="translate: -503px 0;">
<ui:Button text="JUGAR" name="BtnPlay" class="menu-button" style="-unity-font-definition: url(&quot;project://database/Assets/Game/Menus/Fonts/KOMIKAX_.ttf?fileID=12800000&amp;guid=afbd8b3e208400c4ebf47631612ef61f&amp;type=3#KOMIKAX_&quot;); font-size: 30px; align-self: center; align-content: center; justify-content: center; align-items: center; -unity-text-align: middle-center;"/>
<ui:Button text="AJUSTES" name="BtnSettings" class="menu-button" style="-unity-font-definition: url(&quot;project://database/Assets/Game/Menus/Fonts/KOMIKAX_.ttf?fileID=12800000&amp;guid=afbd8b3e208400c4ebf47631612ef61f&amp;type=3#KOMIKAX_&quot;); font-size: 30px; align-self: center; align-items: center; justify-content: center; align-content: center; -unity-text-align: middle-center;"/>
<ui:Button text="SALIR" name="BtnExit" class="menu-button button-exit" style="-unity-font-definition: url(&quot;project://database/Assets/Game/Menus/Fonts/KOMIKAX_.ttf?fileID=12800000&amp;guid=afbd8b3e208400c4ebf47631612ef61f&amp;type=3#KOMIKAX_&quot;); font-size: 30px; align-items: center; align-self: center; align-content: center; justify-content: center; -unity-text-align: middle-center;"/>
<ui:VisualElement name="Container" class="main-container">
<ui:Label text="FUERA DE&#10;ESCALA!" name="Title" class="game-title" style="-unity-font-definition: url(&quot;project://database/Assets/Game/Menus/Fonts/KOMIKAX_.ttf?fileID=12800000&amp;guid=afbd8b3e208400c4ebf47631612ef61f&amp;type=3#KOMIKAX_&quot;); -unity-text-outline-width: 0; -unity-text-align: upper-center; transform-origin: center;"/>
<ui:VisualElement name="ButtonPanel" class="button-panel">
<ui:Button text="JUGAR" name="BtnPlay" class="menu-button" style="-unity-font-definition: url(&quot;project://database/Assets/Game/Menus/Fonts/KOMIKAX_.ttf?fileID=12800000&amp;guid=afbd8b3e208400c4ebf47631612ef61f&amp;type=3#KOMIKAX_&quot;); font-size: 30px;"/>
<ui:Button text="AJUSTES" name="BtnSettings" class="menu-button" style="-unity-font-definition: url(&quot;project://database/Assets/Game/Menus/Fonts/KOMIKAX_.ttf?fileID=12800000&amp;guid=afbd8b3e208400c4ebf47631612ef61f&amp;type=3#KOMIKAX_&quot;); font-size: 30px;"/>
<ui:Button text="SALIR" name="BtnExit" class="menu-button button-exit" style="-unity-font-definition: url(&quot;project://database/Assets/Game/Menus/Fonts/KOMIKAX_.ttf?fileID=12800000&amp;guid=afbd8b3e208400c4ebf47631612ef61f&amp;type=3#KOMIKAX_&quot;); font-size: 30px;"/>
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>

5
Assets/Game/Menus/MainMenu/MainMenuController.cs
View File

@@ -19,6 +19,11 @@ public class MainMenuController : MonoBehaviour
_doc = GetComponent<UIDocument>();
var root = _doc.rootVisualElement;
// Forzar que el TemplateContainer raíz ocupe toda la pantalla
root.style.flexGrow = 1;
root.style.width = new Length(100, LengthUnit.Percent);
root.style.height = new Length(100, LengthUnit.Percent);
_audioSource = gameObject.AddComponent<AudioSource>();
_playButton = root.Q<Button>("BtnPlay");