Fade in highlight on buttons

[06casswp]

Does cegui have support for fading in highlighting on buttons on mouseover similar to doom3 menu buttons?
for example:
http://www.youtube.com/watch?v=jpe3p8VRBvY

If not, any pointers in implementing such a feature?

[Kulik]

CEGUI definitely does have facilities for this since 0.7.2.

http://www.cegui.org.uk/wiki/index.php/Animation_System The wiki article is a bit rough, feel free to ruthlessly edit It's hard for me to document something I have written because it all feels very simple to me and I have no idea what people struggle with.

Lets say you want a fade in fade out button. So you add FadePushButton to the looknfeel and add 2 animations: FadeIn and FadeOut to the looknfeel. FadeIn will have Start auto subscription for MouseEntersArea and Pause auto subscription for MouseLeavesArea and FadeOut will be vice versa. The pause subscription is very important, otherwise you are risking 2 concurrent animations running at the same time (which is never a good thing)!

You can animate a lot more than just a fade, just play with the properties. You can even expose more properties via looknfeel and animate something very specific to your skin.

[06casswp]

Many thanks for such a quick response.

Would this be a valid animation definition for this:

Code: Select all

<Animations>

    <AnimationDefinition name="FadeOut" duration="0.5" replayMode="once">
        <Affector property="Alpha" interpolator="float">
            <KeyFrame position="0" value="1" />
            <KeyFrame position="0.5" value="0" progression="quadratic decelerating" />
        </Affector>
        <Subscription event="MouseLeavesArea" action="Start" />
   <Subscription event="MouseEntersArea" action="Pause" />
    </AnimationDefinition>

    <AnimationDefinition name="FadeIn" duration="0.2" replayMode="once">
        <Affector property="Alpha" interpolator="float">
            <KeyFrame position="0" value="0" />
            <KeyFrame position="0.2" value="1" progression="quadratic accelerating" />
        </Affector>
        <Subscription event="MouseEntersArea" action="Start" />
   <Subscription event="MouseLeavesArea" action="Pause" />
    </AnimationDefinition>

</Animations>


It came from the example.xml file in the animations folder and I edited it a little.

Should the mouse leave the button before the animation finishes, would the fade out part take the alpha value from 1 or from whatever the value had reached?
And if the mouse entered the area of the button again before fade out was done, would it take it from 0 or the value it was at previously?

thanks for your help Kulik

Just started with CEGUI, trying to get my head around it all still.

[Kulik]

Yeah the code you posted looks solid.

There are two distinct ways of doing "relative" animations. One is to read properties and use them as key frame values.

Code: Select all

<KeyFrame position="0" sourceProperty="Alpha" />


This will read the current Alpha at the start of the animation instance and use that as the value for that key frame.

The other way is doing AM_Relative or AM_RelativeMultiply as stated in the wiki article, however that won't work well in this case.

[06casswp]

I'm attempting to apply the animation to the Falagard looknfeel for TaharezLook/Button but I want the fade to use the hover imagery and replace that. I've so far put the above, though modified with your suggestion, to the bottom of the widgetlook so far but dont see how to apply it directly to that part of the button?

thanks for your help

[Kulik]

These animations don't affect any looknfeel widget parts, they simply interpolate properties. You can however define a property via falagard and use that and then affect that with the animation.

Interpolating images is not as easy as you might think. I suggest to start with fading alpha and learn how animation system works first. Learn to walk before you attempt to run

[06casswp]

iv found that using the colours tag in the framecomponent section results in changing the transparency on mouse over. And iv found that you can interpolate using the colour interpolator and iv tried setting a property and using it to animate it however on mouse over it goes straight to transparent. I know the animator is working as changing <propertydefinition to <property results in a property not found error.

heres my code:

Code: Select all

...
        <PropertyDefinition name="DisabledImage" initialValue="" redrawOnWrite="true" />
        <PropertyDefinition name="VertImageFormatting" initialValue="Stretched" redrawOnWrite="true" />
        <PropertyDefinition name="HorzImageFormatting" initialValue="Stretched" redrawOnWrite="true" />
        <PropertyDefinition name="Colour" initialValue="00FFFFFF" redrawOnWrite="true" />
      <ImagerySection name="label">
            <TextComponent>
                <Area>
...


Code: Select all

        <ImagerySection name="hover">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image type="LeftEdge" imageset="TaharezLook" image="ButtonLeftHighlight" />
                <Image type="RightEdge" imageset="TaharezLook" image="ButtonRightHighlight" />
                <Image type="Background" imageset="TaharezLook" image="ButtonMiddleHighlight" />
            <Colours topLeft="Colour" topRight="Colour" bottomLeft="Colour" bottomRight="Colour" />
            </FrameComponent>
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <ImageProperty name="HoverImage" />
                <VertFormatProperty name="VertImageFormatting" />
                <HorzFormatProperty name="HorzImageFormatting" />
            </ImageryComponent>
        </ImagerySection>

Code: Select all

    <AnimationDefinition name="FadeOut" duration="0.5" replayMode="once">
        <Affector property="Colour" interpolator="colour">
            <KeyFrame position="0" sourceProperty="Colour" />
            <KeyFrame position="0.5" value="00FFFFFF"  />
        </Affector>
        <Subscription event="MouseLeavesArea" action="Start" />
      <Subscription event="MouseEntersArea" action="Pause" />
    </AnimationDefinition>

    <AnimationDefinition name="FadeIn" duration="0.2" replayMode="once">
        <Affector property="Colour" interpolator="colour">
            <KeyFrame position="0" sourceProperty="Colour" />
            <KeyFrame position="0.2" value="FFFFFFFF" />
        </Affector>
        <Subscription event="MouseEntersArea" action="Start" />
      <Subscription event="MouseLeavesArea" action="Pause" />
    </AnimationDefinition>

many thanks again

[Kulik]

Code: Select all

<Colours topLeft="Colour" topRight="Colour" bottomLeft="Colour" bottomRight="Colour" />


I don't think this will work, there is another tag for Colour read from a property.

Code: Select all

<ColourProperty name="NormalTextColour" />


See TaharezLook for example code on this.