I present... AMBuilder: Layout Designer!

[liquid8d]

For a couple weeks I have been posting my progress on this in the scripting area but it's getting closer to real-world usage so I thought I would share here:

I have developed AMBuilder, an online Attract Mode layout builder. It is still a WIP, but it is pretty functional at minimum to the point of playing around and getting ideas.

Features:
 - full drag and drop design of AM layout
 - includes standard AM objects (text, image, artwork, list, clone, surface)
 - drag and drop upload for custom images and included fonts
 - included joystick/buttons media and arcade font
 - embedded sprite sites to help with using subimg sprites
 - save/resume session
 - view generated code
 - download a complete, ready to run layout zip file containing all resources. Drop this in your AM layouts folder and select it in your display options
 - zip files created with AMBuilder can be dropped right into the layout area to load them

Aspect support is touchy right now, but in the future it will be very simple to design your layout and make sure it looks great in all aspects and resolutions

You can try it out here:
http://goodiesfor.me/attractmode/builder

You are welcome (and encouraged!) to share your zip files here, so we can all try the layouts you create! Please do keep in mind copyrights and rights usage when it pertains to included images and fonts.

In that spirit, I attached a layout that I just created in about 5 mins. Just download the attached zip, go to the site and drop the zip file right into the layout area t o check it out. When you are ready to build your own, hit the Clear button and start adding objects from the side menu

Please give it a shot and let me know what you think!

The code for this project is available here:
https://github.com/liquid8d/am-builder

If you are interested in helping, feel free to submit issues on the github site or PM me if you want to do more.

[progets]

Very cool. Great job!

Where is the romlist and artwork coming from? Are these just the defaults you have on the web server?

[mortron]

So I can understand this... I just go online and use this tool... create my layout and it gives me a zipped theme?

If so, as a Mac user, this is great... most of the cooler home brew programs are Windows only IME and I don't run bootcamp. This is a game changer and something to be proud of... cannot wait to experiment. Thank you!

[liquid8d]

Very cool. Great job!

Where is the romlist and artwork coming from? Are these just the defaults you have on the web server?

Yes, I added some fake data that it's using I'll add some more soon and/or look for local data.

So I can understand this... I just go online and use this tool... create my layout and it gives me a zipped theme?

Correct.. it's just for designing, though. You'll take the zip and put it in the AM layout folder and choose it in AM display settings.

[mahuti]

If so, as a Mac user, this is great... most of the cooler home brew programs are Windows only

I just use Textmate on a Mac to make AttractMode layouts & changes. Obviously if you're not into programming much, it would be a lot more daunting than using a GUI like this. As for AttractMode itself, it's available on a Mac. If I recall, you have to right click on the app and "show package contents" to add or change layouts.

[taelonian]

Thanks this is the best thing i will test

[bobbanico]

Hello,

i just gave a try to your app, it is working very well congratulations for the time and the GUI which is nice and user friendly !

I now have some questions

- To set up a background, you have to create a surface first is that right ? otherwise the background is not displayed when using the theme.

- When you select HD 16/9, i am guessing i have a resolution of 1920x1080 but it seems despite i try to set it in the layout res, i cannot get that size, so the display is shrinked once in AM.

- I have not understood how zorder was working. i tried to set text over another text, but despite the zorder, i cannot get it to display on screen in AM despite i see it in the app GUI.

- Finally, i used a font i uploaded, but despite i see it well in the app GUI, i dont have it working in AM. is there a step to perform to have it, like including it into the zip resources or something ?


Thanks again for this great work !

Update : I just realised i had used the font in your app, but forgotten to install it into my system. Once done it works perfectly !

[liquid8d]

Thanks for the feedback!

To do a background, you don't need to use a surface and can just use any image including just the default pixel.png by setting the color. You may have had an issue with the zorder, which confused me as well. The default is sets all objects to -1 zorder, which means to create the objects in the order you add them to the layout. That's what it *should* do, but there could be bugs. Though if you do modify zorders to force it, use a different one for each object to ensure they are drawn in the order you expect (higher number draws on top).

Right now, 16x9 is actually using a resolution of 1024x576. The idea was to design for the lowest resolution of that aspect and scale it up. That may not all be fully implemented, and I'll be working on what aspects/resolutions should be available soon. I think for now you could probably just design your 16x9 layout, then set the layout width and height to 1920x1080 and preserve_aspect_ratio to true under the Layout settings and that should work.

As for fonts, at least on Windows I think they should work without needing to install them. Let me know if your on a different OS.

[mahuti]

On the RPi you don't need to install them either. Just need to be included in the theme.

Don't recall on the Mac though.

[liquid8d]

On the RPi you don't need to install them either. Just need to be included in the theme.

Don't recall on the Mac though.

They don't need to be in a specific folder or anything, right? I store them in a resources/ folder in the zip... but maybe it's a problem reading fonts from a zip or perhaps how the font is specified ( i.e. obj.font = 'MyFont' )? I know it works for me on Windows without installing them.

[shrunkenmaster]

Can you explain what the page size is for?
I'm really struggling to get a vertical 600x800 layout working - any tips?

[liquid8d]

Can you explain what the page size is for?
I'm really struggling to get a vertical 600x800 layout working - any tips?

That is my fault! I didn't realize/forgot it is always defaulting to Standard 4x3 settings, so yeah it will definitely come out screwed up. I'll have a fix up later tonight to correct this. I'm also correcting my screwed up 16x9 resolution

If you mean the page size setting in Layouts, that is to set the number of entries to jump each time the "Next Page" or "Previous Page" button is pressed.

[jedione]

how do i set this up for my ....

Aspect Ratio. 5:4        " 1280 x 1024"   Screen.

if not can you please add it ?   this is what im using for my barcade thanks ....

their are a few themes i would like to redo in this scale...

[liquid8d]

how do i set this up for my ....

Aspect Ratio. 5:4        " 1280 x 1024"   Screen.

if not can you please add it ?   this is what im using for my barcade thanks ....

their are a few themes i would like to redo in this scale...

I will.. I'm still trying to determine what aspects should be included and how to handle additional custom aspects/resolutions. Is there a term for 5:4 - would anyone bother with 4:5? That should probably do it for common aspects, no?

I want to keep it is simple as possible to support as many aspects as possible. That's why I'd like to veer away from tons of resolutions - just scale larger/smaller for like-aspects. But I will also at some point add custom configurations as well.

[mahuti]

There are a few ways I could see to handle resolutions dynamically:

scale to fill 100% (warping)

Scale up to height align left (content might letterbox on right or overflow right)
Scale up to width align top Of screen bottom might letterbox or overflow

Scale up to height align center (overflow or letterboxing on sides)
Scale up to width align vertical center (overflow or letterboxing on top/bottom)

Most of those could be pretty easy to handle with functions for handling x,y, width and height calculations based on a setting