Author Topic: leftside robo skin with spin wheel like in hyperspin on right using wheel art.  (Read 15001 times)

omegaman

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 873
    • View Profile
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. 

keilmillerjr

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 999
    • View Profile
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.

omegaman

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 873
    • View Profile
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.

xev1n

  • Full Member
  • ***
  • Posts: 79
    • View Profile
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;

omegaman

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 873
    • View Profile
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. 

xev1n

  • Full Member
  • ***
  • Posts: 79
    • View Profile
Great, I'll give it a shot, thanks!

xev1n

  • Full Member
  • ***
  • Posts: 79
    • View Profile
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.

omegaman

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 873
    • View Profile
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.

omegaman

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 873
    • View Profile
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. 

xev1n

  • Full Member
  • ***
  • Posts: 79
    • View Profile
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;

omegaman

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 873
    • View Profile
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;
}
 

omegaman

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 873
    • View Profile
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,

xev1n

  • Full Member
  • ***
  • Posts: 79
    • View Profile
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

omegaman

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 873
    • View Profile
Xev=

No, this is what I mean about having wheel art for the selection. You wanted text about and below it right?

xev1n

  • Full Member
  • ***
  • Posts: 79
    • View Profile
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.