Results 1 to 4 of 4

Thread: sprite sequencer/rollover

  1. #1
    Join Date
    Oct 2011
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default sprite sequencer/rollover

    hi all,

    i am working on something that i am using sprite sequencer and sprite rollover scripts for.
    at the moment it plays the sprite animation just fine - but what i want to do is to play the sprites as a loop not just from the first frame to the last - so it looks like a constant movement...
    ideally the rollover would trigger the sprite sequence to play and loop until the mouse moves out of the area - and then the sprites would carry on until a specific frame (either first or last of the sprite sheet)...

    how do i declare this in the following code?

    PHP Code:
    <script type="text/javascript" charset="utf-8">
        
        $(
    document).ready(function() {

          $(
    '#sprite').spriteSequencer({
            
    spriteSheet"sprite_sheet.png",
            
    columns30,
            
    totalFrames30,
            
            
    fps30,
            
    width500,
            
    height281,
            
    onTickcurrentFrame
          
    })

          $(
    '#play').click(function() {
            $(
    '#sprite').spriteSequencer('loop')
          });

          $(
    '#pause').click(function() {
            $(
    '#sprite').spriteSequencer('pause')
          });

          $(
    '#gotostop').click(function() {
            $(
    '#sprite').spriteSequencer('gotoAndStop', {frame20})
          });

          $(
    '#gotoplay').click(function() {
            $(
    '#sprite').spriteSequencer('gotoAndPlay', {frame10})
          });

          $(
    '#playto').click(function() {
            $(
    '#sprite').spriteSequencer('playTo', {frame5})
          });
          
        });
        
        function 
    currentFrame (frame) {
          $(
    '#current-frame').html("Current frame: "frame)
        }
      
      
    </script> 
    any ideas? hope that i'm not being too vague - but the code above is basically the thing that drives it all...

    here's hoping!
    ;-)

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I've never heard of sprite sequencer or rollover, but I surmise from the syntax they're jQuery plugins?

    To be honest, there isnt much that anyone can help you with from the information you've supplied; being able to help would hinge on a knowledge of the plugin(s), and their syntax/inits/parameters/callbacks, etc.

    I think you would be better off seeking help from the plugin(s) developer or possibly the jQuery community. If you'd like to continue to pursue help here, you should provide links to the plugin(s) source pages, demos and documentation. Maybe somebody will digest them for you and help you work through it.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,385
    Thanks
    1
    Thanked 244 Times in 239 Posts

    Default


    ....and a glimpse of your "sprite_sheet.png" image might prove enlightening and helpful.

    coothead
    ~ the original bald headed old fart ~

  4. #4
    Join Date
    Apr 2006
    Posts
    205
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Cool

    Hi wwfc,

    Without knowing what spriteSequencer does and working off assumptions this is a bit of a shot in the dark:

    Code:
        $(document).ready(function() {
    
          $('#sprite').spriteSequencer({
            spriteSheet: "sprite_sheet.png",
            columns: 30,
            totalFrames: 30,
            
            fps: 30,
            width: 500,
            height: 281,
            onTick: currentFrame
          });
    
          // Bind mouse enter
          $('#sprite').mouseenter(function(){
            $('#sprite').spriteSequencer('gotoAndPlay', {frame: 1});
          });
    
          // Bind mouse exit
          $('#sprite').mouseleave(function(){
            $('#sprite').spriteSequencer('gotoAndStop', {frame: 1});
          });
    
          $('#play').click(function() {
            $('#sprite').spriteSequencer('loop'); // Does 'loop' work?
          });
    
          $('#pause').click(function() {
            $('#sprite').spriteSequencer('pause');
          });
    
          $('#gotostop').click(function() {
            $('#sprite').spriteSequencer('gotoAndStop', {frame: 20});
          });
    
          $('#gotoplay').click(function() {
            $('#sprite').spriteSequencer('gotoAndPlay', {frame: 10});
          });
    
          $('#playto').click(function() {
            $('#sprite').spriteSequencer('playTo', {frame: 5});
          });
          
        });
        
        function currentFrame (frame) {
          $('#current-frame').html("Current frame: "+ frame);
    
          // Loop
          if(frame === totalFrames) {
            if()
            $('#sprite').spriteSequencer('gotoAndPlay', {frame: 1});
          }
        };
    I'm assuming the 'loop' behaviour triggered by the clicking #play isn't working for you, it that right? Anyway, I've suggested putting a check in the currentFrame method to check if the current frame is equal to the total frames. However, I don't know if totalFrame is available to that method and it needs to be. If you know there are always 30 frames then you could hardcode frame === 30 and do away with the totalFrames variable there.

    I've also suggested how you'd bind the mouseenter and mouseleave events. But as I said before this is under the assumption that those methods are working. Are your supposed "play", "pause", "gotoplay" and "gotostop" buttons working?

    If my suggestion doesn't help, I think you'll need to provide more info about spriteSequencer and perhaps show the HTML on the page - in case you have any bugs there.

    Cheers!
    Last edited by dog; 09-04-2015 at 10:15 PM. Reason: subscribing to topic

Similar Threads

  1. How are sprite images used
    By ajfmrf in forum Graphics
    Replies: 5
    Last Post: 01-13-2013, 06:43 AM
  2. Sprite Image
    By oye in forum CSS
    Replies: 2
    Last Post: 12-17-2009, 06:54 AM
  3. Stubborn Sprite Stacking
    By imanbushara in forum CSS
    Replies: 0
    Last Post: 05-11-2009, 04:08 PM
  4. CSS sprite help
    By lanta99 in forum CSS
    Replies: 1
    Last Post: 04-17-2009, 12:04 AM
  5. An (almost functional) javascript sequencer
    By Falkon303 in forum JavaScript
    Replies: 0
    Last Post: 03-16-2009, 06:19 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •