How to quickly make HyperSkin layout with AtomicLayout Editor.



00- Introduction. 1

01- Prepare the folder structure. 1

02- Collect and prepare graphics data for Atomic. 2

03- Start a new layout in AtomicLayoutEditor 5

04- Add a List 6

05- Add a Background. 12

06- Add a SNAP Zone. 13

07- Adding additional Images. 16

08- Adding Animation Effect 17

09- Adding Rotation effect. 23

10- Adding Synchronisation. 25

11- Adding Zoom effect. 25

12- Optimize the layout! 27



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 :


The material archive contains.


Hyperspin_original_layout_after , 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 :

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