Leccion 07 – Deconstruyendo Escenarios

Aventuras en Megadrive: Deconstruyendo Escenarios

Este es el fondo original del primer nivel de Hijos de Camelot. Nada más comenzar, el escenario cambia de color, anochece.

4 imágenes, resolución: 320x240px,  profundidad de color: 32bits

Vamos a adaptar este escenario a la Megadrive. Recordemos las cosas a tener en cuenta:

  • La resolución debe ser 320x224px.
  • La profundidad de color debe ser 4bpp / 16 colores por plano (hasta 32 colores usando planos A y B para representar un fondo).
  • Debemos dibujarlo con el menor número posible de tiles.
  • Hay un cambio de colores día-noche que debemos reflejar.

 

Resolución

Voy a recortar por abajo, dónde se encontraban los controles en pantalla. No tiene mayor misterio. Paso de 320x240px a 320x224px.

 

Profundidad de Color

El fondo es poco colorido, por lo que en principio parece sencillo. Tenemos que reducir la profundidad de color. Lo más sencillo es usar nuestro programa de dibujo favorito para que reduzca los colores, pero puede que el programa escoja colores no adecuados, en dicho caso habremos de editar previamente la imagen y cambiar los colores nosotros mismos.

En mi caso, utilizo GraphicsGale, un programa sencillo de usar, portable y gratuito.

GraphicsGale > Image count colors
Paint Shop Pro 7 > Colores > Contar colores

La primera imagen (de las 4 de arriba) tiene 354 colores. Vamos a reducir la profundidad de color.

GraphicsGale > All Frames > Color Depth > 4bpp / 16 colors  (dither desactivado)

En el caso de la primera imagen, usando cualquiera de los dos programas en general queda bastante bien, pero en la paleta quedan muchos tonos de marrón. Lo ideal sería hacerlo a mano para tener más tonos de otros colores, no obstante lo voy a dejar así porque no queda del todo mal.

 

Nota: Si usamos Paint Shop Pro 7, entonces Disminuir Colores > 16 colores (Color más cercano)

 

Recordar que podemos usar 32 colores. MD soporta 16 colores por capa.

Así que teóricamente podemos dividir la imagen de fondo en 2, limitar a 16 colores cada imagen y tener 32 en total.

Esto lo veremos más adelante pues no es sencillo de resolver a man.

 

 

Contando Tiles

Dos formas de saber cuantas tiles ocupa una imagen usada de fondo.

La primera forma es usar ImaGenesis. Este programa entre otras cosas permite contar tiles: analiza una imagen y calcula cuantos tiles se necesitan para mostrarla. Aproximadamente es lo que hará el SGDK, nos vale para hacernos una idea.

2 pasos:

ImaGenesis > Mode > 15 colors, 4bpp….. Optimized  +
ImaGenesis > Actions > Quantize Now

Para la primera imagen cuenta 530 tiles distintas. Recordemos que, para cada plano, podemos tener hasta 4096 tiles, por tanto no vamos mal.

 

La segunda forma es hacer un programa nuevo y sólo cargar dicha imagen, usando el SGDK. De forma visual, podemos ver cuantas tiles ha ocupado la imagen en VRAM (CPU / Debug / Genesis / VDP). Ahora haz click en la última tile y en Offset te aparecerán cuantos tiles ha ocupado la imagen.

Captura14

Por supuesto también se puede contar con una variable desde dentro del programa y sacar su valor de alguna forma.

Por supuesto, lo ideal sería rehacer la imagen desde 0 para ocupar el mínimo de memoria posible, no obstante en mi caso no lo voy a hace ya que no tengo mucho tiempo libre y me sobra VRAM. Como se puede ver, estoy desperdiciando mucha memoria, si fuese un proyecto serio esto no sería aceptable.

 

Anochece

En vez de retocar el resto de imágenes, y ocupar memoria tontamente, voy a cambiar la paleta de la fondo para simular el anochecer.

  • El cielo el azul pasará a un naranja y de ahí poco a poco a negro.
  • El verde de los matorrales, los voy a cambiar a marrones.
  • En la muralla, cambiaré los rojos a tonos más oscuros.

