MAMEWAH: Creación de un 'layout' sencillo

Faltan por añadirse las imágenes.

1. Introducción
2. Imágenes de partida
3. Creación del layout
• PASO 1: Configuración general del layout
• PASO 2: Colocación de los elementos
• PASO 3: Modificación de los elementos
• PASO 4: Modificación del menú de opciones
• PASO 5: Modificación la ventana de mensajes
• PASO 6: Modificación del salvapantallas
4. Añadiendo sonidos al layout
5. Conclusión
6. Fallo del editor de layouts: Solución manual
7. Cambios a realizar en el Layout para que sea compatible con MAMEWAH v1.62

1. Introducción

Crear un layout para mamewah es muy sencillo y ayudará a que nuestra recreativa esté más personalizada y tenga un acabado más 'profesional'.

En el tutorial se va a explicar cómo crear un layout para la versión 1.61 de MAMEWAH y al final, se detallan los cambios que hay que realizarle al layout para que funcione en la versión 1.62B13. Dicha versión es una 'beta', por lo tanto es una versión no definitiva y puede que haya cambios en la versión final.

2. Imágenes de partida

Las imágenes que permite usar MAMEWAH las podemos ver en la documentación sobre layouts.

En este tutorial, vamos a crear un layout sencillo y genérico que sirva para todos los emuladores. Vamos a emplear sólo cinco imágenes: Una de fondo general, una de fondo para las opciones, una de fondo para los mensajes y dos para los 'no-arte1' y 'no-arte2'.

La imagen más importante del layout será la que usemos de fondo. Debe tener al menos un espacio para la lista de juegos y al menos un hueco para mostra una captura de los mismos. En este caso, hemos preparado dos huecos que vamos a usar para mostrar una pantalla de la introducción de los juegos y otra del juego en sí.

La zona de la lista de juegos conviene que sea más o menos uniforme en colores y brillo para facilitar la posterior lectura de los nombres.

El recuadro (o los recuadros) para visualizar las capturas de los juegos, en un principio, deberían ser de proporciones 4:3 ya que la inmensa mayoría de los juegos usan un monitor horizontal.

Para la imagen que servirá de fondo a las opciones del front-end (generar listas de juegos, salir al sistema operativo, búsqueda de juegos, mover juegos entre listas, etc...) he optado por una imagen que destaque del aspecto general del front-end mientras estamos en su parte principal.

Por desgracia, MAMEWAH añade automáticamente un borde negro de 1px de grosor alrededor del menú de opciones y de la ventana de mensajes. Deberemos tener en cuenta ese hecho a la hora de diseñar los layouts.

Y a la derecha podemos ver la imagen que servirá de fondo cuando MAMEWAH nos muestre algún mensaje, por ejemplo al generar las listas de juegos o al ejecutarlos. MAMEWAH vuelve a dibujar una línea negra a su alrededor.

Los 'no-arte', en este caso son dos (recordemos que MAMEWAH permite mostrar hasta 10 imágenes por juego) y se les ha colocado de fondo la imagen de fondo general. De ese modo, al aparecer en MAMEWAH, parecerá que sólo mostramos las letras y no una imagen cuadrada. Por desgracia, MAMEWAH no permite transparencias por lo que tendremos que usar este truco si queremos simularlas.

Este truco no lo podremos usar con el menú de opciones y con la ventana de mensajes debido al molesto borde negro que añade automáticamente MAMEWAH. Sin embargo, al final del tutorial se explica un truco que nos amplía las posibilidades en el diseño de 'layouts'.

3. Creación del layout

Una vez tengamos las imágenes, vamos a la carpeta de layouts de MAMEWAH y creamos una carpeta para nuestro nuevo layout. En mi caso, MAMEWAH está instalado en C:\MAMEWAH y el layout lo voy a llamar 'mario', por lo que crearé la carpeta C:\MAMEWAH\layouts\mario y copiaré ahí las imágenes.

Si no lo hubiésemos hecho ya, debemos renombrar las imágenes con el nombre adecuado. Aquí podemos ver el resultado final:

