1

I am trying to have a character on my page that uses the Spritely script to animate. The sprite sheet that I am using contains a total of 92 frames. I would like for the animation to be clickable.

When clicking it for the first time, I want it to play up to frame 70 and stop. Then, the next time you click it, I would like for the animation to play from frames 70 to 92 and stop.

How should I write the code?

So far, I'm able to get the animation to play up to frame 70 and stop. Even as a beginner web developer, this was fairly easy.

Here's what I have so far:

$('#stacheguy2').click(function() {
    $(this)
    .sprite({fps: 30, no_of_frames: 92, play_frames: 70,})

});

With this code, when you click the character, it plays frame 1-70 and stops. That's good. However, the next time you click it, it picks up from frame 70 and continues for another 70 frames. How can I change this so that the animation only plays frames 70 to 92 on the second click?

PS: I would like to eventually have the character perform a different frame sequence for each click.

If you could help me with this I would be so grateful! Thanks!

James Barracca
  • 465
  • 2
  • 6
  • 14

1 Answers1

1

I had a hard time finding a 92 image PNG file for testing so I had to make do with a shorter one. Here is a working example: http://jsfiddle.net/Yhrbb/

The code in the example is this:

(function() {
    var total = 92;
    var play_on_click = 72;
    var played = 0;

    $('#fly').click(function() {
        if (played >= total) {
            return;
        }

        var current_play;

        if (play_on_click > (total - played)) {
            current_play = total - played;
        }
        else {
            current_play = play_on_click;
        }

        played += current_play;
        $('#bird').sprite({fps: 12, no_of_frames: 3, play_frames: current_play});
    });
})();

We can adapt it to work for you like so:

​(function() {
    var total = 92;
    var play_on_click = 72;
    var played = 0;

    $('#stacheguy2').click(function() {
        if (played >= total) {
            return;
        }

        var current_play;

        if (play_on_click > (total - played)) {
            current_play = total - played;
        }
        else {
            current_play = play_on_click;
        }

        played += current_play;
        $(this).sprite({fps: 30, no_of_frames: 92, play_frames: current_play});
    });
})();

Note that once we reach the total frames we're simply ignoring additional clicks with the return on if (played >= total). You could reset played at that point or do whatever else you'd like. If this doesn't work, would you mind posting your PNG file or a similarly long one for use in the jsfiddle.

Configuring number of frames with an array

If you wanted to play a configured number of frames with each click you could do this: http://jsfiddle.net/dNYks/

(function() {
    var play_on_click = [32, 21, 10, 20];
    var play_index = 0;

    $('#fly').click(function() {
        var current_play = play_on_click[play_index];

        play_index++;
        if (play_index > play_on_click.length-1) {
            play_index = 0;
        }

        $('#bird').sprite({fps: 12, no_of_frames: 3, play_frames: current_play});
    });
})();

We can adapt this code to match your markup like so:

(function() {
    var play_on_click = [32, 21, 10, 20];
    var play_index = 0;

    $('#stacheguy2').click(function() {
        var current_play = play_on_click[play_index];

        play_index++;
        if (play_index > play_on_click.length-1) {
            play_index = 0;
        }

        $(this).sprite(fps: 30, no_of_frames: 92, play_frames: current_play});
    });
})();

​

​

Cymen
  • 14,079
  • 4
  • 52
  • 72
  • Thanks! Yes, it definitely worked. Excuse me for being new to this, but I have to ask another question. What do I need to write (and how to I need to add it into this existing code) in order to make the object clickable again? And, even more specifically, I'm looking for it to be able to do more animations, if possible, on each new click. – James Barracca Dec 06 '12 at 03:03
  • What do you want to happen when it is clicked the 3rd time (so 1st time play 72 frames, 2nd time play rest)? Do you want to just repeat the patter of 72, rest, 72, rest, 72 rest, etc? – Cymen Dec 06 '12 at 04:39
  • I would love to be able to add some more frames to my sprite sheet so that the next click would perform the next frames of my sprite sheet. For instance... first click = frames 1 - 70, second click = frames 71-92, third click = frames 93-103, etc.. – James Barracca Dec 06 '12 at 04:49
  • Okay, that is a fine degree of control but we can do it. We need to have an array of how many frames to play and for each click we'll go to the next value in the array and play that many frames. If it was always play 50 frames we wouldn't need the array. I'll link to another jsfiddle in a minute. – Cymen Dec 06 '12 at 04:53
  • Here is an example of having an array to configure how many frames to play on each click: http://jsfiddle.net/dNYks/ – Cymen Dec 06 '12 at 04:58
  • This looks like it should work just wonderfully. Once I make the rest of my animation, I'll know for sure, but I just want to thank you already for how much help you have been! – James Barracca Dec 06 '12 at 05:02
  • No problem. I've updated my answer with the code to playing a predefined number of frames configured with an array on each click. – Cymen Dec 06 '12 at 05:04
  • Thanks and that totally helped. Is it then possible to assign a directional movement for a specific click or perhaps when the animation reaches a specific frame? (i.e. When the animation reaches frame 92, which happens on the third click, the object will move 500 pixels across the screen to the right.) – James Barracca Dec 06 '12 at 06:47
  • I'd recommend posting another question. I can't answer this one at the moment. If possible, I'll look for it when I have some time and answer if nobody else has. – Cymen Dec 06 '12 at 16:38