[Solved] Button animation on hover/click (from XML/Lua)

[d-Pixie]

Hi

I have a short question and if the answer is positive I'll add all the details you might need to help me with the "how". But first the "if" ...

Well the title kinda says it all ;o) I have a Ogre/CEGUI/Lua app setup with all of the UI code banished to Lua with all of the layout in XML (so, no C/C++ code ever does anything with my GUI atm, except from the CEGUI call to load the main Lua file ofc ;o)

I managed to get basic animation working fairly quickly (got caught by not reading the manual properly, injected time pulse in ms instead of sec. Animation was over before I could see it ;o) and have a, fairly, nice fade in when the main menu loads. I also get how you bind animations to transitions like switching from main menu to the options sub menu. What I can't figure out, find in forums or even be sure is possible, is if you can get a transition animation from button state normal to hover (or hover to clicked, anyway ...)?

I tried naively putting some anim. definitions in the looknfeel XML (more hoping then believing) and that did not work. Is there a way?

I know I could probably hack around it by using static images under a static text and just do the blending on my own, but that is kinda defeating the point of having a button class ;o) So, is it built in somehow? In my world it's probably one of the more obvious things you'd wanna fade, but then again it's all relative.

(I'd really like to have this feature so if it's not there yet maybe we could work on it together? Would be cool if you could just define it in the looknfeel or layout as a property...)

Cheers for now!

[Kulik]

This is one of the problems with current animation system. It can't interpolate between 2 images. Your only option is to have some bright image as the button and modulate it with ColourRect. You then animate the ColourRect value and this fades in/out the button.

If you want to interpolate between 2 images CEGUI needs some core changes I haven't yet found a way to implement this nicely unfortunately.

If you will be satisfied with this solution, I can post some examples of the modulation fade

[d-Pixie]

Hi Kulik ;o)

Thank you for your work on the animation system btw, it's a nice new step for CEGUI.

My thought was that, even if you can not animate between images, you could animate the alpha of two images on top of each other to blend the top one from alpha 0.0 to 1.0 and thus achieve a illusion of blending between the two states. However I do not know if the state images for button are stacked or simply replaced on a hover/click event? It should be possible to subclass the original button to achieve this? That is what I'd like in the end.

However, until then I'm willing to try the color mask way ;o) And, if not for me alone, others will probably find this thread in time and it could help them as well.

[Kulik]

I haven't checked about the interpolating of images (fading one out and the other one in) but if it isn't possible with current window renderer, it might be possible with a custom one.

The modulating animation example:
Section that modulates:

Code: Select all

<ImagerySection name="notitle_noframe_client_area">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="RightEdge"><UnifiedDim scale="1" type="RightEdge" /></Dim>
                    <Dim type="BottomEdge"><UnifiedDim scale="1" type="BottomEdge" /></Dim>
                </Area>
                <Image type="TopLeftCorner" imageset="Vanilla-Images" image="FrameTopLeft" />
                <Image type="TopRightCorner" imageset="Vanilla-Images" image="FrameTopRight" />
                <Image type="BottomLeftCorner" imageset="Vanilla-Images" image="FrameBottomLeft" />
                <Image type="BottomRightCorner" imageset="Vanilla-Images" image="FrameBottomRight" />
                <Image type="LeftEdge" imageset="Vanilla-Images" image="FrameLeft" />
                <Image type="TopEdge" imageset="Vanilla-Images" image="FrameTop" />
                <Image type="RightEdge" imageset="Vanilla-Images" image="FrameRight" />
                <Image type="BottomEdge" imageset="Vanilla-Images" image="FrameBottom" />
                <Image type="Background" imageset="Vanilla-Images" image="GenericBrush" />
                <ColourProperty name="AreaColour" />
            </FrameComponent>
        </ImagerySection>


Section that animates the modulation:

Code: Select all

