How to quickly make HyperSkin layout with AtomicLayout Editor.
01- Prepare the folder structure
02- Collect and prepare graphics data for Atomic
03- Start a new layout in AtomicLayoutEditor
00-
Introduction
This simple
tutorial will show you how to create Hyperspin style layout for Atomic
very quickly.
It is not a
complete documentation of AtomicLayoutEditor.
This tutorial will cover less then 10% of the possibility of AtomicLayoutEditor.
But it will
give you the basis and the necessary to know to be able to create nice animated
layout.
You can
found material for this tutorial here :
http://www.Atomicfe.com/Downloads/doc/tutorial_layout_editor/material_tuto_layout_editor.zip
The
material archive contains.
Hyperspin_original_layout_after
Burner.zip , that is the layout done by Aabra as used by the Front End
HyperSpin . It is the source of image we use in that tutorial.
After_burner_image_reworked
, that contains image I reworked to work with Atomic as described in the
tutorial here.
Aburner_final
, is the layout we obtain at the end of
this tutorial.
01-
Prepare the folder structure
First ,
what a HyperSkin layout for Atomic ?
It is simply a set of layouts. , grouped as subfolder of a main layout.
If you look
the Hyperskin_mame_set layout (downloadable from AtomicFE web site) . You will see
in the folder a set a subfolder named as rom names.
At the
first level of the HyperSkin_mame_set folder you will find some files including
a Layout.cfg.
These files
are files of a Atomic Layout. It is the layout that will be used if a specific
layout for a given game is not found.
Then you
will find one folder by game, and in that folder you will find also a
Layout.cfg and some pictures files. Each subfolder is also a AtomicLayout.
In this
tutorial, we are going to suppose you want enhance the HyperSkin_mame_set by
adding layout for new games.
Let suppose
we want add a layout for After Burner game to the set.
The first
thing to do, is to find the rom name for the game. The Rom for After Burner in mame is named : aburner.zip
So, the
folder where you will store the layout should be named : aburner.
So , create
a sub folder under the HyperSkin_mame_set called aburner .
02-
Collect and prepare graphics data for Atomic
Before
starting making a layout , the first thing is to collect graphic data.
So search
the web to find something nice, you can also download existing HyperSpin layout
and take the artworks.
For this
tutorial , I took graphism from the After Burner ‘s HyperSpin layout.
Hyperspin
images are artwork that have been reworked by talented peoples . They uses 24
or 32 bit images using PNG Transparence features.
AtomicFe
can not manage built’in Transparence feature. Instead you can set a given color and define it as “Transparent”
Color. The result on the screen is
almost the same. But Atomic for performance reason works with 16bit images and
can not use the Built’in Transparence.
So to use
that artwork you will have to rework it a little bit , to change the
“Transparence” by a color you will use as “Transparent” color.
For
instance , is you consider this original image (open with the free graphic tool
: The Gimp )
We have to
rework it , to obtain :
Where the
pink color is RGB(255,0,255) , we will use that color as color key in
Atomic. Of course it could be another
color. The important things is that the key color is the same for all image of
a same layout.
You can do
that using Photoshop or The Gimp or your favorite tool. With the Gimp the way I use is the following
(being not a Gimp expert, there is surely a better way to do that ).
Open the
original picture with the gimp and select the “transparent” zone using the
magic wand selection tool.
Then select
the color RGB(255,0,255) in the color palette :
And with
the “fill” tool select the selected zone to fill it.
Then Save
the image , in a folder. Said : C:\images .
Do the same
things for all images you want use in the layout.
Ok, at this
point you should have a set of image in folder ready to use with Atomic. Now,
let start making the layout.
03-
Start a new layout in AtomicLayoutEditor
Start
AtomicLayoutEditor. Click on the “…” button and select the empty ABURNER folder
you created.
Keep the
resolution to 640x480 . The Hyperskin
set use that resolution. After you
clicked OK , this is what you see :
On the left
,you have the object selector. It is the list of all object you can use in a
layout. For now they are all in a “not visible” state.
The order
of object in that list represent also on what layer they are. More the object
is up in the list , deeper the object is.
To change
the “layer” of a object you can select
a object and use one of these button :
This
button : 
is used to make visible or hide an object on
the layout.
You can
also see a black area , that represent the screen. If a object is in that area
it will be visible on the screen.
Then there
is a “Tool” palette , empty for now , that will contain properties for a
selected object.
04-
Add a List
Now we can
start the layout. The first object we
are going to put is a list of game!
In case of
HyperSkin set , it is very important that the list in each layout is located at
exactly the same place. If you don’t do that, when you browse game , the list
will change position and aspect, and it is not very nice.
So in this
tutorial , I’m going to use the same list setting than other layout in the
HyperSpin set.
Select the
“Text List” object in the object selector.
Double
click on the object or Click on the 
button
Go on the
“general” tab of the tool dialog. And fill like this :
And don’t
forget to click “Apply”.
Then go on
the “Font” Tab , and click on the “Change Font” button.
And select
“Impact” font and size 26 .
At this
stage you should obtain something like that :
Now , we
have to define image used by the list.
The Text Image object need to have a “Background” image and a
“Selection” Image.
In our
case, as we want the list be exactly as list of other layout in the set. The
easier thing to do is to take artwork from other layout.
If you look
other layout , you will remark that the list has no background image. In fact,
it has but it is just transparent. We are going to do the same thing now.
Go to
“Images” tab of the palette. And Click on “change image” button.
And browse
to another layout of the set (for instance the Btime one) , and select the
“Transparent_background” image.
Then do the
same thing with the “Change Selection” button
And select
“Selection_with_finger” image from the Btime layout
Here is
what you should obtain :
You can
see, that the list is not yet transparent. We have an ugly Pink area!.
It is
because the “Transparent” color for a layout is set by default to black , and
here we use pink.
So lets go
, change that.
Click on
the Layout Properties button . then on the layout Properties dialog click
“Change Transparent color”.
And select
the pink (RGB(255,0,255)) .
And then
click Apply and Close :
Here this
is what you should obtain at this point, the list is now transparent :
Now, you
can test in Atomic.
To do a
quick test , go to “View” menu and select “Preview in Atomic Horizontal”.
As you can
see, for now there is just a list of game.
You can
remark that the hand and the finger are located on the game name and make the
name difficult to read.
So we can
adjust the selection position.
Select the
“Text List’” object, then on the tool palette go to “List Editor” tab , and
“Selection Ajustement” subtab and enter value as shown on the following
screenshot. Then click “Apply”
Ok, at this
point our list is ready.
05-
Add a Background
Ok now , we
are going to add some graphics.
Let’s add a
background. Always on the same
principle , select “Layout/video” object
(note: you could also selection “Image x” object or Custom0 or custom4
object , they are all the same kind. The name is different due to Atomic
history.(old version).
Click on
the 
button , then go to the tool palette , on the
“image” tab, click on “change image” and select the image you want as
background.
As you can
see , now, we have a problem , the list is Hidden!!
Don’t
panic, the list is hidden simply because it is on a layer below the background
layout.
To change
that, select the “Layout/object” , and click on the “Decrease Layer” button
until the list appear.
As soon as
the Layout/video object is on a layer below the list’s layer, the list appear
again.
06-
Add a SNAP Zone
Usually you
want that one a game is selected, a snap or a video of the game be displayed.
One object
is dedicated to that. It is the “SNAP” object.
So select
the “SNAP” object, click on the button
: 
to make it visible.
As the
“SNAP” is located under the Background layer , you won’t see it. So as we did
previously, change the layout of the snap , but clicking the “Increase layer”
button.
by
selecting the snap zone with the mouse and dragging it to the screen , place
the zone where you want.
You also
size the zone as you wish by dragging the BOTTOM-RIGHT edge (only that one ,
sizing is not managed yet for other edge).
Let’s place
it at location 400 ,94 width : 210 ,
Height 209 .
Now ,the
Snap zone need a image. This image is not the image of the game at this point.
This zone is dynamic and will display automatically the image of the selected
game if found. The image you have to
give here, is the Image that will be displayed If the snapshot for the game is not found!
Let’s say,
we want only display a black area with “Missing Snap” text when there is no
snap.
You have to
create the image with your favorite drawing tool and save it as png. You have to obtain something like that.
Then select
the “SNAP” object, and on the “images” tab click on “change image” button and
select your “Missing Snap” image.
Now we are
going to add a White Frame around the snap.
Just tick
the “Frame Around” checkbox and then click on “Frame Color” button to choose
the White Color.
At this
point, Test again your layout in Atomic to see the result .
07-
Adding additional Images.
Ok, now we
have a list, a background and a snap. We are going to add more graphic element.
Make
visible the “Image 1 / Video” object. (as you did for previous object)
Go to
“images” tab of the tool palette and click on “change image”. And Select, for
instancen the image you want use for the title. And position and size it as you
want.
Repeat the
operation with other image you want put in the layout. Using “image X / Video”
Object.
Don’t
forget to save regulary your layout by clicking that button :
WARNING! In the “Layout” menu , you will see a item “Clean, Save and Optimise”. DON’T USE THAT OPTION WHILE YOUR LAYOUT IS NOT FINALIZED. You could degrade image quality mainly if you decide the increase the size of an object for instance.
At this
point, Test again your layout in Atomic to see the result .
08-
Adding Animation Effect
Now we are
going to add animation effect.
First we
are going to put a “elastic” effect when the tilte “After burner” appear.
Select your
title image , and go on the “Trajectory” tab of the palette and click
Trajectory tool.
The
“Trajectory helper tool” open. Some field are already filled for you with the
position X,Y of your object.
Taking in
account the position of YOUR object , fill the “Penner Function tab” and click
on generate trajectory.
Here we
generated a trajectory for the object which start from outside the screen a
position x : -369 , to finish at
position x : 16 .
The Y
position stays the same. The
appoximative duration is 1s (1000 millisecond) and we say we want a elastic
effect.
When you
click on “Save new Trajectory” you will be prompted for a filename and
location. Be sure you save it in your current layout folder. And give the name
“Title.traj” for instance.
Then close
the trajectory tool by clicking :
then attach
the Trajectory file you just created to the object. Following that steps :
At this
point, Test again your layout in Atomic to see the result .
If you did
correctly your title should appear with a elastic effect.
Now , let’s
do something similar with the plane at the bottom right. But this time we
choose a linear trajectory.
Save the
new trajectory and call it “Plane1.traj” , then attach it to the object
At this
point, Test again your layout in Atomic to see the result .
Let’s now
manage the 2 other plan with the same kind of effect.
For this
one :
generate
the trajectory like that :
Call it ,
“plane2.traj” and attach it to the object like that :
Note, that
for that one WE DON’T TICK “Only one pass”.
Test in Atomic again , to see the result.
Now for the
last one :
Generate the
trajectory using that parameters :
Save it as
“Plane3.traj” , and attach it to the object.
Now , Test in Atomic as we did previously.
Let’s do
some layout adjustment. Reorganize
layer using the “Decrease and Increase layer” button to obtain that :
(the little
plan is now under the Textlist)
09-
Adding Rotation effect.
Now, we are
going to make appear the snap zone with a translation effect + a rotation.
Select the
“Snap” Object , and go on the “trajectory” tab of the palette. And click “Trajectory
tool”.
Fill
paremeter as showed on the screen shot and generate the trajectory.
Save it as
Snap.traj.
then Attact
it to the snap object.
Try the
layout in Atomic. You will see the snap
appear from the right in a linear way without rotation.
To add the
rotation effect, go again in trajectory
tool.
Go to
“Rotation” tab.
Click on
“Load reference trajectory” , select the Snap.traj you just created.
Enter –359
degree as start Angle and 0 as Final Angle.
Click on
“Rotation from start to end>”
Then Click
on ‘Save new Trajectory” and save it to Snap.traj (overwrite existing one).
As
Snap.traj is already attached to the SNAP object, you don’t need to redo it
again.
Just Test
in Atomic to see the result. Your snap is coming with a rotation effect.
10-
Adding Synchronisation.
Suppose you
want for instance that the 2 little planes on the layout , only start when the
SNAP zone animation is completed.
Lets do
that.
Select a
little planes object, lets say the one with the trajectory attached
“plane2.traj” . Open the trajectory
tool.
Click on
“Load Trajectory to Synchronise” button. And Select the “Plane2.traj”
Click on
“Load Reference Trajectory” button , And Select the “Snap.traj”.
Then
Indicate , the point of the reference trajectory you want the new trajectory
starts.
By default
the value is set on the last point of the reference trajectory. So let this
default value as we want the other trajectory starts one the first one is
completed.
Click on
“Generate >>” button.
It
generates a new trajectory with a set of point in –1000,-1000,0,0,0 , but if
you look at the end you will find the point of the trajectory to
synchronise. Atomic starts all
trajectory at the same time. To synchronize it simply place object in a non
visible area until the point of the reference trajectory is reached.
Click on
‘Save Resulting Trajectory” and save it as “Plane2.traj” (overwrite the
existing one)
Do EXACTLY
the same thing for the other little plane. But this time using Plane3.traj as
trajectory.
And test,
the layout in Atomic.
11-
Adding Zoom effect.
Now, our
layout is completed, but in order to
pratice few functionnality we are going to modify it.
For now,
the Title is coming with a elastic effect , we are going to change that to do a
Zoom effect.
Select the
Title object , and go to the trajectory tool.
We need to
generate a “fix” trajectory. To say the object will stay where he is for a
amount of time.
Then we
will add Zooming effect on this trajectory.
So fill the
field as shown on the screen shot. Note that StartX and StartY are the same
than the EndX and EndY.
And the
value to put , is the center point of the title image.
Click on
generate Trajectory.
Then click
on the button “Use as source for rotation or Zooming”.
When you
click on the button, the current tab change to go on “rotation” tab.
Change tab
and go on “Zooming” tab.
Fill the
Field as shown on the snapshop below .
And don’t
forget to tick the “Keep Center Position”.
Click on
“Zoom>>” button.
And save
the new trajectory as “Title_with_zoom.traj”.
then attach
the “Title_with_zoom.traj” to the object
and now run
the test in Atomic to see the result.
12-
Optimize the layout!
Ok now, you
have basis to be able to create or port a HyperSkin layout.
Of course
trajectory can be combinated to create more advanced effects.
Trajectories
are simple text file you can edit with the notepad (or the editor of the
trajectory tool). So you could easly do a logo that comes in zooming, then
translate to left using sinus trajectory, and go back to right using elastic
and rotation. That is completely free.
Anyway,
once your layout is done. And you are about sure you won’t touch it , or you
want make it available for other. It is better to optimise it.
It can
greatly improve performance.
To do that,
it is really simple , just go to the File menu
and choose “clean , save and optimise”
You will be
prompted for certain things, say “yes”.
Now your
layout is optimised , you can test it again. It could be lot faster. (depend on
what you used as image in fact).
Therefore,
if you have to modify it again. If you try to enlarge a image you will lost in
quality. Just in case, Atomic when you optimise, backup the image at the
original in the layout folder, and prefix it by “original”.