Attract-Mode Support Forum

Attract-Mode Support => Themes => Topic started by: omegaman on December 12, 2014, 08:41:41 AM

Title: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on December 12, 2014, 08:41:41 AM
https://www.youtube.com/watch?v=K130YSwAs6Y&feature=youtu.be (https://www.youtube.com/watch?v=K130YSwAs6Y&feature=youtu.be)

OK, so I wanted to see if i could create a spin wheel like in hyperspin and here is the result. I cleaned up and tweeked the old hypertheme script I was using before, not the grid script I've posted recently. Anyway, the result is pretty good but I'm still fine tuning it to have a nice spin wheel effect.  The spin is pretty fast and smooth since the 4.1 update.  Feedback is appreciated. I can upload the script if anyone wants it. 
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: keilmillerjr on February 20, 2015, 09:07:56 PM
Looks great! It's very fluid. Definitely upload your nut. No homo. Lol

The top of the game info gets lost in the background. And the list name (mame) seems odd and could use redesigning.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on February 21, 2015, 09:43:43 AM
Keil-
 
I've made a lot of improvements since that version. Here are two nuts with different cabinet artwork.  Once has wheel effect and other scrolls up and down.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: retrogam3 on April 25, 2015, 08:08:23 AM
I want to implement wheel similar to what you did but need help. I want to replace the add_listbox with add_artwork ( "wheel". However when I do this it just puts my wheel image really big in the list box I can make the sizing right by just tweaking the numbers, however how do I still get a list so the previious and next title/wheel is all above and below the selected game? I would also like the current selection "wheel" to be slightly bigger than the ones kisted above or below? Any help in code would be appreciated.  :D

REPLACE:
local l = fe.add_listbox( 99, 142, 781, 792 );
l.charsize = 48;
l.set_selbg_rgb( 255, 0, 0 );
l.set_sel_rgb( 0, 0, 0 );
l.sel_style = Style.Bold;
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on April 26, 2015, 04:27:38 PM
Xev-

Xev-

To create a spin wheel effect you should be using something similar to the conveyor module in the reflect layout. Lucky, for you - I have already been down this road and created a spin wheel layout that you can use for guidance and does what you seek. One important thing to keep in mind, I use liquid8's extended module to create particle effects. So, if you're not familiar with that you might get a little confused or you could just opt not to use it to makes thing simpler. Anyway, If you look under themes/unified mame themes in the forum you will find a tron layout.nut I uploaded today that has everything you need to create a spin wheel with the bigger select wheel you want. Also, I am now using cools method for scaling so you get the added benefit of scaling the layout without having to re-size the spin wheel to fit the resolution. If you have any questions feel free to message me here. 
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: retrogam3 on April 27, 2015, 10:56:01 AM
Great, I'll give it a shot, thanks!
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: retrogam3 on April 28, 2015, 08:58:32 AM
OK I tried and tried to no avail. Is it even possible to keep the listbox format or does it have to be in a circular pattern? All I want to do is replace the text of my listbox with the wheel image but still have the list below and above. Maybe what I'm asking for can't be done and if so I'm OK with that. Thanks for all your help.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on April 28, 2015, 10:37:52 AM
Xev-

The Listbox is just for text, not images. That is why I pointed you to my tron layout. It shows you how to do a spin wheel or scrolling art if you will. You could make a select wheel image with text like in cools verticool layout or something like I did. But, the listbox is just for creating a text box. There is also a grid layout included with attract that allows you to scroll art like videos, wheels, etc... .

I will post an image of one my simple layouts with a spin wheel. And, you can tell me if this is like something you are asking about.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on April 28, 2015, 10:55:07 AM
Xev-

The only thing close to what you are asking is something like in verticools layout. Notice the select art image is above the text or you could put it below the text. Not really like you want it. I guess you could theoretically layer a select wheel image centered and over the text listbox. You would have to spread the text really far apart and I'm not sure how good that would look though. 
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: retrogam3 on April 28, 2015, 01:00:05 PM
Xev-

The Listbox is just for text, not images. That is why I pointed you to my tron layout. It shows you how to do a spin wheel or scrolling art if you will. You could make a select wheel image with text like in cools verticool layout or something like I did. But, the listbox is just for creating a text box. There is also a grid layout included with attract that allows you to scroll art like videos, wheels, etc... .

I will post an image of one my simple layouts with a spin wheel. And, you can tell me if this is like something you are asking about.

This would be amazing if I could implement this but I can't, I DL'd your theme but have no clue how to implement just the wheel section into the part (pasted below) am I missing some sort of plugin or something?  :-\

REPLACE:
local l = fe.add_listbox( 99, 142, 781, 792 );
l.charsize = 48;
l.set_selbg_rgb( 255, 0, 0 );
l.set_sel_rgb( 0, 0, 0 );
l.sel_style = Style.Bold;
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on April 28, 2015, 01:52:32 PM
Xev-

Alright, here is a skinny version with all the particle effect stuff taken out. This should help you isolate what you need for the wheel or you can just use this and add to it. If you want to copy and paste the wheel part then you will need to copy the Class Userconfig section, the local config section, the conveyor module section, and the transitions section. But,  the easiest thing would be to just copy all this as your layout.nut and use it as a foundation to build upon.   

//
// Attract-Mode Front-End - "Omega's SpinWheel" layout
//

class UserConfig {
   </ label="SpinWheel", help="The artwork to spin", options="marquee,flyer,wheel" /> orbit_art="wheel";
   </ label="Transition Time", help="Time in milliseconds for wheel spin." /> transition_ms="25";
   
}

local config = fe.get_config();
//fe.layout.width=1024;
//fe.layout.height=768;
local flx = fe.layout.width;
local fly = fe.layout.height;
local flw = fe.layout.width;
local flh = fe.layout.height;

//fe.layout.font="porkys";

// Image shadow/outline thickness
local offset = 4;


fe.add_image("bg", flw*0.0, flh*0.0, flw, flh);


local marquee = fe.add_artwork( "marquee", flw*0.0, flh*0.0, flw*0.4, flh*0.2 );


local snap = fe.add_artwork( "snap", flw*0.09, flh*0.30, flw*0.41, flh*0.545 );



local play = fe.add_text( " [PlayedCount] ", flw*0.7, flh*0.95, flw*0.3, flh*0.03 );
play.set_rgb( 255, 255, 255 );
play.align = Align.Right;   
   
                   
//text stuff
local title = fe.add_text( "[Title]", flw*0.105, flh*0.87, flw*0.4, flh*0.03 );
title.set_rgb( 255, 255, 255 );
title.align = Align.Left;
title.rotation = 0;

local year = fe.add_text( " [Year] [Manufacturer] ", flw*0.1, flh*0.91, flw*0.4, flh*0.03 );
year.set_rgb( 255, 255, 255 );
year.align = Align.Left;
year.rotation = 0;

local filter = fe.add_text( "[ListFilterName]: [ListEntry]-[ListSize]", flw*0.105, flh*0.95, flw*0.3, flh*0.03 );
filter.set_rgb( 255, 255, 255 );
filter.align = Align.Left;
filter.rotation = 0;

fe.load_module( "conveyor" );
local wheel_x = [ flx*0.80, flx*0.795, flx*0.756, flx*0.725, flx*0.70, flx*0.68, flx*0.64, flx*0.68, flx*0.70, flx*0.725, flx*0.756, flx*0.76, ];
local wheel_y = [ -fly*0.22, -fly*0.105, fly*0.0, fly*0.105, fly*0.215, fly*0.325, fly*0.436, fly*0.61, fly*0.72 fly*0.83, fly*0.935, fly*0.99, ];
local wheel_w = [ flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.25, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, ];
local wheel_a = [  80,  80,  80,  80,  80,  80, 255,  80,  80,  80,  80,  80, ];
local wheel_h = [  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11, flh*0.168,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11, ];
local wheel_r = [  31,  26,  21,  16,  11,   6,   0, -11, -16, -21, -26, -31, ];
//local wheel_r = [  0,  0,  0,  0,  0,   0,   0,  0,  0,  0,  0,  0, ];
local num_arts = 10;

class WheelEntry extends ConveyorSlot
{
   constructor()
   {
      base.constructor( ::fe.add_artwork( config["orbit_art"] ) );
   }

   function on_progress( progress, var )
   {
      local p = progress / 0.1;
      local slot = p.tointeger();
      p -= slot;
      slot++;

      if ( slot < 0 ) slot=0;
      if ( slot >= 10 ) slot=10;

      m_obj.x = wheel_x[slot] + p * ( wheel_x[slot+1] - wheel_x[slot] );
      m_obj.y = wheel_y[slot] + p * ( wheel_y[slot+1] - wheel_y[slot] );
      m_obj.width = wheel_w[slot] + p * ( wheel_w[slot+1] - wheel_w[slot] );
      m_obj.height = wheel_h[slot] + p * ( wheel_h[slot+1] - wheel_h[slot] );
      m_obj.rotation = wheel_r[slot] + p * ( wheel_r[slot+1] - wheel_r[slot] );
      m_obj.alpha = wheel_a[slot] + p * ( wheel_a[slot+1] - wheel_a[slot] );
   }
};

local wheel_entries = [];
for ( local i=0; i<num_arts/2; i++ )
   wheel_entries.push( WheelEntry() );

local remaining = num_arts - wheel_entries.len();

// we do it this way so that the last wheelentry created is the middle one showing the current
// selection (putting it at the top of the draw order)
for ( local i=0; i<remaining; i++ )
   wheel_entries.insert( num_arts/2, WheelEntry() );

local conveyor = Conveyor();
conveyor.set_slots( wheel_entries );
conveyor.transition_ms = 50;
try { conveyor.transition_ms = config["transition_ms"].tointeger(); } catch ( e ) { }

local message = fe.add_text("Ready Player One",0,300,fe.layout.width,80);
message.alpha = 0;
message.style = Style.Bold;

// Transitions
fe.add_transition_callback( "fancy_transitions" );

function fancy_transitions( ttype, var, ttime ) {
 switch ( ttype )
 {
 case Transition.StartLayout:
 case Transition.ToNewList:
 case Transition.ToNewSelection:
 case Transition.EndLayout:
  break;

 case Transition.FromGame:
  if ( ttime < 255 )
  {
   foreach (o in fe.obj)
    o.alpha = ttime;
    message.alpha = 0;     
     return true;
  }
  else
  {
   foreach (o in fe.obj)
    o.alpha = 255;
   message.alpha = 0;
 }
  break;
   
 case Transition.EndLayout:
  if ( ttime < 255 )
  {
   foreach (o in fe.obj)
    o.alpha = 255 - ttime;
   message.alpha = 0;
     return true;
  }
  else
  {
   foreach (o in fe.obj)
     o.alpha = 255;
    message.alpha = 0;
  }
  break;
     
 case Transition.ToGame:
  if ( ttime < 255 )
  {
   foreach (o in fe.obj)
    o.alpha = 255 - ttime;
    message.alpha = ttime;
    return true;
  }   
  break;
 }
 return false;
}
 
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on April 28, 2015, 02:16:35 PM
Xev-

NM, with the post above because I see you still just want the wheel to select in the text. Anyway, I am going to play around with this tonight and see if I can find a work around for you. Like I said, the listbox is just for text, so I have to be a little creative,
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: retrogam3 on April 28, 2015, 02:20:15 PM
No I do not want the wheel to select text I have wheel images defined. I think what you pasted above will work let me play with it and I will get back to you. Thanks ALOT!!!!  ;D
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on April 28, 2015, 02:56:26 PM
Xev=

No, this is what I mean about having wheel art for the selection. You wanted text about and below it right?
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: retrogam3 on April 28, 2015, 02:58:12 PM
OK so that helped allot the piece I think I need to tweak is...

***
fe.load_module( "conveyor" );
local wheel_x = [ flx*0.80, flx*0.795, flx*0.756, flx*0.725, flx*0.70, flx*0.68, flx*0.64, flx*0.68, flx*0.70, flx*0.725, flx*0.756, flx*0.76, ];
local wheel_y = [ -fly*0.22, -fly*0.105, fly*0.0, fly*0.105, fly*0.215, fly*0.325, fly*0.436, fly*0.61, fly*0.72 fly*0.83, fly*0.935, fly*0.99, ];
local wheel_w = [ flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.25, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, ];
local wheel_a = [  80,  80,  80,  80,  80,  80, 255,  80,  80,  80,  80,  80, ];
local wheel_h = [  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11, flh*0.168,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11, ];
local wheel_r = [  31,  26,  21,  16,  11,   6,   0, -11, -16, -21, -26, -31, ];
***

In relation to these coordinates ( 99, 142, 781, 792 )


EDIT: No I do not want the text only the wheel images.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on April 28, 2015, 04:11:52 PM
Xev-

Ok, now that we have that cleared up. A little run down on the conveyor section. Wheel_x sets the position of each wheel art from (left to right) on the x axis. For example flx*0.0 will start at the left pixel unit, increasing the value to 0.01 will move it to the right and so on. A little goes along way, so use small increments. In the layout that I posted, the select wheel position on the x axis is flx*0.64 to give you an idea. Repeat for wheel_y on the y axis (up and down) with fly*0.0 starting from the top. The select position for the y axis is fly*0.436 but can be whatever. Wheel_w is the width of the art and wheel_h is the height. Wheel_r is the alpha with 0 being transparent and 255 being fully visible.  Hope this helps...
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: retrogam3 on April 28, 2015, 08:25:20 PM
I kind of understand, however is it possible that I can just use X Y W H in scale instead of .x Or what is the difference? Example why can my coordinates not just be: 99, 142, 781, 792 or whatever in relation to pixel size of background?
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on April 29, 2015, 06:57:44 AM
Xev-

Yes, of course, you can just use numbers for the coordinates. It's really just preference. The reason that I started doing my layouts like the one I posted is to keep everything proportional when changing my desktop resolution from lets say 1024x768 to 1280x1024 or higher. Otherwise, if my layout was created to be lets say 640x480 or whatever then my desktop resolution would need to be the same to keep everything proportional. And, that is fine as long as you keep the desktop resolution static. If that makes sense. If you do it the way you want to and decide to change your desktop resolution later on then everything in the layout will need to be tweaked some what. Especially, the conveyor module section because the wheel art will not scale in proportion to the new desktop size.       
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: retrogam3 on April 29, 2015, 07:16:05 AM
Perfect, another question why are there so many coordnites

example: local wheel_x = [ flx*0.80, flx*0.795, flx*0.756, flx*0.725, flx*0.70, flx*0.68, flx*0.64, flx*0.68, flx*0.70, flx*0.725, flx*0.756, flx*0.76, ];

Why not just one coordinate for x one for y and so on?
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on April 29, 2015, 07:50:13 AM
Xev-

Well, if I am going to have 10 or 12 wheel arts showing on the display then I am going to need coordinates for each one, right? I am essentially setting the position for each wheel art.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: retrogam3 on April 29, 2015, 07:53:38 AM
Oh WOW gotcha, this makes so much sense now...LOL :o. Perfect, thanks!
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: akafox on April 29, 2015, 08:00:52 AM
Xev-

Well, if I am going to have 10 or 12 wheel arts showing on the display then I am going to need coordinates for each one, right? I am essentially setting the position for each wheel art.

Umm on that note omega how difficult would it be to do a "staggered" effect. Maybe a vertical list not a "wheel" per say. Or..like "falling tiles"? Seeing the wheel art is it "blocks" well some of them anyway.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: retrogam3 on April 29, 2015, 08:26:07 AM
Xev-

Well, if I am going to have 10 or 12 wheel arts showing on the display then I am going to need coordinates for each one, right? I am essentially setting the position for each wheel art.

I am assuming these coordinates start at top and go to bottom for instance x1top, x2, x3 and so on...Is that correct?
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on April 29, 2015, 09:48:24 AM
Xev-

Doing a staggered effect would not be that difficult at all. For example, you could have all the x coordinates with the same value to align the art to whatever position on the display you want then just increment the y coordinates to overlap each art from top to bottom. And, vice versa.   Simple example: X= 10, X=10, X=10 then y=1,y=2, y=3. So, Y=0 would start at the top while  y=-1 would be above that to draw off screen. And, of course y=1 would below or after 0. 
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: akafox on April 29, 2015, 03:40:13 PM
Ahh ok. I get that. This is as far as my brain got me in math..I hate geometry...I was ALWAYS bad at it...but the coordinate system always stayed with me... *shrugs*
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: michel almeida on April 30, 2015, 06:59:52 AM
Xev-

The only thing close to what you are asking is something like in verticools layout. Notice the select art image is above the text or you could put it below the text. Not really like you want it. I guess you could theoretically layer a select wheel image centered and over the text listbox. You would have to spread the text really far apart and I'm not sure how good that would look though.

(http://forum.attractmode.org/index.php?action=dlattach;topic=91.0;attach=141)

teo this layout the option of choice and freplay enserir coin also I need a scheme gave a coin to enter and another to tell time
and was vertical layout was very good and not given bug
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: raygun on April 30, 2015, 09:47:31 AM
OK I tried and tried to no avail. Is it even possible to keep the listbox format or does it have to be in a circular pattern? All I want to do is replace the text of my listbox with the wheel image but still have the list below and above. Maybe what I'm asking for can't be done and if so I'm OK with that. Thanks for all your help.

Sorry I'm a bit late on this discussion, but there is a fairly easy way to make a simple "image" listbox instead of a text listbox... The "conveyor" module includes a class called "SimpleArtStrip" which does what you are looking for:

Code: [Select]
fe.add_module( "conveyor" );

// Usage example.  The following code creates a strip of 5 snap artworks across
// the top of the screen:
//
    local my_strip = SimpleArtStrip( "snap", 5, 0, 0,
             fe.layout.width, fe.layout.height/3, 2 );


It looks like you've moved on from this point, but in case this is useful for others looking at this thread...

https://github.com/mickelson/attract/blob/master/config/modules/conveyor.nut#L345

P.S. @omegaman: did you ever get that PM I tried to send you a while back?
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on April 30, 2015, 10:36:42 AM
Ray-

Oh WOW!, this is great stuff. So, this extends on the conveyors functionality. Jeez, I didn't even know that was there. I guess, I need to start perusing GitHub more often. This will make things so much easier.

Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on April 30, 2015, 10:42:42 AM
OK I tried and tried to no avail. Is it even possible to keep the listbox format or does it have to be in a circular pattern? All I want to do is replace the text of my listbox with the wheel image but still have the list below and above. Maybe what I'm asking for can't be done and if so I'm OK with that. Thanks for all your help.

Sorry I'm a bit late on this discussion, but there is a fairly easy way to make a simple "image" listbox instead of a text listbox... The "conveyor" module includes a class called "SimpleArtStrip" which does what you are looking for:

Code: [Select]
fe.add_module( "conveyor" );

// Usage example.  The following code creates a strip of 5 snap artworks across
// the top of the screen:
//
    local my_strip = SimpleArtStrip( "snap", 5, 0, 0,
             fe.layout.width, fe.layout.height/3, 2 );


It looks like you've moved on from this point, but in case this is useful for others looking at this thread...

https://github.com/mickelson/attract/blob/master/config/modules/conveyor.nut#L345

P.S. @omegaman: did you ever get that PM I tried to send you a while back?

I sent a reply like a day after reading your message:p
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: retrogam3 on April 30, 2015, 11:30:33 AM
OK I tried and tried to no avail. Is it even possible to keep the listbox format or does it have to be in a circular pattern? All I want to do is replace the text of my listbox with the wheel image but still have the list below and above. Maybe what I'm asking for can't be done and if so I'm OK with that. Thanks for all your help.

Sorry I'm a bit late on this discussion, but there is a fairly easy way to make a simple "image" listbox instead of a text listbox... The "conveyor" module includes a class called "SimpleArtStrip" which does what you are looking for:

Code: [Select]
fe.add_module( "conveyor" );

// Usage example.  The following code creates a strip of 5 snap artworks across
// the top of the screen:
//
    local my_strip = SimpleArtStrip( "snap", 5, 0, 0,
             fe.layout.width, fe.layout.height/3, 2 );


It looks like you've moved on from this point, but in case this is useful for others looking at this thread...

https://github.com/mickelson/attract/blob/master/config/modules/conveyor.nut#L345

P.S. @omegaman: did you ever get that PM I tried to send you a while back?


This is GREAT NEWS!!! Thanks!
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: verion on May 21, 2015, 01:09:43 AM
This is great! Best theme hands down.

But I've downloaded your .nut files and:
1. obviously there are graphics files missing (arcade cabinet and background) as it is only a .nut config file
2. marquee and snaps are not skewed but straight rectangles

Can you share a whole folder with all files - so we can have a theme exactly like in your YT video?
Or I'm missing something?

----

BTW I'm a graphic designer - so if you want any help with graphics just PM me
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on May 21, 2015, 10:25:54 AM
verion-

Sure thing. Here is an improved version of robospin that scales from 1024 up to 1080p without having tweak anything. There is also an option in the .nut to change the background style from the default blue to black. And an option to turn on/off masking to darken the background and make things pop more.  Let me know what you think and how it works for you. The default art wheel set looks the best I think. 
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: verion on May 22, 2015, 02:04:33 AM
Oh man! This is pure awesomeness!

But I've noticed that the arcade cab needs a little touch up.
For now I've cleaned up jagged lines at the edge. See attached image with before and after.
I'm attaching fixed robo.png file as well.

------

My main question is - is there a way to make this layout "responsive"?
Right now I'm using it on 16:9 screen and the layout is stretched - since it is clearly for 4:3 screen.
Truth to say - the cab looks stretched but the wheel seems in good ratio. Strange

Can this be coded to behave like this?

cab in fixed ratio aligned to the left   |  resizable background to fit   |   wheel in fixed ratio aligned to the right
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on May 22, 2015, 06:40:47 AM
verion-

Hey! Nice job on cleaning up the cab, looks great. Are you using a drawing tablet? I am current using gimp with a mouse, so to get those kind of results would be a tedious process at best. Unless, you have some kind of technique you would like to share:P

Answer to your question. I never tested my layout for 16x9 format because I don't have anything that runs 16x9. Anyway, I know it's popular in europe and for DVDs. So, here is what we would have to do. First, change the robo.png to a 16x9 resolution, say something starting at 1024x576 for example. Then in the nut change fe.layout.width=1024 and fe.layout.height=576; since we are proportioning everything on the new background size. Because the snap, marquee, and text were positioned based on 4x3 they probably need to be re-positioned a little. Really, you should only need to adjust the x and y coordinates of those items. And, if the wheel proportions look good then that is a plus because its the hardest thing to scale up which is why I do my layouts the way I do. Anyway, after that you should be able to scale up to other 16x9 resolutions. On 4x3 displays this method scales beautifuly from 1024 to 1080p.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on May 22, 2015, 06:54:25 AM
verion-
 
The touch up really looks great man. I will includes the corrected roboskin in a new rar package for downloading. Thanks...
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: verion on May 22, 2015, 08:58:16 AM
ok. tried that. It works. See attached picture.
As you've said - artwork position has to be fixed.
I've fixed top marquee for now.

But I was thinking - maybe it can be done in a way that will work in all popular aspects 4:3, 16:10, 16:9
Maybe relatively to height only? X axis positon can be calculated relatively to screen height. As I understand - flx*0.13 means relatively to screen width? like 0.13 of screen width. Maybe it could be 0.06 (or something) of screen height?

---------

If you want to test layout for different aspects just change GENERAL > WINDOW MODE to "Window"
And resize your window to be 16:9 in proportons

---------

As for my technique :) I'm seasoned graphics designer (15+ years under my belt) so I know my ways around. I have no tips for Gimp since I'm using Photoshop. But with PS I use shape tool to draw vector shape as a mask for an image.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on May 22, 2015, 09:18:16 AM
Verson-

Yeah, it might be possible but it would take a lot more work. The one thing I don't like about 16x9 is too much negative space. Now, for something like a media center it looks fantastic, not so much for the typical arcade though. But, I will see what I can do when I have enough free time. Once you've made the adjustment for your 16x9 layout you should be able to scale up to whatever 16x9 resolutions.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: verion on May 22, 2015, 11:09:28 AM
Yea, I think you're right - better to make a spin-off just for 16:9
And I could move the cabinet to the right - to fill that empty space
Maybe even add some side art.

I know I'm just an edge case - but I want to have my mame always with me, and that means it has to work on 16:9 widescreen 11" laptop.

-----

Can you point me to the source of that robotron cab image (with the side not cropped)? I could start working on that image from scratch.
Or maybe any other good image of nice cab that we could use?

----

BTW you could use italic font for local title - it will be better match for the cab geometry that is in perspective

----

I've found a small bug in .nut

in line 42
there is ->   local mask = fe.add_image( "mask.png", 0, 0, flw, flx );
should be ->   local mask = fe.add_image( "mask.png", 0, 0, flw, flh );

this way it will also stretch vertically and add nice dark vignette corners also at the bottom

Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on May 23, 2015, 09:12:29 AM
Verion-

Good catch, I deleted the old .nut, so I kind of threw this one together post haste. I actually use an arcade style font for my layouts but I'll give the italics a go. We could always use some more good quality cab artwork. Here is the link for the cabinets.   

 Robotron Model Copyright Andrew Kator & Jennifer Legaz
 http://3dmodels.katorlegaz.com/arcade_machines/248/index.php
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: verion on May 23, 2015, 03:25:56 PM
Thanks for the link. That source image is of better quality - so I’ll start that from scratch and make it already in HD resolution (1080p). It will scale down to 1024x768 just as good as it scales up now.

I’ll work on 4:3 aspect - as it will be more beneficial to you and probably for the others, since 4:3 is the golden standard in emulation. When everything will be ready - I’ll just make my own spin-off and make it 16:9 just for me and maybe a small widescreen minority.

I was thinking about adding special “effects” to overlay - like shadows, glows, rounded corners on screen, etc.
But I don’t know if anyone will notice :D

It’s a little hard to explain - maybe you can check out some overlay examples on my webpage with graphics for gamers - www.ClanLogoDesign.com

Just scroll to the TWITCH.tv part (or click TWITCH at the top menu) - those are all .png overlays on plain rectangle objects (video, stats, alert boxes). Overlay adds shadows, scanlines, rounded corners, etc. I can make something similar for screen and marquee - but I don’t know if it’s worth the hassle. Let me know what do you think.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on May 24, 2015, 06:47:16 AM
verion-

I checked out the link you provided. WOW!, that looks great man. Any artwork that you could share with the AM community would be awesome. So, I think it's definitely worth the effort. 
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: verion on May 24, 2015, 07:13:54 AM
I'm glad that you like my works.

---

OK. So I start working on it next week.

I'll make a cab graphics from scratch and tweak artwork position (if necessary).
I think I'll stay with that robotron cab, because it has a nice retro look - but does't look dated.

---

Can you make a change in .nut to make that text box with game info at the bottom optional (via layout options)?
I don't see the point of using from the perspective of someone that is not interested in producer or year - so option to switch it on/off would be nice.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on May 24, 2015, 01:14:57 PM
Verion-

Absolutely, I'll get it done.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: verion on May 26, 2015, 12:25:07 AM
I've upscaled all graphics to 1080p and started to clean it up.
So far I've retouched front panel to get more generic look and get rid of that mirrored texts.

I've noticed that you've started another thread "updated version".
I think we should continue in that thread.

Maybe you could post most recent layout.nut file here (after you'll made that changes re: text info box) - and then we'll continue in that new thread. ok?
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: omegaman on May 26, 2015, 07:34:01 AM
Verion-

That looks good. Yes, I will post the new .nut in the updated thread. I agree that the year & manufacturer are not really needed especially with the history plugin enabled. So, you want the title centered on the bottom, correct?
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: verion on May 26, 2015, 07:40:30 AM
Well... I don't need that feature at all. But maybe someone does.

I've changed it a little and use it only to find out what's the rom name (.zip name) - for troubleshooting and rom maintenance.

And yes, centered at the bottom is ok - I'll reposition it anyway since my new cab image doesn't match the old one exactly. So you can leave txt position as it is now.
Title: Re: leftside robo skin with spin wheel like in hyperspin on right using wheel art.
Post by: verion on June 03, 2015, 03:30:18 AM
This thread is continued in separated thread (updated version of this layout)

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