onGameStart strikes back!

It's already kind of tradition that September is HTML5 Gamedev month in Europe. Since 2011, when first onGameStart took place, we've hosted events for more than 900 game developers, designers as well as business and marketing teams. With more than 60 talks, 25 hours of workshops and 1200 liters of alcohol during the parties (so far), onGameStart is the most important web gaming event in the world. This year (September 18-20) we will try to push it even further. We have just updated our website, and announced new speakers in our lineup. This year's edition is a unique opportunity to meet big names from the industry, like:

• Mrdoob - creator of the most popular WebGL framework, THREEJS.
• Collin Hover - author of Kaiopua engine and our last website (onGameStartUS). If you never heard of him - check his talk from the last oGS.
• Rémi Papillié - from Ubisoft, will teach us about console game dev tricks that could be useful in WebGL games
• Ivan Popelyshev - creator of Bombermine, the game that was in Top10 of HTML5 games in 2012 on NetMag. He will share his secrets about developing MMO game with canvas & Websockets
• Jasmine Kent - formerly worked for Sega, author of Trigger Rally, a WebGL racing game
• Jan Krutisch - will make some noise with Web Audio API (finally!)
• Yuri Dobronravin - will teach us how to run our HTML5 games with native-like performance on Windows Phone and Android, like he did with his Cannons & Soldiers
• and others, check our agenda

Besides the conference, on the day before we organize fullday workshops in small groups (up to 10 persons). This year you'll be able to learn how to create a 3D game using PlayCanvas (check Will Eastcott's Playcanvas presentation from last year if you never heard of it before) and how to create game graphics (and outstanding skeletal animation with tool called Spine!) if you have no artistic skills together with onGameStart veteran, Robert Podgórski.
If you still haven't decided if you want to attend, check videos from previous onGameStarts:
2011:

2012:

And all the talks in here: 2011, 2012+oGSUS.

For more details visit our site, Facebook, Twiter and Lanyrd. See you there!

JavaScript: The less known parts. DOM Mutations.

'JavaScript: The less known parts' chapters:
1. Bitwise Operators
2. Storage
3. Dom Mutations

At the beginning of last May, so not even a year ago, there was quite a buzz around a blogpost by David Walsh about detecting DOM Node insertions with JavaScript and CSS Animations. In the article, David explained that even if Mutation Events are deprecated, we are not powerless in detecting DOM modifications in our JavaScript code - using simple hack (and since we are web developers, we love hacks and we use tons of them every day), we can attach very short (0.001s in the given example) animation to every element that will be added to to DOM Tree, and then listen to the animationstart event. The animation will be to short to notice it, so the event will fire almost immediately after DOM modification. Full post is still online, you can find it in here - Detect DOM Node Insertions with JavaScript and CSS Animations. Great, but is it the only way to detect node changes in JavaScript? Fortunately - it's not. Say hello to the MutationObserver.

About three days after David's article, Jeff Griffiths presented MutationObserver on MozHacks in an article called DOM MutationObserver – reacting to DOM changes without killing browser performance. In just a few words, MutationObserver provides developers a way to react to changes in a DOM. It is designed as a replacement for Mutation Events defined in the DOM3 Events specification. It's way simpler and more efficient to use native browser's API than hundreds of hacks - we are creating more dynamic webapps all the time, so it seems natural that we would welcome the ability to listen for changes in the DOM and react to them.

Below, I've reimplemented the demo from David's blogpost from CSS Animations to MutationObserver. You can find the original example here: Detect code insertion.

Unfortunately, MutationObserver is still a fresh feature, and it isn't supported everywhere - we can use it in only in Chrome (Desktop) & Firefox (Desktop & Android) so far:

MutationObserver resources

DOM Mutation Observers & The Mutation Summary Library
Mutation Summary
MutationObserver on MDN
MutationObserver DOM4 Spec
Detect DOM changes with Mutation Observers - HTML5Rocks
DOM MutationObserver – reacting to DOM changes without killing browser performance.

Do you find this kind of API useful? Do you know any other hacks related to DOM manipulation listeners? Comment here or catch me on Twitter (@michalbe).

