En este tuto voy a tratar de explicar paso a paso como preparar el frontend Mala y como hacer un layout con animación usando los objetos "Animation". El layout que prepararé durante el tuto, será un layout básico ya que el objetivo no es conseguir un layout especial, sino presentar el modo en el que se puede realizar una animación básica . También quiero dejar claro que no voy a explicar la configuración de Mala en profundidad, sino solo aquellas partes necesarias para completar nuestro objetivo.
Preliminares
En este tutorial, vamos a crear un layout llamado “Arcade Classics” basado en Mame, por lo que para mantener ordenados todos los archivos y directorios, he creado una estructura con todo lo necesario para que una vez configurado Mala y montado el layout, tenga los recursos necesarios a mano.
Para ello he creado un directorio “c:\emulation” que usaré para guardar todo lo que necesito para la emulación. Dentro de este directorio, he creado dos nuevos directorios, llamados “frontends” y “systems” respectivamente. En el primero alojaré Mala, mientras que el segundo, lo usaré para las diferentes plataformas que voy a emular. En nuestro caso solo vamos a implementar “Arcade classics” usando Mame, por lo que he añadido una carpeta bajo “systems” donde voy a colocar todo lo necesario. Aquí podéis ver la estructura completa:
Como podéis ver, la carpeta se llama “arcade_classics” y dentro de esta he creado: - “emulator“, para guardar el Mame. He usado una versión 130 que tenía por aquí. - “media”, para almacenar vídeos, capturas y marquees de los juegos (para las marquees he usado las HD de Lord Hiryu) - “roms”, donde guardaré las roms de los juegos.
Ahora ya estamos listos para continuar con Mala.
Preparando Mala
MaLa es un frontend multi emulador diseñado para correr en entornos Arcade basados en sistemas Windows. Inicialmente fue desarrollado por SWindus que allá por el 2008 cedió el código fuente a Loadman, que actualmente se encarga de continuar el desarrollo y también de su mantenimiento.
En el momento de escribir este tuto, la versión estable es la 1.74, aunque hay una beta 1.745 más que recomendable.
Para comenzar, nos dirigiremos a la web oficial de MaLa y en su sección de descargas, encontraremos los paquetes zip para la versión estable y la beta. Debemos descargar ambos, ya que la beta únicamente contiene un ejecutable nuevo ("MaLa.exe"), que usaremos para reemplazar el ejecutable de la versión estable.
Cuando descomprimimos la versión estable, nos encontramos con dos carpetas, "MalaPluginSDK" y "MaLa174". Para usar el frontend, únicamente necesitamos la segunda carpeta, por lo que lo aconsejable es renombrarla y colocarla en un lugar adecuado, en nuestro caso, la vamos a colocar en "c:\emulation\frontends\mala", tras lo cual, reemplazaremos el ejecutable tal y como comenté antes.
El frontend por defecto no tiene ninguna carpeta donde almacenar los layouts, así que antes de continuar, crearemos una carpeta dentro del directorio “mala” llamada “layouts” y en adelante la usaremos para mantener nuestros diseños ordenados.
Ahora ya podemos ejecutar MaLa por primera vez. Lo primero que nos va a aparecer, es un mensaje indicándonos que el sistema de log está activado, pulsaremos Ok. Después MaLa nos avisa de que es la primera vez que ejecutamos el frontend y por lo tanto debemos configurarlo, así que manos a la obra.
Estamos delante del diálogo de configuración del frontend, si nos fijamos en la parte inferior, dice “v174 *BETA*[1.7.4.5]” lo cual nos confirma que la instalación de la beta la hemos hecho correctamente.
Primero configuraremos el ejecutable del Mame. En la pestaña “MAME Config->Basics” haremos clic en el botón marcado con “...” tras el campo “MAME executable” y navegaremos hasta nuestra versión del Mame. Cuando nos pregunte si queremos crear el fichero “mame.xml”, le diremos que si, ya que este archivo contiene la base de datos de juegos del Mame y será imprescindible para mostrar la lista de juegos en el frontend. Después indicaremos nuestro directorio de roms en el campo “Rom path” con la pestaña de selección contigua en 1
Una vez configurado el emulador, nos vamos a la pestaña “MAME Config->Pictures and Videos” y colocaremos nuestros directorios de snaps, marquees y vídeos, con lo cual hemos terminado de configurar el emulador.
Nos dirigimos a la pestaña “Sounds and Music” y marcaremos la opción “Enable audio (other than Video audio)”. Esta opción, habilita los sonidos que se usarán cuando cambiamos de juego, de lista, etc. Mala permite configurar estos sonidos, de forma global, desde “Sounds and Music->Event sound”, pero nosotros los configuraremos en el propio layout, así permitiremos que cada layout que diseñemos tenga sus propios sonidos.
Una vez habilitados los sonidos, nos vamos a la pestaña “GUI->Layout” donde indicaremos cual es nuestra carpeta de layouts y otras opciones que podéis ver en la siguiente imagen:
En este momento ya tenemos la configuración básica para ejecutar Mame bajo Mala. Si pulsamos el botón “Ok” que aparece en la parte inferior del diálogo de configuración, comenzará la ejecución del entorno. Antes de poder ver nada, se nos preguntará si queremos refrescar la lista principal, a lo que contestaremos que si pulsando sobre “Ok”.
Lo que veremos a continuación es nuestra lista de juegos en Mame, corriendo con el layout estándar de Mala, donde ya podemos ver nuestras snaps funcionando.
Diseñando el layout
Para realizar el diseño, voy a usar dos programas de diseño gráfico libres: - InkScape para realizar el layout en vectorial. - Gimp para retoques finales y montaje de transparencias. Ambos los podéis descargar en sus respectivas webs. Como es lógico, no voy a explicar completamente como diseñar el layout con estos dos programas, sino que me centraré en lo que considero más importante para conseguir nuestro objetivo.
Vale, ahora le hemos dado muchas vueltas y hemos llegado a la conclusión de que nuestro layout va a estar dividido en tres áreas: - Una cabecera donde se mostrará el nombre de nuestro layout. - Una barra a la derecha donde se mostrará nuestra lista de juegos, para la que usaremos una lista de imágenes basada en las marquees de Lord Hiryu. - Una parte central donde aparecerá la información del juego seleccionado (Nombre del juego, fabricante, capturas, etc) y la información de la lista de juegos actual.
Usaremos la parte central para montar nuestra animación, creando una capa de scroll que quedará por debajo del resto de piezas.
Así que con estas premisas, abrimos InkScape y después de un rato terminamos con algo como esto:
Para implementar más tarde nuestro layout en Mala, necesitamos exportar dos capas, la primera es el fondo que usaremos como scroll:
La segunda es la capa donde realmente veremos los datos de nuestros juegos:
Como veis, el uso de las capas en el programa de diseño (sea cual sea), es importante, ya que nos va a permitir ordenar nuestros objetos y por lo tanto, nos ahorrará mucho trabajo para exportar las partes de nuestro layout.
Es importante que en la capa superior, mantengamos un color de fondo lo más parecido posible a nuestra capa base, para que los colores coincidan lo máximo posible en las transparencias.
La capa base, está lista tal cual, no tendremos que hacerle ninguna modificación, pero la capa superior debemos hacerla transparente para Mala y esto ya es otra historia.
El sistema de transparencias que usa Mala es muy simple, hace transparente todos los pixeles de la imagen que coincidan en color con el píxel más abajo a la izquierda de la imagen, por lo que para hacer transparente nuestra capa superior, nos la llevamos a Gimp y haciendo uso de la herramienta de selección por color (la que se ve seleccionada en la imagen), cogeremos el fondo lila para poder eliminarlo:
Es muy importante que desmarquéis la opción “Difuminar bordes” y que juguéis con los valores del umbral hasta que consigáis seleccionar la zona que deseáis. Una vez eliminado el fondo, nos quedará algo como esto:
El siguiente paso es añadir una capa de un color solido para que cubra las zonas que hemos dejado transparentes y conseguir así que Mala cree la transparencia correctamente:
¿Y porqué no lo hemos dejado transparente directamente con InkScape?, pues básicamente porque el modo en que Mala hace la transparencia, no equivale a una transparencia real y la única manera que yo conozco para obtener unos resultados aceptables, es como lo he expuesto. Manteniendo el color lila del fondo, hemos forzado a que nuestras transparencias en el diseño, se conviertan en colores sólidos que cuando eliminamos el fondo con Gimp, darán la sensación de ser transparencias reales, aunque está claro que no lo son. Quizá en el futuro, Mala soportará transparencias reales en imágenes, pero mientras tanto, ya tenéis una forma de conseguir un efecto similar
Llegados a este punto ya tenemos las capas preparadas para implementar nuestro layout en Mala así que manos a la obra.
Montando el layout
Aquí es donde comienza el tema
Antes de nada quiero volver a resaltar la importancia de la fase de diseño, si hemos realizado un trabajo adecuado en el paso anterior, ya tenemos resuelto el 50% o 60% del layout y este apartado se convertirá en un simple paseo.
Bien, para construir los layouts para Mala, tenemos a nuestra disposición un programa llamado “Mala Layout Editor” y que podemos lanzar desde nuestra instalación de Mala mediante el binario “MalaLayout.exe”.
Lo primero que vamos a hacer es guardar el layout como “mame”
Es muy importante que os aseguréis de estar en nuestra carpeta de layouts y que el nombre sea exactamente “mame”, ya que antes, en la configuración, le hemos dicho a Mala que busque los layouts en nuestra carpeta y que nos encargaríamos de que se llamaran exactamente igual que los emuladores que configuremos.
Antes de continuar, nos vamos a nuestra carpeta de layouts y crearemos un nuevo directorio para almacenar los recursos necesarios para nuestro layout. La carpeta se debe llamar igual que el layout, es decir “mame”. Si hemos realizado bien estos pasos, dentro del directorio tendremos:
Ahora ya podemos copiar los ficheros de nuestras capas (capa base y capa superior) en el directorio que hemos creado para nuestro layout, lo cual nos va a permitir un acceso directo a ellas desde el Mala Layout Editor.
De vuelta al editor, ¿por donde comenzamos?, bien, pues lo primero es irnos a “Layout->Fixed size” e indicar que nuestro trabajo va a tener un tamaño fijo de 800x600
Hacemos doble clic en el fondo para abrir el inspector de propiedades de los objetos y eliminaremos la imagen configurada para el objeto background, de esta forma nos aseguramos de que no cargará ninguna imagen no deseada.
El siguiente paso, es activar aquellos objetos que necesitamos para completar el diseño que nos hemos propuestos. Nos vamos al menú “Objects” y nos aseguraremos de que solo están marcados los siguientes: - “snap/Title”: Objeto que muestra nuestras snaps. - “Video”: Objeto que muestra nuestros vídeos. - “Game List”: Objeto que implementará nuestra lista de juegos. - “Text->Text 1”: Lo usaremos para colocar el título del juego seleccionado. - “Text->Text 2”: Lo usaremos para colocar el año y fabricante del juego seleccionado. - “Text->Text 3”: Lo usaremos para colocar la descripción de la lista actual. - “Custom->Custom 1”: Este objeto lo usaremos para montar la capa superior. - “Animation->Animation 1”: La magia de la animación , mantendrá nuestra capa base.
Ya tenemos nuestros objetos preparados para ser configurados, pero antes, debemos ordenarlos según nuestro diseño. Abrimos el diálogo del orden Z de los objetos (“Objects->Z-Order”) y ordenaremos nuestros elementos tal que así:
Si os fijáis, he ido colocando los objetos de forma que se van montando unos sobre otros desde el background. El objeto que he puesto por encima de todos es el “Video”, ya que en el diálogo, la parte de abajo es el “top” en el layout. También me he curado en salud y he colocado todo lo que no es visible por detrás del background, quedando todos ocultados.
A la hora de configurar los objetos, voy a intentar seguir el propio orden que me marcan los objetos, así que el primer objeto a configurar y tema central de este tuto, es el “Animation 1”. Este es el objeto que va a quedar por debajo de todos y cuyo trabajo es presentar una capa de scroll con la imagen que hemos creado durante la fase de diseño. Para configurar el objeto, hacemos doble clic, para abrir el inspector de propiedades, sobre “Ani 1”, que nos aparecerá en el editor arriba a la izquierda:
Hacemos clic en “Choose image file” para seleccionar nuestra capa de fondo, lo cual nos la muestra en el propio inspector y nos aseguramos de que no está marcada la opción “Transparent (uses bot-left pixel)”. Para configurar el scroll, tenemos las opciones - “Direction”: Indicará en que dirección se debe mover la capa. En nuestro caso a la derecha. - “Update Interval”: Nos dice cada cuanto tiempo se actualizará el scroll. Nosotros lo dejamos como está, es decir 50. - “Step per Interval”: Dice el número de pixeles que avanza el scroll en cada paso. Lo dejaremos en 1. Y ya está, eso es todo lo que tenemos que hacer para configurar una animación en Mala. Disponemos de cuatro capas de animación, así que la imaginación es crucial para hacer estos layouts, ahora, eso si, os advierto que las capas de animación reducen drásticamente el rendimiento de Mala, así que no os aconsejo colocar más de una.
Continuamos con nuestro objeto “Custom 1”. Mismo proceso, hacemos doble clic sobre él para poder configurar sus propiedades. Como podéis ver, estos objetos no tienen mucha historia, seleccionamos la imagen, y en este caso si que marcamos la opción “Transparent (uses bot-left pixel)”, de esta manera conseguiremos el efecto que andamos buscando, es decir, que nuestra capa de scroll aparezca en las zonas transparentes de nuestra capa superior
Por defecto el objeto no nos aparecía en la posición que queremos, así que arrastrando con el ratón o con los cursores, lo colocaremos en la posición correcta, es decir la esquina superior izquierda:
No se si a vosotros os ocurrirá lo mismo, pero a mi al configurar el objeto, se me ha quedado por encima del resto, tapándolo todo. Si es también vuestro caso, haced clic con el botón derecho del ratón sobre el objeto y seleccionad “Send to back” del menú emergente, así lo enviará al fondo, pero ojo, sin cambiar su orden z.
Continuamos configurando la lista de juegos. Arrastramos el objeto a la posición que deseamos y ajustamos su anchura, en nuestro caso 193 pixeles. También configuramos el número de elementos que aparecerán por encima del objeto seleccionado (“Top count”) y por debajo (“Bottom count”), nuestro layout está diseñado para que en la lista aparezcan 7 elementos, por lo tanto fijamos ambos valores a 3
Ahora hacemos clic en el botón “Appearance” del inspector para poder configurar el tipo de lista que vamos a usar. Marcamos la opción “Image list” que aparece en la parte inferior, lo cual indicará a mala que vamos a usar imágenes en nuestra lista de juegos en vez de texto y además nos desplegará las opciones para esta tarea. Seleccionamos “Marquee” en el campo “Display”, para que use las imágenes que configuramos en Mame como marquees. A continuación nos aseguramos de que “Alignment” esté en “Center” para que las imágenes se centren en la lista de juegos.
Si quisiésemos que nos apareciera una imagen por defecto cuando no estuviera disponible la marquee para un juego, la deberíamos configurar en “Default image”.
Volvemos al panel de layout, haciendo clic sobre el botón “Layout” del inspector, para terminar de configurar y ajustar nuestra lista de juegos. En nuestro caso he ido ajustando los valores para tener imágenes de 60x193 y que estas se acoplen a nuestro diseño
A la hora de trabajar con la lista de juegos para ajustarla, os puede ser muy útil marcar la opción “Show lines (design only)” que os mostrará unas barras de color con las dimensiones configuradas, así podréis acoplar, la lista, mejor a vuestro diseño.
Continuamos con el objeto “Text 1”. Nos lo llevamos a su posición y abrimos el inspector para darle sus propiedades. Configuraremos el tipo de fuente y color que usamos en el diseño. Para decir a Mala que texto debe mostrar, debemos configurarlo en el campo “Pattern”. Nosotros queremos que nos aparezca el título del juego, para lo cual, después de borrar el contenido del campo, hacemos clic en la flechita que está a la derecha y de los patrones que nos ofrece el editor seleccionaremos “Game->Description”. Los patrones que seleccionemos no sustituyen el campo completo, sino que se van añadiendo al final, por eso era importante borrarlo antes de añadir el patrón.
Con “Text 2” realizaremos el mismo proceso. En este caso, haremos un patrón personalizado para que muestre “(año) fabricante”
CODE
“(~g_year) ~g_manufacturer”
Podéis escribirlo a mano o usar los patrones, de todas formas los paréntesis tendréis que ponerlos vosotros mismo.
Mismo proceso para “Text 3” usando el siguiente patrón:
CODE
“~l_name: ~l_position of ~l_count”
Solamente nos queda por configurar los objetos “Snap/Title” y “Video”. Estos son los más fáciles, solamente debemos colocarlos y ajustarlos a la ventana que hemos destinado a tal propósito, colocándolos exactamente en el mismo lugar y con el mismo tamaño, de esta forma, cuando no tengamos un vídeo para un juego, quedará visible su snap
Llegados a este punto, ya tenemos configurado nuestro layout con animación en Mala. Si guardamos el trabajo, lo cual es muy recomendable, y lanzamos Mala, tendremos:
Como podéis comprobar las capas montan perfectamente y el pixelado de las transparencias apenas se nota. Hemos conseguido un layout simplista, pero bastante equilibrado y que cuenta con un efecto que resulta muy agradable visualmente.
Sonidos
Para los sonidos de nuestro layout, voy a a usar los mismo usados en el layout estándar de Mala y que podéis encontrar en la carpeta “Soundset” de la instalación de Mala. Los copiaremos dentro de la carpeta destinada a nuestro layout.
Ahora desde el Mala Layout Editor y teniendo nuestro layout abierto, abriremos el diálogo de configuración de los sonidos “Layout->Sounds”.
Configuraremos los siguientes sonidos: - “Game list/menu movement”: Sonido usado para cambiar de elemento en la lista de juegos y en el menú del frontend. - “Game list/menu end reached”: Sonido usado para indicar que estamos en el último elemento de la lista de juegos o del menú. - “Start game”: Sonido usado al lanzar un juego para su emulación - “List switch”: Sonido que usará para indicar que cambiamos de lista de juegos. - “Menu/Info select/cancel”: Sonido usado para la selección de un item en el menú y para otras opciones. - “Exit”: Sonido usado para finalizar Mala.
Con esto tendremos totalmente configurado nuestro layout.
- A SWindus y Loadman por crear este estupendo frontend. - A Empardopo por “obligarme” a escribir este tuto . - A Lord Hiryu por sus estupendas marquees y por sus notas sobre mala. - A la gente de InkScape y Gimp por esos dos formidables programas. - A la gente que escribió los estupendos tutoriales sobre Mala que están hospedados en Retrovicio.
Hola, me refería a lo que me ha aclarado el tuto, pero ya que lo mencionas, jejeje, fondo para hacer pruebas pa'la saca!!!
En serio, no he manejado mucho el editor de mala (y ninguno en realidad), pero si he leído tutos al respecto que me ayudan a pensar en cosillas para el advmenplus Vamos que este tuto me ha venido de perlas para ciertos temas.
Y ya que estoy, dudas/preguntas:
El fondo animado: Creía que el fondo era un vídeo en bucle y si no he entendido mal, se trata de una imagen que luego "scroolea". Uhnnn, interesante, muy interesante
Tema transparencias, aquí me he liado: Sabía lo del color que luego interpreta como transparencia, pero pensaba que este se podía escoger mediante una opción, y por lo que he entendido (creo que no muy bien), coge el color mas abajo a la izquierda de la imagen ¿?, ¿te refieres a que en la imagen de fondo el pixel de la esquina inferior-izquierda debe ser de ese color lila que has escogido para la "transparencia"?
Bueno, le tengo que dar algún repasillo mas al tuto.
El fondo animado: Creía que el fondo era un vídeo en bucle y si no he entendido mal, se trata de una imagen que luego "scroolea". Uhnnn, interesante, muy interesante
No has entendido mal Daesdae, es una imagen a la que se aplica un Scroll. Mala también permite meter un vídeo en el que podemos colocar un gif animado, pero en la versión actual, los vídeos no hacen caso del orden z y siempre se dibujan por encima de todo, así que solo se puede usar en una capa superior. Esto lo uso Lord Hiryu en el layout que hizo para Retrovicio en el que usó un gif animado para hacer una animación de los personajes del pacman.
QUOTE
Tema transparencias, aquí me he liado: Sabía lo del color que luego interpreta como transparencia, pero pensaba que este se podía escoger mediante una opción, y por lo que he entendido (creo que no muy bien), coge el color mas abajo a la izquierda de la imagen ¿?, ¿te refieres a que en la imagen de fondo el pixel de la esquina inferior-izquierda debe ser de ese color lila que has escogido para la "transparencia"?
Lo has entendido perfectamente, el color del pixel de la imagen que está en la esquina inferior-izquierda es el que usa como transparencia. Como decía en el tuto, Mala no soporta transparencias reales y lo que hace es no dibujar los píxeles que coincidan en color con el que está en esa posición.
¿Y si quiero poner la transparencia en la parte superior de la pantalla? ¿Cuál seria la solución? ¿Poner un pixel del color de la zona que quiero hacer transparente en la esquina inferior-izquierda?
La verdad es que estaría muy bien que implementaran las transparencias reales, son más sencillas para trabajar y el resultado sobre todo de los bordes es mucho mejor.
¿Y si quiero poner la transparencia en la parte superior de la pantalla? ¿Cuál seria la solución? ¿Poner un pixel del color de la zona que quiero hacer transparente en la esquina inferior-izquierda?
Sip Jonaro, no hay otra forma de hacerlo.
QUOTE
La verdad es que estaría muy bien que implementaran las transparencias reales, son más sencillas para trabajar y el resultado sobre todo de los bordes es mucho mejor
La verdad es que es una jodienda tener que hacerlo así, pero es lo que hay, además parece que de momento las transparencias reales no se van a tener en cuenta en el Mala.
Así iré directamente al grano. Tenia pensado poner Maximus, ya que el PC de mi Maka no da para HyperSpin, pero después de ver que en MaLa se pueden hacer cosas como personalizar los menús, me había decidido por el, pero con tu tuto, es que no creo que ni siquiera eche de menos el Hyper.
Imagino que conseguir esas cosas en Mala son un logro, pero es que después de ver Hyperspin, no sé, las sensaciones que me dan estos vídeos es como las animaciones fotograma a fotograma de las pelis antiguas de King Kong... No sé si me explico... Quiere "imitar" que te deslizas por las cajas, pero en realidad desaparecen y aparecen las carátulas, si no te fijas, ni siquiera percibes que la que estabas viendo antes está ahora en la fila delante y detrás... Vamos, que si en MALA no puede hacerse de forma directa o automática, y vosotros conseguís a base de ingenio, hacerlo, está muy bien y tiene mucho mérito, pero que para ver en tu pantalla las cajas de los juegos, deslizarte por ellas, aumentando de tamaño la central, etc., en condiciones, pues... HYPERSPIN!
. También quiero dejar claro que no voy a explicar la configuración de Mala en profundidad, sino solo aquellas partes necesarias para completar nuestro objetivo.
.
