[BEHAVIOR] Ease transition

0 favourites
  • Simple but subtly powerful behavior for doing eased interpolation between two points. Easing means the transition is smooth when close to the endpoints. This functionality is similar to the sine behavior but additional properties, expressions and actions make it more powerful.

    Get the plugin here (ZIP)

    The naive use of the behavior is to make an object "ping-pong" between two points.

    Origin X,Origin Y

    • the "ping" point

    Destination X,Desitnation Y

    • the "pong" point

    Transition Period

    • time taken to complete the transition

    Actions:

    - Move easing into (EaseIn)

        end of transition is smoothed

    - Move easing away (EaseOut)

        beginning of transition is smoothed

    - Move easing both (EaseInOut)

        both beginning and end of transition are smoothed

    All three actions work in ping-pong fashion alternately

    from call to call (first action called will go origin-to-dest, second destination-to-origin, third origin-to-destination, and so forth).

    Call the action will no-op if a movement is already in place. The time lerp is independant of the position so changing the position should not lead to any sort of runaway object (non halting movement). The time lerp will clamp if out of bounds to the property setting if you mess with the transition period mid-movement. Do not set the transition period to exactly zero as it is sure to stop your game due to divide-by-zero (time fraction is calculated as current_elapsed/transition_period). Maybe there is a way to have the transition_period property reject any change that sets it exactly zero? I'm not quite sure how to go about it.

    Additional Actions:

    - Change origin endpoint

        Allows changing the origin endpoint at any time,

        even mid-transition.

    - Change destination endpoint

        Allows changing the destination endpoint at any time,

        even mid-transition.

    - Change transition period

        Allows changing the transition period to any nonzero value.

        Changing mid transition may cause clamping and snaps to return

        the values to the new range but it should not crash the game.

    The endpoint actions can be used to do waypoint type movements or any sort of complicated pattern of bumps, shakes, etc. of an object.

    Three conditions may be used for event to know the state of the transition:

    • Is at destination

       object is at "ping"

    • Is at origin

       object is at "pong"

    • Is in transition (invertible to mean "Is stationary")

       object is moving (or inverted: not moving)

    Expression for events:

    - IsEasing

        1 if object is moving otherwise 0

        (expression form of Is in transition)

    - GetTransition

        Returns the status of transition

        result is a float in range 0 to 1 inclusive

        0 matches IsAtOrigin condition

        1 matches IsAtDestination

        A more powerful feature is to use this expression

        to apply something other than movement to the object

        (eg: Set angle to -180*myObject.GauVeldt_Ease.GetTransition)

    Triggers:

    - On Endpoint Reached

        fires when object completes movement cycle

        Condition IsAtDestination/IsAtOrigin may be used in

        subevent or GetTransition may be used to know which

        endpoint the object is at

    - On Update Tick

        this one is subtly very powerful as it provides the ideal

        trigger upon which to add actions using GetTransition to set

        other object properties (eg: visible, angle, etc). Sure

        you could do it in System:OnEveryTick but I think this is

        cleaner in practice (a system event would need a whole bunch

        of sub events to test the location, movement status, etc)

    I think that's everything. One final possible improvement is to allow customization of the transition functions (there are three) EaseIn for the start of a transition, EaseOut for the end of a transition and EaseInOut for both. Right now the transition functions are internal but it could perhaps be modified to accept JS expressions in string properties using eval to compile to functions. That's for future consideration.

    Edit:

    PS: To do eased rotations or fades, etc., with no movement just set the origin and destination to the same point as its layout position. A TODO item is to add a movement-ignore flag for just these kinds of non-movement transitions.

    Edit 2012.02.10:

    Added Set Origin, Set Destination, and Set Period actions for changing the movement location via event sheet actions.

  • Can you provide a example capx? I cannot figure out how to use this.. I set a destination x and origin x but no movement :(

  • TODO: Add a Do-Not-Reposition boolean property to allow stacking the behavior for multiple effects with different durations. Think like Sonic where he spins up, flies across the layout map then slows down. The spin up/down can then be one behavior and the movement another but it won't work right if each Ease behavior tries to set position they'll fight with one another as each changes the object's X and Y. With this boolean any non movement Eases may be stacked with another behavior that does (eg: bullet or another ease with the Do-Not-Reposition property set False). One would be able to make swirling bullets (bullet behavior + ease that changes angle only) or blinking objects (ease that changes only translucency) with this property available.

    Edit 2012.02.03:

    TODO: Make transition properties (eg: originX, originY, destinationX, destinationY) accessible at run time either via properties (if plugins can do this) or set/get methods. Can any of the plugin veterans give me any advice on going about this?

    • Suggested by TL22
  • Can you provide a example capx? I cannot figure out how to use this.. I set a destination x and origin x but no movement :(

    Unlike bullet the movement is not automatic. It is meant to be initiated by calling one of the EaseIn, EaseOut or EaseInOut actions on the behavior.

    Adding a System->Do Every X seconds event is one way to trigger the action

    Edit:

    I'll make a capx to show that now...

  • Can you provide a example capx? I cannot figure out how to use this.. I set a destination x and origin x but no movement :(

    http://dl.dropbox.com/u/55284551/testEase.capx

    Edit 2012.01.01 15:25

    - cleaned up the capx slightly

  • This is a really cool behavior. I was getting headaches with the sine behavior trying to make just a quick bounce, and this worked perfectly!

    However it would make it much more powerful if you could change the origin and destination points and the other attributes mid-play. Are there any plans to add actions to change the attributes? Because if not, you should totally do that! <img src="smileys/smiley1.gif" border="0" align="middle" />

    Thanks again for the behavior! Just what I needed!

  • I'll add access to the origin and destination properties and period to the TODO list on this. The code can already handle the case of changing origin and destination points internally but it doesn't yet expose the properties in order to allow it at runtime via set/get methods.

  • This is a really cool behavior. I was getting headaches with the sine behavior trying to make just a quick bounce, and this worked perfectly!

    However it would make it much more powerful if you could change the origin and destination points and the other attributes mid-play. Are there any plans to add actions to change the attributes? Because if not, you should totally do that! <img src="smileys/smiley1.gif" border="0" align="middle" />

    Thanks again for the behavior! Just what I needed!

    Give this update a shot:

    dl.dropbox.com/u/55284551/GauVeldt_Ease.zip

  • <img src="smileys/smiley4.gif" border="0" align="middle" /> <img src="smileys/smiley4.gif" border="0" align="middle" /> <img src="smileys/smiley4.gif" border="0" align="middle" />

    It works beautifully!

    I used a start of layout and for each object event, and then set the origin points and destination points relative to their starting X and Y placements, and lo and behold...

    I'd post a .capx but it uses a number of extra plugins. I was playing around with a little Mario game (as I oft do to learn how to do things) and wanted to make the bump effect that occurs on a block when you jump into it. This Ease behavior does the trick so well. I'm excited to incorporate it into my real game!

    Thanks a ton again for this!

  • <img src="smileys/smiley4.gif" border="0" align="middle" /> <img src="smileys/smiley4.gif" border="0" align="middle" /> <img src="smileys/smiley4.gif" border="0" align="middle" />

    It works beautifully!

    I used a start of layout and for each object event, and then set the origin points and destination points relative to their starting X and Y placements, and lo and behold...

    I'd post a .capx but it uses a number of extra plugins. I was playing around with a little Mario game (as I oft do to learn how to do things) and wanted to make the bump effect that occurs on a block when you jump into it. This Ease behavior does the trick so well. I'm excited to incorporate it into my real game!

    Thanks a ton again for this!

    Another way is to use an numerical instance variable as a waypoint index and use comparison conditions to decide what to set the points to based on the value of the instance variable. This works really well if you make it its own event using the function plugin and call it in any actions (on the object being eased) that need to update the waypoints since it eliminates duplication and the potential to forget to update one of the duplicated events whenever the waypoints were altered during design. You can use the endpoint events to increment the counter then call the endpoint change actions prior to retriggering the movement action.

  • agreed...very simple but powerful indeed

  • agreed...very simple but powerful indeed

    I really need to add the ignore flag so the behavior can be stacked to transition things other than movement and used for transitions on other things (eg: flashing, spinning or phasing of bullets)

  • Hi GauVeldt,

    This is exactly what I need for my plugin. Thank you so much! <img src="smileys/smiley32.gif" border="0" align="middle" />

    • Rez
  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Unless already stated how would you go about creating way point movement. I only want the ping not the pong.

    Thanks,

    Rez.

  • Many thanks GauVeldt, this is a plugin I can take really use of for my TBG Project

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)