00.- Introducción
Esta es la traducción que he hecho del tutorial de Atomic Layout Editor que hay en la web de Atomic. Nos va a mostrar cómo crear un diseño del estilo a HyperSpin de una manera rápida y sencilla.
No es la documentación completa de AtomicLayoutEditor. Cubre menos del 10% de las posibilidades que nos ofrece AtomicLayoutEditor, sin embargo nos dará la base y el conocimiento necesario para ser capaces de crear fantásticas animaciones.
Se puede encontrar todo el material de este tutorial en el siguiente enlace:
http://www.atomicfe.com/Downloads/doc/tutorial_layout_editor/material_tuto_layout_editor.zip
Contenido del archivo de material:
Hyperspin_original_layout_after Burner.zip, es un diseño hecho por Aabra que es utilizado por entorno gráfico HyperSpin. Son las imágenes originales que utilizaremos en el tutorial.

After_burner_image_reworked, contiene imágenes retocadas por mí para que puedan funcionar en Atomic como lo describo en el tutorial..

Aburner_final, es el diseño que obtenemos al final del tutorial.

No os asustéis al ver tanto material. Tened en cuenta que hay 60 ilustraciones para tener detalle de lo que vamos haciendo en todo momento. Espero que os anime a probarlo.


01.- Preparar la estructura de carpetas

Primeramente, ¿Qué es un diseño de HyperSpin para Atomic? Pues es un sencillo conjunto de diseños, que se agrupan como subcarpetas del diseño principal.
Si observas el diseño Hyperspin_mame_set (que se puede descargar del sitio Web de AtomicFE), verás que en la carpeta hay un conjunto de subcarpetas que tienen los mismos nombres que las roms.

En el primer nivel de la carpeta de HyperSpin_mame_set encontrarás varios ficheros entre los que se incluye uno llamado Layout.cfg. Estos archivos se basan en un Diseño Atomic. Digamos que es el diseño que se utilizará en caso de que se especifique un juego y no se encuentre.
Después encontrarás una carpeta por juego y en esas carpetas también hay un archivo Layout.cfg y varios archivos de dibujo. En cada subcarpeta hay un Diseño Atomic.
En este tutorial, se supone que deseamos mejorar el HyperSpin_mame_set añadiendo diseños para juegos nuevos. Bien, supongamos que queramos añadir al conjunto un diseño para el juego After Burner:
Lo primero que habría que hacer, es encontrar el nombre de rom del juego. La Rom de After Burner se llama en mame: aburner.zip Por tanto, la carpeta donde ubicaremos el diseño se debera llamar: aburner.
Así pues, creamos una subcarpeta por debajo de HyperSpin_mame_set llamada aburner.



02.- Recopilación y preparación de datos gráficos para Atomic
Antes de continuar con la creación del diseño, lo primero que debemos hacer es recopilar los datos gráficos. Por eso habrá que buscar por la Web para encontrar algo decente. También puedes descargar el diseño que hay de HyperSpin y tomar las ilustraciones.
Para este tutorial, tomaré los gráficos de HyperSpin para After Burner.
Las imágenes de HyperSpin son ilustraciones que han sido retocadas por maestros del diseño. Ellos han utilizado imágenes de 24 ó 32 bit usando transparencias PNG. Sin embargo, AtomicFE no puede gestionar ni utilizar la característica Construir Transparencias, en lugar de eso, coge un color y lo define como “Transparente”. El resultado en pantalla es más o menos el mismo, pero Atomic por razones de rendimiento, trabaja con imágenes de 16 bit y no puede utilizar la característica de Construcción de Transparencia. Así que utilizaremos esta ilustración, que tendrá que retocar un poco, para cambiar la “Transparencia” por un color que se usará como “Transparente”.
Por ejemplo, imagine que esta imagen es la original (Ha sido abierta con la herramienta gratuita: The Gimp)

Tendremos que retocarla para obtener:

La zona de color rosa (en RGB se define como 255,0,255), la utilizaremos como color clave en Atomic. Por supuesto podría haber sido otro color pero en este ejemplo utilizaremos el rosa. Lo más importante es que el color que hayamos definido como clave sea el mismo para todas las imágenes de un mismo diseño.
Todo eso lo podemos hacer utilizando PhotoShop, The Gimp o tu utilidad de diseño preferida. Con The Gimp lo hice de la siguiente forma (no es que sea un experto con The Gimp, pero sin duda es la mejor manera de hacerlo).
Abre el dibujo original con The Gimp y selecciona la zona “transparente” usando la herramienta de selección “Varita mágica”.

A continuación selecciona el color RGB (255,0,255) en la paleta de color:

Y con la herramienta “Relleno” selecciona la zona marcada para rellenarla.

Después selecciona Guardar imagen, en una carpeta llamada C:images.
Hacer los mismos pasos para las imágenes que quiera utilizar en el diseño.
Bien, pues en este punto deberíamos tener un conjunto de imágenes en la carpeta preparada para usar con Atomic. Ahora empezaremos a realizar el diseño.
03.- Iniciar un diseño nuevo en AtomicLayoutEditor
Inicia AtomicLayoutEditor. Haz clic sobre el botón … y selecciona la carpeta vacía que creaste ABURNER.

Mantener la resolución a 640x480. El conjunto Hyperspin utiliza esa resolución. Después presiona OK, y esto es lo que verá:

En la parte de la izquierda, tienes el selector de objetos. Esta es la lista de todos los objetos que puedes utilizar en el diseño. Por ahora todos ellos están en un estado “no visible”.
El orden que tienen los objetos en la lista representa también en qué capa está, es decir, que cuanto más arriba esté el objeto, más profunda es la capa.
Para cambiar la “capa” de un objeto tienes que seleccionar un objeto y usar uno de estos botones:
Este botón se utiliza para ocultar o hacer visible un objeto en el diseño.
También puedes ver una zona negra que representa la pantalla. Si un objeto está en esa zona, será visible en pantalla.
Después hay una paleta de “Herramientas”, vacía por ahora, que contendrá las propiedades del objeto seleccionado.


04.- Añadir una Lista
Ahora podemos comenzar el diseño. ¡El primer objeto que vamos a poner es una lista de juegos!
En el caso del conjunto HyperSpin, es muy importante que la lista de cada diseño se encuentre ubicada exactamente en el mismo lugar. Si no lo hace así, cuando vaya a examinar juegos, la lista cambiará de posición y aspecto, y no quedaría bien. Por eso en este tutorial, vamos a usar la misma configuración de lista que otros diseños del conjunto HyperSpin.
Selecciona el objeto “Text List” en el selector de objetos
Haz doble clic sobre el objeto o presiona el botón

Ves a la pestaña “General” en el cuadro de diálogo que te sale y rellénalo como el que se encuentra debajo:

No olvides hacer clic en Apply
A continuación vete a la pestaña “Font”, presiona el botón Change Font y selecciona la fuente “Impact” de tamaño 26.


En este paso deberías haber obtenido algo como esto:

Ahora, tenemos que definir la imagen que utilizará la lista. El objeto Text Image necesita tener una imagen de “Fondo” y una imagen de “Selección”. En nuestro caso, como queremos que la lista sea exactamente igual que la de los otros diseños del conjunto, lo más fácil de hacer es obtener las ilustraciones de otros diseño.
Si mira otros diseños, observará que la lista no tiene imagen de fondo. Bueno en realidad, la tiene pero es transparente. Vamos hacer lo mismo.
Vete a la pestaña “Images” de la paleta, y presiona el botón “change image”

Navega a otro diseño del conjunto (por ejemplo Btime), y selecciona la imagen “Transparent_background”.

Después haz lo mismo con el botón “Change Selection”

Y selecciona la imagen “Selection_with_finger” del diseño Btime.

Debería quedarte algo como esto:

Puedes ver, que la lista todavía no es transparente. ¡Tenemos una zona rosa fea!
Eso es porque el color “Transparent” para el diseño está establecido por defecto a negro, y aquí estamos utilizando el rosa. Así que vamos a cambiar eso.
Presiona el botón Propiedades de Diseño. Después en el cuadro de diálogo que se te abre, haz clic en el botón Change Transparent color y selecciona el rosa (RGB 255,0,255).

Después presiona Apply y Close:

En este punto deberías obtener algo como esto. Como ves la lista ya es transparente:

Ahora puedes probarlo en Atomic. Para hacer una prueba rápida, vete al menú “View” y selecciona “Preview in Atomic Horizontal”.

Como ves, por ahora únicamente hay una lista de juegos. Se puede observar también que la mano y el dedo que se encuentran en el nombre del juego hacen difícil la lectura del nombre. Así que tendremos que ajustar la posición de selección. Para ello:
Seleccione el objeto “Text List”, después en la paleta de herramientas vaya a la pestaña “List Editor”, y dentro a la subpestaña “Selection Ajustement” e introduzca un valor como el que se muestra en la siguiente captura de pantalla. Por último presiona Apply

Bien, pues este punto ya tenemos nuestra lista preparada.
05.- Añadir un fondo
Ahora, agregaremos varios gráficos.
Vamos añadir un fondo teniendo en cuenta el mismo principio. Así que, selecciona el objeto “Layout/video” (Nota: también se puede seleccionar un objeto “Image x”, un objeto Custom0, o un objeto Custom4. Todos son del mismo tipo). El nombre es diferente dependiendo del histórico de Atomic. (versiones antiguas).
Presiona el botón , y a continuación vete a la paleta de herramientas. En la pestaña “image”, presiona “change image” y selecciona la imagen que deseas como fondo.

Como puedes ver, ahora, tenemos otro problema. ¡¡La lista está oculta!!
Que no cunda el pánico, la lista está oculta simplemente porque está debajo del fondo del diseño. Para cambiar eso, selecciona “Layout/object”, y presiona el botón “Decrease Layer” hasta que aparezca la lista.

En el momento en el que el objeto Layout/video esté por debajo de la capa Text List, la lista vuelve aparecer.



06.- Añadir una zona para Instantáneas (SNAPS)
Lo normal, es que cuando se seleccione un juego, muestre una captura o un vídeo del mismo. Hay un objeto dedicado para eso. El objeto “SNAP”.
Así que selecciona el objeto “SNAP”, y presiona sobre el botón: para hacerlo visible.
Como los “SNAP” están ubicados bajo la capa Background, no se verán. Así que como hicimos anteriormente, cambiamos el diseño de la snap, pero esta vez presionando sobre el botón “Increase layer”.

Selecciona la zona Snap con el ratón y arrástrala a la pantalla, al lugar donde desees. También puedes cambiar el tamaño de la zona arrastrando del borde INFERIOR-DERECHO (únicamente ese borde. El tamaño no se puede cambiar todavía desde otros bordes).

Vamos a colocarlo en la ubicación X:400, Y:94 Widht:210, Height: 209.

Ahora, la zona Snap necesita una imagen. Pero esta imagen no va ser la del juego. Esta es una zona dinámica y mostrará automáticamente la imagen del juego seleccionado si la encuentra. ¡La imagen que tienes que dar aquí es la que se mostrará en el caso en el que no se encuentre una captura de pantalla cuando selecciones un juego!
Entonces lo que tenemos que hacer es, únicamente, mostrar un área negra con el texto “Missing Snap” cuando no haya una snap. La imagen la tienes que crear con tu herramienta preferida de dibujo y guardarla como PNG. Tienes que obtener algo así:

Después selecciona el objeto “SNAP”, y sobre la pestaña “images” presiona el botón “change image” y selecciona tu imagen “Missing Snap”.

Ahora vamos añadir un fotograma en blanco alrededor de la captura.
Marca la casilla “Frame Around” y después presiona el botón “Frame Color” y elije el Color Blanco.

Cuando lo tengas, prueba otra vez tu diseño en Atomic para ver el resultado.

07.- Añadir imágenes adicionales.
Bien, ahora tenemos una lista, un fondo, y una captura de imagen. Vamos añadir más elementos gráficos.
Haz visible el objeto “Image 1 / Video” (como hiciste con el objeto anterior).

Vete a la pestaña “images” en la paleta de herramientas y presiona “change image”. Selecciona por ejemplo la imagen que desees utilizar para el título, y posiciónala con el tamaño que desees.

Repite la operación con otras imágenes que desees poner en el diseño, utilizando el Objeto “image X / Video”.

No olvides guardar regularmente tu diseño presionando este botón:

¡ATENCIÓN! En el menú “Layout”, verá la opción “Clean, Save and Optimise”. NO UTILICE ESA OPCION HASTA QUE HAYA FINALIZADO EL DISEÑO. Puedes estropear la calidad de la imagen principal si por ejemplo decides cambiar el tamaño de un objeto.
Ahora, prueba de nuevo tu diseño en Atomic para ver el resultado.



08.- Añadir un efecto de animación
Vamos añadir un efecto de animación.
En primer lugar, vamos a poner un efecto “elastic” cuando aparezca el título “After burner”.
Selecciona tu imagen de título, y vete a la pestaña “Trajectory” de la paleta y presiona Trajectory tool.

Se abrirá el cuadro de diálogo “Trajectory helper tool”. Varios campos aparecen rellenados como la posición X, Y de tu objeto.
Tomando en cuenta la posición de TU objeto, rellena la pestaña “Penner Function” y presiona sobre el botón Generate trajectory.

Aquí, hemos generado una trayectoria para el objeto, que comienza fuera de la pantalla en la posición X:-369 y finaliza en la posición X:16. La posición Y se mantiene igual. La duración aproximada es de 1 segundo (1000 milisegundos) y le decimos que queremos un efecto “elastic”.
Cuando presionamos sobre “Save new Trajectory” te solicitará un nombre de fichero y una ubicación. Asegúrate de guardarlo en tu carpeta de diseño actual. Ponle por ejemplo el nombre “Title.traj”.

A continuación cierra la herramienta Trajectory haciendo clic sobre:

Después adjunta el archivo de Trayectoria que acabas de crear al objeto siguiendo estos pasos:

Ahora, pruébalo de nuevo en Atomic para ver el resultado.

Si lo has hecho correctamente, tu título debería aparecer con un efecto elástico.
Ahora, vamos hacer algo similar con el avión de la parte inferior derecha, pero esta vez elegiremos una trayectoria lineal.

Guarda la nueva trayectoria y llámala “Plane1.traj”, después adjúntala al objeto

Pruébalo de nuevo en Atomic para ver el resultado.

Ahora vamos a gestionar los otros 2 aviones con el mismo tipo de efecto.
Para el primero:

Genera una trayectoria como esta:

Llámala, “plane2.traj” y adjúntala al objeto como se ve aquí:

Ten en cuenta para el primero, NO MARCAR LA CASILLA “Only one pass”.
Prueba de nuevo en Atomic para ver los resultados.
Para el último:

Genera la trayectoria utilizando estos parámetros:

Guárdala como “Plane3.traj”, Y adjúntala al objeto.

Ahora, pruébalo en Atomic como hizo anteriormente.
Vamos hacer algunos ajustes al diseño. Reorganiza las capas utilizando el botón “Decrease and Increase layer” para obtener esto:
(El avión pequeño ahora está debajo de la lista de texto)

09.- Añadir efectos de rotación.
Ahora, vamos hacer aparecer la zona snap con un efecto de traslación + rotación.
Selecciona el Objeto “Snap”, y vete a la pestaña “Trajectory” de la paleta. Presiona “Trajectory tool”. Rellena los parámetros como se muestra en la siguiente captura de pantalla y presiona “Genere trajectory”. Guárdala como “Snap.traj”.

Después adjúntala al objeto Snap.

Prueba el diseño en Atomic. Verás aparecer el Snap desde la derecha haciendo una trayectoria lineal sin rotación.
Para añadir el efecto rotación, vete otra vez a la herramienta Trayectoria.
Vete a la pestaña “Rotation”.
Haz clic sobre “Load reference trajectory”, selecciona el archivo Snap.traj que creaste anteriormente.
Introduce –359 grados como Ángulo de Inicio y 0 como Ángulo Final.
Haz clic sobre “Rotation from start to end”
Después presiona en “Save new Trajectory” y guárdala como Snap.traj (sobrescribe el archivo existente).

Como Snap.traj ya está adjunto al objeto SNAP, no necesitas volver adjuntarlo.
Pruébalo en Atomic para ver el resultado. Ahora tu SNAP debe tener un efecto de rotación.


