Archivos e Interfaz de Usuario

UI para nuestro RPG: Parte 6

En esta quinta entrega hablaremos del uso de imágenes en Swing

¿Cómo usar imágenes en Swing?

Dentro de Swing, hay varias formas de usar imágenes, por ejemplo:

ImageIcon icon = new ImageIcon("/img/your-image.png");

En este caso la clase ImageIcon es la encargada de gestionar la imagen y su dibujo en la interfaz, y como podrás notar, lo hace mediante un constructor que recibe la ruta de la imagen.

Ten en cuenta que si algún componente puede tener un atributo de tipo Icon, como JLabel, JButton, etc., puedes usar ImageIcon para asignarle una imagen y es dicho objeto el que se encargará de dibujar la imagen mediante la función paintIcon. Lo cual lo hace más eficiente y rápido, ya que se delega dicha tarea al objeto ImageIcon.

Sin embargo, debemos de tener en cuenta que si usamos imagenes que son parte de los recursos o assets del proyecto, es decir, que se encuentran dentro del directorio resources de nuestro proyecto, debemos de usar una notación especial para referirnos a ellas. Por ejemplo:

ImageIcon icon = new ImageIcon(this.class.getResource("/img/your-image.png"));

En este caso this.class.getResource es un método que se encarga de obtener el URL de un archivo en el classpath. En este caso, estamos obteniendo el URL de la propia clase estática ImageCache o de cualquier otra clase del proyecto. Como nota, algunas maneras de trabajo como la de ImageCache, usan el nombre de la clase en lugar del this, esto se debe a que la clase usa funciones estáticas, y this no es válido en un contexto estático.

¿Otras clases?

Si te preguntas si existen otras clases que permitan almacenar y trabajar con una imagen, la respuesta es que sí, existen varias. Por ejemplo, la clase BufferedImage es una clase que se encarga de gestionar la imagen y su dibujo en la interfaz, y como podrás notar, lo hace mediante un constructor que recibe la ruta de la imagen.

La diferencia de BufferedImage con ImageIcon es que BufferedImage es un objeto que se encarga de gestionar la imagen y como interactúa con la memoria, en otras palabras, esta clase se encarga de gestionar la imagen y poder manipularla desde el código, y podemos modificarla, redimensionarla, etc., pero, sin necesidad de volver a cargar el archivo de imagen cada vez que se requiera, lo cual es más eficiente y rápido.

¿Usar imágenes para botones o áreas?

Normalmente, uno pensaría que con solo redimensionar una imagen el problema de tamaño podrá resolverse, sin embargo, si hacemos esto, perderemos calidad de la imagen y en algunos casos se podría distorsionar el resultado, porque en este tipo de ocasiones, se usan las técnicas de 3 y 9 segmentos, para poder redimensionar.

En esencia, ambas técnicas, 3 y 9 segmentos, constan en tomar la imagen original y dividirla en segmentos, para poder redimensionar según corresponda, y en el siguiente apartado, verás ejemplos de ambas técnicas.

Copyright Jesús Aurelio Castro Magaña © 2026