Mala: Menús personalizados mediante "Mala Tree Editor"

Introducción

La navegación en Mala es muy sencilla. Por un lado tenemos emuladores, y por otro tenemos listas de juegos. Utilizamos la palanca en lateral para navegar por las distintas listas de juegos y SHIFT + Palanca en lateral para movernos por los distintos emuladores. Es el mismo estilo de navegación que utilizan otros front-end.

No obstante Mala, incorpora la opción de sustituir este modelo de navegación por un menú jerárquico en arbol, que nosostros mismos podemos definir a nuestro antojo. Por ejemplo, podríamos tener un menú principal con dos opciones (mame y consolas) y desde ahi abrir otros menus y listas de juegos.

Un detalle bastante majo que tiene mala, es que permite definir snapshots, para estas opciones de menú. De forma que al ir moviendo el cursor por la lista de opciones el snap vaya cambiando, de manera análoga a cómo cambian los pantallazos cuando nos movemos por la lista de juegos.

En este tutorial vamos a realizar un menú de ejemplo, con tres emuladores y ocho listas de juegos. La idea es que se entienda el concepto y los pasos a seguir, para que luego cada cual se pueda montar el menú a su gusto.

Es necesario indicar, que antes de empezar, deberías tener mala instalado, configurado y funcionando. Si no es así te sugiero que empieces por leer la guia de Mala antes de seguir adelante

El menú de ejemplo

Cuando usamos el mala tree, nos da la opción de asignar un layout independiente a cada menú y cada lista de juegos, aunque se pueden reutilizar layouts, es decir asignar el mismo a más de un menú.

En nuestro ejemplo, vamos a crear un menú con la siguiente estructura:

Menu principal
   * Mame
         * Todos los juegos
         * Neo Geo
         * Capcom CPS
         * Favoritos
   * Megadrive
         * Todos los juegos
         * Favoritos
   * Supernintendo
         * Todos los juegos
         * Favoritos

La cosa se puede complicar tanto como queramos, metiendo emuladores y listas a porrillo, pero en lineas generales para este ejemplo nos sirve.

Lo primero que vamos a hacer, es crear un layout genérico que nos sirva para todos los menús (Menú principal, Mame, Megadrive, Supernintendo y NES) y luego que las listas de juegos de cada plataforma lleven su layout independiente. Aunque igualmente se podría definir un layout independiente para cada menú, depende de las ganas que se tenga de trabajar.

Osea que tendremos que crearnos los siguientes layouts:

menu.mll y mame.mll

juegos_megadrive.mll y juegos_supernintendo.mll

Como veis los layouts de ejemplo que vamos a utilizar, cuentan todos con una lista, y un cuadro de snapshots.

Aparte de eso, necesitaremos también unos ficheros png con fondo transparente, para representar cada una de las opciones de menú, por ejemplo estos:

Como estamos que nos salimos, decidimos que cada lista de juegos también tenga su iconito personalizado.

por supuesto, necesitaremos también crearnos las listas de juegos necesarias, para ello emplearemos el generador de listas de Mala:

mame_todos.mlg
mame_neogeo.mlg
mame_capcomcps.mlg
mame_favoritos.mlg
megadrive_todos.mlg
megadrive_favoritos.mlg
supernintendo_todos.mlg
supernintendo_favoritos.mlg

Una vez que tenemos todo listo, arrancamos el editor de menús del mala. El uso es muy simple, a partir de la raiz, vamos creando menús y dentro de los menús colgamos listas de juegos, nos debería quedar tal que así:

Como se puede ver en el cuadro de la derecha, para cada menú, seleccionaremos una etiqueta y un layout, mientras que para cada lista de juego, tendremos que seleccionar etiqueta, layout, emulador y lista de juegos.

La idea es que a todos los menús (Principal, mame, megadrive y supernintendo) le asigneis el mismo layout (menu.mll), mientras que las listas de juegos llevarán un layout que corresponde a su sistema. Además de eso, a cada lista habrá que asociarle el emulador y el fichero de lista de juegos correspondiente.

Si tenemos nuestros layouts en una carpeta distinta a la de la instalación de Mala, es necesario ir al menú "File/Directories" y especificar la carpeta en el cuadro "Layouts Folder", si no lo hacemos el desplegable de layouts aparecerá vacio.

Una vez tenemos listo el arbol, lo salvamos con el nombre "mala.mlt" en el directorio de instalación de Mala.

El siguiente paso es crear una carpeta para almacenar los iconos correspondientes a las opciones de menú, esta carpeta la podemos crear donde queramos. Los iconos deben estar en formato png y es recomendable que tengan fondo transparente, para que encajen mejor en el Layout.

La nomenclatura de los iconos también es importante. La norma es que el icono debe llevar por nombre la etiqueta de la opción de menú que representa, llevando como prefijo la etiqueta del menú superiore en la jerarquía y usando el caracter "_" como separador.

Según nuestro ejemplo, los iconos de las opciones de menú tendrían estos nombres:

menu principal_mame.png
menu principal_megadrive.png
menu principal_super nintendo.png

Y los de las listas de juegos estas otras.

mame_capcom cps.png
mame_favoritos.png
mame_neo geo.png
mame_todos los juegos.png
megadrive_favoritos.png
megadrive_todos los juegos.png
super nintendo_favoritos.png
super nintendo_todos los juegos.png

Los "iconos de favoritos" y "todos los juegos" como se van a repetir, simplemente copiamos el archivo y lo renombramos.

Importante: los nombres de los ficheros, siempre en minúsculas

Bueno pués ya está casi listo. Lo que resta es arrancar el Mala e irnos a la pantalla de opciones. Allí debemos dirigirnos a la pestaña "GUI" subpestaña "Layout", tenemos que marcar la opción "Use tree" y en la casilla "Tree menu snaps" poner la ruta de la carpeta donde hemos guardado los iconos.

Pulsamos Ok, y reiniciamos Mala, y si todo a ido como debe estaremos viendo nuestro menú principal. Para movernos por él utilizamos la palanca, para seleccionar una opción el botón "1", y para volver al menú anterior la tecla ESC.

Notese que ya no funciona el atajo de moverse por las listas de juegos moviendo la palanca en horizontal, ni tampoco SHIFT + Palanca para cambiar de emulador

Estos son unos pantallazos de cómo queda el resultado.

La verdad es que los iconos lucen demasiados bordes dentados, creo que esto es debido a que Mala no interpreta los pixeles semitransparentes del png, y los pinta como blanco. Cuando visualizo el png en otros editores los bordes salen muy suaves, en fin.

Espero que lo hayais encontrado de utilidad y que lo utiliceis para darle un poco más de vidilla a vuestros menús

Si quereis descargar los layouts utilizados en este tutorial, los tenéis aquí.

Paul Sernine