Vamos a hacernos un layout en Attract Mode

[empardopo]

Vamos a hacernos un layout en Attract Mode

Lo primero que hay que decir es que no hay un programa gráfico para poder crear un layout sino que hay que hacerlo a manubrio en un editor de textos como podría ser el notepad, notepad++, Sublime u otro que os guste más.

La segunda cosa a tener en cuenta es una mala noticia pero tambien una buena; resulta que para hacer un layout habría que aprender un lenguaje de programación que se llama Squirrel. Ofú!, dije yo la primera vez que lo leí y fue hará un año o así, jeje. Al mismo tiempo lo bueno, es que podemos coger alguno ya hecho y toquetearlo un poco sin tener mucha idea para crear algo parecido al que teníamos pero también tener en cuanta que tendremos mucha potencia y posibilidades al ser un lenguaje de programación.

En este post intentaré traducir el link que he dejado más arriba de las instrucciones del lenguaje que hay en el link oficial y hacer algún ejemplito de layout que me sirva a mí también para ir aprendiendo...


Attract-mode Frontend

[empardopo]

Empezando con el layout para Attract Mode

Los layouts en Attract mode están almacenados en una carpeta llamada layouts dentro del directorio de Attract mode. Todos los layouts deberán estar en su propia carpeta.

Nosotros nos vamos a crear un layout al que llamaremos arcadespain. Por lo tanto crearemos una carpeta llamada arcadespain de forma que nos quedará tal que así:
E:\attractmode\layouts\arcadespain

Como podemos ver, tenemos instalado el frontend en la ruta e:\attractmode

Para que un layout funcione, tenemos que crearnos un fichero de texto plano llamado layout.nut dentro de la carpeta de nuestro layout (la que acabamos de crearnos llamada arcadspain). Este fichero es donde nosostros escribiremos un script para describir nuestro layout. Este fichero podremos editarlo con cualquier editor de texto plano como puede ser el notepad, notepad++ , sublime text, etc.

Lo primero, nosotros queremos asegurarnos que nuestro layout trabajará correctamente independientemente de algunas resoluciones, así que lo primero que haremos es decirle al frontend (fe) que queremos que el layout sea de una resolución específica.

En nuestro fichero layout.nut añadiremos las siguientes líneas:

Código: [Seleccionar]

fe.layout.width = 640;
fe.layout.height = 480;
Mientras no tengas que especificar el ancho y altura del layout, éste por defecto cogerá la resolución de pantalla la cual podría ser diferente para cada usuario. Esto asegura que Attract Mode escalará tu layout para otros usuario para acomodar la resolución para la que has diseñado el layout.

La siguiente cosa que queremos hacer es añadir algunos objetos a nuestro layout. Al menos un objeto debe ser añadido a un layout para que sea mostrado.

Attract Mode suministra funciones para poder añadir distintos elementos:

fe.add_text( str, x, y, w, h );
fe.add_artwork( art, x, y, w, h );
fe.add_listbox( x, y, w, h);
fe.add_image( img, x, y, w, h );

Probaremos todas añadiendo una a una a nuestro layout.

Image
En mi caso creo que es mejor o el ansia viva me puede y he querido añadir una imagen de fondo.

Las imágenes son automáticamente encontradas desde el path suministrado por el usuario pero puedes añadir cualquier imagen a tu layout.

Añadiremos una imagen de fondo al layout. Pero, tendremos que ser cuidadosos. Los objetos en Attract Mode son dibujados en el orden que tu los añades al layout. Esto quiere decir que si añadimos una imagen de fondo despues de otros objetos, será pintado encima por lo que no se verían. Supongo que no queremos eso, al menos por ahora, no? :-) Añadiremos esta línea arriba de todos nuestros objetos. Añade estas líneas arriba en nuestro fichero layout.nut

Código: [Seleccionar]

local bg = fe.add_image( "bg.png", 0, 0, fe.layout.width, fe.layout.height );
bg.set_rgb( 0, 100, 230 );
Este código es el del ejemplo, pero yo lo he cambiado por este otro...

Código: [Seleccionar]

