Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help animating video game sprites, akin to flash animations

    Hello everyone! I found this article over devness: http://devness.com/2009/06/playing-w...animated-menu/

    It is fantastic, but I'm a complete n00b and I was wondering what the JavaScript would look like if the situation was a little different.

    Picture this:

    A Super Mario sprite with him standing normally, but to his right is the word "Home".

    Upon roll over of either the sprite itself or the text, mario does one of his trademark jumps by the way of a few sprites.

    I know how to do this in flash, but I would like to eliminate it so I have maximum compatibility and no external plugins required.


    Anyone have any ideas or suggestions?

    Any help is greatly appreciated!!

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Link is broken.
    And I think this can be accomplished without javascript. CSS should be enough to do it, provided you have the sprites set up correctly.

    Code:
    #home {
       background-image: url(mariostanding.gif);
    }
    #home:hover {
       background-image: url(mariojumping.gif);
    }
    Last edited by qwertyuiop; 07-24-2010 at 03:32 AM.

  • Users who have thanked qwertyuiop for this post:

    qcom (07-24-2010)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    But that's a pretty limited "animation". Only two images.

    I would assume that you'd actually want 10 to 30 images, flipping from one to the other to achieve the effect of animation.

    Of course, you *could* use an "animated gif" image. That is, GIF images, themselves, may consist of a series of images that are displayed one after the other. But that's still pretty limited. You couldn't, for example, have the animation change easily, depending on (say) where "home" is relative to Mario.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    qcom (07-24-2010)

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hmm, well, that's not bad..

    But that would only work if there was two instances, correct?

    1 for the display upon load, and the other after rollover.

    I would like about 5 sprites, and when I rollover, it cycles through, some have to be positioned a little different than the previous one too.

    I don't think you can do that with only CSS, but I like your suggestion too

  • #5
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Yeah animated gifs were my intent. However the transitions will not be smooth.

    Mario is standing (static gif) > mouse over > mario is jumping (animated gif) > mouse leaves before mario finishes the jump > mario back to standing

  • Users who have thanked qwertyuiop for this post:

    qcom (07-24-2010)

  • #6
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yeah quertyuiop, that's not bad, but not what I want. It would be better if I could go fully CSS and HTML, but the challenge of the JavaScript, if it even is challenge, appeals to me as well, also the "cool-factor" helps too xD

    Old Pedant, yeah, have you heard of the spriter's resource before?

    Here's a link to a great sheet of sprites for Luigi, Mario's brother (if you're unfamiliar): http://www.spriters-resource.com/ds/...i3/sheet/19547

    Take a look at the section one down from the top-left. It has a few different instances of Luigi finger-wagging and dancing.

    That is exactly what I'm looking for.

    For that "animation" consisting of 7 instances of Luigi, I would like to have the button go as follows:

    Have instance1 be loaded statically when the page loads.

    Then, upon rollover of either the static luigi or the text next to him, then the "animation" will cycle to instance2, and then instance3, instance4 until... instance7 at roughly 12 instances per second.

    I would really like to be able to do that with JavaScript if it's possible.

    I think it would be a neat effect, and to have it be compatible with all non-flash browsers like the iPhone.


    Do you have any ideas as to how that could be accomplished with JavaScript?

    For some inspiration, don't forget about my link: http://devness.com/2009/06/playing-w...animated-menu/

    I don't know JS very well, but something about the instance1 placeholder and then upon rollover, some sort of 12 instance per second loop alternating between instance1-7..

    Thanks!!

  • #7
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Actually! Check out this article I found! I still could use some help interpreting it, but it is closer than what I want than the other one:

    http://matthewkwilliams.com/index.ph...tes-animation/

    If I could somehow add it to be upon rollover, and then add a link, I'll pretty much be good to go!

    Great news as well, as long as I use one file for my sprites, it will actually take up LESS space than the animated GIF!!

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    ??? doing it on rollover is trivial.
    Code:
    <img src="standingthere.png" onmouseover="doTheAnimation()" onmouseout="stopTheAnimation()" />
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well yeah, but I still need to know how to "doTheAnimation()".

    I mean I get the concept, but I don't know the JavaScript for it..

  • #10
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    OK, I was reading the W3 tutorials, and I thought of a really cool idea to simplify the code, but I'm not sure about how to code it just yet..

    Well, to start, my timer should begin upon rollover of the table containing the static image placeholder and the text reading "Home" to make it feel a little bit more like a button.

    OK, to keep my animation at 12 frames per second, then the image instance (or frame) should be changed every 750/9 seconds (or 83.33333333).

    Now, due to my organized image names, and with them being a little verbose, it actually comes into use.

    Each instance is named like mariohammerswing1, mariohammerswing2 all the way to mariohammerswing5.

    Now, since the image name is "mariohammerswing" + an incrementing value of 1, perhaps every time the timer reaches the value of 750/9, after it beings upon rollover of course, it loads "marioahmmerswing" plus the next increment of 1, so it would increment to 2, and then to 3, 4 and 5.

    Maybe we could use the clearTimeout() method to clear it after each instance was loaded, and then it once it reaches 750/9 again, it will load that incremented image.

    I'm not quite sure how to use the setTimeout() method to load each image after the increment though.

    Perhaps using a Var InstanceSpeed=750/9 and when the timer reaches InstanceSpeed, it loads the new image, clears the time using clearTimeout() and then begins the time over again.

    Anyone have any suggestions?

  • #11
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Actually, thescientest over at W3School Forums replied the following:

    "just use onfocus event handler, and it runs a function. This function starts a timer that runs the animation function. That function handles changing the animation, and should also check an incrementing value (which could also be used to dynamically set an image tag's src using a concatination technique) and it can also handle clearing out the timer if the incrementing value reaches a particular value."

    Does anyone know how to do some of this stuff? I'm mainly confused about the onfocus event handler..

    Any suggestions?


  •  

    Posting Permissions

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