Attract-Mode Support Forum

Attract-Mode Support => Scripting => Topic started by: liquid8d on May 23, 2017, 07:55:15 PM

Title: WIP Layout Builder
Post by: liquid8d on May 23, 2017, 07:55:15 PM
I'm still here!

So awhile back, I teased a layout builder that I started working on. It took awhile but it's finally starting to take shape. Here's a quick preview:

https://youtu.be/33RyalIlNpk (https://youtu.be/33RyalIlNpk)

This is pretty rough right now, but basic design is working for text and images and it won't take much to export the code (you can see the code builder at the end).. of course it will take quite a bit more to add other objects, sounds, event triggers and animations.. but I'm pretty happy with where it's going. Ideally, it will push you to design in multiple aspects - showing/hiding/adjusting the objects you add for each respective setup. I'm also hoping to do simplify surfaces to essentially make them different layouts and show and hide them on different events. Additional objects could be added fairly easily as you create code to create the html element equivalent, and tell it the code to export out the object.

If you have comments, suggestions, thoughts.. let me know!


UPDATE:

The editor is live and a work in progress. You can try it right now at:
http://goodiesfor.me/attractmode/builder (http://goodiesfor.me/attractmode/builder)

(http://i.imgur.com/fDMrkFrm.png)

Title: Re: WIP Layout Builder
Post by: jedione on May 23, 2017, 08:43:21 PM
thank god
 you are a huge asset to this site.....bro

cant wait to try it!...........peace
Title: Re: WIP Layout Builder
Post by: liquid8d on May 25, 2017, 09:02:32 PM
OK, this is very preliminary, but give it a shot! :) Basically just text, images, artwork and lists right now:

http://goodiesfor.me/attractmode/builder/

