Attract-Mode Support Forum

Attract-Mode Support => General => Topic started by: asahendrix on June 22, 2019, 11:27:30 PM

Title: Wheel Art in Vertical List
Post by: asahendrix on June 22, 2019, 11:27:30 PM
Hey guys - I've been working on a new theme and I can't figure out how to make a straight up and down vertical game list. I don't want a conveyor or a "wheel" per se, but I do want WHEEL ART on a standard vertical list.

I'm on a Pi 3B+. Here's the code I currently have:

// Wheel

fe.load_module("conveyor");

local pi = 3.14;
local wheels = config["wheels"].tointeger() + 3;

class WheelEntry extends ConveyorSlot {
   constructor() {
      local w = fe.add_artwork("wheel");
      w.preserve_aspect_ratio = true;

      base.constructor(w);
   }

   function on_progress(progress, var) {
      /* Center alignment */
      local pos = abs(ceil(progress * wheels));
      local size, alpha;
      local pprogress = 1 - (pos.tofloat()/wheels - progress) * wheels;

      print(pos + " " + progress + " " + pprogress + "\n");
      size = 0.14;
      alpha = 155;

      if (pos == wheels/2 + 1) {
         size = 0.2 - pprogress * 0.06;
         alpha = 255 - pprogress * 100;
      } else if (pos == wheels/2) {
         size = 0.14 + pprogress * 0.06;
         alpha = 155 + pprogress * 100;
      }

      /* Realign between -2pi/3 and -4pi/3 */
      local angle = (progress * -2*pi/3) + 4*pi/3;

      m_obj.x = (1.4 - size /2)*flw + flh * cos(angle);
      m_obj.y = (0.5 - size /2)*flh + flh * sin(angle);

      m_obj.width = size*flw;
      m_obj.height = size*flh;

      m_obj.alpha = alpha;

      local rotation = (progress * -120) + 60;
      m_obj.rotation = rotation;
   }
};

local conveyor_bg = fe.add_text("", flw*0.73, flh*0, flw*0.28, flh*1);
conveyor_bg.set_bg_rgb(0,0,0);
conveyor_bg.bg_alpha = 220;

local slots = [];
for (local i=0; i<wheels; i++)
   slots.push(WheelEntry());

local conveyor = Conveyor();
conveyor.set_slots(slots);
conveyor.transition_ms = config["spin_ms"].tointeger();



Can anyone help me out?

Title: Re: Wheel Art in Vertical List
Post by: asahendrix on June 24, 2019, 06:45:15 PM
By the way, this is the wheel from the OlRoom theme.
Title: Re: Wheel Art in Vertical List
Post by: progets on June 25, 2019, 10:58:52 AM
Sample of vertical wheel

Code: [Select]
//wheel

fe.load_module( "conveyor" );
  local wheel_x = [ flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.76, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, ];
  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.22, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, ];
  local wheel_a = [  80,  80,  80,  80,  150,  150, 255,  150,  150,  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.15,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11, ];
  local wheel_r = [  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ];
local num_arts = 8;

class WheelEntry extends ConveyorSlot
{
constructor()
{
base.constructor( ::fe.add_artwork( "wheel" ) );
}

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 = my_config["transition_ms"].tointeger(); } catch ( e ) { }
}

Title: Re: Wheel Art in Vertical List
Post by: asahendrix on June 26, 2019, 03:24:39 PM
Sample of vertical wheel

Code: [Select]
//wheel

fe.load_module( "conveyor" );
  local wheel_x = [ flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.76, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, ];
  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.22, flw*0.18, flw*0.18, flw*0.18, flw*0.18, flw*0.18, ];
  local wheel_a = [  80,  80,  80,  80,  150,  150, 255,  150,  150,  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.15,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11, ];
  local wheel_r = [  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ];
local num_arts = 8;

class WheelEntry extends ConveyorSlot
{
constructor()
{
base.constructor( ::fe.add_artwork( "wheel" ) );
}

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 = my_config["transition_ms"].tointeger(); } catch ( e ) { }
}


Thank you for that - I actually came across this and got so hair brained trying to reduce the size of the wheel that I stopped (for the time being)

I notice the number of wheels is 8 but there are 12 entries of what look like size measurements in wheel_x, wheel_y, etc.:

flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.76, flx*0.78, flx*0.78, flx*0.78, flx*0.78, flx*0.78,

Why are there 12 entries for only 8 wheels?
Title: Re: Wheel Art in Vertical List
Post by: progets on June 26, 2019, 08:21:13 PM
Why are there 12 entries for only 8 wheels?

Just to provide flexibility. By having 12 entries you can adjust for up to 12 wheels simply by changing "local num_arts = 8;". This can also be handy if you wanted to switch it to a vertical layout.
Title: Re: Wheel Art in Vertical List
Post by: asahendrix on June 26, 2019, 09:26:56 PM
Why are there 12 entries for only 8 wheels?

Just to provide flexibility. By having 12 entries you can adjust for up to 12 wheels simply by changing "local num_arts = 8;". This can also be handy if you wanted to switch it to a vertical layout.

Ah that makes sense. I think I’m about ready to go off on my own.

Any chance you might could tell me what x, y, w, a, h, and r each do? I’d be forever grateful and it would save me a lot of trial and error and I can’t find a lot of resources that speak specifically to vertical wheels. I’m sure they’re size adjustments, but there are a few inconsistencies that make it confusing to decode.
Title: Re: Wheel Art in Vertical List
Post by: progets on June 26, 2019, 09:55:39 PM
Any chance you might could tell me what x, y, w, a, h, and r each do? I’d be forever grateful and it would save me a lot of trial and error and I can’t find a lot of resources that speak specifically to vertical wheels. I’m sure they’re size adjustments, but there are a few inconsistencies that make it confusing to decode.

I think...
x = x-axis (horizontal screen position)
y = y-axis (vertical screen position)
w = width (of wheel/image/text)
a = alpha (the amount of tinting)
h = height (of wheel/image/text)
r = rotation (clock position)

P.S. These same things apply to any wheel (or other type of image). Here's the same setup but using the curved wheel you don't want just to show how the settings change.
Code: [Select]
//default wheel

{
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.24, 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.17,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11,  flh*0.11, ];
local wheel_r = [  30,  25,  20,  15,  10,   5,   0, -10, -15, -20, -25, -30, ];
local num_arts = 8;

class WheelEntry extends ConveyorSlot
{
constructor()
{
base.constructor( ::fe.add_artwork( "wheel" ) );
}

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 = my_config["transition_ms"].tointeger(); } catch ( e ) { }
}

Title: Re: Wheel Art in Vertical List
Post by: progets on June 26, 2019, 10:04:20 PM
You should also checkout this thread http://forum.attractmode.org/index.php?topic=1945.msg13386#msg13386 (http://forum.attractmode.org/index.php?topic=1945.msg13386#msg13386). This module will allow you to understand and configure your wheel how ever you want in a layout. It will teach you a lot and make thing easy.
Title: Re: Wheel Art in Vertical List
Post by: asahendrix on June 28, 2019, 10:46:05 AM
Thank you so much for this! Helps me a TON!