Voy a usar la función VDP_setPaletteColor() 

VDP_setPaletteColor(color_a_cambiar, RGB)

El primer parámetro es el índice del color de todas las paletas de MD (0-63). Recordar que la primera paleta va del 0 al 15, la segunda del 16 al 31, etc.
El segundo parámetro es el color en formato RGB. Recuerda usar RGB24_TO_VDPCOLOR()

Para escoger color, esto nos puede ayudar:
https://www.w3schools.com/colors/colors_picker.asp

 

El color azul es el color 4 (ver la captura anterior, se comienza en 0).

Veamos un ejemplo, donde a cada segundo que pasa, cambiamos el color azul por otro para simular el anochecer:

#include <genesis.h>
#include "gfx.h" //carga la imagen de background

int main()
{
u16 ind, contador;

SYS_disableInts();

VDP_setScreenWidth320();

VDP_setPalette(PAL0,bga_image.palette->data);

ind = TILE_USERINDEX;
VDP_drawImageEx(PLAN_A, &bga_image, TILE_ATTR_FULL(PAL0, FALSE, FALSE, FALSE, ind), 0, 0, FALSE, TRUE);
ind += bga_image.tileset->numTile;

SYS_enableInts();

contador = 0;

  while(TRUE) 
  {
  contador++; //60fps, cada segundo vale 60 más

  //Cambio de cielo (azul->naranja->rojo->negro)
  if(contador>60*1) VDP_setPaletteColor(4, RGB24_TO_VDPCOLOR(0xFF6600));
  if(contador>60*2) VDP_setPaletteColor(4, RGB24_TO_VDPCOLOR(0xCC5200));
  if(contador>60*3) VDP_setPaletteColor(4, RGB24_TO_VDPCOLOR(0x993D00));
  if(contador>60*4) VDP_setPaletteColor(4, RGB24_TO_VDPCOLOR(0x662900));
  if(contador>60*5) VDP_setPaletteColor(4, RGB24_TO_VDPCOLOR(0x000000));

  VDP_waitVSync();
  }

return 0;
}

 

Ampliamos a todo el fondo.
El color verde de las plantas lo tenemos en el color 1 y 8 de la paleta. Cambiará a marrón.
El color del tejado del castillo (rojos) son los colores 2 y 12 de la paleta. Los oscureceré.

 

...

//Cambio de cielo (azul->naranja->rojo->negro)
if(contador>60*1) VDP_setPaletteColor(4, RGB24_TO_VDPCOLOR(0xFF6600));
if(contador>60*2) VDP_setPaletteColor(4, RGB24_TO_VDPCOLOR(0xCC5200));
if(contador>60*3) VDP_setPaletteColor(4, RGB24_TO_VDPCOLOR(0x993D00));
if(contador>60*4) VDP_setPaletteColor(4, RGB24_TO_VDPCOLOR(0x662900));
if(contador>60*5) VDP_setPaletteColor(4, RGB24_TO_VDPCOLOR(0x000000));

//cambio de castillo (rojo->rojo oscuro)
if(contador>60*3) VDP_setPaletteColor(2, RGB24_TO_VDPCOLOR(0x802000));
if(contador>60*4) VDP_setPaletteColor(12, RGB24_TO_VDPCOLOR(0x661A00));

//cambio del cesped (verde->marrón)
if(contador>60*1) VDP_setPaletteColor(8, RGB24_TO_VDPCOLOR(0x999900));
if(contador>60*2) VDP_setPaletteColor(1, RGB24_TO_VDPCOLOR(0x997300));

...

 

En esta captura se aprecia como va cambiando la paleta y el fondo. He señalado alguno de los cambios (pero no todos).

Captura15

(nota: en cuanto pueda lo cambio por un gift animado), no lo digo… ¡lo hago!

cambio_paleta

Observar como va cambiando los colores en la paleta, en los tiles de la memoria del VDP y en el propio juego.

 

 

GITHUB

El código de esta lección, y de todas las demás, lo podrás encontrar en mi github:

https://github.com/danibusvlc/aventuras-en-megadrive

Anuncios