JavaScript: The less known parts. Storage.

'JavaScript: The less known parts' chapters:
1. Bitwise Operators
2. Storage
3. Dom Mutations

Client side storage is almost as old as Internet itself. Back in the days we used cookies for this, but since Firefox 2 & Safari 4 browsers support DOM Storage techniques. We are probably all familiar with IndexedDB or deprecated WebSQL. Both of them are widely supported in almost all of the newest browsers:

localStorage

Thats not all - we also have well known localStorage & sessionStorage key/value client storage system. We can simply save the value in one window:
And load it in another:

The advantage of local/session storage over IndexedDB is that we can listen to an event that fires when something has changed - we can for instance propagate those changes to all the browser cards or iframes in our application. Choose the 'result' tab in the next fiddle, go back to the first one and save something using the form.
It's helpful also in IndexedDB based apps - for example PouchDB made by Dale Harvey use localStorage events with IndexedDB data to keep everything up to date everywhere.

window.name storage

We can also use window.name property to store data on the client side. This ancient method allows us to read and write data across pages and domains, even from outside the current origin. According to Wikipedia [HTTP COOKIE] we can store up to 32MB there (according to some sources its even around 60MB). It's also accessible even before domready event. And even if it's not really cleaver idea in times of tabbed browsing (every new tab starts with empty window.name), it's still used as a fallback in for older browsers. More on window.name storage:
Ajaxian: What’s in a window.name?
Cookie-less Session Variables in JavaScript
Session variables without cookies
HTML5 sessionStorage for "every" browsers

See you next Monday in the 3rd part of Javascript: The less known parts. Follow me on Twitter and stay informed about next parts!

My TV Shows list

I've updated the list of all the TV Shows I've watched since February 2008. So far it's 48 shows, 3295 episodes in total, what gives 1854 hours and 12 minutes (around 77 full days and nights). If you know anything I should watch, and it's not on a list (or 'Shows to consider' list), please fork my repo and update my proposals. You can also vote for other series in the 'proposals' part.

Github repo: michalbe/tv-series
Rendered list: gh-pages/tv-series

JavaScript: The less known parts. Bitwise Operators.

'JavaScript: The less known parts' chapters:
1. Bitwise Operators
2. Storage
3. Dom Mutations

Most of us probably use JavaScript every day - in my case it's building a mobile operating system in my daily job, preparing crazy and ridiculous demos for various conferences or run personal projects in my free time (mostly games). But even with years of experience (probably because the language itself is full of weird quirks and unintuitive patterns), from time to time I'm still getting surprised with new crazy hacks, techniques or workarounds. I want to put most of those things in one place and publish one every Monday - for last couple of years I wasn't really active on the blog, it's time to change this. First - bitwise hacking.

Bitwise operators

Most of us know know that there are some bitwise operators in JS. Every number has it's own binary representation, used by those operators. To check dec number's binary value, we use .toString() method with base argument - '2' for binary:


There are seven different bitwise operators. Assuming that variable a is equal to 5, and b is 13, those are actions and results of their operations:


Sometime we even use Bitwise OR as equivalent of Math.floor():


It has the same effect as double NOT operator (my favorite rounding solution since I first heard about it on Damian Wielgosik's workshop couple of years ago).


What about other real life examples of bit chaking? For instance, we can convert colors from RGA to Hex format:


We can also simply check which number in a pair is smaller (like Math.min) or bigger (Math.max):


Of course since Math library is really well optimized nowadays, using those hacks doesn't make any sense. But what about variables swap? Most common solution is to create a temporary variable to achieve that, what is not really efficient. It's simpler to use bit operations here:


Even with 'Pythonish' variable swap introduced in JavaScript 1.7, bitwise solution is the fastest way to achieve that.
JSPerf test [here]:


Great place to learn more bit-tricks to make your JS app: Sean Eron Anderson's site [Stanford PhD].
Do you know and use any more binary tricks in your JavaScript projects?

onGameStart US, March 2013

Since world is just too big for only one HTML5 gaming conference, onGameStart comes to North America on March 15 next year. Together with Collin Hover, WebGL Wizard and creator of kaiopua game engine and outstanding BlackMoonDesign, (yes, they are doing also 3D stuff, not only pixelart!) we launched the site last week. Control the astronaut, meet the speakers and explore onGameStart planet & stars. Don't forget about our Call for Paper - show us your games, engines, tools or game related services and present them on oGS in New York!

Report from the battlefield - onGameStart 2012

onGameStart 2012, the second version of the first HTML5 gaming conference ever, is over now. Since last year I completely changed its formula, and even if I was frightened as hell just before the event, it turned out to be wonderful (or most of the attendees were perfect liars who didn't want to hurt my feelings, but I'm quite OK with this:) ).
First of all - I limited number of the attendees to 250 (instead of almost 350 last year). Why? HTML5 Gaming is quite a new movement. Even if it's growing fast, it's still not as popular as, for example, jQuery or Node.js communities. And inviting less attendees definitely helps in meeting interesting people - onGameStart is not a mass event - it's more like a meeting of our elite HTMl5 Gaming caste. Connecting them together (also with sponsors & publishers, not only other developers & designers) is one of the main onGameStart's tasks. Also - according to Malte Ubl, organizer of JSConfEU:

more people requires executing everything with great precision which is super unlikely for amateurs like us (Professionals can’t do this either, but they don’t care because lots of attendees means lots of money).

Also - onGameStart this year has additional, third, day at the beginning, just for the workshops. During the three tracks, groups up to 15 people learned how to make 2d platformer game, 3D game using your jQuery skills, or multiplayer pong game in SVG with your Flash resources. I had fantastic feedback from both, attendees and trainers, so I'll probably organize workshops again during next editions.
During this year's Front Trends Paweł Czerski, one of the organizers, adviced me to shorten speech slot from 45 to 30 minutes. It's enough to inspire the audience with something new. And if the speaker is not good enough to do it, additional 15 minutes won't probably change it. For sure, I will use the same pattern again.
The main keynote this year was prepared by Jordan Mechner, creator of 'Karateka', 'Prince of Persia' or 'The Last Express'. He is not HTML5 game developer. Actually, he has nothing in common with browser games or development at all - his last game was published more than 15 years ago. But he is an icon in the gamedev world, and has indisputable influence on video games. The story Jordan presented was great summary of a journey of a game developer (as he called it - 'From Bedroom to Attic'), and definitely it was best closing talk of a gaming conference I could imagine. I'll do my best to invite other gamedev stars for next editions.

During my opening talk I appealed to the HTML5 gaming community to stop doing tech demos and try to prove that it's mature enough to create real games. We need games, not demos, so stop doing it and focus on real games. The second big thing I announced was American edition of onGameStart - onGameStartUS. It will take place in New York early next year (probably 22nd of March). PreRegister here for the news. And track the event on Lanyrd. After the announcement I read a lot of tweets or personal questions about European onGameStart. So to dispel all the doubts - there will be more than one onGameStart next year - one in NY, main edition in Warsaw, and probably one more, but I will announce it later. As I said during my talk - world is too big for just one HTML5 gaming conf (actually I wrote and said that it's 'too small', but It's mostly because I didn't really sleep for about a week). So see you next year in NY, WAW, or any other place I'll bring onGameStart to. Thanks!

.getUserMedia puzzle game

During my last talks about Blysk I presented couple of new HTML5 features that are quite new, and were implemented only in Flash before. Access to the webcam was one of the most interesting.
VideoPuzzle on WebRebels:
And since learning by playing is always fun, I made a simple puzzle game that uses webcam to display realtime video on the puzzles. To run it you need Chrome Canary with Media Stream enabled.
I was asked to publish it somewhere so you can find the source code on Github:

.getUserMedia() VideoPuzzle game
or try it now here

Why doesn't it work in Opera with .getUserMedia() support?
I was superlazy writing the code (it took me less than hour, it was just techdemo, not the regular, production code). And the easiest way to determine if the pieces was dropped in the right place was to check if the previously added 'data-order' values of the DOM elements (canvas - piece & div - place in which you put the piece) are equal. I took the second element from event.target argument of mouseup event, and since dragged piece has 'pointer-events' set to 'none'. It should allow the event to go through the piece. Not in Opera. I don't know if it's Opera's or all the other vendors, there's nothing in spec about that.

