Las constantes:
display.contentWidth
display.contentHeight
nos dan el tamaño de la pantalla virtual (en pixels virtuales).
Todo esto en cuanto al modo "letterbox", pero éste no es el único modo de escalado que tiene Corona. En esta entrada vamos a tratar este tema para conocerlos todos y ver cuál se adapta mejor a las necesidades de nuestra aplicación o juego.
Escalado
En Corona, como ya he dicho varias veces, trabajamos con una pantalla virtual de un determinado tamaño fijo, y nuestro programa siempre va a trabajar con pixels en las coordenadas de esa pantalla virtual.
Cuando la aplicación se ejecuta en un dispositivo, los pixels virtuales se expanden (o se contraen) para rellenar la pantalla del dispositivo. A esto se le llama escalado.
Nuestro programa no tiene porqué conocer el tamaño real del dispositivo, simplemente trabaja sobre la pantalla virtual, y Corona se encargará de escalar el contenido a la pantalla física. Corona escalará todos los objetos gráficos, el texto, las imágenes, etc.
Es muy habitual definir una pantalla virtual de 320x480. Se suele utilizar este tamaño porque casi todos los dispositivos iOS y muchos Android tienen la misma relación de aspecto.
Los modos de escalado que ofrece Corona son:
- letterbox
- zoomEven
- zoomStretch
- none
Modo letterbox
Este es el modo más utilizado y el que se suele utilizar en caso de duda.
El modo letterbox nunca deforma ni corta los objetos. Por tanto, es el modo más fácil de utilizar.
Todo lo que se sitúe dentro de la pantalla virtual se mostrará en la pantalla del dispositivo sin deformaciones y sin que los objetos se salgan de la pantalla.
En modo letterbox hay tres casos a considerar:
En el primer caso, la relación de aspecto de la pantalla virtual coincide con la del dispositivo, con lo cual no tenemos que hacer nada y el escalado será perfecto.
En el segundo caso, el dispositivo es algo alargado, y por tanto, como la pantalla virtual no se puede deformar, quedará un espacio arriba y abajo de la pantalla real que no se pueda rellenar con la pantalla virtual.
En el tercer caso, el dispositivo es más ancho y por tanto, al encajar la pantalla virtual en el dispositivo (sin deformar), quedará espacio a izquierda y derecha sin deformar.
En la práctica, rellenaremos estas zonas fuera de la pantalla virtual con contenido que no sea relevante, por ejemplo con un fondo. No podemos poner objetos que sean importantes porque en algunos dispositivos no se va a visualizar.
Podemos saber el espacio que tenemos fuera de la pantalla virtual con las constantes:
display.actualContentWidth
display.actualContentHeight
que nos indican el tamaño total que disponemos, en coordenadas virtuales.
Así por ejemplo, si queremos poner un fondo que ocupe la pantalla entera:
local bg = display.newRect(
display.contentCenterX, display.contentCenterY,
display.actualContentWidth, display.actualContentHeight)
bg:setFillColor(0.5, 0.4, 0,7)
Y podemos poner encima otro rectángulo que ocupe la pantalla virtual completamente, que es donde deberíamos situar el contenido importante de nuestra aplicación:
local content = display.newRect(
display.contentCenterX, display.contentCenterY,
display.contentWidth, display.contentHeight)
content:setFillColor(0.6, 0.5, 0,8)
Ahora, dependiendo del dispositivo, veremos un caso u otro de los mencionados anteriormente para letterbox.
El fichero config.lau contiene lo siguiente:
application = {
content = {
width = 320,
height = 480,
scale = "letterbox",
},
}
Modo zoomEven
Este modo es el más utilizado, después de letterbox. En este modo, la pantalla virtual se expande lo máximo posible, y si es necesario habrá partes de la pantalla virtual que quedarán fuera del dispositivo y no se verán. El escalado es proporcional, sin deformación (escala igual en un eje que en el otro, igual que letterbox). Lo bueno que tiene este modo es que no hay barras laterales sin rellenar. Pero tiene el inconveniente de que pueden quedar zonas de la pantalla que no se muestran.
application = {
content = {
width = 320,
height = 480,
scale = "zoomEven",
},
}
Y el siguiente main.lua:
local bg = display.newRect( display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight )
bg:setFillColor( 1, 1, 1 )
local circle = display.newCircle( display.contentCenterX, display.contentCenterY, display.contentWidth/2 )
circle:setFillColor( 0.3, 0.6, 0.3 )
En blanco vemos la pantalla virtual y en el centro de ésta un círculo verde, que no se deforma en ningún dispositivo, pero que se puede salir fuera de la pantalla y no dibujarse completamente según el tamaño del dispositivo final.
Si el dispositivo es iPhone 4, entonces veremos el círculo completo, porque la relación de aspecto del iPhone 4 es la misma que la de nuestra pantalla virtual (tamaños distintos pero misma relación de aspecto). Sin embargo en otros dispositivos como el iPhone 5, más alargado, el círculo se cortará.
zoomStretch
Este modo escala, deformando si es necesario, la pantalla virtual a la pantalla física. Es decir, puede escalar de forma distinta en el eje X y en el eje Y.
No se utiliza mucho este modo porque la deformación que produce no suele ser aceptable. No se me ocurre ninguna aplicación en la que pudiera ser útil este modo. Pero es bueno saber que existe, por si acaso es necesario.
none
Este modo es equivalente a no tener ningún modo de escalado en config.lua
Resumen
- letterbox: no deforma, puede haber barras laterales, no recorta
- zoomEven: no deforma, no puede haber barras laterales, puede recortar
- zoomStretch: puede deformar, no puede haber barras laterales, no recorta
