Currently I am working on a racetrack (in perspective) with 5 running horses. The horses run on an oval track taking into account the perspective change when they turn a corner.
For this I have rendered 250 frames (per horse!) and created five spritesheets (see image below for one of the spritesheets. Currently I am trying to:
- let the horses run on their own track
- make sure that they also animate within the spritesheet
- optimise everything for mobile (!!)
At the moment I managed to come up with the following solution:
- import the spritesheet into Hype
- put the spritesheet into a group and mask a single tile of the spritesheet (100x100)
- animate this group around the track (with the single frame)
- create a JS that is getting called on an FPS interval that changes the backgroundposition of the spritesheet
This works, however:
- it is pretty resource heavy (with 5 horses!)
- it runs poorly on mobile
- lack of framerate generates a lag where the HYPE animation (the static image around the track) and the spritesheet animation get out of sync.
I’ve already optimized the size and compression of the spritesheet as well as implemented a single FPS-based interval (instead of 5). I’ve also tried changing the spritesheet animation to a CSS-based one, but this is way more difficult to control (I need to control the speed of the horses as one has to run faster to win).
I also used different JS / JQuery tools to animate the spritesheet (i.e.: http://blaiprat.github.io/jquery.animateSprite/). But none seem to provide a proper solution.
The best way would be to have HYPE handle ALL the animation (so the animation around the track as well as the spritesheet animation), but there seems to be no proper support for spritesheets. I don’t want all the loose frames to be separate files (as the server-calls would be enourmous), so I’m stuck with the spritesheet.
I’ve found this topic, but it doesn’t provide any real answers: Spritesheet / frame sequence import / SVG I also don’t understand the answer of cowdar.
Anyone has any idea? Or do I have to switch out my trusted HYPE for a different toolkit for this one
NOTE: I also know that this is the least optimal form of spritesheeting (as all the individual frames are separated by the same amount of pixels). Ideally you want to have an spritesheet that is as small as possible, where all the alpha-space is used for images. Positioning all the frames is done with an xml / textfile. Is this posisble?