1920x1080 Basic Layout help

[retrogam3]

Is there anyone that can help me with a tweaked Basic nut file? I want to take the Basic theme and just up it from 640x480 to 1920x1080. I can change the resolution in the file but then of course all of the other alignments are off and I just don't know how to do the math to "up" the numbers? Please help?

fe.layout.width=640;
fe.layout.height=480;

local t = fe.add_artwork( "snap", 348, 152, 262, 262 );
t.trigger = Transition.EndNavigation;

t = fe.add_artwork( "marquee", 348, 64, 262, 72 );
t.trigger = Transition.EndNavigation;

local l = fe.add_listbox( 32, 64, 262, 352 );
l.charsize = 16;
l.set_selbg_rgb( 255, 0, 0 );
l.set_sel_rgb( 0, 0, 0 );
l.sel_style = Style.Bold;

fe.add_image( "bg.png", 0, 0 );

l = fe.add_text( "[DisplayName]", 0, 15, 640, 30 );
l.set_rgb( 255, 255, 255 );
l.style = Style.Bold;

// Left side:

l = fe.add_text( "[Title]", 30, 424, 320, 16 );
l.set_rgb( 255, 0, 0 );
l.align = Align.Left;

l = fe.add_text( "[Year] [Manufacturer]", 30, 441, 320, 16 );
l.set_rgb( 255, 0, 0 );
l.align = Align.Left;

l = fe.add_text( "[Category]", 30, 458, 320, 16 );
l.set_rgb( 255, 0, 0 );
l.align = Align.Left;

// Right side:

l = fe.add_text( "[ListEntry]/[ListSize]", 320, 424, 290, 16 );
l.set_rgb( 255, 0, 0 );
l.align = Align.Right;

l = fe.add_text( "[FilterName]", 320, 441, 290, 16 );
l.set_rgb( 255, 0, 0 );
l.align = Align.Right;

[loopin]

Hi

what background are you using?

heres the first part to change

fe.layout.width=1920;
fe.layout.height=1080;

then start playing around with the different x and y settings for each of your onscreen info


you'll also need to resize your bg.png file "Use GIMP if you dont have photoshop as its free"

[retrogam3]

Ya I fixed the BG file and changed the res the x and y part is what I don't know how to fix. I don't even know how to start "playing around" with those numbers because I don't understand them?

[akafox]

(0, 0, 0, 0,) is the part you need to tweak I'm not to skilled myself but I have been playing around with it.

t = fe.add_artwork( "snap", 348, 152, 262, 262 ); <--here
t.trigger = Transition.EndNavigation;

t = fe.add_artwork( "marquee", 348, 64, 262, 72 ); <--- here
t.trigger = Transition.EndNavigation;

local l = fe.add_t = fe.add_artwork( "snap", 348, 152, 262, 262 ); <--- here
t.trigger = Transition.EndNavigation;

t = fe.add_artwork( "marquee", 348, 64, 262, 72 ); <--- here
t.trigger = Transition.EndNavigation;

local l = fe.add_listbox( 32, 64, 262, 352 ); <--- here
l.charsize = 16;
l.set_selbg_rgb( 255, 0, 0 );
l.set_sel_rgb( 0, 0, 0 );
l.sel_style = Style.Bold;

the first two numbers are your starting points.. 0 0 puts the top left of whatever it is in the very top left of the screen the other numbers are the size length and width.

I'm not sure that I can scale up that high so I'm not sure I can help. I'll have to check my other computer.

EDIT: I took the last "here" off ..it is for colors not size or location sorry. I'll see if i can get you numbers to start with.

[loopin]

ello....


i know what you mean , the dimensions stuff (x,y) is a headache to get to grips with

this is how i treat it.....

eg....
local snap = fe.add_artwork( "snap",  20, 109, 900, 800);

( "snap",  20, 109, 900, 800);
this will put my video 20 pixels from the left hand side of the screen and 109 pixels down from the top

then the video will be
900 wide
by 800 high

i think i got those round the right way

the way i do it is to exaggerate the numbers to see whats happening on screen, then quit, make a change, save and reload (over and over again )

There's probably a much easier way of doing it.... i can upload one of my layouts (though they are very basic as im just starting too)



ps wait till you start playing around with video/image rotation,skew and pinch its hurting me right now.. i just cant get my head around it