onGameStart 2012

The most important thing in the life adventure is to remember when and how did it start. First impressions, inspirations and simple steps shape the future.
My gaming experience started in mid '90 on my XT with Hercules graphic card and amber screen. I was too young (and I lived on the other side of the iron curtain) to remember Apple II or Commodore computers before. One of the first games I remember from my early childhood was 'Prince of Persia' made by Jordan Mechner. I played it for almost 12 years before I was able to finish it without cheating (I can still remember 'prince megahit' password that enables cheat mode). I'm sure that a lot of you had similar experience.

What does this have to do with onGameStart?

Earlier this year I tweeted that HTML5 gamedevs are the new generation of game makers, and like every other 'new generation' we reinvent the same patterns or techniques our older friends implemented 30 years ago. There is no better way to learn, than listen to the real experts. That's why Jordan Mechner, creator of Prince of Persia, will share his experience during this year's Main onGameStart Keynote.

During two days of the conference it will be also possible to listen to presentations of the biggest, most talented and most respected HTML5 game developers from all over the world. And differently from last year, we will focus on real HTML5 games, tools that could help you write your own game, and wide variety of services for distribution, payments, statistics, and everything you will need to create great game. No more tech demos or examples - we all know that HTML5 has become mature enough, and players don't care about the technology - they want games. And we need those players and those games to prove that Open Web Technologies can compete with any other technology used in game development.

First part of confirmed speakers list for this year's edition of the first HTML5 game conference:
Seb Lee-Delisle, trainer on CreativeJS workshops
Jerome Etienne, creator of learningthreejs.com and tQuery
Jon Howard, responsible for games for kids in BBC
Andres Pagella, creator of Tracy and author of "Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript"
Szymon Pilkowski, former senior JS developer in Crytek & Bigpoint
Robert Podgorski, boss of Black Moon Dev, one of the best pixel artists ever
Jonas Wagner, author of great WebGL demos
And of course last but not least,
Jordan Mechner, creator of Prince of Persia

So about 30 seconds ago we have launched our site, onGameStart.com. And because it's all about gaming, we've simply created a game with outstanding graphics by Robert. Control little astronaut with arrow keys, use space to talk to the speakers (close the window with 'z'), avoid lasers and spikes, and use keycards to open the door. If you don't want to explore our oGS spaceship, you can simply click on the head of the speaker in the top menu, and you will be teleported to the given speaker - you can still talk with him using space. game was created using Dominic's ImpactJS so it should work in most of the browsers. If you happen to find a bug, typo etc, feel free to tweet me about that (@michalbe). Enjoy, and stay tuned (Lanyrd, Facebook & Twitter)! We will announce more speakers and surprises soon.

MeetJS Summit

Last weekend, during MeetJS Summit in Poznań, I gave my first talk this year. It was just another great frontend event organized by Godfather of Polish web conferences, Damian Wielgosik, together with Polish GTUG.
Since ICT Conference in Kathmandu in November, where I spoke for the last time in 2011 (with simple .ppt slides), something really big happened in a web conferences world. Because of impress.js, stunning CSS 3D based presentation framework by Bartek Szopka, it became inappropriate to use prehistoric tools like PowerPoint for creating your own slides (It has 600 Github watchers more in two weeks than CoffeeScript in more than 2 years, SIC!). And since I had just couple of days before the event, I used mine & Jakub Siemiątkowski's port of Jordan Mechner's Prince of Persia as a base of my presentation. I'm quite satisfied with the result, you can check it HERE or just click on the iframe below. It is optimized for my presentation remote so you can change the slides only using PgDown & PgUp. Sometimes it needs to be refreshed, and sometimes it craches, but it's more like a prove of concept, not real life product.

NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7

