What is the layout coordinate system?

[tomek]

Where is the origin?

[liquid8d]

0,0

Are you using surfaces or seeing something odd?

[omegaman]

Tomel-

Let me expound on what Liquid said. This should help other newcomers as well. Its a 2D coordinate system where the x axis points from left to right, and the y axis from top to bottom, ergo the starting point would be 0.0 at the top left corner. So, if I wanted to add some artwork on a surface, I would do something like this in the layout "fe.add_image( "bg.png", 50, 100, 300, 250 )". This  translates into move the image right 50 units, move it down 100 units, 300 units wide, 250 units height". I hope this helps. 

[liquid8d]

That is more detailed description

top/left = 0,0
bottom/right = fe.layout.width/fe.layout.height (which defaults to ScreenWidth/ScreenHeight if not specified in the layout)

I didn't clarify because I saw tomek post a class using surfaces and and adding images to surfaces, so I assumed they are already familiar with typical use. I've had my share of strange things happen when trying to position on additional surfaces, and there was no mention of a problem.

[tomek]

Thanks for the exhaustive replies everyone. I am pretty familiar with coordinate systems etc but I was testing a few things the other night and the layout engine had me baffled. For whatever reason I thought that the global origin was in the centre of the screen. I asked the question out of frustration.


Also, it took me a little while to figure out that there is a scaling transformation happening which maps layout coordinate system to the screen coordinate system. I started working with an existing layout which was set to something like 320 x 240. This layout space is then mapped to my 1920x1200 monitor space. It took me a while to get the size of my various elements to appear as I wanted.


Also, one stupid mistake I made was trying to position right-aligned text. The text rectangle was being positioned correctly but the content appeared in the wrong place. Well, duh... 


To make things more difficult for myself I am working on a black and white layout with a black background. I ended up creating a bunch of white placeholder images to finally figure out the layout coordinate system and the scaling transformation. By the way, this site (http://dummyimage.com/) is really handy for generating dummy images which are really useful for planning layouts.


All this gave me an idea for a little layout editor which could be used to design top level layouts. It would be a graphical editor which would spit out some sort of Attractmode Markup Language (AML) file which could be saved and reloaded into the editor. Once the layout is ready for testing one would "compile" the .aml file into .nut and voila!


Right now my workflow revolves around Sublime Text Editor on OS X. I have created a basic build system for AM and when I'm done tweaking the nut file I just press the build button and Sublime fires AM to show me layout. It's pretty convenient.


Anyway... back to work before someone notices that I'm obsessing over the "wrong" thing (oh, how little my boss knows of what's truly important in life ;-)


cheers,
-tomek

[liquid8d]

I figured it was something goofy.. But everything is from 0,0:

If fe.layout.width/fe.layout.height are defined, top/left = 0,0 and bottom/right = fe.layout.width/fe.layout.height
If it isn't then bottom/right is ScreenWidth/ScreenHeight.

FYI - I already have a working "theme" module which allows you to create layouts in XML. It can even  implement custom object modules, so you do <include type="module">scrollingtext</include> and add them via XML (<scrollingtext />). It also supports parsing other frontend themes. It'd be great to have a designer which can spit out "AttractMode" XML, and my theme system could convert it to a layout.