Sunday, May 29, 2011

CSS3 animations in Mibbu

Last week I implement CSS Animations in my gamedev micro framework, Mibbu.
It is possible now to animate sprites in three different ways - cropping parts of the sprite with .drawImage() in 'canvas mode', manipulating 'top' & 'left' attributes of absolute position of the image [both described in here] and CSS Animation in DOM mode.
For now Mibbu supports CSS animations only in webkit based browsers. I know that beta version of Firefox supports it as well, but I didn't find easy way to detect it. In webkit we can just check what is the initial value of given attribute (use whatever DOM element you want), like this:
if (typeof document.body.style.webkitAnimation !== "undefined") {
//all your animation are belong to us
} else {
//no css animations:(
}
Unfortunately it don't work in Aurora, mozAnimation always return 'undefined'. Is there any way to easy detect it?

The main point in creating css animations is preparing proper keyframes in a css classes and connecting it to the DOM elements with description parameters like duration or number of iterations. CSS engine will be responsible for sprite animation so draw() function of each sprite object should be empty. The keyframes are generated during constructing the object and append to the document - one class in one script element, it will be easier to edit them when the parameters of the animation will change during the gameplay. I also wrote a little function to convert speed of an animation (from Canvas & DOM mode) to the CSS Animation Duration parameter.
var calculateSpeed = function(speed, frames) {
    return (~~((1 / (60 / speed)) * 100) / 100) * (frames+1);
};

constructAnimationClass = function(){
 var animClass = "@-webkit-keyframes 's" + t.id + "' {\n",
        step = 100 / (t.fs + 1),
        str = '% { -webkit-transform: translate(';

    for (var q = 0; q < t.fs+1; q++) {
        animClass += ~~((step * q) * 100) / 100 + str + t.animation * t.width*-1 + 'px,' + q * t.height * -1 + 'px); }\n';
        animClass += ~~((step * (q + 1) - 0.01) * 100) / 100 + str + t.animation * t.width * -1 + 'px,' + q * t.height * -1 + 'px); }\n';
    }
                
    return animClass += '100'+ str +t.animation*t.width+'px, 0px); }\n}';
                
};

//append created class to the document
t.animStyle = document.createElement('style');
t.animStyle.innerHTML = constructAnimationClass();
document.body.appendChild(t.animStyle);
Above code creates class like this: And every sprite needs to implement description of the animation (name is created by concatenating 's' and internal id of the sprite:
t.style.webkitAnimation = "'s"+t.id+"' "+calculateSpeed(t.speed, t.fs)+"s linear 0 infinite";
Main problem I had with implementing this was pausing the game - even if main loop stops, CSS engine still animates the keyframes. So I just set '0' for the -webkit-animaition-duration parameter:
'off': function(){
    MB_Stop();
    if (MB_usingCSSAnimations){
        var i = MB_elements.length;
        for (;i--;){
            if (MB_elements[i].image)
                MB_elements[i].image.style.webkitAnimationDuration = 0;
        }
    }
};
It sucks but it works. Anyone know better solution? Next step is to provide support of webkitAnimationIterations for iteration's callbacks (now it is calculated using JavaScript, not with the events, but contrary to what I thought webkit has already supported DOM events for animation [thanks Askoth]). If you want help feel free and contribute: Mibbu on github. There are also some issues I found creating new features and I have no time to fix it now. If you use Mibbu and have some ideas or found any bugs, write me about it or fork & pull request on Github.

BTW, Github will be one of the sponsors of onGameStart, HTML5 Game Conference. We will open registration on Monday evening Central European time, so check the conference page and don't miss it!

27 comments:

  1. aurora is alpha. Download beta.

    ReplyDelete
  2. In firefox you have to check for

    element.style.MozAnimation

    ReplyDelete
  3. WOOOOOAAA!, It works, thanks:)!

    ReplyDelete
  4. Yup you'll want to use capital prefixes..

    https://github.com/Modernizr/Modernizr/blob/master/modernizr.js#L64-74

    ReplyDelete
  5. Thanks, I thought that lowercase in 'webkit' is the proper way, I didn't realize that it is just ghost attribute.

    ReplyDelete
  6. Replies
    1. No, but the new framework I work on will have physics support.

      Delete
  7. You may have not intended to do so, but I think you have managed to express the state of mind that a lot of people are in. The sense of wanting to help, but not knowing how or where, is something a lot of us are going through. Info Aksesoris HP klik disini

    ReplyDelete
  8. Thanks for sharing. Great websites! We too have a blog on YoWhatsApp Apk which is the best WhatsApp MOD app ever.

    ReplyDelete
  9. I need to to thank you for your time due to this fantastic read!! I definitely enjoyed every bit of it and I have bookmarked your site to see new information on your blog. YOWhatsapp

    ReplyDelete
  10. check lottery result Postcode lottery result top lottery in uk check latest result on website

    ReplyDelete
  11. Well, YOWhatsApp keeps adding new features with each new update.

    ReplyDelete
  12. You can install FMWhatsApp to get extra features that Whatsapp lacks.

    ReplyDelete
  13. if you are alreading playing a game and you don't have an option to play it with your friends then I think you have to download this mini militia download version to play it with friends.

    ReplyDelete
  14. I am impressed by the details that you have article. Thank you for taking the time and sharing this article. It was indeed very helpful and insightful. A good informative post that you have shared and thankful your work for sharing the information. I appreciate your efforts and all the best.
    001 | 002 | 003

    ReplyDelete
  15. thanks for sharing this,If you want to get more info about this install now Gb whatsapp APK download.

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. Android application PacKage called APK An application file ready for installation in an
    Android device. The compressed APK file, which is a ZIP archive in the JAR format



    JTWhatsApp APK

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Kepala Bergatar Malay Dramas Tonton Kepala Bergetar Download Melayu Telefilem dan Filem,
    Drama Melayu Terkini Live Episod Today At Kepala Bergatar You can watch all Malaysian dramas.

    Kepala Bergatar

    ReplyDelete