Attract-Mode Support Forum
Attract-Mode Support => Scripting => Topic started by: liquid8d on May 24, 2015, 01:17:05 AM
-
Early phases here, but a lot of possibilities once it's working well. I've got crude xml loading, and I have a custom layout that reads a "Theme.xml" file and creates the layout based on it. This can open up the possibility of reading xml themes from other FE's - although it'd have to be coded to support the format, and may be missing features that don't translate to AM.
My plan for now is to make a layout that can read multiple themes from the layout folder, just choose them from the layout options. If you have suggestions or thoughts, let me know.
(http://i.imgur.com/TmRBgqd.png)
-
looks good, I look forward to updates!
I guess with this, your animate module and the loader functionality for layouts from other frontends, we should now have all the pieces to start throwing stuff around if attractmode gets fed a HyperSpin theme :)
-
That and others could work as well.. similar to how you load in the mala stuff we would just need a function that would convert the original layout to AM objects/animations/sounds/etc...
The nice thing here is we can make xml work for any modules type stuff - so let's say a grid object could be something like:
<grid x="0" y="0" width="640" height="360" entries="9" art="snap" />
The same way I see adding animations with my animate module in xml..
-
So looking through the Mala code and some other FEs, I started incorporating INI and TXT file reading also :) Here's one of my old Mamewah layouts converted over which layout files use fixed text lines (non-ini format):
(http://i.imgur.com/9NY4NKz.png)
Right now, I have a "fileformat.nut" module which reads xml, ini and txt files, and a "layouts.nut" module, which provides classes you can extend that will convert various FE layout formats to AM layout objects.
Still a ways to go to get everything working properly and for each different FE theme, but the possibility is there. Hyperspin would still take a lot of time and effort since there is so much customization and things that aren't supported in AM yet (different themes for different systems, swf file support, zip files, etc)
-
Here is the 'basic' AttractMode layout, converted to XML :)
(http://i.imgur.com/vloSFAb.png)
-
And here is the default mamewah layout, loaded from the mamewah layout.lay... I couldn't get 'System' font to work, but other than that, it looks pretty good:
(http://i.imgur.com/cxxUR8r.png)
-
Liquid-
Looking good man. In this case, I think using xml to convert layouts is a great idea because it's good for schema etc... but in general, I find it harder to read and edit than say a delimited file.
-
Do you mean like a delimited line-to-object type thing?
layout;640;480
artwork;348;152;262;262;snap
artwork;348;64;262;72;marquee
listbox;32;64;262;352;16;255;255;0;0;0;bold
...
We could pretty much add any file format, and have it parsed - it's just a matter of writing a parsing function and adding the AM objects based on it. You could have 3 parsing functions for an AM layout - XML, INI and TXT and read a layout created in any of the 3 - as long as a proper schema / format has been determined for that file type. I will probably improve the classes I'm making to do just that - still needs some tweaking.
If you have a good editor XML isn't too bad when it closes tags and quotes for you and the author formats it in a more reader-friendly way :) A few FE's have GUI designers - and I even started playing with a WIP designer, so then you wouldn't need to worry about writing the XML - just drag and drop design and save as a supported format.
[/code]
-
Is this about using .xml or just importing .xml?
Is there any advantage in .xml vs .nut? except importing other themes?
I'm planning to make .nut syntax highlighting for brackets, because non-highlighted code editing is horrible. But with that sorted out .nut structure is ok for me.
-
It does a few things...
1) The file-format module can parse in .xml, .ini or other .txt files, making it easier to read content into your layout from files of that type. Ideally, I'd like these functions to also allow you to write to those formats too.
2) The 'convert-layout' module can create Attract Mode layouts with say an .xml format. You could do basic creating objects without having to 'code' a layout.
3) The 'convert-layout' modules can also import other FE layouts from one of those structured file formats. A parser has to be written for other FEs to convert it to an AM layout.
This wouldn't take the place of .nut but benefits users that don't want to or know how to "code" layouts, just want to import a layout from another FE, or for those that would prefer an easier way to create simple object layouts.
The .nut script files will always give you more control over what you can do with a layout since you have direct access to using classes, functions and create your own scripting.
That said down the road, this could potentially help separate GUI objects from your code by using an .xml (or other format) for the objects, and a .nut for any specialized scripting of them.
As for syntax highlighting - I found a plugin for Notepad++ that does squirrel .nut pretty well, I think it's this one:
http://forum.liberty-unleashed.co.uk/index.php?topic=442.0
-
I'm gonna throw a few things on here I have noticed so far that will be helpful down the road for supporting other layouts or enhancing AM in general.
Not supported:
.zip file resource support
.swf support
.svg support
.otf/.ttf fonts? (not sure if supported)
Could be done, but a module or built-in support would be helpful:
per system 'layouts'
gui system - buttons, check boxes, up/down/left/right/select/cancel navigation etc..
layout 'views' - a way to create multiple views in a layout and show/hide them when needed
dynamic images support (for [Manufacturer], etc) - I submitted a ticket for this
expanded grid/conveyor?
Just things to think about :)
-
I'm on OS X, so unfortunately notepad++ is no good for me.
I've started separated topic about editors with syntax highlighting, and posted your link.
http://forum.attractmode.org/index.php?topic=213.0 (http://forum.attractmode.org/index.php?topic=213.0)
-
Liquid8d-
I use notepad++ and love it. Let me be the first to say - It will be an auspicious day when we have .zip and .swf support.
-
Worked a bit on the classes, here's a little technical look at how things are going:
file-format.nut
class XML()
class INI()
class TXT()
class TXTContent()
class INIContent()
class XMLContent()
The XML, INI and TXT classes have a loadFile( filename ) function which returns the appropriate Content class. For xml, you get a squirrel table of nodes/attributes. For Ini, you get a squirrel table of sections/keys-values. For txt, you get an array of lines. From there, you can read any xml, ini or txt - you wouldn't have to use it to create a layout.
convert-layout.nut
class AMLayout()
{
settings = {}
objects = [];
scripts = [];
modules = [];
}
class LayoutFile()
{
content = null;
constructor( filename )
{
content = [file_type].loadFile( filename);
}
function file_type() { return "xml"; }
function parse( content ) { return am_layout; }
function translate( am_layout ) { return translated_am_layout; }
function create( translated_am_layout )
}
To take that information into a layout, convert-layout defines an AMLayout class of layout components ( objects, modules, etc.. ).
For various layout formats, you extend the LayoutFile class and write the parse, translate and create functions. parse is passed the content (XML, INI or TXT) so you parse that into the AMLayout format. translate is passed the AMLayout object that parse created and allows you to modify the content ( to substitute variables and such ). Then create is passed the translated AMLayout and creates the actual layout and objects.
A pseudo extended layout parser:
class SomeFrontendLayout extends LayoutFile
{
function file_type() { return "xml"; }
function parse( content )
{
local layout = AMLayout();
//parse content into AMLayout instance
}
function translate( layout )
{
//make changes to attributes, etc...
}
function create( layout )
{
foreach ( object in layout.objects )
{
if ( object.type == "text" ) fe.add_text( object.msg, object.x, object.y, object.width, object.height );
}
}
}
the final result is something like:
fe.load_module("convert-layout");
AttractModeLayout("attract/xml-layout/layout.xml");
//or
MamewahLayout("mamewah/default/layout.lay");
//or any other that a LayoutFile class has been written for
It's a pretty good system right now. I'll keep improving it - still have bugs with xml processing and want to refine the AMLayout class but overall it should be easy to start writing addon conversion classes - of course depending on what can be converted properly into AM based on the feature set.
Any thoughts or suggestions, let me know. I'll have the initial code on github in another couple days probably.
-
This one will be a bit trickier - RetroFE. Here's some WIP:
(http://i.imgur.com/0F6xeWP.png)
-
Liquid8-
Awesome work man. I don't care too much for retroFE but their new steam punk theme is pretty cool.
-
I really only set it up enough to see how the layouts worked. The XML layouts are pretty flexible and pretty similar to what I envision for AM xml with animation options.
I'm wondering if the menu thing can be done... I can read the menu xml and create the menu on a surface - but do you know if it's possible via code to get a list of Displays/Filters and if you can switch to a certain display/filter?
-
you guys just broke my brain. :o
I'm going back to hunting down dependencies & compiling stuff I find on git-hub for the RPI. :)
-
OK, I just pushed file-format and file-layout modules to my github:
https://github.com/liquid8d/attract-extra/tree/master/modules
FileFormatVersion 1.0
This module lets you load XML, INI and TXT files in for reading in squirrel.
See the layout example:
https://github.com/liquid8d/attract-extra/tree/master/layouts/sample_file_format
FileLayoutVersion 1.0
This module provides a base to read various file formats and convert them to layouts in Attract Mode.
Initially we have:
AtractModeLayout
MamewahLayout
These are still a WIP and not all functionality works just yet.
See the notes in each modules .nut file in the file-layout folder for more details.
See the layout example:
https://github.com/liquid8d/attract-extra/tree/master/layouts/sample_file_layout
If anyone gets a chance to play around with it, let me know what you think! I don't have everything implemented yet and this is just for Attract Mode .xml and Mamewah .lay files. It's worth playing around with to see how things will work in the future :P
-
I've been working on a new module - sort of an updated version of file-layout - which incorporates XML loading among other things, temporarily called 'Themes'. The idea is pretty similar - load properties, objects and their properties into a squirrel table ( Theme ). Then a ThemeParser is written to parse and create the layout. For example, XML conversion looks something like this:
<layout>
<include type="script">myscript.nut</include>
<include type="module">animate</include>
<ambient_sound file_name="arcade.mp3" />
<shader name="my_shader">
<param name="sparam1" f1="1.0" />
</shader>
<text x="0" y="0" width="100" height="100" />
</layout>
which converts to the 'Theme' squirrel table:
Theme = {
//fe.layout properties
attr = {
"width" = 1280,
"height" = 720
},
//array of module names (relative to module dir) to be loaded
modules = [
"animate"
],
//array of script filenames (relative to theme path) to be run
scripts = [
"myscript.nut"
],
//table of shader properties (shaders must have an id that objects can reference)
shaders = {
"myshader" = {
children = {
"param1" = {
"name" = "sparam1",
"f1" = "1.0"
}
}
ref = [shader_ref]
}
},
//array of object properties
objects = [
{
tag = "text",
ref = [created object reference]
children = [array of child properties]
x = "0",
y = "0",
width = "100",
height = "100"
}
],
//array of sound properties
sounds = [
{
"file_name" = "select.wav",
"when" = "[Transition.ToNewSelection]"
}
]
}
Currently I can load modules, scripts, shaders, standard AM objects in XML - in addition to supporting <animate/> tags for each object, and custom objects like <rect /> and <scrollingtext />.
The XML is expandable to other modules or scripts, which is how animate and custom objects have tags.
Still a WIP, but if you have thoughts or suggestions, let me know.
Here's example XML and the output:
<layout width="1280" height="720" page_size="10">
<include type="module">animate</include>
<include type="module">objects</include>
<include type="script">script.nut</include>
<ambient_sound file_name="sounds/arcade1.mp3" />
<shader id="crt_lottes" type="[Shader.VertexAndFragment]" file1="shaders/CRT-lottes.vert" file2="shaders/CRT-lottes_rgb32_dir.frag">
<param name="aperature_type" f1="2.0" />
<param name="aspect" f1="1.0" f2="0.9" />
<param name="R" f1="4.0" />
<param name="cornersize" f1="0.038" />
<param name="cornersmooth" f1="400.0" />
<param name="hardScan" f1="-10.0" />
<param name="hardPix" f1="-2.3" />
<param name="maskDark" f1="0.4" />
<param name="maskLight" f1="1.3" />
<param name="saturation" f1="1.25" />
<param name="tint" f1="0.1" />
<param name="blackClip" f1="0.08" />
<param name="brightMult" f1="1.25" />
<param name="color_texture_sz" f1="640" f2="480" />
<param name="color_texture_pow2_sz" f1="640" f2="480" />
<texture_param name="mpass_texture" />
</shader>
<sound file_name="sounds\highlight.wav" when="[Transition.ToNewSelection]" />
<artwork x="0" y="0" width="1280" height="720" file_name="bg" preserve_aspect_ratio="true">
<animate type="PropertyAnimation" when="[Transition.StartLayout]" property="alpha" start="0" end="255" time="3000" />
<animate type="PropertyAnimation" when="[Transition.FromOldSelection]" property="alpha" start="0" end="255" time="3000" />
</artwork>
<artwork x="486" y="0" width="769" height="625" file_name="snap" preserve_aspect_ratio="true" shader="crt_lottes">
<animate type="PropertyAnimation" when="[Transition.ToNewSelection]" property="alpha" start="0" end="255" time="500" delay="300" tween="Tween.Quad" reset="true" />
</artwork>
<artwork x="1030" y="360" width="200" height="275" file_name="box" preserve_aspect_ratio="false">
<animate type="PropertyAnimation" when="[Transition.FromOldSelection]" property="x" start="1350" end="1030" delay="50" time="1250" tween="Tween.Back" />
</artwork>
<artwork x="486" y="515" width="769" height="150" file_name="wheel" preserve_aspect_ratio="true">
<animate type="PropertyAnimation" when="[Transition.FromOldSelection]" property="y" start="720" end="515" time="1000" tween="Tween.Back" reset="true" />
</artwork>
<image x="900" y="25" width="275" height="75" file_name="images/system/[Info.Emulator].png" preserve_aspect_ratio="true">
<animate type="PropertyAnimation" when="[Transition.ToNewList]" property="y" start="-150" end="-150" reset="true" />
<animate type="PropertyAnimation" when="[Transition.ToNewList]" property="y" start="-150" end="25" delay="1000" time="1000" tween="Tween.Back" reset="true" />
</image>
<image x="50" y="565" width="320" height="100" file_name="images/manufacturer/[Info.Manufacturer].png" preserve_aspect_ratio="true">
<animate type="PropertyAnimation" when="[Transition.ToNewSelection]" property="alpha" start="0" end="255" time="2000" reset="true" />
</image>
<scrollingtext x="0" y="675" width="1280" height="30" scroll_type="0" red="200" blue="200" green="200" msg="[Year] ©[Manufacturer] [Category]" />
<text x="575" y="675" width="670" height="30" red="200" blue="200" green="200" msg="[Info.Status]" />
<rect id="list_rect" x="25" y="25" width="436" height="625" red="125" border="5" border_red="200" />
<listbox x="31" y="25" width="426" height="600" selbg_red="200" charsize="16" />
<image x="50" y="565" width="350" height="150" rotation="-10" file_name="logo.png" preserve_aspect_ratio="true">
<animate type="PropertyAnimation" when="[Transition.StartLayout]" property="y" start="720" end="565" time="1000" tween="Tween.Bounce" />
</image>
</layout>
(http://i.imgur.com/GZWyLDK.png)
-
Hi liquid8d, I raided your github repository just the other day and added the file-format, file-layout, scrolling text and new animate modules to Attract-Mode, so they'll be included by default from now on. Just let me know if you want to change anything with what is included... Great work! Thanks
-
Excellent! Still a ways to go before I up the changes for file-layout, but I'll let you know... when it's ready it will have a new utils module (some useful functions), a new objects module (similar to my extendedobjects, that one will be deprecated) and hopefully some updates to animate to allow them to all work together happily.
I'm now working on xml includes so you can create reusable xml 'views' that can be included in the layout.