local bg = fe.add_image( "FondoAS.jpg", 0, 0, fe.layout.width, fe.layout.height );
donde podéis ver que me he creado un fondo llamado FondoAS.jpg el cual he metido en el directorio de nuestro layout arcadespain.

El resultado en pantalla ha sido el siguiente:



(un pequeño pinito hecho con Photoshop)

Si añadimos detrás de esa línea la que había al principio:

Código: [Seleccionar]

bg.set_rgb( 0, 100, 230 );
Lo que haría es pintar por encima una capa del color que hayamos seleccionado. Añádela y prueba para ver los resultados...

Recuerda, que el gráfico que hemos puesto como fichero de fondo o background lo he metido en la carpeta E:\attractmode\layouts\arcadespain

Habíamos añadido un fondo pero igualmente podemos añadir otra imagen a continuación

Código: [Seleccionar]

fe.layout.width=640;
fe.layout.height=480;

local bg = fe.add_image( "fondoAS-AM-amarilloNaranja.jpg", 0, 0, fe.layout.width, fe.layout.height );
local marquesina = fe.add_image("marquesinaAS.jpg", 100, 3, 432, 70 );

quedando algo tal que así...



En este ejemplillo, tenemos que tener en cuenta dos cosas:
1.- Tenemos 2 imágenes el fondo y la marquesina pero para AM ambas son imágenes que hemos añadido con fe.add.image y sus corresponientes coordenadas.
2.- El orden en el que lo hemos añadido. Esto es algo como las capas en Photoshop. Primero hemos añadido el fondo y encima la marquesina y podemos ver ambas; si cambiamos el orden la marquesina no se vería porque el fondo se cargaría encima.

[empardopo]

< reservado >

[empardopo]

Pequeño avance, en el que he hecho un pequeño pinito con Phostoshop para crearme una imagen de fondo para nuestro layout... (no será la definitiva pero de momento servirá)

[tato27]

Empiezas bien . El background lo tienes . Ya puedes ponerselo a algun layouts y tener el fondo

[empardopo]

Empiezas bien . El background lo tienes . Ya puedes ponerselo a algun layouts y tener el fondo

El fondo todavía no está terminado... Tengo que aprender a hacer en photoshop un marquito chulo plateado para que la lista de juegos vaya dentro, jeje... Eso, por decir, algo...

[tato27]

El fondo esta asi muy bien y en azulito tambien quedaria bien. Lo malo el squirrel que lo veo dificil tela .hay que estudiar carrera para manejarlo

[empardopo]

El fondo esta asi muy bien y en azulito tambien quedaria bien. Lo malo el squirrel que lo veo dificil tela .hay que estudiar carrera para manejarlo

Yo he programado en algún que otro lenguaje así que bueno, es cuestión de ponerse. Otra cosa es para el que no haya programado nunca; entonces es algo más complicado.

Ya veré si progreso al menos para un par de cosillas que me han parecido interesantes...

[gucaza]

Grandioso Empardopo, me gusta, tenia en mente hacer un layout genérico para que le valga para varios sistemas, ahora estoy intentando crear un layout para la Atari800 y me gustaría que sigas con los comandos!

[empardopo]

Vamos a intentar ir retomando el tema al menos para cositas fáciles...

Habíamos añadido un fondo pero igualmente podemos añadir otra imagen a continuación

Código: [Seleccionar]

fe.layout.width=640;
fe.layout.height=480;

local bg = fe.add_image( "fondoAS-AM-amarilloNaranja.jpg", 0, 0, fe.layout.width, fe.layout.height );
local marquesina = fe.add_image("marquesinaAS.jpg", 100, 3, 432, 70 );

quedando algo tal que así...



En este ejemplillo, tenemos que tener en cuenta dos cosas:
1.- Tenemos 2 imágenes el fondo y la marquesina pero para AM ambas son imágenes que hemos añadido con fe.add.image y sus corresponientes coordenadas.
2.- El orden en el que lo hemos añadido. Esto es algo como las capas en Photoshop. Primero hemos añadido el fondo y encima la marquesina y podemos ver ambas; si cambiamos el orden la marquesina no se vería porque el fondo se cargaría encima.