<AnimationDefinition name="Activated" duration="0.2" replayMode="once">
           <Affector property="AreaColour" interpolator="colour">
              <KeyFrame position="0.0" value="FF333333" />
              <KeyFrame position="0.2" value="FF555555" />
           </Affector>
       
            <Subscription event="Activated" action="Start" />
      </AnimationDefinition>
      <AnimationDefinition name="Deactivated" duration="0.2" replayMode="once">
           <Affector property="AreaColour" interpolator="colour">
              <KeyFrame position="0.0" value="FF555555" />
              <KeyFrame position="0.2" value="FF333333" />
           </Affector>
       
            <Subscription event="Deactivated" action="Start" />
</AnimationDefinition>


Draft animated vanilla skin:
http://pastebin.com/uFAZh3ez (EDIT: the modulation animated section is in FrameWindow looknfeel)

[d-Pixie]

Thanks a lot Kulik. I'll try it out as soon as possible (just need to work out another problem, see separate post, first ;o) and get back to you if I have any problems (don't think so though. Seems straight forward ;o)

[d-Pixie]

Well, long time since I said I'd try it out (have a master thesis going at the same time so ...) but now I have. It works nicely ;o)

A few follow up questions on the animation. The modulation seems to be additive, is that correct? Is there any other modulations available? I'd much rather use saturation or something as mod. since it gives you some more options with your images.

Thanks for the help so far, you are great ;o)

[Kulik]

Unfortunately as of now only MOD is possible. It works exactly like this:

Code: Select all

result = textureColour * modColour

More operations would probably be better. Making rendering more featureful is planned for 0.8 so hopefully more colour ops will get there too.

[Flocke]

This is one of the problems with current animation system. It can't interpolate between 2 images. Your only option is to have some bright image as the button and modulate it with ColourRect. You then animate the ColourRect value and this fades in/out the button.

If you want to interpolate between 2 images CEGUI needs some core changes I haven't yet found a way to implement this nicely unfortunately.

If you will be satisfied with this solution, I can post some examples of the modulation fade

Hello and thanks for the examples, wanted to achive just that interpolation of normal/hover image and the only thing I added to your example is another section to the StateImagery hover layer:

Code: Select all

<StateImagery name="Hover">
   <Layer>
      <Section section="normal" />
      <Section section="hover" />
      <Section section="label">
          <ColourProperty name="HoverTextColour" />
      </Section>
   </Layer>
</StateImagery>

using the animation definition:

Code: Select all

<AnimationDefinition name="ButtonFlash" duration="2.0" replayMode="loop">
   <Affector property="AreaColour" interpolator="colour">
      <KeyFrame position="0.0" value="FFFFFFFF" />
      <KeyFrame position="1.0" value="00FFFFFF" />
      <KeyFrame position="2.0" value="FFFFFFFF" />
   </Affector>
   <Subscription event="MouseEntersArea" action="Start" />
   <Subscription event="MouseLeavesArea" action="Stop" />
</AnimationDefinition>

Edit2: only applied the AreaColour ColourProperty to the hover ImagerySection ImageryComponent of the button ofc

Btw, using bounce somehow crashed my application on activation (hovering over the button), no errors in log.

But damn, I needed a day till I realized I'd need to inject time pulses to get animations to work. Please someone update that wiki.

Some years ago I already had a look at cegui, but have to say it improved well, really like it! Even got the cursor aligned well in windowed mode using OIS (abs positioning) and Ogre3D (just used a single windows GetCursorPos/ScreenToClient call for initial positioning as beautification).
Sad Ogre3D team dropped CEGUI, but well, MinGW SDK works fine for me. As a Code::Blocks user I appreciate it's support.

Many greets here from Hamburg/Germany

Edit: now forgot to tell myself, as a noob, one thing I missed in the example was mentioning the PropertyDefinition of AreaColour at the beginning of the WidgetLook:

Code: Select all

<PropertyDefinition name="AreaColour" initialValue="FFFFFFFF" redrawOnWrite="true" />