Previous thread (Post your custom layouts here!)

[raygun]

Thought I'd try to get the ball rolling on posting some custom Attract-Mode layouts that people have come up with.

So here's the one I've been messing around with the last few days.  It's using the "pinch" effect and has a reflection on the preview snap/video...

Screenshot:



This one is available here:

https://github.com/mickelson/attract-extra/tree/master/layouts/reflect

[omegaman]

https://www.youtube.com/watch?v=dLH90jVJwKs&feature=youtu.be

http://youtu.be/l-M9JAmHCZk

[omegaman]

Hyper theme http://youtu.be/nL7T5SsINhU

[Luke_Nukem]

Great layouts! I especially like the scrolling artwork.

[omegaman]

Trimm layout with flyer, random color frame, and wheel. Layout has nice proportions.

http://youtu.be/eAQmaG_0RH0

[omegaman]

Luke-

I am digging your swapper layout it has a nice clean look.

[cools]

Super minimal 8-bit feel list menu (if you use the same font, that is)

Code: [Select]

// Layout by cools / Arcade Otaku
// Layout User Options
class UserConfig {
 </ label="Preview Image", help="Choose snap/video snap, title, flyer or none.", options="snap,video,title,flyer,none" /> preview_image = "snap";
 </ label="Controls", help="Left & right selects the next/previous list or selects the filter?", options="list,filter,none" /> controls = "filter";

}
local my_config = fe.get_config();

// Colour cycle code from LukeNukem
cycleVTable <-{
"cnListPinch" : 0, "swListPinch" : 0, "wkListPinch" : 0,
"cnListRed" : 0, "swListRed" : 0, "wkListRed" : 0,
"cnListGreen" : 0, "swListGreen" : 0, "wkListGreen" : 0,
"cnListBlue" : 0, "swListBlue" : 0, "wkListBlue" : 0,
}
function cycleValue( ttime, counter, switcher, workValue, minV, maxV, BY, speed ) {
if (cycleVTable[counter] == 0)
cycleVTable[counter] = ttime;
////////////// 1000 = 1 second //////////////
if (ttime - cycleVTable[counter] > speed){
if (cycleVTable[switcher]==0){
cycleVTable[workValue] += BY;
if (cycleVTable[workValue] >= maxV)
cycleVTable[switcher] = 1;
}
else
if (cycleVTable[switcher]==1){
cycleVTable[workValue] -= BY;
if (cycleVTable[workValue] <= minV)
cycleVTable[switcher] = 0;
}   
cycleVTable[counter] = 0;
}
return cycleVTable[workValue];
}

// Layout Constants
// Font found on 9031.com
fe.layout.font="Arcade-Regular"
local flw=fe.layout.width;
local flh=fe.layout.height;
local rot=(fe.layout.base_rotation+fe.layout.toggle_rotation)%4;
switch (rot) {
 case RotateScreen.Right:
 case RotateScreen.Left:
  fe.layout.width=flh;
  fe.layout.height=flw;
  flw=fe.layout.width;
  flh=fe.layout.height;
  break;
}

// List
local lbx=flw*0.01;            // Listbox X position
local lby=flh*0.6;             // Listbox Y position
local lbw=flw*0.98;            // Listbox width
local lbh=(flh-lby-(flh*0.1)); // Listbox height
local itn=12;                   // Listbox entries
local ith=lbh/itn;             // Listbox entry height
lby+=(ith*(itn/2));            // Listbox draw point - do not change
local lbr=255;                 // Listbox red
local lbg=255;                 // Listbox green
local lbb=128;                 // Listbox blue
local lbf=0.96;                // Listbox colour fade. Lower values = less fade.

local textsurface=fe.add_surface(flw,flh);

for (local i=(itn/2)*-1;i<=(itn/2);i+=1){
 if (i==0) {
 }
 else {
  local unselgame=textsurface.add_text("[Title]",lbx,lby+(ith*i),lbw,ith*0.7);
  unselgame.index_offset=i;
  if (i<0) {unselgame.alpha=255-((i*(255/(itn/2))*-1)*lbf);}
  else {unselgame.alpha=255-(i*(255/(itn/2))*lbf);}
  // Fades colour rather than alpha     
  //if (i<0) {unselgame.set_rgb( lbr-((i*(lbr/(itn/2))*-1)*lbf) , lbg-((i*(lbg/(itn/2))*-1)*lbf) , lbb-((i*(lbb/(itn/2))*-1)*lbf) );}
  //else {unselgame.set_rgb( lbr-(i*(lbr/(itn/2))*lbf) , lbg-(i*(lbg/(itn/2))*lbf) , lbb-(i*(lbb/(itn/2))*lbf) );}
 }
}

// Texts
local ary=0-flh;
switch (my_config["controls"]) {
 case "list":
  ary=flh*0.01;
  break;
 case "filter":
  ary=flh*0.06;
}
local arrowleft=textsurface.add_text("<",flw*0.02,ary,flw*0.96,flh*0.04);
arrowleft.align=Align.Left;
local arrowright=textsurface.add_text(">",flw*0.02,ary,flw*0.96,flh*0.04);
arrowright.align=Align.Right;
local listtitle=fe.add_text("[ListTitle]",flw*0.02,flh*0.01,flw*0.96,flh*0.04);
local filtername=textsurface.add_text("[ListFilterName]",flw*0.02,flh*0.06,flw*0.96,flh*0.04);
local selgame=fe.add_text("[Title]",lbx,lby-((ith*1.2)/4),lbw,ith*1.2);
local manufacturer=fe.add_text("© [Manufacturer]",flw*0.02,flh*0.90,flw*0.96,flh*0.04);
local year=textsurface.add_text("[Year]",flw*0.02,flh*0.95,flw*0.96,flh*0.04);

// Preview image
local preview=fe.add_artwork(my_config["preview_image"],0,flh*0.125,flw,flh*0.5);
preview.preserve_aspect_ratio = true;

fe.add_ticks_callback( "textTickles" );
function textTickles( ttime ) {
local RED = cycleValue(ttime,"cnListRed","swListRed","wkListRed",100,254,1,1);
local GREEN = cycleValue(ttime,"cnListGreen","swListGreen","wkListGreen",100,254,1.5,1);
local BLUE = cycleValue(ttime,"cnListBlue","swListBlue","wkListBlue",100,254,2,1);
  textsurface.set_rgb(RED, GREEN, BLUE);
}

[cools]

And the beginnings of a rotateable tile/media type layout. Posting here so I don't lose it.

Code: [Select]

fe.layout.width=640;
fe.layout.height=480;
local flw = fe.layout.width;
local flh = fe.layout.height;
// Rows must be either 3 or 5
local rows = 5;
local aspect = flw/flh;
local cols = rows * aspect;
local tlw = flw/cols;
local adw=0;

// Uncomment if monitor is rotated to preserve aspect ratios correctly.
//fe.layout.orient=RotateScreen.Right;
if (fe.layout.orient==RotateScreen.Right) {
 fe.layout.width = flh;
 fe.layout.height = flw;
 flw = fe.layout.width;
 flh = fe.layout.height;
 aspect = flh/flw;
 cols = rows * aspect;
 tlw = flw/cols;
 adw=flw-tlw;
}

local tlh = flh/rows;

local adx=tlw;
local ady=0;
local adh=flh;

local advert = fe.add_artwork( "flyer", adx, ady, adw, adh)
advert.preserve_aspect_ratio = true;

local tilep2 = fe.add_surface(tlw, tlh);
local tilep1 = fe.add_surface(tlw, tlh);
local tiles = fe.add_surface(tlw, tlh);
local tilen1 = fe.add_surface(tlw, tlh);
local tilen2 = fe.add_surface(tlw, tlh);

tilep2.alpha = 64;
tilep1.alpha = 128;     
tiles.alpha = 255;
tilen1.alpha = 128;
tilen2.alpha = 64;

tiles.set_pos ( 0, (flh*0.5)-(tlh*0.5));
tilep1.set_pos ( tiles.x, tiles.y-tlh);
tilep2.set_pos ( tiles.x, tiles.y-tlh-tlh); 
tilen1.set_pos ( tiles.x, tiles.y+tlh);
tilen2.set_pos ( tiles.x, tiles.y+tlh+tlh);

local snx=0-(tlw*0.125);
local sny=0-(tlh*0.125);
local snw=tlw*1.25;
local snh=tlh*1.25;
local wlw=tlw*0.9;
local wlh=tlh*0.9;
local wlx=tlw*0.05;
local wly=0;

local tp2 = tilep2.add_artwork( "snap", snx, sny, snw, snh);
local wp2 = tilep2.add_artwork( "wheel", wlx, wly, wlw, wlh);
tp2.index_offset = -2;
wp2.index_offset = -2;
wp2.preserve_aspect_ratio = true;
local tp1 = tilep1.add_artwork( "snap", snx, sny, snw, snh);
local wp1 = tilep1.add_artwork( "wheel", wlx, wly, wlw, wlh);
tp1.index_offset = -1;
wp1.index_offset = -1;
wp1.preserve_aspect_ratio = true;
local tss = tiles.add_artwork( "snap", snx, sny, snw, snh);
local wls = tiles.add_artwork( "wheel", wlx, wly, wlw, wlh);
wls.preserve_aspect_ratio = true;
local tn1 = tilen1.add_artwork( "snap", snx, sny, snw, snh);
local wn1 = tilen1.add_artwork( "wheel", wlx, wly, wlw, wlh);
tn1.index_offset = 1;
wn1.index_offset = 1;
wn1.preserve_aspect_ratio = true;
local tn2 = tilen2.add_artwork( "snap", snx, sny, snw, snh);
local wn2 = tilen2.add_artwork( "wheel", wlx, wly, wlw, wlh);
tn2.index_offset = 2;
tn2.index_offset = 2;
wn2.preserve_aspect_ratio = true;