Llegados a este punto, ya comenzamos con la creación del layout propiamente dicha. Ejecutamos MAMEWAH Layout Designer.exe (lo encontraremos en la carpeta raiz de MAMEWAH) y veremos la ventana principal del programa:

NOT FOUND: layouteditor1.gif

Lo que vemos en la ventana es el layout por defecto, que incorpora un hueco para imágenes y TODOS los campos que permite MAMEWAH:

• Main logo : Imagen que sirve de logotipo. ¡ Ojo !, aunque se llame 'Main logo', podemos utilizar una imagen diferente para cada emulador (de esto hablaremos en el tutorial sobre como hacer layouts que se activen con un emulador determinado).
• Game list indicator : Para cada emulador podemos tener varias listas (lo más normal sería tener una lista con todos los juegos y otra sólo con los favoritos). Con este elemento mostraremos el nombre de la lista que tengamos activada en el layout.
• Emulator name : Pues eso, con este elemento mostramos el nombre del emulador que tenemos activado en cada momento.
• Game list : Este campo es importantísimo, con él mostramos la lista de juegos que tenemos para cada emulador.
• Game selected : Con este campo mostraremos el número total de juegos que tenemos en una lista y en qué juego estamos situados. En el layout aparecerá 'Game xx of yy'. Lamentáblemente no se puede traducir al castellano el texto que nos aparecerá.
• Artwork image #1...#10 : Las 10 imágenes de cada juego que nos permite mostrar MAMEWAH. Normálmente usaremos sólo un par.
• Game description : Nombre del juego que tenemos seleccionado. Este campo es interesante usarlo en el caso de que en el ancho de nuestra lista no quepa el nombre completo de todos los juegos.
• Romname (+Parent Romname) : Nombre real de la ROM y de su 'parent'.
• Year + manufacturer : Año de publicación y compañía que programó el juego seleccionado.
• Screen type : Tipo de pantalla: horizontal, vertical, vectorial...
• Controller type : Tipo de controles que usa el juego: Joystick de 4 vías, de 8 vías, analógicos, etc...
• Driver status : Información sobre el estado de emulación del juego seleccionado.
• Catver category : En el caso de que hubísemos indicado un archivo catver.ini en la configuración de los emuladores, nos indicaría a qué categoría pertenecen los juegos: Plataformas, disparos, carreras, etc...

PASO 1: Configuración general del layout

Lo primero por hacer es definir el tamaño, número de colores y frecuencia de refresco que queremos usar en nuestro 'layout'. Para ello, pinchamos en 'Background' y vamos dejando a nuestro gusto los distintos elementos:

• Size : Resolución horizontal y vertical.
• Color : El color que usaremos de fondo. Normalmente vamos a usar una imagen de fondo (main), así que este valor no nos importa demasiado. Por norma general lo dejaremos en negro.
• Image : Imagen que nos servirá de fondo. ¡Ojo! la imagen que elijamos aquí sólo se usará para ayudarnos a colocar los elementos del layout. A la hora de ejecutar MAMEWAH, se usará como fondo la imagen 'main' (main.jpg, main.gif o main.png).
• Color depth : Profundidad o número de colores. Por lo general, pondremos la opción más alta que funcione con nuestra tarjeta gráfica.
• Refresh rate : Velocidad de refresco. Generalmente usaremos 60Hz salvo que usemos un monitor de PC y este nos permita usar frecuencias más altas.

En este tutorial voy a crear un layout de 640x480 pixels, 32bits de color y 60Hz de refresco vertical. Abrimos, además, como fondo nuestro archivo "main.gif" y veremos esto:

Como quiero realizar un layout sencillo, sólo dejaré activados los básicos:

PASO 2: Colocación de los elementos

Una vez elegidos los elementos que queremos mostrar, llega el turno de colocarlos en la zona de pantalla que queramos. Para ello, símplemente vamos pinchando sobre los elementos con el ratón y los vamos moviendo y cambiando de tamaño para que encajen en su sitio. Llegamos entonces a algo parecido a esto:

Elementos ya colocados en la ventana principal

