Empecemos con la alineación.
Alineación de la pantalla virtual
Como vimos, en modo "letterbox", el escalado puede producir bandas laterales (o superior/inferior) si las proporciones de la pantalla virtual no coinciden con las de la pantalla real. En estos casos Corona por defecto centra la pantalla virtual en la pantalla física, es decir, deja el mismo espacio arriba y abajo, o bien el mismo espacio a izquierda y derecha.
Sin embargo, este comportamiento por defecto se puede cambiar. Para ello, recurrimos al fichero config.lua:
application = {
content = {
width = 320,
height = 480,
scale = "letterBox",
xAlign = "center",
yAlign = "center",
},
}
Hemos añadido dos nuevos miembros a la conocida tabla application.content
xAlign indica la alineación horizontal
yAlign indica la alineación vertical
Con estos dos nuevos parámetros podemos cambiar la forma en que Corona sitúa la pantalla virtual dentro de la pantalla física.
El parámetro xAlign puede tomar los siguientes valores:
- "left"
- "center"
- "right"
Y el parámetro yAlign puede tomar los siguientes valores:
- "top"
- "center"
- "bottom"
De esta forma podemos controlar cómo se encaja la pantalla virtual en la física. En unos momento vamos a ver la utilidad de estos dos parámetros.
Solución para los juegos
Para los juegos, yo utilizo siempre el modo letterbox, para no perder información y para no deformar. Como van a aparecer bandas laterales en muchos casos, también utilizo xAlign = "center", yAlign="center" de esta forma me aseguro que el juego propiamente dicho aparece centrado en la pantalla.
¿Qué hago con las bandas laterales? Utilizo las constantes:
display.actualContentWidth
display.actualContentHeight
para poner un rectángulo o una imagen en el fondo que encaje bien con el resto del juego. Este rectángulo no aparecerá si las proporciones del dispositivo son iguales que las de la pantalla virtual.
El juego aparecerá escalado en función de la pantalla del dispositivo sin ninguna deformación.
Esta solución es muy sencilla de implementar y funciona en todos los casos.
Solución para las aplicaciones
Paradójicamente, el caso de las aplicaciones es algo más complejo que el de los juegos (aunque dije que el desarrollo de juegos es más difícil que el de aplicaciones).
En este caso, la aplicación tiene que mostrar una serie de elementos (widgets) en la pantalla y no siempre lo mejor es que salga centrada en pantalla. Por ejemplo, una aplicación que tenga una barra superior con algunas opciones de menú tiene que salir siempre arriba del todo, no vale que salga un poco más abajo por causa de las bandas del letterbox. Igualmente, si tenemos pestañas abajo, éstas tiene que salir abajo del todo.
Mi solución en este caso, es usar de nuevo "letterbox" como modo de escalado (no quiero deformaciones ni pérdida de información), pero en este caso alineo la pantalla virtual a la parte superior. Mi fichero config.lua sería algo así como:
application = {
content = {
width = 320,
height = 480,
scale = "letterBox",
xAlign = "center",
yAlign = "top",
},
}
De esta forma consigo que el contenido se visualice a partir de la parte superior de la pantalla. El problema entonces es cómo conseguir rellenar el espacio sobrante por abajo. Lo que hago es, utilizando las constantes:
display.actualContentWidth
display.actualContentHeight
puedo situar los elementos inferiores ajustados a la parte inferior de la pantalla (en función de estas constantes). Y el espacio que sobra en el centro, lo utilizo para los elementos centrales.
Como se puede intuir, la parte central no va a tener un tamaño fijo, sino que dependerá de las proporciones del dispositivo físico.
Normalmente la parte central suele ser una lista de elementos con scroll o algo similar, con lo cual, es fácilmente adaptable a un tamaño variable.
Ya veremos ejemplos de todo esto en futuras entradas.
