4. Agrega interfaz, audio y datos guardados

En este capítulo darás una presentación clara a la lógica del juego. Importarás una textura y un sonido corto, crearás una interfaz, conectarás los callbacks de los botones y confirmarás la identidad de guardado en la tarjeta de memoria.

El HUD terminado de 320 × 240: estado e insignia arriba y dos líneas de controles sobre Save y Reset. El Inspector muestra la posición, el tamaño, los anclajes y el campo Content de varias líneas de Controls Text.

Abre la imagen para verla a tamaño completo.

Importa los recursos del tutorial

Descarga los archivos si todavía no los tienes:

• polygon_badge.bmp
• checkpoint.wav

Cópialos en el proyecto:

Assets/Textures/polygon_badge.bmp
Assets/Audio/checkpoint.wav

En el panel Project:

1. Selecciona polygon_badge.bmp.
2. Usa el preset PS1 4bpp. Conserva el canal alfa desactivado y selecciona Apply.
3. Selecciona checkpoint.wav.
4. Establece Target Sample Rate en 22050 y deja Loop y Streaming Music (CD-XA) desactivados. Los archivos se importan automáticamente; selecciona Apply & Import si cambiaste estas opciones, o Reimport para repetir la conversión.

La insignia ahora tiene un GUID de textura y el sonido tiene una salida VAG residente. El sonido es deliberadamente corto para consumir muy poca SPU RAM.

Agrega una respuesta de audio

1. Selecciona Door Trigger.
2. Elige Add Component > Audio Source.
3. En Select AudioClip, elige checkpoint y selecciona Select.
4. Establece Volume en 0.8.
5. Desactiva Loop y Play On Start.

El script Lua ya llama a AudioSource.Play(gameObjectId) al abrir la puerta o guardar un punto de control. Como Lua Behaviour y Audio Source comparten Door Trigger, no hace falta otro ID de GameObject para el audio.

Activa UI Canvas

Abre View > Show UI Canvas. Selecciona la raíz UI Canvas en la Hierarchy y confirma lo siguiente:

• Enabled está activado;
• Reference Width es 320;
• Reference Height es 240.

Crea cada elemento desde la barra de herramientas de UI Canvas. Antes de cada creación, selecciona la raíz UI Canvas; de lo contrario, el elemento seleccionado puede convertirse en su padre. En el Inspector de cada elemento, establece Parent en Canvas y consérvalo en Main. Así, las coordenadas siguientes no dependen de la selección anterior.

En Rect Transform, establece Anchor Min, Anchor Max y Pivot en (0, 0) para todos los elementos. Usa estas posiciones y tamaños en píxeles, medidos desde la esquina superior izquierda:

Tipo	Nombre	Anchored Position	Size Delta	Contenido
Panel	HUD Panel	0, 0	320, 40	Fondo oscuro, Sort Order 0
Image	Badge Image	280, 4	32, 32	Texture polygon_badge, Preserve Aspect activado
Text	Status Text	8, 8	264, 24	WALK TO THE DOOR
Text	Controls Text	8, 176	304, 24	LS MOVE RS LOOK, seguido de un salto de línea y CROSS UI SQUARE LOAD
Button	Save Button	72, 208	80, 24	SAVE
Button	Reset Button	168, 208	80, 24	RESET

Introduce las dos líneas de Controls Text con Enter dentro del campo Content. Establece Sort Order en 1 para los elementos en primer plano. Usa Text Color blanco, alineación izquierda para los textos, etiquetas centradas en los botones y colores de relleno contrastantes. Conserva la fuente integrada en su tamaño normal. El script divide los mensajes de estado largos a los 32 caracteres para ajustarlos a la fuente integrada de PS1 y usa dos líneas dentro del campo de texto de 63 bytes; la Console conserva el diagnóstico completo. Revisa ambas líneas en la vista previa. Más adelante puedes agregar ajusta de línea con fuentes de mapa de bits mediante el flujo de fuentes.

Usa un nombre corto exactamente como se muestra. Lua llama a UI.Find() por nombre, por lo que Status Text y Save Button forman parte del contrato del juego.

Asigna la textura de Badge Image arrastrando polygon_badge a su campo Texture o seleccionándola en el selector de texturas. Usa el Size Delta 32, 32 indicado arriba. Set Native Size es opcional y reemplaza el tamaño con las dimensiones importadas; si lo usas, restaura después el tamaño del tutorial.

Conecta los botones con Lua

Selecciona Save Button y abre su sección Interaction:

Campo	Valor
Interactable	Activado
Automatic Navigation	Activado
Target Entity	Door Trigger
Function	saveNow

Configura Reset Button de la misma forma, pero establece Function en resetProgress.

Con solo dos botones, la navegación automática es suficiente. El script da el foco a Save Button en Start. El D-Pad cambia el foco y Cross ejecuta el callback Lua seleccionado. El destino de un Button debe ser un GameObject con el Lua Behaviour correspondiente; usar Door como destino fallaría porque no tiene un script de comportamiento.

Comprende el flujo de guardado

El proyecto ya usa lo siguiente:

Save File ID: TWO_ROOM_RELAY
Display Title: TWO ROOM RELAY

El tutorial usa valores tipados de PlayerPrefs. PlayerPrefs.Save() conserva todo el conjunto de claves y valores. En PS1, utiliza un bloque de 8,192 bytes en la Memory Card del Port 1. En Play Mode del editor, escribe un archivo local con los mismos límites de claves y valores. Los errores de guardado se informan mediante SaveData.GetLastError().

El tutorial usa cuatro claves:

• two_room_relay.door_open;
• two_room_relay.x;
• two_room_relay.y;
• two_room_relay.z.

Esto queda muy por debajo del límite de 32 entradas del proyecto.

Punto de revisión 4

Presiona Ctrl+S, entra en Play Mode y valida en este orden:

1. La insignia, el texto de estado, el texto de controles y ambos botones están visibles.
2. Cross sobre Save Button cambia el estado a CHECKPOINT SAVED y reproduce el sonido.
3. Entrar en Door Trigger desactiva la puerta, actualiza el estado y reproduce el sonido.
4. Entra en Room B y presiona Square. El jugador regresa a la posición guardada.
5. Da el foco a Reset Button y presiona Cross. Si el guardado es exitoso, el jugador regresa a la posición inicial del capítulo en Room A, la puerta se activa y el estado cambia a PROGRESS RESET.

Si la interfaz aparece pero un botón no hace nada, verifica los campos Target Entity y Function carácter por carácter. Continúa con Prueba y compila.

Square carga el último punto de control guardado. Si el guardado falla después de abrir la puerta, restaura la disponibilidad de la tarjeta y vuelve a usar Save. La puerta permanece abierta para que puedas seguir jugando. Reset devuelve al jugador a Room A solo después de guardar correctamente el progreso borrado.

Deja de moverte antes de navegar con el D-Pad: en este ejemplo, el movimiento y la navegación de la interfaz comparten esos botones.