Escalas

En algunos casos puede ser necesario redimensionar nuestro juego cambiando el tamaño de la ventana de nuestro juego o el tamaño con el que se muestran algunos elementos.

Este curso ha sido marcado como anticuado y no está siendo revisado de forma activa. Es posible que la información pueda estar desactualizada o que los enlaces se hayan roto.

Cuando trabajamos con gráficos en Slick 2D, uno de los aspectos que más nos puede llamar la atención es cómo manejar el tamaño de los sprites y tilesets para que se adapten bien a nuestra pantalla y al estilo visual que queremos lograr. En particular, cuando usamos imágenes pequeñas, como un tileset de 20x20 píxeles, nos enfrentamos al reto de escalarlas para que se vean adecuadamente en pantallas más grandes, como una de 640x480 píxeles.

Para escalar imágenes en Slick 2D, podemos utilizar el método draw(x, y, scale), donde el parámetro scale es un valor de tipo float que multiplica tanto el ancho como el alto de la imagen. Por ejemplo, si nuestra imagen mide 20 píxeles y le aplicamos un factor de escala de 2, se dibujará a 40 píxeles de ancho y alto. Esto nos permite hacer que los sprites se vean más grandes o más pequeños según lo necesitemos, simplemente ajustando ese valor.

// Dibujar un sprite con escala 2 (doble tamaño)
spriteSheet.getSprite(2, 3).draw(20, 20, 2f);

Si queremos reducir el tamaño, podemos usar valores menores que 1, como 0.5 para la mitad del tamaño original, o incluso 0.25 para un cuarto. Esto nos da mucha flexibilidad para adaptar los gráficos a la resolución y diseño de nuestro juego.

Sin embargo, al escalar imágenes, especialmente hacia arriba, nos encontramos con un detalle importante: la forma en que se redimensionan los píxeles afecta mucho al resultado visual. Slick 2D nos ofrece dos tipos de filtros para controlar esto: el filtro de vecino más cercano (nearest) y el filtro bilineal (linear).

El filtro de vecino más cercano es el más básico y mantiene el aspecto pixelado original. Lo que hace es simplemente duplicar píxeles sin suavizarlos, por lo que cuando escalamos una imagen pequeña, los píxeles se ven nítidos y definidos, ideales para juegos con estética retro o pixel art.

Por otro lado, el filtro bilineal realiza una interpolación matemática para suavizar la imagen al escalarla. Esto hace que los bordes se vean menos definidos y la imagen más borrosa, lo que puede ser útil para imágenes realistas o texturas donde no queremos que se noten los píxeles.

Podemos elegir el filtro que queremos usar al cargar o dibujar la imagen. Por ejemplo, al crear una imagen, podemos especificar el filtro así:

Image img = new Image("imagenes/miImagen.png", false, Image.FILTER_NEAREST);

O bien, después de cargar la imagen, podemos cambiar el filtro con:

img.setFilter(Image.FILTER_LINEAR);

Esto nos permite cambiar dinámicamente cómo se escalan las imágenes según el estilo visual que busquemos. Si queremos un juego pixelado, usaremos FILTER_NEAREST para mantener la nitidez de los píxeles. Si buscamos suavidad y un aspecto más realista, optaremos por FILTER_LINEAR.

En resumen, al trabajar con Slick 2D y Java, controlar la escala y el filtro de las imágenes es fundamental para adaptar nuestros gráficos a la resolución de pantalla y al estilo visual deseado. Ajustando el factor de escala podemos hacer que sprites pequeños se vean más grandes o más pequeños, y eligiendo el filtro adecuado podemos decidir si queremos mantener el pixelado o suavizar la imagen al redimensionarla. Así, tenemos las herramientas necesarias para que nuestros gráficos luzcan exactamente como queremos en nuestro juego.

Lista de reproducción
  1. 1
    Instalando las herramientas Java
    11 minutos
  2. 2
    Instalando Slick2D
    26 minutos
  3. 3
    Estados e imágenes
    23 minutos
  4. 4
    Respuesta de usuario
    24 minutos
  5. 5
    Colisiones
    25 minutos
  6. 6
    Matemáticas y física
    13 minutos
  7. 7
    SpriteSheet
    13 minutos
  8. 8
    Tilemaps básicos
    23 minutos
  9. 9
    Escalas
    11 minutos
  10. 10
    Animaciones (parte 1)
    14 minutos
  11. 11
    Animaciones (parte 2)
    15 minutos
  12. 12
    Radiografía de un estado
    12 minutos
  13. 13
    Mover con el ratón (parte 1)
    11 minutos
  14. 14
    Mover con el ratón (parte 2)
    13 minutos
  15. 15
    Sonido
    13 minutos
  16. 16
    Música
    14 minutos
  17. 17
    Fuentes
    19 minutos
  18. 18
    Instalar Slick en NetBeans
    6 minutos