[akafox]

Honestly loopin that is how I do it and the best way i think. I am sure there is some mathematical formula but I was never good at math! You are exactly right how it works though. When I used Mamewah it had a layout builder program..you just moved things around and dragged and pulled till you got it where you wanted it.

xev1n -
If you want you could try downloading mamewah and setting it up it there..then you could take the numbers from there and type them into the AM layout.nut. I would help you but as I said I can not scale my monitor that well If you run MAME smooth at that resolution you have a good computer for sure!

The problem with these numbers and people helping is that everyone's set up or hardware is different. I can make it look perfect on my end..but it will be messed or look like crap on your end..or vice versa. Is there an absolute reason that you need to scale it 1920x1080. If it's "just to it" that is fine too. That's why it's called open source after all.

[omegaman]

Xev-

These are all good examples from members of the community and should be very helpful to you. But, I would also recommend that you look in your attract root DIR and read the layouts.md file. It has all the information you need to start creating basic layouts. Once, you've learned the basics then I suggest you start digging into all of the example scripts Raygun has provided because they are learning tools on how to do more advance stuff. Don't worry about messing anything up because that is all part of the learning process. 

Here is some basic info from the layouts.md:
   
fe.add_image( name )
fe.add_image( name, x, y )
fe.add_image( name, x, y, w, h )

Add a static image or video to the end of Attract-Mode's draw list.

Parameters:

   * name - the name of an image/video file to show.  If a relative path is
     provided (i.e. "bg.png") it is assumed to be relative to the current
     layout directory.  Supported image formats are: PNG, JPEG, GIF, BMP and
     TGA.  Videos can be in any format supported by FFmpeg.
   * x - the x coordinate of the top left corner of the image (in layout
     coordinates).
   * y - the y coordinate of the top left corner of the image (in layout
     coordinates).
   * w - the width of the image (in layout coordinates).  Image will be
     scaled accordingly.  If set to 0 image is left unscaled.  Default value
     is 0.
   * h - the height of the image (in layout coordinates).  Image will be
     scaled accordingly.  If set to 0 image is left unscaled.  Default value
     is 0.
 

[retrogam3]

Thanks guys! All good info here. I was just thinking that if the res is 640x480 and the other x y numbers are already relative to that than to up it there is just some addition that would need to be done to change the x y coordinates. I am having fun with the trial and error part though. A visual layout editor would be amazing, I will ck out mamewah just to get the numbers. Thanks!

[retrogam3]

This site is golden!!!! upload BG.png and click and drag...Amazing!


http://getspritexy.com/

[cools]

Attract Mode is resolution independent - just because you tell it to use 640 x 480 for the layout it doesn't care, it will draw it on 1920x1080. The front end is a set of co-ordinates. If you want pixel perfect then of course using 1920x1080 in the layout is required, but you could easily just do 192x108 and have it draw it larger.

Positioning and sizes in my layouts are all done mathematically - I first set a pair of (short named) variables to the values of fe.layout.height and fe.layout.width, then I use simple maths on these variables to establish positions.

So:

flh = fe.layout.height;
flw = fe.layout.width;
fe.add_image ("snap", flw*0.1, flh*0.1, flw*0.3, flh*0.3);

Will put a snap on the top left of the screen.

I do this to deliberately make my layouts adjustable to different resolutions - if fe.layout.height/width change then everything is still drawn in the same place on screen. Using absolute co-ordinates when you're drawing stops this from happening.

[retrogam3]

Thanks for this, I'm starting to get it. I know it stretches I made a 640x480, 1366x768, and 1920x1080. Just so it looks less pixelated on the screen. Finding http://getspritexy.com/ works perfectly in regards to finding coordinates for me as a noob since apparently I can't do math...lol

[akafox]

I don't know about any other graphics software but I would assume same the same thing for all of them... I know gimp will give the the co-ordinates I need right there on the bottom information bar...I can't do math either

cools is right xev1n I make all my layouts as large as I can get them but I normally run 800x600. Everything looks fine everytime. This keeps people from having to do the same layout 5 times.

[omegaman]

Cools-

Thanks for this. I used your scaling method to fix problems with my spin wheel art scaling up. I was worried about the loss of pixels in the images when scaling up but its not that noticeable. Better than expected.