Cómo crear rápidamente un diseño HyperSpin con AtomicLayout Editor.

(Traducido al castellano por Cabecita)

 

INDICE

 

00.- Introducción. 2

01.- Preparar la estructura de carpetas. 2

02.- Recopilación y preparación de datos gráficos para Atomic. 3

03.- Iniciar un diseño nuevo en AtomicLayoutEditor. 6

04.- Añadir una Lista. 8

05.- Añadir un fondo. 13

06.- Añadir una zona para Instantáneas (SNAPS) 15

07.- Añadir imágenes adicionales. 18

08.- Añadir un efecto de animación. 19

09.- Añadir efectos de rotación. 24

10.- Añadir Sincronización. 26

11.- Añadir un efecto Zoom. 27

12- ¡Optimizar el diseño! 28

 


 

00.- Introducción

 

Este sencillo tutorial le mostrará como crear un diseño del estilo a  HyperSpin de una manera rápida y sencilla.

No es la documentación completa de AtomicLayoutEditor. Este tutorial 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.

 

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.

 

 

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 observa el diseño Hyperspin_mame_set (que se puede descargar del sitio Web de AtomicFE), verá 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á 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á 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 hay 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 se puede 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 utilizan 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:

 

 

Donde esté el color rosa (en RGB se define como 255,0,255), lo 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 su 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).

 

Abra el dibujo original con The Gimp y seleccione la zona “transparente” usando la herramienta de selección “Varita mágica”.

 

 

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

 

 

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

 

 

Después seleccione Guardar imagen, en una carpeta llamada C:\images.

 

Hacer los mismos pasos para las imágenes que quiera utilizar en el diseño.

 

Bien, 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

 

Inicie AtomicLayoutEditor. Haga clic sobre el botón “…” y seleccione la carpeta vacía que creó ABURNER.

 

 

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

 

 

En la parte de la izquierda, tiene el selector de objetos. Esta es la lista de todos los objetos que puede 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 tiene 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 puede 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.

 

Seleccione el objeto “Text List”  en el selector de objetos.

 

Haga doble clic sobre el objeto o presione el botón  

 

 

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

 

 

No olvide hacer clic en “Apply”.

 

A continuación vaya a la pestaña “Font”, presione el botón “Change Font”, y seleccione la fuente “Impact” de tamaño 26.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

En este paso debería 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ños.

 

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.

 

Vaya a la pestaña “Images” de la paleta, y presione el botón “change image”.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

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

 

 

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

 

 

 

Debería quedarle algo como esto:

 

 

Puede 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.

 

Presione el botón “Propiedades de Diseño”. Después en el cuadro de diálogo que se le abre, haga clic en el botón “Change Transparent color” y seleccione el rosa (RGB 255,0,255).

 

 

Después presione Apply y Close:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

Ahora puede probarlo en Atomic. Para hacer una prueba rápida, vaya al menú “View” y seleccione “Preview in Atomic Horizontal”.

 

 

Como ve, 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 presione “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, seleccione 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).

 

Presione el botón  , y a continuación vaya a la paleta de herramientas. En la pestaña “image”, presione “change image” y seleccione la imagen que desee como fondo.

 

 

Como puede 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, seleccione “Layout/object”, y presione 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 seleccione el objeto “SNAP”, y presione 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”.

 

 

 

Seleccione la zona Snap con el ratón y arrástrela a la pantalla, al lugar donde desee. También puede 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 tiene que dar aquí es la que se mostrará en el caso en el que no se encuentre una captura de pantalla cuando seleccione 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 tiene que crear con su herramienta preferida de dibujo y guardarla como PNG. Tiene que obtener algo así:

 

 

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

 

 

Ahora vamos añadir un fotograma en blanco alrededor de la captura.

Marque la casilla “Frame Around” y después presione el botón “Frame Color” y elija el Color Blanco.

 

 

Cuando lo tenga, pruebe otra vez su 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.

 

Haga visible el objeto “Image 1 / Video” (como hizo con el objeto anterior).

 

 

Vaya a la pestaña “images” en la paleta de herramientas y presione “change image”. Seleccione por ejemplo la imagen que desee utilizar para el título, y posiciónela con el tamaño que desee.

 

 

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

 

 

No olvide guardar regularmente su 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. Puede estropear la calidad de la imagen principal si por ejemplo decide cambiar el tamaño de un objeto.

 

Ahora, pruebe de nuevo su 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”.

 

Seleccione su imagen de título, y vaya a la pestaña “Trajectory” de la paleta y presione Trajectory tool.

 

 

Se abrirá el cuadro de diálogo “Trajectory helper tool”. Varios campos aparecen rellenados como la posición X, Y de su objeto.

Tomando en cuenta la posición de SU objeto, rellene la pestaña “Penner Function”  y presione 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” le solicitará un nombre de fichero y una ubicación. Asegúrese de guardarlo en su carpeta de diseño actual. Póngale por ejemplo el nombre “Title.traj”.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

