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.

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!

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).