Cómo crear
rápidamente un diseño HyperSpin con AtomicLayout Editor.
(Traducido al castellano por Cabecita)
INDICE
01.-
Preparar la estructura de carpetas
02.-
Recopilación y preparación de datos gráficos para Atomic
03.-
Iniciar un diseño nuevo en AtomicLayoutEditor
06.-
Añadir una zona para Instantáneas (SNAPS)
07.-
Añadir imágenes adicionales.
08.-
Añadir un efecto de animación
09.-
Añadir efectos de rotació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.
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.
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.
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.
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.
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.
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.
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.
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)
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.
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.
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.
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.