Since Mibbu framework supports CSS animations, it's good moment to create version exclusively for mobile devices, without using heavy and hard to render canvas, and with very limited JavaScript DOM interactions - CSS FTW! So I remove about 50% of code from original branch and test it on my Samsung Wave (bada has one of the best mobile browsers ever, so that was my starting point). And it simply doesn't work:

After short research I saw that Allegro ('Polish Ebay') had the same problem on Desktop Chrome months ago. After couple more hours of reading documentation I found a clue, that Webkit is freaking out if you try to put HTML content into style tag. So I switch

var cssStyle = document.createElement('style');
    cssStyle.innerHTML = 'body { color: #000; }';

to

var cssStyle = document.createElement('style');
    cssStyle.innerText = 'body { color: #000; }';

and everything works.

Few words about my CSS Nyan Cat

Last week Mozilla together with Finnish demoscene hackers organized Flame Party in capital of Finland, Helsinki. More than 100 participants worked whole day on outstanding web demos in two main categories - Single Effect and Main Demo.
Because of nearly release of stable Firefox 5, first Mozilla's browser with CSS3 Animation support, I decide to create CSS3 demo for the Single Effect Compo.
Since I really enjoy all that 4chan-like mems stuff, I chose Nyan Cat, as one of the most 'fresh' ones. In case you don't know it (check the progress bar!):


I didn't use any graphics to code my CSS Nyan Cat. It is completely drawn and animated in CSS. The 'pop-tart' body is created with two rounded cornered divs and big, pink dots separated with non-breaking spaces:

#toastBody {
    background-color:#fad695;
    width:100px;
    height: 70px;
    border: solid #000 5px;
    border-radius: 15px;
    padding: 2px;
    position:absolute;
    z-index:19;
}

#toastBody > div {
    width:100px;
    height:70px;
    border-radius: 30px;
    background-color: #fc9dff;
    display:block;
    color: #da3eb9;
    font-size: 40px;
    line-height: 10px;
}

All the animations was declared with @-moz/webkit-keyframe (I wrote a lot about this method before).

I made couple of unusual things during development. For example, look on the cat's mouth:


Yup, it is rotated 'E' letter:

<div id="mainHead" class="skin">
    <div class="mouth">E</div>
</div>

.mouth {
    position: absolute;
    -moz-transform: scale(2, 0.7) rotate(-90deg);
    -webkit-transform: scale(2, 0.7) rotate(-90deg);
    font-family: Arial;
    font-size: 25px;
    font-weight: bold;
    top:9px;
    left:37px;
    color: #000;
}

What about the rainbow behind the cat? I just cropped part of original image, put it into CSS Gradient Editor by ColorZilla (awesome tool BTW, but still without couple of necessary features I use daily; I think I will create something like this on my own), which generates me css gradient ready for pasting into the div background:

.rainbow {
 position:absolute;
 width:45px;
 height:90px; 
 background: -moz-linear-gradient (top, #d91a12 15%, #e13300 15%, #ff7f14 16%, #f2ab03 32%, #ebc000 32%, #fade00 33%, #efff03 48%, #56fc02 49%, #52ff01 66%, #4ade7e 67%, #3baaf2 67%, #3baaf2 84%, #7337f7 84%, #6b40f2 100%);
}

The most annoying thing was the star. Animated stars in the background are made up from 8 animated elements. I google "nyan cat sprite" and found all the star frames [like this]. The only way to animate it was pixel-perfect animation of each of 8 divs. It took me really lot of time:

@-moz-keyframes star1 {
 0% { top: 0; height: 5px;}
 33.19% { top: 0; height: 5px; }
 33.2% { height:10px; top:0; }
 49.79% { height:10px; top:0; }
 49.8% { height:10px; top:5px; }
 66.39% {height:10px; top:5px; }
 66.4% { height:5px; top:10px;}
 82.99% { height:5px; top:10px;}
 83% { height: 5px; top: 15px; }
 99.99% { height: 5px; top: 15px; }
 100% { top: 0; height: 5px; }
}

@-moz-keyframes star2-3-6-7 {
 0% { visibility: hidden; }
 16.59% { visibility: hidden; }
 16.6% { visibility: visible; }
 33.19% { visibility: visible; }
 33.2% { visibility: hidden; }
 100% { visibility: hidden; }
}

@-moz-keyframes star4 {
 0% { left: 0; width: 5px; visibility: visible;}
 33.19% { left: 0; width: 5px; }
 33.2% { width:10px; left:0; }
 49.79% { width:10px; left:0; }
 49.8% { width:10px; left:5px; }
 66.39% {width:10px; left:5px; }
 66.4% { width:5px; left:10px;}
 82.99% { width:5px; left:10px;}
 83% { width: 5px; left: 15px; visibility:hidden;}
 99.99% { width: 5px; left: 15px; visibility:hidden;}
 100% { left: 0; width: 5px; visibility:hidden;}
}

@-moz-keyframes star5 {
 0% { left: 38px; width: 5px; visibility: visible;}
 33.19% { left: 38px; width: 5px; }
 33.2% { width:10px; left:33px; }
 49.79% { width:10px; left:33px; }
 49.8% { width:10px; left:28px; }
 66.39% {width:10px; left:28px; }
 66.4% { width:5px; left:28px;}
 82.99% { width:5px; left:28px;}
 83% { width: 5px; left: 15px; visibility:hidden;}
 99.99% { width: 5px; left: 15px; visibility:hidden;}
 100% { left: 0; width: 5px; visibility:hidden;}
}

@-moz-keyframes star8 {
 0% { top: 32px; height: 5px; visibility:visible;}
 33.19% { top: 32px; height: 5px; }
 33.2% { height:10px; top:28px; }
 49.79% { height:10px; top:28px; }
 49.8% { height:10px; top:23px; }
 66.39% {height:10px; top:23px; }
 66.4% { height:5px; top:18px;}
 82.99% { height:5px; top:18px;}
 83% { height: 5px; top: 15px; visibility:hidden;}
 99.99% { height: 5px; top: 15px; visibility:hidden;}
 100% { top: 0; height: 5px; visibility:hidden;}
}

.star {
 position: absolute;
 width: 40px;
 height: 40px;
 z-index: 10;
}

.star div {
 width: 5px;
 height: 5px;
 background-color: #fff;
 position: absolute;
 -moz-animation: star1 0.4s linear 0s infinite;
 -webkit-animation: star1 0.4s linear 0s infinite;
}

Here is the final result of everything: CSS NYAN CAT, and Github repo. If you like it, don't forget to click "I like it" on Mozilla's page!

The Flame Party Helsinki

If you are planning to spend next weekend in Finland, you cannot omit Flame Party organized there by Mozilla, Alternative Party Crew and DOT. It will be awesome weekend full of coding, BBQ, free drinks, Finish saunas and outstanding workshops including one lead by my - "Dive into HTML5 Animation":

"During the workshop you will learn about different methods of animation in JavaScript. We will compare the performance and ease of it's implementation in various browsers on different devices. Are we condemned to use DOM? What about new CSS techniques? Or maybe canvas is future of the web games?"

So what are you waiting for? Register now and follow the party on Lanyrd and Facebook.

CSS Animation in Firefox

Mibbu now supports CSS Animations also in Firefox. The only version in which I have tested it is 5.0/Beta, but I think it should works also in Aurora. Feature detection problem I describe last week wasn't the only unexpected behavior during implementing this (BTW, I want to thanks Anonymous guy who corrects my attempt - contact me, I have only your IP & Country you were writing from:), and Paul Irish for deeper explanation of the problem).

Every animation I've created using Mibbu in Firefox animate only once. No matter if I put 'infinite' as a value of AnimationIterationCount. Using MozAnimation shorthand property doesn't want to work. I rewrote everything couple of times in different ways without any result (sometimes it just stop working also on webkit:)). And then I figure out that setting 'none' as 'MozAnimationDelay' instead of 0 (as in the spec!) solves everything. Nice try Mozilla, but it is again 1:0 for me:). I really love everything from Mozilla, Firefox is my main browser, each day I'm working with technologies created there (also in my full time job in GaduGadu), I'm excited in every news like THIS ONE, and I even ran XUL workshop two weeks ago on FalsyValues conference. But sometimes I simply don't understand why they solve something in such a weird way.
I also had to use MozAnimation attribute using brackets notation because Closure Compiler don't understand it and minimized it to the single letter.
So, you can now download Mibbu from my Github account and play with it.