[checkist]

Well it's far from being perfect...

Since I don't have artistic skills, I decided to focus on functionalities / not-so-obvious tricks so that somebody might get some ideas to improve his/her layouts 

Below is functionalities of this layout...


#1. Built-in screen saver function
I'm aware that there is already a fully-functional screen saver included in the frontend.
But well, there are always more than one way to achieve one's needs. The more the better.

Anyway, notable differences of this screen saver of mine is..
   1) Has three modes, off / random game select mode / sequential select mode
     1-1) Pressing the key (defaults to 'R') cycles through these modes
   2) Automatically detects the end of movie file (if any), then picks next/random game
     2-1) Movie file loops normally, if built-in screen saver is not activated
   3) User can define durations for static images (10 secs, for example)
     3-1) Setting this value to negative skips games with no movies


#2. Scrolling effect, with some tweaks
User can adjust transition time to suit their needs.
One notable feature is that the transitional effect can be 'cancelled' by pressing up/down twice. Pressing 'up/down' consistantly also temporarily disables transitional effect, so that the effect does not slow-down the game selection.
Also, next/previous games are dimmed to emphasize current game. Transitional effect is also applied to this.
(It's hard to describe, but you'll know once you see it)



#3. Miscs
1) Pressing the key (defaults to 'T', which can be changed in the settings) will change left column to snapshot / titles.
2) Total running time is displayed in lower side..

[omegaman]

Check-

I like your layout, especially the transitions. Good code for me to mangle.

[cools]

Layout optimised for low res vertical cabinets. Will look bad on high resolution displays.

[checkist]

Yet it's far from being perfect... but there are some new features, which I hope that somebody might get some inspirations....


#1. Built-in movie progress bar
Adjusting simple rectangle, according to movie position worked like charm...

movie_progress.width = (snapshot.width * snapshot.video_time + 1) / snapshot.video_duration;

Requires 'Progress.png' to be in the same directory (which is included in attached .zip file)



#2. Adjustable screen layouts
User can select either 3-screen column / 5-screen column on the left side.
Width of left-side column and height of main screenshot are now can be modified
 (the rest are auto-calculated from above values)


#3. Transition effect adjust
Rather than using 'cancel' (pressing up/down twice)
Pressing 'up/down' consistantly for 100 msec immediately cancels transition effect.
(Again, you'll know once you see it)


#4. Icons in bottom-right corner
Corresponding icon appears for vertical games, and favorite games.
You can define additional icons by using attract-mode's tag systems.
  #4-1. Set 'Tag 1' ~ 'Tag 7' to some value. For example, 'Violent' (e.g. mortal kombat series?)
  #4-2. Prepare an icon file named 'Tag-Your_Tag.png' in layout directory. For example 'Tag-Violent.png'
  #4-3. Tag your corresponding game by using attract-mode's tag systems.
  #4-4. Cha-ching! you can see your custom icon in #4-2 appear in your bottom-right, when you select tagged games



#5. Filter-dependent marquee
Yet another trick. By setting filter name including '#' symbol, corresponding filter-dependent marquee can appear.
  #5-1. Set filter name as 'something#marquee_name', for example '[1/15]#Action'
  #5-2. Prepare a filter marquee file named 'Filter-marquee_name.png' in layout directory. For example 'Filter-Action.png'
  #5-3. You can see your filter-dependent marquee on upper-middle screen

[crawlingpeter]

I really dig the style of this one. Would it be possible to use something like HyperSpin wheel art instead of the text for each game?

Thought I'd try to get the ball rolling on posting some custom Attract-Mode layouts that people have come up with.

So here's the one I've been messing around with the last few days.  It's using the "pinch" effect and has a reflection on the preview snap/video...

Screenshot:



This one is available here:

https://github.com/mickelson/attract-extra/tree/master/layouts/reflect

[raygun]

I really dig the style of this one. Would it be possible to use something like HyperSpin wheel art instead of the text for each game?

You could for sure, you could take the layout from omegaman's hyperspin wheel based theme and replace the menu parts of this one with that... it would take some hacking around in squirrel to get it going but it could be done for sure.

http://forum.attractmode.org/index.php?topic=91.0

[lokensa]

Hi, I really like attract-mode and the simple and clean process to get great results.
Keep up the good work.

Here are my first two attempts, based (entirely) on the roboskin theme.