(http://i.imgur.com/J2oPFoo.png)

You'll notice a lot of bugs, not-implemented things, etc... but let me know what you think
Title: Re: WIP Layout Builder
Post by: mahuti on May 25, 2017, 10:50:30 PM
Really cool. Not much to say yet. I looked at the code view... if anything else, this will be a handy tool for showing off some underutilized methods, properties and best practices. 
Title: Re: WIP Layout Builder
Post by: bionictoothpick on May 26, 2017, 03:39:06 AM
This is more fun than looking at the manual!

It will definitely increase my familiarity. Maybe I'll even redo my magazine theme.

Thank you. 
Title: Re: WIP Layout Builder
Post by: liquid8d on May 27, 2017, 08:42:49 AM
Hey all,

I did an update to the online version, check it out!

http://goodiesfor.me/attractmode/builder/

This update adds:
 * resizable menu
 * new move/resizing/snap library interactjs which means..
 * gridlines with snapping
 * a builtin pixel.png in media for background rectangles
 * image coloring
 * some additional data/magic token info
 * cosmetic/ui updates and bug fixes

The biggest issues you'll notice right now is that moving/resizing doesn't work properly when you change zoom and the resize grab area is a little much which makes it hard to drag/resize smaller objects..

Let me know what you think!
Title: Re: WIP Layout Builder
Post by: verion on May 27, 2017, 09:41:00 AM
This is really impressive!

---

But I've selected 16/9 layout and changed resolution to 1920x1080
And it seems that an object (image) with 1024px width is 100% screen width - it looks like 1920x1080 setting is not applied
Am I missing something? An apply button? Or reload?

View code shows proper:
fe.layout.width = 1920
fe.layout.height = 1080

but image that is 1024x100px is 100% layout width
and if I place another image with 1920px width it looks like cut @1024px
Title: Re: WIP Layout Builder
Post by: liquid8d on May 27, 2017, 09:45:40 AM
yeah right now I am using a lower 1024x576 for 16x9. I'll work on what aspect or specific resolutions are available as I get further along :)

Right now for testing, the layout automatically is setting 640x480 i believe.. but I'm getting there ;)
Title: Re: WIP Layout Builder
Post by: liquid8d on May 28, 2017, 01:02:39 AM
Got some more done.. now supporting additional file types, which adds fonts!

(http://i.imgur.com/UXPv2ib.png)

By the way.. I've now added the code to github. Might be kinda pointless to start submitting issues just yet since I have so much to do, but if you notice major things for the generic stuff that is implemented now or just want to check out the code, feel free:

Github:
https://github.com/liquid8d/am-builder

Online Version:
http://goodiesfor.me/attractmode/builder/
Title: Re: WIP Layout Builder
Post by: liquid8d on May 28, 2017, 09:28:31 PM
more fixes, including sliders for colors, improved grid, sidebar for multiple menus:

(http://i.imgur.com/gbORB7M.png)
Title: Re: WIP Layout Builder
Post by: liquid8d on May 29, 2017, 10:42:04 PM
I've done a bunch of updates:
 - video support! (just turn on video_playing for an artwork object)
 - style and video flags updated and can now be multiple values
 - some listbox style fixes
 - the 'Data' menu is now 'Navigate' (some options are moving over to the Dev tab)

clear/save/resume layout
- you can now save progress and resume it in a later session. This saves your fonts and media as well
- this could be buggy ;)

Still just text, images, artwork, listboxes for now... gonna start clearing any issues with those and I can start looking at other things.

Go on, you know you wanna try it:
http://goodiesfor.me/attractmode/builder/
Title: Re: WIP Layout Builder
Post by: liquid8d on May 30, 2017, 04:51:58 PM
OK, few more fixes:
 - media and fonts are now moved to a Files tab on the left side
 - you can now rename your objects - double-click to enter a new name
 - fix where colors on images weren't saving correctly
 - fixes for save/resume with artwork

Now I need to start focusing on fixing the drag/resize issues when zoomed in/out, using touch on mobile devices and loading the layout with proper aspects based on users resolution or preference.

If you want to start submitting issues or feature requests, feel free - i need to start getting familiar with using and resolving github issues

(http://i.imgur.com/fDMrkFr.png)
Title: Re: WIP Layout Builder
Post by: liquid8d on June 02, 2017, 12:14:34 PM
More work! I FINALLY have most of the drag/resize quirks worked out, so it should be pretty usable now!

Also, subimg works pretty good now..
(http://i.imgur.com/lKShtwQl.png)


I even added some tools in the sidebar to help
(http://i.imgur.com/VGijAWGm.png)
(http://i.imgur.com/fhUX0rnm.png)

Clone is there - just select an image and click the clone button, but it may or may not work properly right now.
Title: Re: WIP Layout Builder
Post by: liquid8d on June 03, 2017, 12:50:48 AM
So I've now added saving the builder file into the generated zip, and you can now load a zipped layout built by AMBuilder by dragging it onto the layout area :)

If you want to give this a shot, download this layout zip and drag it right onto the builder layout area.

Let me know if you notice any issues in doing this!
Title: Re: WIP Layout Builder
Post by: bundangdon on June 03, 2017, 07:35:39 AM
Amazing work! Anything that can make layout/theme building easier for the masses is always a good thing in my opinion :) Keep up the good work!
Title: Re: WIP Layout Builder
Post by: Aurel_AM on June 03, 2017, 01:27:26 PM
Hey, I'm usually only a lurker here, but I really wanted to thank you for your work on this : )
Keep up the great work, this tool will be super useful to many!
Title: Re: WIP Layout Builder
Post by: liquid8d on June 04, 2017, 01:58:17 PM
Thanks!

More progress.. Got more done than I thought! :)

Surfaces and clones!
This was an interesting feat and it's fun to play around with creating objects on surfaces, especially to get some future layout design ideas.

To create a surface, just click the 'Surface' button to add it. Resize it, then start adding child objects. If the surface itself or an object within the surface is selected, new objects will be created on that surface. You will notice that surfaces show red in your objects list and can be expanded/collapsed to show/hide child objects. There is an issue right now where surface properties are not stored per-aspect yet.

Clones show up as blue in the objects list. They are still a bit touchy and only clone the initial object settings. But it should be good enough to visually see a clone, and it does create the object as a clone in the code.

- you can also now just click and drag anything without selecting it first - including objects within surfaces, as long they aren't locked
- I also updated included content - removed the missing.png and set pixel.png as default for images. I added an arcade font by default, but it is not set as the default font for text.

(http://i.imgur.com/Tb6L19ul.png)

Fun stuff!!
Title: Re: WIP Layout Builder
Post by: caminiti45 on October 15, 2017, 05:01:21 PM
this is great! Are you still working on it?
Title: Re: WIP Layout Builder
Post by: jedione on October 16, 2017, 07:16:38 AM
seems as though he has disappeared,  again,
probley just bizzy with life.   :-\
Title: Re: WIP Layout Builder
Post by: liquid8d on October 21, 2017, 10:42:39 PM
I am, but I have not forgotten! :P

Since I have the basic functionality working, I haven't put much time into it. I do need to get back to correct some of the issues I have listed in there, but I've held off since I'm working on a separate module that will simplify the conversion process to a .nut file. But feel free to add to the issues.

I still want to complete a new animation module and get that integrated, as well as add some additional objects. A lot of that rides on me getting this other module working.
Title: Re: WIP Layout Builder
Post by: churchofsolipsism on November 13, 2017, 12:01:19 AM
What a great tool - thanks so much for putting so much work into this.

I'm not the creative type myself, but there's this gorgeous emulation station theme/ layout out there made by one Phill Doodle I simply have to use on one of my cabs, but for the life of me I can't get it to run properly (besides, I much prefer Attract Mode since its handling is so much better than ES). Now I can convert it to a layout for AM!
Title: Re: WIP Layout Builder
Post by: mortron on November 22, 2017, 09:40:50 AM
Big ups on this project. The more I learn about attract mode, the more I enjoy this!

I am trying to get a 3:4 aspect theme set up but having trouble figuring out how to rotate the theme so that its similar in orientation to verticools. Its proving a bit tricky and my screen keeps doing everything but what I want it to!  :o