Animation cause LAG

[jack1104]

Hi, there

I'm trying to make a FrameWindow with Fade in/out effect.
I use Animation System on my FrameWindow to implement Fading effect. I reference the article step by step form this link: http://www.cegui.org.uk/wiki/index.php/Animation_System

The fading effect is work, but it cause my game LAG

This is my code(I do it in Lua script):

Code: Select all

gAnimeManager = CEGUI.AnimationManager:getSingleton();
gAnime = gAnimeManager:createAnimation("Testing");
gAnime:setDuration(1);
gAnime:setReplayMode(CEGUI.Animation.RM_Once);
...
gAffector1 = gAnime:createAffector("Alpha", "float");

gAffector1:createKeyFrame(0.0, "0.1", CEGUI.KeyFrame.P_Linear );
gAffector1:createKeyFrame(0.1, "0.2", CEGUI.KeyFrame.P_Linear );
gAffector1:createKeyFrame(0.2, "0.3", CEGUI.KeyFrame.P_Linear );
gAffector1:createKeyFrame(0.3, "0.3", CEGUI.KeyFrame.P_Linear );
gAffector1:createKeyFrame(0.4, "0.4", CEGUI.KeyFrame.P_Linear );
gAffector1:createKeyFrame(0.5, "0.5", CEGUI.KeyFrame.P_Linear );
gAffector1:createKeyFrame(0.6, "0.6", CEGUI.KeyFrame.P_Linear );
gAffector1:createKeyFrame(0.7, "0.7", CEGUI.KeyFrame.P_Linear );
gAffector1:createKeyFrame(0.8, "0.8", CEGUI.KeyFrame.P_Linear );
gAffector1:createKeyFrame(0.9, "0.9", CEGUI.KeyFrame.P_Linear );

gInstance = gAnimeManager:instantiateAnimation(gAnime);
gInstance:setTargetWindow(myFrameWindow1);

--In my other some where function--
gInstance:start();


This is my FrameWindow in .looknfeel:

Code: Select all

    <WidgetLook name="game1/FrameWindow2">
        <PropertyLinkDefinition name="CaptionColour" widget="__auto_titlebar__" targetProperty="CaptionColour" initialValue="FF000000" />
        <PropertyLinkDefinition name="TitlebarFont" widget="__auto_titlebar__" targetProperty="Font" />
        <Property name="NSSizingCursorImage" value="set:game1 image:MouseNoSoCursor" />
        <Property name="EWSizingCursorImage" value="set:game1 image:MouseEsWeCursor" />
        <Property name="NWSESizingCursorImage" value="set:game1 image:MouseNwSeCursor" />
        <Property name="NESWSizingCursorImage" value="set:game1 image:MouseNeSwCursor" />
        <Property name="UnifiedMinSize" value="{{0.1,0},{0.1,0}}" />
        <Property name="AutoRenderingSurface" value="True" />
        <NamedArea name="ClientWithTitleWithFrame">
            <Area>
                <Dim type="LeftEdge">
                    <ImageDim imageset="game1" image="WindowLeftEdge" dimension="Width" />
                </Dim>
                <Dim type="TopEdge">
                    <WidgetDim widget="__auto_titlebar__" dimension="BottomEdge" />
                </Dim>
                <Dim type="RightEdge">
                    <UnifiedDim scale="1" type="RightEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="game1" image="WindowRightEdge" dimension="Width" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="BottomEdge">
                    <UnifiedDim scale="1" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="game1" image="WindowBottomEdge" dimension="Height" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="ClientWithTitleNoFrame">
            <Area>
                <Dim type="LeftEdge">
                    <AbsoluteDim value="0" />
                </Dim>
                <Dim type="TopEdge">
                    <WidgetDim widget="__auto_titlebar__" dimension="BottomEdge" />
                </Dim>
                <Dim type="RightEdge">
                    <UnifiedDim scale="1" type="RightEdge" />
                </Dim>
                <Dim type="BottomEdge">
                    <UnifiedDim scale="1" type="BottomEdge" />
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="ClientNoTitleWithFrame">
            <Area>
                <Dim type="LeftEdge">
                    <ImageDim imageset="game1" image="WindowLeftEdge" dimension="Width" />
                </Dim>
                <Dim type="TopEdge">
                    <ImageDim imageset="game1" image="WindowTopEdge" dimension="Height" />
                </Dim>
                <Dim type="RightEdge">
                    <UnifiedDim scale="1" type="RightEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="game1" image="WindowRightEdge" dimension="Width" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="BottomEdge">
                    <UnifiedDim scale="1" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="game1" image="WindowBottomEdge" dimension="Height" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="ClientNoTitleNoFrame">
            <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>
        </NamedArea>
        <Child type="game1/Titlebar" nameSuffix="__auto_titlebar__">
            <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="Height">
                    <FontDim widget="__auto_titlebar__" type="LineSpacing">
                        <DimOperator op="Multiply">
                            <AbsoluteDim value="1.5" />
                        </DimOperator>
                    </FontDim>
                </Dim>
            </Area>
            <Property name="AlwaysOnTop" value="False" />
        </Child>
        <Child type="game1/SystemButton" nameSuffix="__auto_closebutton__">
            <Area>
                <Dim type="LeftEdge">
                    <UnifiedDim scale="1" type="LeftEdge">
                        <DimOperator op="Subtract">
                            <AbsoluteDim value="0.5">
                                <DimOperator op="Multiply">
                                    <ImageDim imageset="game1" image="CloseButtonNormal" dimension="Width">
                                        <DimOperator op="Add">
                                            <WidgetDim widget="__auto_titlebar__" dimension="Height" />
                                        </DimOperator>
                                    </ImageDim>
                                </DimOperator>
                            </AbsoluteDim>
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="TopEdge">
                    <WidgetDim widget="__auto_titlebar__" dimension="Height">
                        <DimOperator op="Subtract">
                            <AbsoluteDim value="0.5">
                                <DimOperator op="Multiply">
                                    <WidgetDim widget="__auto_titlebar__" dimension="Height">
                                        <DimOperator op="Add">
                                            <ImageDim imageset="game1" image="CloseButtonNormal" dimension="Height" />
                                        </DimOperator>
                                    </WidgetDim>
                                </DimOperator>
                            </AbsoluteDim>
                        </DimOperator>
                    </WidgetDim>
                </Dim>
                <Dim type="Width">
                    <ImageDim imageset="game1" image="CloseButtonNormal" dimension="Width" />
                </Dim>
                <Dim type="Height">
                    <ImageDim imageset="game1" image="CloseButtonNormal" dimension="Height" />
                </Dim>
            </Area>
            <Property name="AlwaysOnTop" value="True" />
            <Property name="NormalImage" value="set:game1 image:CloseButtonNormal" />
            <Property name="HoverImage" value="set:game1 image:CloseButtonHover" />
            <Property name="PushedImage" value="set:game1 image:CloseButtonPushed" />
        </Child>
        <ImagerySection name="withtitle_frame">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="TopEdge">
                        <WidgetDim widget="__auto_titlebar__" dimension="Height" />
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" type="RightEdge" />
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" type="BottomEdge" />
                    </Dim>
                </Area>
                <Image type="BottomLeftCorner" imageset="game1" image="WindowBottomLeft" />
                <Image type="BottomRightCorner" imageset="game1" image="WindowBottomRight" />
                <Image type="LeftEdge" imageset="game1" image="WindowLeftEdge" />
                <Image type="RightEdge" imageset="game1" image="WindowRightEdge" />
                <Image type="BottomEdge" imageset="game1" image="WindowBottomEdge" />
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="notitle_frame">
            <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="game1" image="WindowTopLeft" />
                <Image type="TopRightCorner" imageset="game1" image="WindowTopRight" />
                <Image type="BottomLeftCorner" imageset="game1" image="WindowBottomLeft" />
                <Image type="BottomRightCorner" imageset="game1" image="WindowBottomRight" />
                <Image type="LeftEdge" imageset="game1" image="WindowLeftEdge" />
                <Image type="TopEdge" imageset="game1" image="WindowTopEdge" />
                <Image type="RightEdge" imageset="game1" image="WindowRightEdge" />
                <Image type="BottomEdge" imageset="game1" image="WindowBottomEdge" />
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="withtitle_withframe_client_area">
            <Colours topLeft="FFDFDFF5" topRight="FFDFEFF5" bottomLeft="FFF4F3F5" bottomRight="FFF0F0F5" />
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <ImageDim imageset="game1" image="WindowLeftEdge" dimension="Width" />
                    </Dim>
                    <Dim type="TopEdge">
                        <WidgetDim widget="__auto_titlebar__" dimension="Height" />
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" type="RightEdge">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="game1" image="WindowRightEdge" dimension="Width" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" type="BottomEdge">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="game1" image="WindowBottomEdge" dimension="Height" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                </Area>
                <Image imageset="game1" image="Background" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="notitle_withframe_client_area">
            <Colours topLeft="FFDFDFF5" topRight="FFDFEFF5" bottomLeft="FFF4F3F5" bottomRight="FFF0F0F5" />
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <ImageDim imageset="game1" image="WindowLeftEdge" dimension="Width" />
                    </Dim>
                    <Dim type="TopEdge">
                        <ImageDim imageset="game1" image="WindowTopEdge" dimension="Height" />
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" type="RightEdge">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="game1" image="WindowRightEdge" dimension="Width" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" type="BottomEdge">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="game1" image="WindowBottomEdge" dimension="Height" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                </Area>
                <Image imageset="game1" image="Background" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="withtitle_noframe_client_area">
            <Colours topLeft="FFDFDFF5" topRight="FFDFEFF5" bottomLeft="FFF4F3F5" bottomRight="FFF0F0F5" />
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="TopEdge">
                        <WidgetDim widget="__auto_titlebar__" dimension="Height" />
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" type="RightEdge" />
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" type="BottomEdge" />
                    </Dim>
                </Area>
                <Image imageset="game1" image="Background" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="notitle_noframe_client_area">
            <Colours topLeft="FFDFDFF5" topRight="FFDFEFF5" bottomLeft="FFF4F3F5" bottomRight="FFF0F0F5" />
            <ImageryComponent>
                <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 imageset="game1" image="Background" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>
       
        <!--Test Animation start-->>       
        <AnimationDefinition name="Testing" duration="0.3" replayMode="once">
            <Affector property="Alpha" interpolator="float">
                  <KeyFrame position="0.0" value="1.0" />
                  <KeyFrame position="0.3" value="0.5" />
            </Affector>
           
            <Affector property="YRotation" interpolator="float">
                  <KeyFrame position="0.0" value="0" />
                  <KeyFrame position="0.3" value="10" />
            </Affector>
        </AnimationDefinition>       
        <!--Test Animation end-->>
       
        <StateImagery name="ActiveWithTitleWithFrame">
            <Layer>
                <Section section="withtitle_frame">
                    <Colours topLeft="FFA7C7FF" topRight="FFA7C7FF" bottomLeft="FFA7C7FF" bottomRight="FFA7C7FF" />
                </Section>
                <Section section="withtitle_withframe_client_area" />
            </Layer>
        </StateImagery>
        <StateImagery name="InactiveWithTitleWithFrame">
            <Layer>
                <Section section="withtitle_frame">
                    <Colours topLeft="FFEFEFEF" topRight="FFEFEFEF" bottomLeft="FFEFEFEF" bottomRight="FFEFEFEF" />
                </Section>
                <Section section="withtitle_withframe_client_area" />
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledWithTitleWithFrame">
            <Layer>
                <Section section="withtitle_frame">
                    <Colours topLeft="FFEFEFEF" topRight="FFEFEFEF" bottomLeft="FFEFEFEF" bottomRight="FFEFEFEF" />
                </Section>
                <Section section="withtitle_withframe_client_area" />
            </Layer>
        </StateImagery>
        <StateImagery name="ActiveWithTitleNoFrame">
            <Layer>
                <Section section="withtitle_noframe_client_area" />
            </Layer>
        </StateImagery>
        <StateImagery name="InactiveWithTitleNoFrame">
            <Layer>
                <Section section="withtitle_noframe_client_area" />
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledWithTitleNoFrame">
            <Layer>
                <Section section="withtitle_noframe_client_area" />
            </Layer>
        </StateImagery>
        <StateImagery name="ActiveNoTitleWithFrame">
            <Layer>
                <Section section="notitle_frame">
                    <Colours topLeft="FFA7C7FF" topRight="FFA7C7FF" bottomLeft="FFA7C7FF" bottomRight="FFA7C7FF" />
                </Section>
                <Section section="notitle_withframe_client_area" />
            </Layer>
        </StateImagery>
        <StateImagery name="InactiveNoTitleWithFrame">
            <Layer>
                <Section section="notitle_frame">
                    <Colours topLeft="FFEFEFEF" topRight="FFEFEFEF" bottomLeft="FFEFEFEF" bottomRight="FFEFEFEF" />
                </Section>
                <Section section="notitle_withframe_client_area" />
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledNoTitleWithFrame">
            <Layer>
                <Section section="notitle_frame">
                    <Colours topLeft="FFEFEFEF" topRight="FFEFEFEF" bottomLeft="FFEFEFEF" bottomRight="FFEFEFEF" />
                </Section>
                <Section section="notitle_withframe_client_area" />
            </Layer>
        </StateImagery>
        <StateImagery name="ActiveNoTitleNoFrame">
            <Layer>
                <Section section="notitle_noframe_client_area" />
            </Layer>
        </StateImagery>
        <StateImagery name="InactiveNoTitleNoFrame">
            <Layer>
                <Section section="notitle_noframe_client_area" />
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledNoTitleNoFrame">
            <Layer>
                <Section section="notitle_noframe_client_area" />
            </Layer>
        </StateImagery>
    </WidgetLook>


