Spritesheet animation

[vaanatomic]

Hi everyone !

I want to make a game on BGA but I am not sure how to handle sprite animations. I have a spritesheet and I know how to animate my sprite with canvas and requestAnimationFrame but, if I recall correctly, the BGA platform is using dojo framework and DOM to display and animate ressources.

Has someone already used canvas on BGA ? Is there a way to create animations based on spritesheet on BGA without canvas ? I was thinking with maybe some keyframe in the stylesheet file but when I tried it, it was not really convincing.

Thank you for your advices !

[xiongmao1298]

A common way to implement spritesheets with pure CSS is to use steps-timing-function to animate the background-position of an element (MDN).
For example if your spritesheet has 8 horizontally arranged sprites to play at 4fps, it would be something like this

Code: Select all

.spritesheet {
    background-size: 800% 100%;
    animation: sprites 2s steps(8, jump-none) infinite;
}

@keyframes sprites {
    from { background-position-x: 0; }
    to { background-position-x: 100%; }
}

[vaanatomic]

Thank you for your reply.

Actually I tried to use keyframes before even using canvas but I could not make it work... until now ! I was using the wrong number of steps so the result was weird.

Thank you again and sorry for bothering you.

[xiongmao1298]

No problem, just keep in mind that if you end up using jump-none, its compatibility is only about 4 years old, so for better browser support it might be worth reformulating steps without it.