How to make a GIF work in reverse from point where it ended

cBrookscBrooks Member, PRO Posts: 40

Hi all,

I've come across a little problem. I have a 47 frame gif of a loading wheel from 0% to 100%, and I have a rule where; in the Play Actor, if touch is pressed, animate (without looping). This is so the player doesn't accidentally click the play button, but rather, they will have to hold it down for 2 seconds for the game to begin. Now, this is easy enough to do without the gif playing, or even, if the actor is released the gif goes back to the first frame, but HOW do I make it so that, say, the actor is released 3/4 of the way through the GIF's animation, the GIF will record where it stopped and work in reverse to frame 1?

If you need further clarification, please ask.

Thanks!

Comments

  • SocksSocks London, UK.Member Posts: 12,822

    Hold on let me make you a quick demo . . .

  • SocksSocks London, UK.Member Posts: 12,822
    edited September 2016

    Demo attached . . .

  • SocksSocks London, UK.Member Posts: 12,822
    edited September 2016

    A quick explanation.

    This sort of thing is much easier to do if you ignore the Animate behaviour and Constrain the image to a changing value.

    (by the way - your 47 frame animation over 2 seconds is 23.5fps, which doesn't divide by 60, so the playback would not be perfectly even).

    I have made a little controller actor that rotates (in the game this would be hidden/offscreen/invisible), this controls the frame rate and direction of the animation. Pressing the main actor (which contains the animation) switches an attribute - in the controller actor - on and off, this attribute tells the controller actor to rotate in a CCW direction when it is on (up to and not beyond your maximum frame number) and then tells the controller actor to rotate in a CW direction (down to and not beyond your minimum frame number) when it is off.

    The rotation of the controller actor defines the frame of your animation, so if the controller actor is at 19 degrees your animation will be on frame 19.

    The range of the animation frames (the maximum and minimum frame number) is controlled by the two conditions in the controller actor's rule (29 and 0), so if your animation frames went from Name_1 to Name_55 you would change these values to (55 and 1).

    The speed of the animation is controlled by the rate at which the Constrain behaviours in the controller actor changes each code cycle, at the moment they are set to +1 & -1 . . . . GameSalad's code cycles at 60fps, therefore the framerate of your animation is 60fps, if you wanted your animation to play at 30fps, you would simply change these values to +0.5 . . . or choose any other value you want.

    Note: when using this method always try to keep the 'controller' actor below the main actor in the layers.

  • cBrookscBrooks Member, PRO Posts: 40

    @Socks said:
    An quick explanation.

    This sort of thing is much easier to do if you ignore the Animate behaviour and Constrain the image to a changing value.

    (by the way - your 47 frame animation over 2 seconds is 23.5fps, which doesn't divide by 60, so the playback would not be perfectly even).

    I have made a little controller actor that rotates (in the game this would be hidden/offscreen/invisible), this controls the frame rate and direction of the animation. Pressing the main actor (which contains the animation) switches an attribute - in the controller actor - on and off, this attribute tells the controller actor to rotate in a CCW direction when it is on (up to and not beyond your maximum frame number) and then tells the controller actor to rotate in a CW direction (down to and not beyond your minimum frame number) when it is off.

    The range of the animation frames is controlled by the two conditions in the controller actor's rule (29 and 0).

    The speed of the animation is controlled by the rate at which the Constrain behaviours in the controller actor changes each code cycle, at the moment they are set to +1 & -1 . . . . GameSalad's code cycles at 60fps, therefore the framerate of your animation is 60fps, if you wanted your animation to play at 30fps, you would simply change these values to +0.5 . . . and choose any other value you want.

    Note: when using this method always try to keep the 'controller' actor below the main actor in the layers.

    Thanks so much for the quick reply and demo. So, how would I apply this to my case? Because it seems you are changing the rotation of the loading actor, how would I make it so it changes the frame?

  • cBrookscBrooks Member, PRO Posts: 40

    @cBrooks said:

    @Socks said:
    An quick explanation.

    This sort of thing is much easier to do if you ignore the Animate behaviour and Constrain the image to a changing value.

    (by the way - your 47 frame animation over 2 seconds is 23.5fps, which doesn't divide by 60, so the playback would not be perfectly even).

    I have made a little controller actor that rotates (in the game this would be hidden/offscreen/invisible), this controls the frame rate and direction of the animation. Pressing the main actor (which contains the animation) switches an attribute - in the controller actor - on and off, this attribute tells the controller actor to rotate in a CCW direction when it is on (up to and not beyond your maximum frame number) and then tells the controller actor to rotate in a CW direction (down to and not beyond your minimum frame number) when it is off.

    The range of the animation frames is controlled by the two conditions in the controller actor's rule (29 and 0).

    The speed of the animation is controlled by the rate at which the Constrain behaviours in the controller actor changes each code cycle, at the moment they are set to +1 & -1 . . . . GameSalad's code cycles at 60fps, therefore the framerate of your animation is 60fps, if you wanted your animation to play at 30fps, you would simply change these values to +0.5 . . . and choose any other value you want.

    Note: when using this method always try to keep the 'controller' actor below the main actor in the layers.

    Thanks so much for the quick reply and demo. So, how would I apply this to my case? Because it seems you are changing the rotation of the loading actor, how would I make it so it changes the frame?

    Agh, hold on a minute. I didn't see all that was in the demo. Understand it now. Thanks so much!

  • SocksSocks London, UK.Member Posts: 12,822

    @cBrooks said:
    So, how would I apply this to my case?

    Just use the method as explained, make yourself a small controller actor and use the same method to have it control your loading animation.

    @cBrooks said:
    Because it seems you are changing the rotation of the loading actor, how would I make it so it changes the frame?

    There are two actors . . .

    One is the controller actor - in your actual project this would be invisible or hidden, you wouldn't see it, I left it visible to help you understand the method being used - this actor rotates under specific circumstances and in a specific way.

    The second actor would be your loading animation actor, it would not rotate (nor is it rotating in the demo above), it simply extracts its current frame value from the rotation of the controller actor.

Sign In or Register to comment.