10.- Añadir Sincronización
Supón por ejemplo que deseas que esos 2 aviones pequeños sólo se inicien cuando la zona de animación SNAP se haya completado.
Hacemos lo siguiente.
Selecciona un objeto de los aviones pequeños. Le vamos a decir al primero que le adjunte la trayectoria “plane2.traj” Para ello:
Abre la herramienta trayectoria.
Presiona sobre el botón “Load Trajectory to Synchronise”, y selecciona el archivo “Plane2.traj”.
Presiona sobre el botón “Load Reference Trajectory”, y selecciona el archivo “Snap.traj”.
Después indica el punto de referencia de trayectoria donde desees que comience la nueva trayectoria.
El valor predeterminado se establece en el último punto de referencia de la trayectoria. Así que vamos a dejar este valor por defecto como nosotros queramos.
Pulsa sobre el botón “Generate >>”.
Se genera una trayectoria con un conjunto de puntos en –1000,-1000,0,0,0, sin embargo si observas al final encontrarás el punto de trayectoria para sincronizar. Atomic inicia todas las trayectorias a la vez. Para sincronizarlas, simplemente emplaza el objeto en un área no visible hasta el punto de referencia de trayectoria sea alcanzado.
Presiona el botón “Save Resulting Trajectory” y guárdala “Plane2.traj” (sobreescribe el archivo existente)

Haz EXACTAMENTE los mismos pasos para el otro avión pequeño. Pero esta vez usando Plane3.traj como trayectoria.
Prueba el diseño en Atomic.


11.- Añadir un efecto Zoom.
Ahora, nuestro diseño ya está completado, pero en este apartado vamos a modificarlo para practicar alguna funcionalidad más.
Ahora mismo en nuestro diseño, el Título hace un efecto elástico. Vamos a cambiarlo para que haga un efecto Zoom.
Selecciona el objeto Title y vete a la herramienta de trayectoria.
Necesitamos hacer un “arreglo” a la trayectoria, para decirle al objeto que permanezca en su lugar una cantidad de tiempo. Después añadiremos el efecto “Zooming” para esta trayectoria.
Así que rellena los campos como se muestra en la siguiente captura de pantalla. Ten en cuenta que StartX y StartY deben ser igual que EndX y EndY, y el valor que tiene que poner es el punto central de la imagen Title
Presiona el botón “Generate Trajectory”.
Después haz clic sobre el botón “Use as source for rotation or Zooming”.

Cuando presionas sobre ese botón, la pestaña actual cambia para ir a la pestaña “rotation”.
Cambia la pestaña y vaya a la pestaña “Zooming”.
Rellena los campos como se muestra en la captura de más abajo. Y no olvides marcar “Keep Center Position”.
Presiona el botón “Zoom>>”, y guarda la nueva trayectoria como “Title_with_zoom.traj”.

Después adjunta el archivo “Title_with_zoom.traj” al objeto.

Y ahora pruébalo en Atomic para ver el resutado.


12- ¡Optimizar el diseño!
Bien, ahora tienes la base para poder crear un diseño para HyperSpin. Por supuesto se puede combinar la trayectoria para crear efectos más avanzados. Las trayectorias son simples archivos de texto que puedes editar con Notepad (o el editor de la herramienta de trayectoria). Por eso puedes hacer fácilmente un logo que llegue haciendo zoom, después se traslade a la izquierda utilizando sinus trajectory, y vuelva a la derecha usando un efecto elástico y de rotación. Es completamente libre.
Tu diseño ya lo tienes completado, y si ya estás seguro de no querer tocarlo más, o quieres dejarlo disponible para otros, lo mejor es optimizarlo. Haciendo esto mejorará el rendimiento.
Hacer eso es realmente simple, sólo vete al menú Layout y elije “Clean, save and optimise”

Te solicitará varias cosas. Dile “yes”.
Ahora que tu diseño está optimizado, puedes probarlo otra vez. Debería ser mucho más rápido. (Depende la imagen que haya usado). No obstante si lo tienes que modificar otra vez intentando alargar la imagen, perderá calidad. Por eso, antes de optimizarlo, lo mejor es hacer una copia de seguridad de todo el directorio. En el caso que quisiéramos tocarlo otra vez, lo haríamos desde la copia.