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.
Existe un modo de escalado que Corona ha incluido recientemente, es el modo adaptativo. Es muy adecuado para aplicaciones (no para juegos), pero tiene el problema de que la programación se complica bastante. Intentaré hacer un post sobre este nuevo modo.
ResponderEliminarGracias por aportar su solución! Me encanta su blog espero con gans mas post sobre corona sdk. Los tutoriales sobre corona sdk estan muy des actualizados y creo que corona a pegado un gran salto desde su compra.
ResponderEliminarGracias por tus comentarios Miguel. Estoy de acuerdo contigo que casi todos los tutoriales existentes sobre Corona son muy antiguos, y ha habido muchos cambios. Mi intención es ir publicando un post cada semana. Corona es muy poco conocido en las comunidades de desarrolladores, y me gustaría darlo a conocer un poco más.
ResponderEliminarUna vez mas, gracias a ti. Estare muy atento a tu blog.
EliminarAl igual que tu creo que Corona SDK pasa muy desapercibido ya que la gente lo asocia con un motor sin potencia y para no programadores como Game Maker o Contruct 2.
Y cuando se habla de Lua la gente prefiere usar LOVE2D, el cual es un genial framework pero esa muy verde en el entorno móvil, siendo solo un exportador y sin casi opciones de monetizacion e integración con APIS nativas. Yo creo que si la gente ama tanto LOVE2D es por su gran comunidad y por que es Open Source, puede que es lo que le falte a corona sdk para poder triunfar.
Si eres fan de Lua como yo, te recomiendo también echarle un buen vistazo a http://www.defold.com/ un engine multiplataforma creado por KING (en realidad lo compro). Estos se basan en hacer el mejor engine para crear juegos sobre todo para plataformas móvil, con cosas muy "revolucionarias" como que se ajuste sin hacer nada a cualquier pantalla con resultados bastante sorprendentes. Otra de sus grandes características es que sus exportaciones pesan muy poco no como en Unity. Y para mi su único y gran punto malo, es que pese a que tiene integracion con facebook y mil cosas, no tiene ninguna forma de poner anuncios mas que usando webviews, la comunidad no para de pedirselo, pero dicen que no es su prioridad en este momento...