UPDATE
Ok, thanks to Marek Stepien's research done after my post we figured out that putting delay value without the unit ('0' instead of '0s') solves the problem. Probably, when we put single digit without units, Firefox thought that it is -animation-iteration-count (the only property without any units). Marek creates bug report for this here.

onGameStart tickets

It is now possible to register to onGameStart - first HTML5 game conference. Don't wait for anything, just go to http://ongamestart.com and do what you have to do:).

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!

Mibbu - javascript html5 game framework

I have just published initial release of Mibbu - my javascript microframework for fast game prototyping. To be honest - it is just set of functions and patterns I use always when I write my games. It is more a sandbox, starting place with basic tools, than a real framework (that's why I called it 'microframework'). It provides sprite animations, basic operations like movement or collisions, scrolling backgrounds and drawing on both - canvas or DOM. It uses DOM only when it is not possible to use Canvas (like in older IEs), but you can force it to do so with one single function (canvasOff()) - then it will be drawn with divs & imgs. It is the same mechanics I have used in OpenOdyssey or Janpu. I will try to write something more about using Mibbu later this week.

First HTML5 Game Conference ever - onGameStart

As probably most of you already know - I'm organizing first HTML5 game conference ever. It will take place in my hometown - Warsaw at 22nd & 23rd of September 2011. I've done my best with selection of the speakers - so far it is the only chance to meet and talk with the best Open Web Game developers. Let me introduce some of them:
Bartek Drozd - creator of J3D - WebGL Library with Unity3d object/scene exporter.
Rob Hawkes - author of "Foundation HTML5 Canvas" book
Robby Ingebretsen - creator of Agent008Ball
Brandon Jones - author of glMatrix library and a lot of awesome webGL demos (like Quake III)
Martin Kool - creator of multiplayer, online versions of old good Sierra games - Sarien
Seth Ladd - Google developer advocate (he will speak on Google IO in two weeks - don't miss it!)
Simon Oberhammer - creator of pyGame port for Javascript - GameJS
Andreas Røsdal - originator of biggest strategy game made in open web technologies based on Sid Mayer's Civilization - Freeciv.net
Dominic Szablewski - creator of ImpactJS - most complex and so far the best Javascript game engine.

For more information about the conference check our site, lanyrd, twitter and facebook. And don't forget to preregister (it is possible on the site).

GG Workshop

Yesterday I ran Javascript workshop about creating Apps & Games in Social Networks. Fourteen great developers in eight hours tried to create multiplayer checkers (draughts? what's the difference?) game and adapt it to two social network APIs (Facebook & GG.pl). I published source code of the final result on my Github, just as Maciej Konieczny, one of the participants. Here are also my slides and couple of photos:

GG WORKSHOP GAMES & APPS IN JAVASCRIPT

View more presentations from michalbu

I would like to thanks everyone for the presence and I hope we will meet on frontend meetings in near future (like those organized by Google Poland). If you will find some free time feel free to rate my workshop on SpeakerRate.

Sun^26

That post has nothing in common with programming or even computers but I was so excited when I discover things I want to write about that 140 chars of twitter wasn't enough for me.

The Sun is a star in the center of our Solar System Anyone knows that. But have you ever think about number '26' in Sun statistics?

• Apparent magnitude of the Sun is -26,8
• Mean distance from Milky Way 26,000ly
• Galactic period 226.000.000 years
• Radiant flux 3,827×10^26 W
• Unicode of Sun symbol - 2609
• Distance from Milky Way Equator - 26ly
• Speed 260 km/s
• Conversion rate of mass-energy 4.26 million metric tons per second
• Mean mass loss in energy 26,732MeV
• Total mass loss 6,5x10^26
• STEREO observation mission starts at 26th of October 2006

Coincidence? Don't think so! :)

from Polish & English Wikipedia.