En la zona inferior izquierda del editor de 'layouts' tenemos dos indicadores, uno para informarnos de la posición horizontal y vertical del elemento seleccionado en pixels y otro para decirnos su ancho y alto, esto es útil para hacer que nuestros diseños esten totalmente ajustados.

Podemos mover los elementos con el ratón o con los cursores del teclado, esto último es útil para tener mayor precisión.

PASO 3: Modificación de los elementos

Llega el turno ahora del ajuste de los elementos en cuanto a tipo de letra, color, etc...

Vamos a modificar el aspecto del nombre del emulador que se esté usando. Para ello pinchamos una vez con el ratón sobre "Emulator Name", con lo que pasará a estar seleccionado y veremos los indicadores que sirven para cambiar su tamaño alrededor:

Entonces pinchamos en "Object Properties" y ajustamos su color de fondo y su transparencia. El 'Alignment' sólo sirve para posicionar el elemento a la izquierda, derecha, etc... pero en general es mejor mover el elemento manualmente (con teclado o ratón).

Para este layout de ejemplo, voy a hacer que el fondo sea transparente, con lo que el color de fondo me da igual.

Ya sólo falta modificar el color y el tipo de fuente del texto, así como su alineado. Eso lo haremos pinchando en 'Text Properties':

NOT FOUND: text-properties.gif

Con lo que ya tenemos listo el campo 'Emulator Name'. No debemos preocuparnos por el borde negro ya que una vez abierto el layout en MAMEWAH, este no será visible:

NOT FOUND: emulator-name-terminado.gif

Repetimos lo mismo con el resto de los elementos y terminamos el 'Mainform' o ventana principal del layout. En el caso de la lista de juegos ("Game List") tenemos opciones extra en 'Object Properties' y 'Text Properties'.

Esto se debe a que podemos controlar por separado el modo en el que se muestra el juego seleccionado en cada momento. En el caso de este ejemplo, se ha hecho que la lista sea transparente y con las letras de color negro, mientras que el elemento seleccionado se verá con el fondo negro y las letras en amarillo.

Una vez modificados todos los elementos, el resultado será este:

NOT FOUND: mainform-terminado.gif

PASO 4: Modificación del menú de opciones

Vamos al menú "View" y seleccionamos 'Options Form', con lo que pasaremos a ver algo muy similar a lo ya visto, pero ahora servirá para cambiar el aspecto de menú de opciones de MAMEWAH:

NOT FOUND: options-form.gif

Nuévamente vamos al menú 'Background' para elegir el tamaño y el color de fondo (ahora sólo cambiaremos estas dos opciones) de nuestra ventana de opciones y abriremos la imagen que nos servirá de fondo.

¡OJO! Debido a que MAMEWAH coloca un borde negro de 1px de grosor automáticamente alrededor de la ventana de opciones, debemos poner como ancho y alto 2px más que las dimensiones de la imagen que vayamos a usar como fondo.

En el menú 'Display Objects' podemos elegir qué elementos deseamos mostrar, siendo ahora recomendable dejarlos todos marcados:

• Options heading : El título del apartado de opciones en el que nos encontremos.
• Options list : Listado con las opciones disponibles.
• Current setting heading : Título de la opción seleccionada.
• Current setting value : Valor actual de la opción seleccionada.

De mismo modo que hicimos antes, lo dejamos todo a nuestro gusto y llegamos a:

NOT FOUND: optionsform-terminado.gif

PASO 5: Modificación la ventana de mensajes

Nuevamente vamos al menú 'View' y ahora elegimos 'Message Form'. Y, otra vez, lo primero que hacemos es cambiar el tamaño del menú y su color de fondo (pinchando en 'Background' > 'Size' y 'Background' > 'Color').

NOT FOUND: message-form.gif

¡OJO! Debido a que MAMEWAH coloca un borde negro de 1px de grosor automáticamente alrededor de la ventana de mensajes, debemos poner como ancho y alto 2px más que las dimensiones de la imagen que vayamos a usar como fondo.

Los campos que podemos mostrar ahora son (recomiendo mostrarlos todos):

