Episodio 9
Conservación de píxeles & Color e imagen de fondo
En el capítulo anterior nos encargamos de implementar el ajuste de la imagen al área de dibujado.
En este nos vamos a encargar de dos cosas, la primera será más que un mecanismo un detalle, será la conservación de los píxeles después de un escalamiento y la segunda será el fondo del fotograma.
Empecemos entonces con la conservación de los píxeles.
buscaré en google un gráfico donde sean notables los píxeles, buscaré 8 bits, en las herramientas de búsqueda pondré tamaño icono.
En esta imagen se ven bien los píxeles, así que lo que se desearía es que los píxeles conservarán su definición.
ahora copiaré la dirección y en el proyecto la voy a cargar.
BufferedImage ImagenDePrueba = CargarImagen("http://orig12.deviantart.net/57e5/f/2011/303/4/7/megaman_8_bit_running_by_ninjataills-d4eir3x.png");y pondré el tipo de ajuste en ajustar, ahora ejecutaré para que vean que los píxeles no se conservan los píxeles se difuminan.
public int TIPO_AJUSTE_FONDO = AJUSTE_RELLENAR;
Las transformaciones en java tienen por defecto 3 formas de aproximación a la imagen cuando se escala, y las funciones de filtros lineales utilizan estos aproximadores, cuando se desea difuminar un poco al redimensionar los filtros de imagen utilizan la aproximación bilinear, para poder personalizar esto desde la ventana, al igual que con el reposicionamiento, vamos a declarar una variable que nos indicará si queremos conservar o no la definición de los píxeles, esta será otra variable interruptora.
//Variable interruptora para la conservación de los pixeles. public boolean ConservarPixeles = true;La vamos a dejar true por el momento porque con ella es que vamos a identificar si los píxeles de megaman se están conservando, vamos al método que ajusta la imagen al área de dibujado y lo modificamos, de tercer parámetro le pasamos la variable que representa la conservación de los píxeles.
Listo, ahora si ejecutamos, la variable conservar píxeles como esta true, significa que el megaman no perderá la definición de sus píxeles.
Ahora si se puede ver una clara diferencia en ambos efectos
Como ya probamos la eficacia de la conservación de los píxeles, entonces podemos desactivar la conservación de los píxeles.
En este momento solo nos falta por hacer una cosa, asignarle un fondo al presentador, porque según la proporción o tipo de imagen el fondo se podrá hacer visible, el fondo estaría bien de 2 formas con una imagen o un color, obviamente podremos elaborar fondos diferentes a estos dos, pero estos son los más simples, así que vamos a personalizar los elementos del fondo.
//Elementos del fondo public int TIPO_AJUSTE_FONDO = AJUSTE_RELLENAR; public BufferedImage ImagenDeFondo = null; public Color ColorFondo = new Color(0, 0, 0, 0);Ahora como ya tenemos los elementos solo nos falta implementar una función que se encargue del dibujo del fondo.
public void DibujarFondo(Graphics g) { if (ColorFondo.getAlpha() > 0) { g.setColor(ColorFondo); g.fillRect(0, 0, getWidth(), getHeight()); } if (ImagenDeFondo != null) { BufferedImage Fondo = new Dupla(getSize()).convBufferedImage(); AjustarImagenAlÁreaDeDibujado(ImagenDeFondo, Fondo, TIPO_AJUSTE_FONDO); g.drawImage(Fondo, 0, 0, null); } }Ahora, vamos a hacer el llamado desde el método de actualizar fotograma, antes de hacer el dibujado de la imagen en el fotograma.
DibujarFondo(Fotograma.getGraphics());Ahora desde el main vamos a personalizar el color del fondo para ver cómo está funcionando, ponemos después de la carga de la imagen de prueba
ventana.ColorFondo = Color.WHITE;y ahora ejecutamos, como pueden ver todo nos ha quedado muy bien.
para probar como funciona con una imagen de fondo.
vamos a buscar una imagen que nos sirva de fondo, en google voy a buscar una, y copiaré su dirección.
y reemplazamos el ajuste del color de fondo y en el main ponemos
ventana.ImagenDeFondo = cargarImagen("http://il5.picdn.net/shutterstock/videos/7176532/thumb/1.jpg");Con esto será suficiente para que al ejecutar veamos como la imagen de fondo está funcionando.
Ahora vamos a experimentar cómo funciona la combinación entre el color la imagen, esto lo haré usando una imagen con transparencia
bueno, entonces voy a buscar en google una imagen png
copiaré su dirección y la pegare en la modificación del fondo en el main
y luego de la carga de la imagen de prueba vamos a ajustar el color del fondo, seleccionamos cualquier color, probare con el blanco.
ahora ejecutemos para ver que tal se ve.
Como vemos esto funciona bien, la imagen con transparencia, el color del fondo y la imagen de prueba, asignaremos otro color de fondo
Bueno, esto ha sido todo por este video, ahora solo es cuestión de ingeniería para empezar a combinar técnicas de animación y hacer efectos, pero esto será en otras series, porque en esta solo me limitó a explicar la ventana gráfica encargaremos de hacer una ventana de gráficos.
Ahora a la ventana solo le falta la capacidad de mostrar texto, como dije en un principio, estas ventanas también podrán sustituir de cierta forma a la consola cuando hagamos alguna aplicación.
O sea, vamos a dejar al objeto listo para que muestre información textual, en los juegos utilizaremos esta función en pantallas como las de game over o de inicio de algún nivel o las de cargando pero eso será ya en el próximo episodio
sin más que decir me despido