Después adjunte el archivo de Trayectoria que acaba de crear al objeto siguiendo estos pasos:

 

 

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

 

 

Si lo ha hecho correctamente, su 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.

 

 

Guarde la nueva trayectoria y llámela “Plane1.traj”, después adjúntela al objeto

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Pruébelo 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:

 

 

Genere una trayectoria como esta:

 

 

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

 

 

Tenga en cuenta para el primero, NO MARCAR LA CASILLA “Only one pass”.

 

Pruebe de nuevo en Atomic para ver los resultados.

 

Para el último:

 

 

Genere la trayectoria utilizando estos parámetros:

 

 

Guárdela como “Plane3.traj”, Y adjúntela al objeto.

 

 

Ahora, pruébelo en Atomic como hizo anteriormente.

 

Vamos hacer algunos ajustes al diseño. Reorganice 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.

 

Seleccione el Objeto “Snap”, y vaya a la pestaña “trajectory”  de la paleta. Presione “Trajectory tool”. Rellene los parámetros como se muestra en la siguiente captura de pantalla y presione “Genere trajectory”. Guárdela como “Snap.traj”.

 

 

Después adjúntela al objeto Snap.

 

 

Pruebe el diseño en Atomic. Verá aparecer el Snap desde la derecha haciendo una trayectoria lineal sin rotación.

 

Para añadir el efecto rotación, vaya otra vez a la herramienta Trayectoria.

 

Vaya a la pestaña “Rotation”.

 

Haga clic sobre “Load reference trajectory”, seleccione el archivo Snap.traj que creó anteriormente.

 

Introduzca –359 grados como Ángulo de Inicio y 0 como Ángulo Final.

 

Haga clic sobre “Rotation from start to end”

 

Después presione en “Save new Trajectory” y guárdela como Snap.traj (sobrescriba el archivo existente).

 

 

 

Como Snap.traj ya está adjunto al objeto SNAP, no necesita volver adjuntarlo.

 

Pruébelo en Atomic para ver el resultado. Ahora su SNAP debe tener un efecto de rotación.

 

10.- Añadir Sincronización.

 

Suponga por ejemplo que desea que esos 2 aviones pequeños sólo se inicien cuando la zona de animación SNAP se haya completado.

 

Hacemos lo siguiente.

 

Seleccione un objeto de los aviones pequeños. Le vamos a decir al primero que le adjunte la trayectoria “plane2.traj”  Para ello:

 

Abra la herramienta trayectoria.

 

Presione sobre el botón “Load Trajectory to Synchronise”, y seleccione el archivo “Plane2.traj”.

 

Presione sobre el botón “Load Reference Trajectory”, y seleccione el archivo “Snap.traj”.

 

Después indique el punto de referencia de trayectoria donde desee 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.

 

Pulse sobre el botón “Generate >>”.

 

Se genera una trayectoria con un conjunto de puntos en –1000,-1000,0,0,0, sin embargo si observa al final encontrará el punto de trayectoria para sincronizar. Atomic inicia todas las trayectorias a la vez. Para sincronizarlas, simplemente emplace el objeto en un área no visible hasta el punto de referencia de trayectoria sea alcanzado.

 

Presione el botón “Save Resulting Trajectory” y guárdela “Plane2.traj” (sobreescriba el archivo existente)

 

 

Haga EXACTAMENTE los mismos pasos para el otro avión pequeño. Pero esta vez usando Plane3.traj como trayectoria.

 

Pruebe 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.

 

Seleccione el objeto Title y vaya 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 rellene los campos como se muestra en la siguiente captura de pantalla. Tenga 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

 

Presione el botón “Generate Trajectory”.

 

Después haga clic sobre el botón “Use as source for rotation or Zooming”.

 

 

Cuando presiona sobre ese botón, la pestaña actual cambia para ir a la pestaña “rotation”. 

Cambie la pestaña y vaya a la pestaña “Zooming”.

 

Rellene los campos como se muestra en la captura de más abajo. Y no olvide marcar “Keep Center Position”.

Presione el botón “Zoom>>”, y guarde la nueva trayectoria como “Title_with_zoom.traj”.

 

 

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

 

 

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

 

12- ¡Optimizar el diseño!

 

Bien, ahora tiene 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 puede editar con Notepad (o el editor de la herramienta de trayectoria). Por eso puede 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.

 

Su diseño ya lo tiene completado, y si ya está seguro de no querer tocarlo más, o quiere dejarlo disponible para otros, lo mejor es optimizarlo. Haciendo esto mejorará el rendimiento.

 

Hacer eso es realmente simple, solo vaya al menú Layout y elija “Clean, save and optimise”

 

 

Le solicitará varias cosas. Diga “yes”.

Ahora que su diseño está optimizado, puede probarlo otra vez. Debería ser mucho más rápido. (Depende la imagen que haya usado). No obstante si lo tiene 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.