What's the problem about my code? Why it cause LAG?

Can you give me some suggestion?

[jack1104]

Now I'm trying use Animation System to make a ".gif like" animation, an icon with change it's image all the time.

I try the sample code:

Code: Select all

<AnimationDefinition name="Testing" duration="0.3" replayMode="once">
              <Affector property="Image" interpolator="String">
                   <KeyFrame position="0.1" value="set:guangbiao image:NewImage1" />
                   <KeyFrame position="0.2" progression="discrete" value="set:guangbiao image:NewImage2" />
                   <KeyFrame position="0.3" progression="discrete" value="set:guangbiao image:NewImage3" />
                </Affector>
...
...
<Subscription event="MouseEntersArea" action="Start" />
...


But I got an error at CEGUIPropertySet.cpp line 124:

Code: Select all

CEGUI_THROW(UnknownObjectException("There is no Property named '" + name + "' available in the set."));


The Affector property "Alpha"、"UnifiedHeight"...can work pretty, but why "Image" can't work?

Does any one know what happened?

[CrazyEddie]

I'm not sure about the lag, but the way you've set that fade up in the lua code snippet is horrible. You need to consider what key frames and interpolation can do for you; in this case you only need set the first and last key frames, CEGUI will fill in the gaps (and indeed, is the whole point ).

