Best way to implement (complex) spritesheet animations

That problem seems similar to here…

The way the mission brief video works is basically a sprite sheet. It’s processor intensive. That’s with just one animation. I’m not sure what you could do to fix that, as it’s a huge image.

You could try controlling the action with a requestAnimation frame event, so it’s not always updating when the screen isn’t being drawn.

You could try using SVG Animation to control the sprites instead of Hype. So, you’d still be using Hype but you’d have more options. (That’s how I created the 100 animated stars in the background. These are light weight particles though.)

You could try skipping frames, to lower the image size. Your image is huge. It might be too big for mobile.

Also, I find that Sprite Sheets are a problem. When I scale the scene, it can cause alignment problems. The edges of the box don’t always align properly. I’m using a filter of 98% saturation, just to blur it up a bit.

I’m not sure what else you could use besides Hype. I’m really starting to miss Flash a lot these days. Everything just worked. With HTML5, there are huge differences between the platforms - especially mobile. At first, I tried using a video instead of a Sprite Sheet, but mobile devices don’t work the same way. The autoplay video problem could be resolved with iOS 10, but not everyone has that.

A lot of the joy in this profession is gone, makes me want to move out of the city and be a farmer. :smile: