XNA: letterboxing

marzo 11, 2011


Uno de los aspectos que esta haciendo que me sienta satisfecho con el nuevo proyecto que llevo entre manos es el resolver ciertos problemas que me parecian complicados.

Uno de ellos sin duda se trata de mantener el aspect ratio de la pantalla para que la imagen no se viese distorsionada.

Cuando estuve desarrollando Wonderwall me di cuenta que si jugabas a pantalla completa en pantallas panorámicas la imagen se estiraba para llenar toda la pantalla perdiendo de este modo las proporciones que le había dado.

Pues bien, este problema se puede solucionar a través de una sencilla matriz de transformación que se aplicará al SpriteBatch de modo que cuando dibuje en pantalla la matriz transformará todos los elementos haciendo que conservar el aspect ratio.

Vamos a ver como quedaría la cosa:

Matrix transform = Matrix.CreateScale(ASPECTWIDTHRATIO, ASPECTWIDTHRATIO, 1) *
Matrix.CreateTranslation(0, (VIEWPORTHEIGHT / ASPECTHD) / 4f, 0);

donde ASPECTWIDTHRATIO es el ancho de la pantalla que deseamos que tenga dividido el ancho real de la pantalla. VIEWPORTHEIGHT es la altura real de la pantalla y ASPECTHD es 16/9 (widescreen).

De este modo conseguimos que la matriz escale la imagen al ancho que queremos (en este caso, pero si pusiéramos que escalase al alto que deseamos seria cambiar ASPECTWIDTHRATIO por un ASPECTHEIGHTRATIO y listo) manteniendo la distancia en eje Z (el 1 del primer paréntesis hace referencia al eje Z) y lo multiplicamos por una matriz de traslación para centrar la imagen en la pantalla.

Y ya solo queda añadirla al SpriteBatch al iniciar el método Begin tal que así:

spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend, null, null, null, null, transform);

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: