Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

Using Javascript to animate from a spritesheet

I am working on an animated battle system -- it is for a PHP game.

This is a concept page: http://vengeance-rpg.com/battletest.html

And those are the sprites that would be used. Now, at current my plan is to use animated gif files for the animations and overlay them, so as to form a basic animation.

The problem is the amount of redundancy needed. I will need to make seperate gif files for attack, defend, casting magic, using a bow, and so on, but most of the time at least one frame will be reused.

I started thinking of RPG Maker and how images are animated based on a sprite sheet.

I dunno if anyone has ever done this before, but I am wondering how applicable such a system could be to Javascript and CSS.

Instead of having an animated gif, I would have a png file organised into say eight grid squares, and a sequence array like [1, 2, 3, 4, 5, 4, 3, 2, 1] which would show the images in that order at something like 4 frames per second or whatever is decided on.

Any thoughts?

This is less a support question and more a concept discussion.
 
I'm thinking that jQuery UI is capable of doing this. jQuery is a javascript library and jQuery UI extends the animations and effects-posibilities of this library. I'm unsure if anything alike has ever been created with jQuery UI, but i once made a click, drag and dop game purely in jQuery UI. If you know how to use jQuery, be sure to take a look

-> http://jqueryui.com/
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top