UI, textos y fuentes

#Objetos de UI

PyBlocks tiene tres tipos de objeto de UI. Los creás desde GameObject → UI: Text, Image y Button. Los objetos nuevos reciben nombres como ui text 1; renombralos en el Inspector, porque los bloques de UI encuentran su objetivo por nombre.

• UI Text: Text, Font, Font Size y Color, más un botón Center in Screen.
• UI Image: una imagen elegida con Select From Project, Visible, Preserve Aspect Ratio y Opacity.
• UI Button: Button Text, Font, Font Size, Text Color y un Background que puede ser Color (colores normal, hover, presionado y deshabilitado) o Image (una imagen por estado, Fit Mode Stretch, Contain o Cover, y un tinte). También tiene Enabled, Visible y Opacity.

#Ubicar la UI en pantalla

Los objetos de UI viven en el espacio del mundo, como cualquier otro objeto, y se dibujan por encima del juego. Con la cámara por defecto en (0, 0), la posición (0, 0) del mundo es el centro de la pantalla. Center in Screen centra el objeto de UI seleccionado en la posición (0, 0) del mundo, que coincide con el centro de la pantalla mientras la cámara siga ahí.

Si la cámara se desplaza o sigue al jugador, fijá el HUD a la pantalla: dale a cada objeto de UI un script con When Game Starts seguido de Pin to screen. Sus campos x e y son píxeles desde la esquina superior izquierda de la pantalla. Sky Hopper fija todo su HUD de esta forma.

#Cambiar la UI con bloques

La categoría UI cambia los objetos de UI mientras el juego corre. La mayoría de sus bloques tiene un campo UI donde escribís el nombre del objeto.

• Set UI Text y Set UI text from template, que reemplaza {name} por una variable de este objeto y {Object.name} por una variable de otro objeto.
• Show UI y Hide UI.
• Set UI Image, Set UI Color, Set UI Opacity y Set UI Font Size.
• Set Button Text, Set Button Image, Enable Button y Disable Button.
• Ayudas listas para usar: Set bar para barras de vida, Say in dialogue box y Choice menu.

Para reaccionar a un botón, abrí el script del propio botón y usá When This Button Clicked. Se ejecuta cuando el jugador aprieta y suelta el botón izquierdo del mouse sobre el botón mientras está habilitado.

#Importar una fuente

Todo archivo .ttf u .otf que esté en cualquier lugar dentro de la carpeta assets del proyecto es una fuente del proyecto. Por convención se usa assets/fonts.

1. Seleccioná un UI Text o un UI Button.
2. En el Inspector, hacé clic en Import font…, al lado de Font.
3. Elegí un archivo .ttf u .otf. PyBlocks lo copia a assets/fonts y lo selecciona. Si ya hay otro archivo distinto con el mismo nombre, la copia recibe un sufijo como _2; una fuente que ya está dentro del proyecto no se vuelve a copiar.

También podés copiar las fuentes a assets/fonts por tu cuenta. La lista de fuentes vuelve a revisar el proyecto cada vez que la abrís, y si sobrescribís un archivo de fuente en el disco, el editor lo recarga.

#El selector de fuentes

La lista Font del Inspector muestra primero Default y después tres grupos: Project fonts (cada una dibujada con su propia tipografía), Common fonts (fuentes instaladas como Arial, Segoe UI o Verdana, si están) y All installed fonts. Debajo, una línea de vista previa muestra la fuente elegida.

Si un objeto de UI apunta a una fuente que no se encuentra, la lista la muestra con (missing) si es un archivo del proyecto o (not installed) si es una fuente del sistema, y el juego usa la fuente por defecto, con una sola advertencia en la Console.

Las fuentes pixeladas que piden dibujarse sin suavizado, como las de los ejemplos, se muestran sin antialiasing para que queden nítidas.

#Cambiar la fuente durante el juego

Set UI Font cambia la fuente de un UI Text o un UI Button. Tiene tres campos:

• UI: el nombre del UI Text o UI Button.
• Font: la ruta de una fuente del proyecto, como assets/fonts/MyFont.ttf, el nombre de una familia instalada, como Arial, o Default para volver a la fuente por defecto.
• Size (0 = keep): 0 mantiene el tamaño actual; cualquier otro valor se limita entre 1 y 512.

El panel Problems marca los errores antes de apretar Play: un campo UI vacío, un nombre que no usa ningún UI Text ni UI Button de la escena, un archivo de fuente que no existe o un archivo que no es una fuente (como logo.png). Si durante el juego falta el archivo, el bloque mantiene la fuente actual y lo avisa una vez en la Console.

#Las fuentes de los ejemplos

Cada proyecto de ejemplo trae su propia fuente original en su carpeta assets/fonts. Están dedicadas al dominio público (CC0 1.0), o si preferís, bajo la SIL Open Font License 1.1, así que podés copiarlas a tus propios juegos.

• Hollowmere Serif (Bramblelight): una serif pixelada de libro de cuentos.
• Neon Grid (Neon Snake): una tipografía tecno cuadrada, para títulos.
• Pip Chunky (Sky Hopper): una pixelada gruesa y redondeada.
• Garden Soft (The Little Garden): suave, redondeada y con bordes lisos (no pixelada).

Las cuatro incluyen A–Z, a–z, 0–9, la puntuación común y los caracteres del español á é í ó ú ü ñ ¿ ¡. Las fuentes pixeladas tienen un em de 12 px: usá tamaños 12, 24, 36, 48, etc. para que los píxeles queden perfectos.

Para reutilizar una, hacé clic en Import font… y buscá la carpeta assets/fonts del ejemplo (los ejemplos que abriste desde Home están en Documents\PyBlocks). Mirá Proyectos de ejemplo.