Progress update for my modules

[liquid8d]

Just giving a status update on my modules and what I'm attempting to accomplish..

Phase 1: XML Layouts - file-layout ( 75% )
My current WIP is a good bit better than what's included with AM right now, but not quite ready for primetime. It allows you to create layouts with XML, use included XML files, and include standard as well as custom objects, and add animations to the objects. Lots of bug fixes to work on, but getting there. I've put loading other themes on the backburner, but will revisit it at some point. The updated version should make it a little easier to do this, but the focus right now is AM XML.

Note you will still be able to include and interact with scripts, but the idea is to get the UI creation in XML, and handle everything else in the script.

Sample XML:

Code: [Select]

<layout width="1280" height="720">
    <include type="script">script.nut</include>
    <animation>
        <states>
            <state id="show" alpha="255" />
            <state id="hide" alpha="0" />
        </states>
        <macros>
            <macro id="move" from="offscreen" to="primary" />
        </macros>
    </animation>
    <image id="bg" file_name="AttractMode\test\lines.png" x="0" y="0" width="1280" height="720" red="255" />
    <view id="list" x="25" y="50" width="436" height="625">
        <!--
        <animate id="slide_in" type="PropertyAnimation" delay="2s" duration="3s" triggers="[Transition.StartLayout]">
            <from x="-500" alpha="100" />
            <to x="25" alpha="255" />
        </animate>
        -->
        <rect id="list_rect" x="0" y="0" width="436" height="625" red="125" border="5" border_red="200" />
        <listbox x="5" y="10" width="426" height="600" selbg_red="200" charsize="16" />
    </view>
    <include type="xml" file_name="[SharedPath]\views\simple.xml">
        <override id="simple" x="550" y="50" index_offset="-1" bg_red="200" bg_green="0" bg_blue="0" />
        <override id="title" bg_red="200" bg_blue="0" />
    </include>
    <include id="box" type="xml" file_name="[SharedPath]\views\art_reflection.xml">
        <override id="reflection" x="475" y="372" />
    </include>
    <scrollingtext x="0" y="10" width="[fe.layout.width]" height="30" scroll_type="0" bg_red="0" bg_green="0" bg_blue="0" red="200" blue="200" green="200" msg="[Year] ©[Manufacturer]     [Category]" />
    <image id="logo" file_name="[SharedPath]/images/logo.png" x="840" y="520" width="400" height="175">
        <!--
        <animate type="PropertyAnimation" delay="1.5s" duration="5s" from="show" to="hide" triggers="[Transition.StartLayout]" />
        <animate type="PropertyAnimation" delay="1.5s" duration="5s" easing="ease-out-elastic" triggers="[Transition.StartLayout]">
            <from scale="1.0" />
            <to scale="2" />
        </animate>
        -->
    </image>
    <!--
    <grid id="grid" x="50" y="50" width="512" height="512" />
    <wheel id="wheel" x="50" y="50" width="400" height="300" />
    <overrides emulators="fceux" aspect="16x9">
        <override id="box" x="475" y="500" />
    </override>
    <include type="xml" file_name="[SharedPath]\views\simple_group.xml" />
    <image id="genre" x="890" y="480" width="200" height="100" preserve_aspect_ratio="true" file_name="[!check_category]" />
    <include type="xml" file_name="[SharedPath]\views\simple_group.xml" />
    <image id="genre" file_name="[Category].png" x="600" y="200" width="400" height="170" />
    -->
</layout>

Phase 2: Animate v2 ( 60% )
I have a redesigned version of the animate module. I'm  going to do my best to make it backwards compatible, but there's a decent amount of changes. Animations are now created with a single, chainable function - something like:

Code: [Select]

PropertyAnimation()
                .name("art_anim")
                .debug( true )
                .target( art )
                .set({ x = 0, y = 0, preserve_aspect_ratio = true })
                .triggers( [ Transition.ToNewSelection ] )
                .default_state("start")
                .from( { x = 0, y = 0 } )
                .to( { x = 100, y = 100 } )
                .duration("1s")
                .delay(0)
                .delayFrom(false)
                .speed("normal")
                .easing( Easing.OutElastic )
                .easingReverse( Easing.InElastic )
                .interpolator(CubicBezier)
                .reverse(false)
                .loops(0)
                .loopsDelay(0)
                .loopsDelayFrom(false)
                .yoyo(false)
                .on( "stop", anim_complete );
                .play();
I based a lot of it on the Tweene javascript project: http://tweene.com/html/docs/
Again, still a little buggy for public release, but it adds quite a bit more flexibility from the old animate module.

Phase 3: Objects ( 40% )