Also note that you can put animations in code / script and XML, but rarely would you do both. Or to put it another way, if you have your animations specified as part of the WidgetLook in the looknfeel, you do not need to add any supporting code - it all works automatically (and similarly, if you're creating the animation in code, you do not need supporting XML). Of course there will be scenarios where you might desire to have animations specified in XML and code, but I don't think what you're doing qualifies. This said, I have no real idea what you're doing, so this is my reply If, once you've cleaned it up, you still get lag, come back with what you have and we'll have another look.

For the animated image thing. Please post either the CEGUI.log or the actual message from the exception. Posting the code from CEGUI is extremely unhelpful - I know what that says, I wrote it! But seriously, in doing what you've done, you've essentially removed the only useful piece of information the message contains, i.e the name of the property it failed to find.

CE.

[jack1104]

Thanks CE.

Now I know Animation can do in looknfeel or my code, either.
And Affector property "image" can't work problem is solved, because i need a correspond property name.

The performance problem still exist.
I setup an animation instance in my code, and I set only two keyframe as you said, start and end, but it still LAG.

This is a 'fading' animation.

Code: Select all

...get Animation Manager and create an animation...
...
local affector = anime:createAffector("Alpha", "float");
affector:createKeyFrame(0.0, fStartAlpha, CEGUI.KeyFrame.P_Linear );
affector:createKeyFrame(fDuringTime, fEndAlpha, CEGUI.KeyFrame.P_Linear );
local instance = animeMgr:instantiateAnimation(anime);
...
...set instance target and play it other some where...
...
instance.setTargetWindow(xxxWnd);
instance.start();
...


When my Fading animation is playing, it decrease 10~20 FPS, the performance is horrible.

Can you give me some suggestion, again ?

[Kulik]

This is really odd, could you profile it to see where the bottleneck is? From what you have written I have no idea what the problem might be. I have implemented the system and in my testing the performance hit is negligible. You may be causing a huge redraw though. But without further info I can't say that for sure. Either way 20 FPS is very low, should be easy to spot where the bottleneck is.