• Heading : El título del mensaje que se nos muestre.
• Message : El cuerpo del mensaje en si.
• Prompt : ???.

Tras dejarlo todo a nuestro gusto, tendremos algo así:

NOT FOUND: messageform-terminado.gif

PASO 6: Modificación del salvapantallas

En el archivo mamewah.ini podemos definir el tiempo de inactividad tras el que se
activará el salvapantallas. Así que ya que estamos... vamos a personalizar el salvapantallas. Pinchamos en 'View' > 'Screensaver Form':

Y los campos que podemos mostrar son:

• Artwork Image #1-10 : Cada una de las imágenes que tengamos definidas para cada juego (desde el archivo 'emulador.ini').
• Game Description : El nombre del juego del que se muestran imágenes.
• MP3 Name : En el caso de que tengamos activada la música de fondo, se mostrará el nombre de la canción que esté sonando.

Lo ponemos a nuestro gusto y en este caso obtengo lo siguiente:

NOT FOUND: screensaverform-terminado.gif

Llegados a este punto, ya hemos terminado con el diseñador de layouts. Grabamos el layout con el nombre layout.lay. Para ello pinchamos en 'File' > 'Save Layout As'. Si estuviéramos modificando un layout, y no créandolo desde cero, símplemente 'File' > 'Save Layout'.

NOT FOUND: layoutgrabado.jpg

Ahora deberíamos tener un layout correcto y funcional en MAMEWAH. Para comprobarlo, modificamos el archivo 'mamewah.ini' para que MAMEWAH use nuestro layout, poniendo:

### Misc Options ###
layout                      mario

Si al ejecutar MAMEWAH vemos que los elementos están donde deberían y todo es correcto, pasamos al siguiente paso. De lo contrario, debemos corregir manualmente el archivo 'layout.lay', al final de este tutorial se explica el modo de hacerlo.

NOT FOUND: layout-terminado-mal.gif
NOT FOUND: layout-terminado-bien.gif

4. Añadiendo sonidos al layout

Añadir sonidos al layout es sencillísimo, sólo hay que añadir los ficheros con los nombres adecuados a la carpeta del layout. Podemos consultar los nombres que deben tener los ficheros y cuándo son usados en la documentación sobre layouts.

Para este caso, voy a usar sonidos extraídos del juego 'Super Mario World' de 'Super Nintendo' para que vayan a juego con el aspecto visual del layout. Aquí podemos ver los ficheros ya colocados en la carpeta y con los nombres correctos:

5. Conclusión

...y si hemos seguido todos los pasos del modo correcto, terminamos con una carpeta que contiene todos estos archivos:

Al final del punto 2 ya habíamos configurado el archivo mamewah.ini, así que sólo queda ejecutar MAMEWAH para verlo funcionando al completo, incluyendo los sonidos:

Por si lo queréis, aquí está para descargar el layout creado en el tutorial.

6. Fallo del editor de layouts: Solución manual

Por alguna razón desconocida (aunque creo que tiene que ver con las librerías de visual basic que puedan estar instaladas en nuestro ordenador), a veces los 'layouts' se graban mal y contienen expresiones en castellano como 'Verdadero' y 'Falso'.

Esto hará que MAMEWAH no sepa interpretar correctamente los 'layouts' (aunque si lo haga bien el editor) y los mostrará con errores. En el caso de que apreciemos dichos errores, debemos abrir el archivo .lay (mario.lay en este caso) con el bloc de notas de windows o cualquier otro editor de texto. Entonces veremos algo así:

Sólo necesitamos cambiar TODOS los 'Verdadero' por 'True' y TODOS los 'Falso' por 'False' para que el layout esté corregido. Para ello, en el bloc de notas de windows pincharemos en 'Edición' > 'Reemplazar', pondremos el término original, el término por el que queremos realizar la sustitución y pincharemos en 'Reemplazar todo'. Guardaremos el archivo y ya tendremos el 'layout' corregido y 100% funcional.

7. Cambios a realizar en el Layout para que sea compatible con MAMEWAH v1.62

Macarro