Along with XML, I want it to be easier for developers to create some reusable objects. I tried this before with ExtendedObjects but it got a little confusing. I've rethought the design and it's working pretty good with a few test objects like Rect and View. I've even started creating Controls ( Buttons, Checkboxes ) for down the roadmap. Ideally I also want a couple standard objects like Grid/Tiles and a Wheel object.

Phase 4: Switchable Views ( TBD )
Once layouts can be created with XML and custom objects, I plan on allowing you to create switchable views ( screens ), so you could say - click a game, it animates to the game info screen, click back it animates back to the game selection screen. This is somewhat implemented with XML and Objects now, but still early prototyping.

Phase 5: Shareable Content ( TBD )
With all this in place, the idea is to be able to share content within different layouts - custom objects, a part of a layout ( in xml ), shaders, animations, and more.

Off topic: Now that search ability is in the current development branch, I've got a close to working onscreen keyboard that implements it.. coming soon

Let me know what you think or if you have any suggestions!

[liquid8d]

here's just one example of updates to animate v2 - timelines:

Code: [Select]

function timeline_started( line )
{
    print("Timeline started callback!\n");
    OBJECTS.art.alpha = 255;
}

local anim1 = PropertyAnimation(OBJECTS.art).delay(300).duration("3s").from( { x = 100, y = 100 } ).to( { x = 400, y = 100 } ).easing(Easing.OutBounce);
local anim2 = PropertyAnimation(OBJECTS.art).duration("3.5s").from( { x = 400, y = 100 } ).to( { x = 400, y = 300 } ).easing(Easing.OutElastic);
local anim3 = PropertyAnimation(OBJECTS.art).duration("2s").from( { x = 400, y = 300, alpha = 255 } ).to( { x = -480, y = 300, alpha = 0 } ).easing(Easing.InSine);

local line = AnimationTimeline()
                       .triggers( [ Transition.ToNewSelection ] )
                       .add(anim1)
                       .add(anim2)
                       .add(anim3)
                       .on("start", timeline_started )
                       .play();

Notice the chained creation of the animation. A long one line chained command can be confusing - you can break it into multiple lines if you prefer. 3 animations are created (but not played, and no triggers). Then a timeline 'line' is created. We set the trigger ( previously 'when' ), add the animations, add an on event function, and play the timeline. Here's the result:

https://www.youtube.com/watch?v=hXDkyJhtD3o

[omegaman]

Liquid8d-

I like the new changes, bud. I can see you put a lot of thought and effort into this. The animations chaining is pretty straight forward just glancing over it which is what you want.  This is what I love about AM, you can be as creative as you want without being forced into a sandbox like with some of the other front-ends available out there.  Now, if we can just get some of the new comers to dig into some of this stuff a little more. OK, I'm done rubbing your belly now. How is that for appreciation?   

[omegaman]

Liquid8d-

Do you have an idea or timeline when your animate module will be completed ? The only reason why I'm asking is because it looks like these changes will affect layouts that already use the animate module. And, I hope I'm not coming off like an old nag, but I think this is like the 3rd iteration of the animate module. All these wholesale changes make it harder for AM users to implement animation in their layouts, including myself. I really appreciate everything that you've contributed to AM, especially that you do it for free . So, don't think I'm not grateful.   

[liquid8d]

NAG

I know I had some changes in the last version, but I was still sort of experimenting. This iteration shouldn't change very much in the future, I'm pretty happy with it. I also did the best at keeping it backwards compatible, so you can still construct animations the same way.

I will probably put the new version up tomorrow if you want to experiment - right now the things that aren't working yet are the custom properties 'position', 'scale', 'color', screen positioning (looking for a clean way to implement these) and evaluations in the values ( like +10 ).

[omegaman]

Yes, just to clarify, it didn't break any of my current animated layouts. But, the implementation of the particle effects for instance is somewhat different with the DIR structure etc... It's just more of an issue with sharing layouts and preventing problems from popping up.

Hey! I know just enough coding to get myself in trouble, so I really don't have the right to nag.  Peace...   

[ArcadeBliss]

This is just what the doctor ordered. I need the timeline function for the layout I am working on and have not been able to implement something similar with the animate module currently included in AMv2. Let me know if you need a tester of this module and I will use it for my WIP.

[keilmillerjr]

I agree with arcadebliss. I spent a few hours trying to time my animations and gave up as it never worked as expected. This new method of chaining events seems dead easy.

[liquid8d]

Sorry I have been away for awhile, but I am about to get some time to start working on this again! I also just got my RPI2 setup for use in my sad "arcade" setup

The timeline feature is great and creating animations feels simplified and more flexible but there were some things I had in the first version like scaling and rotation I think that I didn't have working yet.

Let me get my head wrapped up in it again, and I will push out the current version I have and you guys can tell me what works and what doesn't

[ArcadeBliss]

Will do