Michal Budzynski

MeetJS Summit

2012-01-17T07:50:00.000-08:00

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

2011-06-26T08:10:00.000-07:00

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; }';

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

and everything works.

Few words about my CSS Nyan Cat

2011-06-24T07:53:00.000-07:00

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

2011-06-09T06:23:00.000-07:00

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

2011-06-05T07:54:00.000-07:00

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

2011-05-30T16:03:00.000-07:00

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

2011-05-29T15:07:00.000-07:00

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

2011-05-04T17:46:00.000-07:00

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

2011-04-30T03:15:00.000-07:00

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

2011-04-10T02:47:00.000-07:00

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

2011-03-29T03:33:00.000-07:00

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.

meet.js in Warsaw

2011-03-19T10:12:00.000-07:00

I have just returned from Warsaw edition of meet.js, polish javascript meeting organized by Damian Wielgosik and Paweł Czerski, organizers of FrontTrends and Falsy Values. During the meeting we ware able to watch four Javascript tech-talks.
First was Robert Tomaszewski from Hypermedia Isobar with his presentation about different context of calling Js structures. He started with a little of JS history, then explained basics of using 'this' depending on placement of the objects and different approaches of using 'this' in DOM events.
Next was Marek Stepień - lead of Aviary.pl, team of programmers and translators localizing open source software for Polish users. He started with review of past JS objects, its restrictions and methods of its elimination. Then he presented new methods of creating objects in Js 1.8.5 like defineProperty() etc.
After the break there were a little contest - I won weekend stay in Karpacz for my implementation of adding function (Thanks!:) ). Just after that Tomasz Tunik talked about his Einie framework. He showed a lot of cool examples (like mouse tracking and interactions with canvas objects, or Pew! Pew! Towers, game created in 48h by Thomas and Szymon Pilkowski on HTML5gameJam in Paris. All of that examples are published on Einie's site so don't hesitate to check it.

Last presentation was made by me. I was talking about pseudorandom numbers and Steganography. I won't describe my talk, maybe someone else will, I think in couple of days I will publish it as a blog post or maybe little JS library.
I want to thanks the organizers one more time, and I hope we will meet on the next meet.js (or at least on Falsy Values:) ).

Birthday

2011-03-03T13:42:00.000-08:00

My blog is one year old today.
I will try to write some summary of that period later this week or at the beginning of the next one. For sure one of the best things I wrote about was my HTML5 Canvas Game Tutorial, one of the most popular in all over the web, but there were also other posts I would like to remind.

CSS3 sprite animation, issues in Safari

2011-02-27T04:21:00.000-08:00

Together with CSS3 standard we get awesome tool for creating hardware accelerated css-only animated sprites. For now it is implemented only in webkit based browsers like Safari, Chrome or most of the mobile browsers. Paul Bakaus described it on his blog months ago, with additional approaches and performance optimization methods. Also Marek Pawlowski said a lot about this on his DevMeeting gamedev workshop. Working on my new mobile game, I've tested everything I could find all over web. And some of the examples (like that Paul's created with Doug Neiner) did not works on Safari and some mobiles (like Samsung's Dolfin on my bada Wave). I spend couple of annoying hours to figure out what happens, analyzing different use cases, different examples and documentation pages. But solution was simple as hell:

Safari and some of mobile browsers cannot animate any element with CSS3 animation if there is no '0%' and '100%' step.

That's why example from Paul's blog didn't want to work when I test them:

@-webkit-keyframes 'animationName' {
  0% { background-position: 0px 0px; }
  12.5% { background-position: -128px 0px; }
  25% { background-position: -256px 0px; }
  37.5% { background-position: -384px 0px; }  
  50% { background-position: -512px 0px; }
  62.5% { background-position: -640px 0px; }
  75% { background-position: -768px 0px; }
  87.5% { background-position: -896px 0px; }
}

Adding the last frame, with the same parameters as the first one, fixes the problem:

@-webkit-keyframes 'animationName' {
  0% { background-position: 0px 0px; }
  12.5% { background-position: -128px 0px; }
  25% { background-position: -256px 0px; }
  37.5% { background-position: -384px 0px; }  
  50% { background-position: -512px 0px; }
  62.5% { background-position: -640px 0px; }
  75% { background-position: -768px 0px; }
  87.5% { background-position: -896px 0px; }
  100% { background-position: 0px 0px; }
}

Of course I didn't want to show that Paul and other guys was wrong - for sure all of them has bigger experience and knowledge than me. And their solutions will eventually work when browsers will implement the standards (what was the point I supposed) - but I was looking for something what will work here and now.

Javascript random numbers with custom seed - part 2

2011-02-23T16:53:00.000-08:00

Generator created in previous example was able only to create integer numbers from zero to the given maximum (2^50) using provided seed. But in most cases we need random numbers from some range, so lets modify previous example and add 'min' and 'max' arguments to the .next() method. Also, to make it more like the native Math.rand(), let's make it generating floats from 0 to 1.

var CustomRandom = function(nseed) {    
  
  var seed,    
    constant = Math.pow(2, 13)+1,    
    prime = 1987,    
//any prime number, needed for calculations, 1987 is my favorite:)  
    maximum = 1000;    
//maximum number needed for calculation the float precision of the numbers (10^n where n is number of digits after dot)  
    if (nseed) {    
      seed = nseed;    
    }    
    
    if (seed == null) {    
//before you will correct me in this comparison, read Andrea Giammarchi's text about coercion http://goo.gl/N4jCB  
      
      seed = (new Date()).getTime();   
//if there is no seed, use timestamp     
    }     
    
    return {    
      next : function(min, max) {    
        seed *= constant;    
        seed += prime;    
           
      
        return min && max ? min+seed%maximum/maximum*(max-min) : seed%maximum/maximum;  
// if 'min' and 'max' are not provided, return random number between 0 & 1  
      }    
    }    
}

Now its easy to use it in such a way:

var rng = CustomRandom(23);
//use '23' as a seed
    rng.next(); // 0.426
    rng.next(); // 0.205

In the next part I will show some GameDev related examples of using Random Number Generators with custom seeds.

Check 1st part of the "Javascript random numbers with custom seed" tutorial

Javascript random numbers with custom seed - part 1

2011-02-17T15:42:00.000-08:00

Introduction
Any random number generator generates sequences of numbers using some initial seed. The same seed always gives the same sequence. Most popular initialization method is to provide actual timestamp as seed - it changes every second so probability of receiving same sequences is very low.
Generating pseudorandom sequences of numbers has wide variety of uses, ranging from creating random maps for games (with well constructed map generator all the game should remember is just the initial seed, not the array with list of map elements), to steganography, where you code & decode message on the sample image using the same seed (it is impossible to decode the information from the image without knowing exact number used as seed during coding it). I will create some examples in the next part of the series.

First attempt
Unfortunately, it is impossible to provide custom seed to the Javascript Math.random(). It always uses timesamp for initialization. So let us create our own generator with everything we need.

var CustomRandom = function(nseed) {

    var seed,
        constant = Math.pow(2, 13)+1,
        prime = 37,
        maximum = Math.pow(2, 50);
 
    if (nseed) {
        seed = nseed;
    }
 
    if (seed == null) {
//if there is no seed, use timestamp
        seed = (new Date()).getTime();
    } 
 
    return {
        next : function() {
            seed *= constant;
            seed += prime;
            seed %= maximum;
            
            return seed;
        }
    }
}

And now:

var rng = CustomRandom(23);
//use '23' as a seed
    rng.next(); //188476
    rng.next(); //1544183905
    rng.next(); //12651498733702

In the next parts I will extend that CustomRandom() generator with limits (min and max value) and implement some real-life use cases.

Check 2nd part of the tutorial: Javascript random numbers with custom seed

Most useless skills ever aka how to implement sqrt() in javascript.

2011-01-26T04:46:00.000-08:00

Couple of day ago, Dominic Szablewski, author of Impact Engine tweets about interesting job interview:

Seriously, WTF? Why Javascript developer, even working for such a big company as Facebook, needs to know how to re-implement build-in language elements? Knowing everything about everything was bane of elementary education - we have all been trained (at least here, in Eastern Europe), that when we need to know something we shouldn't use 'outside' sources such as books then and Internet now. Why? Personally, I didn't know any developer who didn't sometimes read the documentation, especially if it takes less than 3s if you know what you are looking for.
In case that 'implementing sqrt()' task will ever occurs again, here are two of my JS implementations:) :

//in this way calculators implements square roots:
var ownSqrt = function(number) {
    return Math.exp(Math.log(number)/2);
}

But if it is forbidden to use Javascript Math object constants at all, the best way is to use approximation like this:

var ownSqrt2 = function(number) {
    var x = number;
    while (Math.abs(x*x-number) > 0.001) x = (x*x+number)/(2*x);
    return x;
}

There are a lot of different algorithms on Wiki, and their implementations all over the Web.

Mozilla Game On 2010

2011-01-14T11:06:00.000-08:00

During last Thursday it was possible to send your entry to the Mozilla GameOn 2010 Competition. There were more than 160 games submitted, but some of them was disqualified because of using 'non open' technologies like flash or Unity. Finally, there are 124 chosen titles in the gallery. Checking almost every game I found couple of technologies, libraries, plugins, frameworks or engines I've never heard of before, or just forgot about. Some of them are worth describing in here. First of all I totally forgot about HTML5 Boilerplate, an "HTML/CSS/JS template for a fast, robust and future-proof site", used in Snake game [MGO2010]. Another technically interesting entry was Black Obelisk [MGO2010], written completely in haXe, opensource programming language with ability to compile to Javascript, Flash, NekoVM bytecode, PHP, C++ and C# or Java in the near future. Couple of games was written in Java with cross-compiled JavaScript presentation layer using GWT, eg SVG-EDU [MGO2010] or Zulu [MGO2010]. Main reason people used Flash in their games was enabling sound effects (like Sinuous [MGO2010], the winner of 10kApart). But Wizard Wars [MGO2010] used SoundManager2 to achieve same effect. Mad Tanks TD [MGO2010], one of my personal favorites in the competition, uses LESS, which "extends CSS with variables, mixins, operations and nested rules". Looks cool! (both, the game and the compiler:) ). I was impressed with amount of WebGL based games. In Red shooting Hood [MGO2010], made by Tymon Zgaiński from Poland, member of polish gameDev community Warsztat, I found Sylvester, "Vector and Matrix math for JavaScript". Open web implementation of simple and well known Frogger [MGO2010] was compiled to Javascript & canvas using Ristretto Mobile, "a Web-based Compiler for Running Interactive Games and Simulations". My own entry, OpenOdyssey [MGO2010]was made simultaneous with Mibbu framework and is based on it. I'm not satisfied with the final result, but I will develop both after the competition. If I will find some free time during the weekend I will write few words about OO & Mibbu.

Facebook Hackers Cup eliminations

2011-01-12T17:23:00.000-08:00

Last weekend I was participating in the elimination part of Facebook Hacker Cup. There were three problems to solve and it was obligatory to finish at least one. Since it was last weekend before Mozilla GameOn 2010 deadline, I had no time for solving academical, non-real life, algorithmic problems I was always poor in. So I just took a look to the first one [mirror]. It looked quite easy, and in couple of minutes I had kind of prototype algorithm implemented in pure Javascript. Main idea of the problem was that the biggest number which square could be part of the input, cannot be bigger than square root of the input divided by two. So I simply iterate from 1 to that max, and in each iteration I checked square root of input number reduced by square of 'i'. If it was integer, we have sum of two squares. If float, we haven't. Piece of cake:). My Javascript implemetation in Rhino (as I described before):

var check = function(input) {
    var result = 0,
        max = Math.sqrt(input/2);

    if(Math.sqrt(input)%1==0) {
        result++;
    }

    for(i=1;i <= max;i++) {
        if(Math.sqrt((input-Math.pow(i, 2)))%1==0) {
            result++;
        }
    }
    return result;
}

var MainFunction = function(args) {
    var a = readFile(args).split("\n");

    for (var i=1, j=a.length;i < j ;i++) {
        print(check(a[i]));
    }
}(arguments);

JavaScript from command line - standard input & output

2011-01-07T14:34:00.000-08:00

As you could already know from Mr. C's lectures from YUI Theater or FrontTrends - standard I/O is the worst thing programming languages could ever implement. Fortunately - Javascript has no input at all. And in most cases it doesn't need any - it was designed as script language for web pages. But nowadays we use Javascript in any other aspects of our programming life - we can build for desktops using XUL, server-side tools like node.js (for example with announced last week JSPP) or any other Server-side Javascript implemenation provide JS backend for the web, native mobile apps could be created using frameworks like Phonegap. So what about executing JS scripts from command line? And why do we need it?
The reason I've refreshed my experiences with JS scripts executing was Hacker Cup organized by Facebook - there are no language restrictions in there, your scripts just has to know how to analyze given input and write the answers on the standard output. It is quite unpopular way of using & writing Javascript, so I will show few tips of command line in here.

Engines
There is such a JavaScript engine called Rhino. It is completely written in Java, open source, and very easy to use. It is managed by Mozilla, so you can find a lot of docs and tutorials on Mozilla's page.
Rhino has few additional functions eg for working with files (readFile()) or serializing objects (serialize()), which makes it useful in solving algorithmic problems in competitions like FBHC. Full list of all shell function can be found on Mozilla's page.
Each time you run Javascript scripts from command line, all the arguments you provide will be stored in global variable called 'arguments'. Enriched with this knowledge we can begin with some examples. This is my implementation of binarySearch algorithm:

Array.prototype.binSearch = function(element) {
    var element = parseInt(element, 10), 
        left = 0,  
        right = this.length-1,
        middle = ~~((left+right)/2),
        lastMiddle;

    while (parseInt(this[middle], 10) !== element) {
    
        if (lastMiddle === middle) {
            return null; //nothing found, break
        }
        
        if (parseInt(this[middle], 10) < element)
            left = middle++;
        else 
            right = middle--;
        
        lastMiddle = middle;
        middle = Math.round((left+right)/2); 
    }        
    return middle; //index of found element 
}


var MainFunction = function(args) {

    var a = readFile(args).split("\n"),
        arrayElement = a[0].split(" "),
        result;
    
   
    print("Array: "+arrayElement);
    
    for (var i=1, j=a.length;i < j;i++) {
        result = arrayElement.binSearch(a[i]);
        if (result) 
            print("Element "+parseInt(a[i], 10)+" in on position nr "+result);
        else 
            print("Element "+parseInt(a[i], 10)+" cannot be found in the array");
    }

}(arguments)

As an input it takes filename with the elements of an array in first row and elements to find in that array in next rows, like this:

4 10 12 19 25 34 41 50 52 61 66 68 76 81 82 85 94 97 105 112 115 124 128 138 139 230 321 432 456 540 
61
82
94
2
10
4
24
432

Assuming that script file is called binSearch.js, data.txt is the file with input data, and both are in the same directory as Rhino, to run the script simply type

java -jar js.jar binSearch.js data.txt

IdeoneYou can simply achieve the same effect using online tools\, without installing anything on your computer. Ideone, online IDE & debugging tool allows you to run your scripts using Rhino or SpiderMonkey, another Mozilla's JS engine, this one written in C. You can edit your scripts in realtime and provide different inputs on every run.Good luck in FBHC!

iPad etc.

2010-12-22T14:59:00.000-08:00

Today I had my first touch with most hated mobile device ever - Apple iPad. I won internal contest organized by my employer, GG Network. It was all about creating application using new API of GG social site. If someone is interested - public edition of the competition end on 31 of December and you can win 30.000PLN (about 10000$). In week, maybe two I will write something more about the API and publishing apps on GG.pl (it has more than 10 millions of users and just about 50 apps so far - best way for promoting your apps).

There were thousands of iPad's reviews all over the web, so I want to write one single sentence from gamedeveloper's point of view. Porting one of my Javascript game to run on the device took me about 7 minutes - I add simple code for screen size detection, now it is possible to run 'Zombie Eliminator' in any browser, without resolution issues. It is the biggest advantage of Javascript programming - it will run on different platforms out of the box. When I will finish my Game On entry I will try to write something more about iPad gamedev.

Oh, and my new game is available in SamsungApps since yesterday - tetris-like logic puzzle with jewels - try it here.

Using css3 transformations for sprite animation

2010-11-12T13:20:00.000-08:00

Inspired by Kamil Trebunia's speech on FrontTrends so as "Practical HTML5" presentation by Jeremy Orlow & Malte Ubl on Google Developer Day in Munich two days ago, I decide to test if using transformations provided by CSS3 really improves performance of JavaScript games for mobile devices. Kamil said about fastest page redrawing using translate instead of position absolute & top/left attributes. Google guys presented css3 transformations with hardware acceleration. It looks nice so I made a little performance test.
I create simple 'Frames per seconds' counter and run it with 100 animated sprites, each with 4 frames (actually every sprite has 8 frames, but I used only 4 of them) and random movement. The sprites were penguins drawn by me some time ago, based on Antarctic Adventures for NES (one of my favorite games back in '90). I made three tests on my Samsung bada - one using canvas for rendering everything, second one with 'Div with overflow:hidden' method I described in one of the latest posts, and the third one similar to 2nd, but with css3 translation instead of top/left changes. The result was quite surprising - classical DOM manipulation animation had 11-12fps, Css3 transition method reached 10-13fps, and canvas rendering about 27fps. I know that there is wrong way of thinking somewhere, but I have no idea what exactly goes wrong. Any suggestions? You can find the source on my github account: [michalbe]

Front Trends 2010 in a few words - 2nd day

2010-10-23T06:04:00.000-07:00

First day of FT2010 was described [here]. Now let me share my experiences from the second one.

First speech of the second day of Front Trends was opened by Jake Archibald. It was all about designing and creating flexible APIs. We learned that API needs to be designed before any code is written - otherwise young boys will watch movies about cocks with their mothers. Also - good API is like Patrick Stewart (who hates PHP) and most of the world's problems are caused by Java. Jake discussed also different use cases of typical API on the example of creating the carousel element on the web page. It was one of the most interesting presentations during the FT - both in terms of content and form. Great job! [watch it here]

Another lecture was prepared by Christian Johansen. He presented the idea of Test Driven Development using Live Search jQuery plugin as an example. There was a bit of theory and a lot of live coding.

I was really looking forward for the PhoneGap speech by Kamil Trebunia, former employee of Nokia. He started with advantages of cross-device development and presented basic aspects of creating applications using HTML5 techniques. Then showed crossmobile tools like Phonegap or Titanium Mobile with their pros & cons. After discussing jQuery Mobile and Sencha Touch as examples of JS mobile frameworks Kamil shows few hacks and tricks for performance boost, like optimizing reflows (using CSS3 transformations instead of changing absolute style attributes like positions or margins, etc.). After the speech we had nice talk about future of cross mobile development together with Markus Leutwyler and one Wikipedia guy from Italy, unfortunately I forgot his name.

Another very interesting speech was prepared by Professor of Mechanical Engineering from Dortmund University of Applied Sciences and Arts, Stefan Gössner. He began his speech with the question - why not to use modified physics engines for games, like Box2d, in scientific simulations? And, in addition, why not to make it as a web application using Javascript & Canvas? Results of his work was amazing - prof. Stefan presented couple of real life examples of mechanical simulations, like solid body on a spring, typewriter or Mercedes Benz's wipers mechanism. Everything works smooth, fast and most importantly - it looked convincingly. Rest of the talk he was describing different representations of physics data like vectors, matrices etc., everything supported with performance tests.

Peter-Paul Koch, author of the well known Quirksmode.org was the last speaker at Front Trends. He was generally talking about the future of the mobile apps - about 10$ smartphones available worldwide in 2018, about ridiculous at least 41 App Stores, free HTML5 apps with paid content, shared via Bluetooth on wide variety of devices and systems. Ppk mentioned also some hypothetical javascript mobile browser's events, like onphonecall or oncompasspointnorth and gives examples of using them in real life applications. He also answered lot of questions about his vision of the mobile future and some less clever also ( - You think iPad is more mobile or desktop device? - Yes.).

Unfortunately I was not able to be present on all of the lectures - I regret the most "Mobile UX and current trends in mobile design" by Anthony Ribot. If there is any video from that one please publish it somewhere!

I would like to thank anyone I was talking with. Also organizers for that awesome event. And guys from PALM for my PRE phone (I hope so, it still stuck at customs:) ). It was exciting to meet first league of world's frontend developers not even leaving my own city. I hope I will feel the same after FalsyValues!

Front Trends 2010 in a few words

2010-10-21T12:40:00.000-07:00

First day of Front Trends conference is behind us now. First time ever so many JavaSript 'gurus' met in Poland. As the participant of this event I would like to write a few words about it.

Conference was opened by the organizers - Damian Wielgosik & Pawel Czerski. They said few words about the dreams, writing anonymous emails to famous people, and organizing conference from scratch. I respect Damian for everything he is making for Javascript community, but that part looks really bad. It was delayed, unprepared, and above all just uninteresting for the developers. Searching for #ft2010 on twitter just after it starts I could read a lot of comment like that.
But the worst part of the opening was short speech made by ZlapTaxi guy, who said at the beggining that if you want to make cross-mobile application you have to build huge team of Java, Objective-C, Symbian C, Cpp and God only knows what other developers (have you ever heard of PhoneGap? Oh, sorry, it was next presentation and it is so hard to read all that up to date stuff in the Internet). After explaining how to use his catch-a-taxi app and announcing a contest, he state that if you will find girl in Front Trends tshirt somewhere there, she could helps you order a taxi. So why he build that app for if there are girls to do this? Never mind.

First speech I was attending in was "You know webOS" by Markus Leutwyler. Markus presented webOs history, main tasks, and devices that webOS is running on (even kind of printer with that Os - sick!). After that he discussed basics of webOs development - Mojo framework, building and connecting Scenes & Controllers. He finished with few words about jailbreaking and rooting Palm devices, testing & packaging created apps. Everything was clear and nice (especially I like his pronunciation of the name "webOS", maybe it is Swiss accent or something, I'm not sure:) ), but if you ever create even one simple webOs application - you already know everything Markus was talking about. For sure - if I hadn't written anything on webOS before,I would start after this lecture!

In the second talk Robert Nyman showed us main features of HTML5. He said a little about history of language, coercion, falsy values, video and audio elements and it's hacks, few words about webstorage and cookies and gives us nice example of FileAPI. Each comparison of 'old' methods and 'brand new HTML5' manner was served in funny, enjoyable way, with a lot of Forrest Gump or other pop culture references (Why Rachel from "the Friends" sitcom was sad after her boyfriend left her? Because she needs closure!)

Andrea Giammarchi a.k.a. WebReflection prepared nice speech about Javascript performance on different devices. He showed us couple of performance tests and explained each one. As the summary of the talk he state that if you want you app to run fastest as possible you have to create it for given browser and use browser-specific hacks for performance boost. Check Andrea's blog for more details.

Before the lecture of Kyle Simpson I was wondering, what is that all Javascript Middle-end stuff about. He explained everything using nice, simple slides and charts in about a half of his time. Starting from traditional MVC architecture (the "boring" one) he presents new Clients Views Controllers architecture in which all the logic made in the templates before, is now moved to the middle-end layer. In this manner of creating web applications there are no single condition or equation in the templates. Sounds great. Next he showed sources of his Shortie.me page build using his Bikechain.js - minimal server-side JavaScript wrapper environment.

Last speech for today was prepared by Douglas Crockford. I must say that I was a little bit disappointed - I've already seen this! His "Javascript server-side" lecture was modified version of his Loopage presentation from YUI Theater. Yes, I know - that is all my false - I watch every Crockford's video available on the Internet.
Undeniably - the best part of today's event was Panel Discussion with Tantek Celik, Peter-Paul Koch & Mr Crockford. It was more than one and a half hour of pure Javascript discussion, so it is impossible to quote everything. Most interested things I've learned from the panel:
- differences between API's and implementations are consequence of using technology before specification is finished,
- Flash took place in the web market because HTML was not able to make awesome things. Now it is, so we have to forget about Flash,
- web developers are the most stupid and the laziest people ever
- people are watching so much porn that they have to download JS libraries each time they visit site that is using it:)
- and if you want to be good JS developer you must use js frameworks and you couldn't use it simultaneously.

Tomorrow second day. I'm really looking forward for it!

UPDATE: read next part [here]

Four methods of Javascript animation

2010-10-15T10:44:00.000-07:00

Quoting Wikipedia:

Animation is the rapid display of a sequence of images in order to create an illusion of movement.

There are few methods to achieve that effect in JS, and I will discuss four of them in here.

1. Canvas animation
I used canvas animation in my Javascript game tutorial, but let's describe it once again. As an example, I will animate jump frames from my very favorite game days ago, Prince of Persia, you can find it on the right side of the post.
Before stating any animation related stuff it's necessarily to define few variables common for all four methods. Let's do this:

var width = 100,
    height = 86,
    frames = 10, 
//our PoP jumping animation has 11 frames, but we count from 0
    
    actualFrame = 0,
       
    posX = 100,
    posY = 100,
//X & Y position of the element

    canvas = document.createElement('canvas'),
//'canvas' variable will be always main element of an animation, not always

To animate our character we need just to display next frames of the jump on the canvas. It's not necessarily to clear whole surface each time in this particular case, because it has the same size as single frame. The draw function will looks like that:

var draw = function(){
    ctx.drawImage(image, 0, height * actualFrame, width, height, 0, 0, width, height);
//the attributes are: image to draw, X coord of the source image, Y coord of the source image, width & height of the cut piece (frame size), X & Y destination coords (our canvas) and destination frame size (not always the same as the source one, eg in case of scaling the frame)

    if (actualFrame == frames) {
        actualFrame = 0;
    } else {
        actualFrame++;
    }
//looping the frames, it is also the common part of all draw() function in this post
}

So that is the first method of JavaScript animation.
Pros:
- it uses canvas (the future of HTML5 games)
- it's possible to scale, rotate, flip, etc. the frames in browsers that support canvas but no CSS3
- probably much more

Cons:
- need to clear whole canvas to draw another frame
- not supported in old browsers
- quite complex math for display single frame

Life example: [1. Canvas Animation]

2. Background looping
I think it was one of the firstmethods of sprite's animation in web browsers. It is the simplest way ever. Just create div element with background, and change backgroundPosition on each frame. Piece of cake. Try:

var canvas = document.createElement('div'),
//div element is now our 'canvas'
    canvasStyle = canvas.style;
    
    canvasStyle.backgroundImage = "url(sprite.jpg)";
//and our image is just it's background
    canvasStyle.position = "absolute";
    canvasStyle.top = posX;
    canvasStyle.left = posY;

    canvasStyle.width = width;
    canvasStyle.height = height;
//width & height are now assigned to the 'style', not directly to the element
    document.body.appendChild(canvas);
    
var draw = function(){
    canvasStyle.backgroundPosition = "0 -"+height * actualFrame;
//each frame background image moves up, that's why there is minus sign before the value, you can multiply (height * actualFrame) by negative one, it gives the same effect
(...) //here goes frame changing logic from the 1st example
}

Pros:
- simplicity
- works everywhere

Cons:
- not possible to scale, rotate, etc. without CSS3

Example: [2. Background looping animation]

3. Clip-rect method
Hmm, but what when we wan't our game to run on full screen, or on different devices with various resolutions? Changing size of the div from second example gives nothing, just looks ugly. So this is where I introduce clip:rec(), Css attribute of img element. Quoting W3schools:

The clip property lets you specify the dimensions of an absolutely positioned element that should be visible, and the element is clipped into this shape.

Let's try:

var canvas = document.createElement('img'),
//image is not the canvas
    canvasStyle = canvas.style;
    
    canvas.src = 'sprite.jpg';
(...)//rest of the attributes
var draw = function(){
    var frameTop = height * actualFrame, 
        frameLeft = 0, 
        frameRight = width, 
        frameBottom = frameTop + height;
//a little math here for each frame
                                 
    canvasStyle.clip = "rect("
        +frameTop +"px " //top
        +frameRight +"px " //right
        +frameBottom +"px " //bottom
        +frameLeft +"px )"; //left
                                      
    canvasStyle.top = posY - height * actualFrame;
//IMPORTANT: even if we crop piece of source image, it's top & left attrs dont change - it's necessarily to move it to the fixed position. That's what I made above.

Pros:
- only one element needed (just img)
- possibility of scaling without CSS3
- crossbrowser

Cons:
- not possible to rotate, flip, etc
- very lot of math needed on each move/frame changing.

Example: [3. Clip-rect method]

4. Div with overflow:hidden
The last way of animation I want to present is simplest than 3rd one, better than 2nd, and doesn't use canvas. The whole philosophy is to create one div element with image inside, display only part visible in div, and move the image in proper way. Like this:

var canvas = document.createElement('div'),
    canvasStyle = canvas.style,
    image = document.createElement('img'),
    imageStyle = image.style;
    
    image.src = 'sprite.jpg';
//div is the 'canvas' now, but it has an image inside
    
    canvasStyle.position = imageStyle.position = "absolute";
    canvasStyle.top = posX;
    canvasStyle.left = posY;
    canvasStyle.overflow = "hidden";
//that is very important
    canvasStyle.width = width;
    canvasStyle.height = height;
    
    imageStyle.top = 0;
    imageStyle.left = 0;
    canvas.appendChild(image);
    document.body.appendChild(canvas);
//put image in the canvas/div and add it all to the body of the document.    
var draw = function(){
                                 
    imageStyle.top = -1*height * actualFrame;
//as in the 3rd example - direction of the move must be negative. Otherwise animation will be played backwards   
    if (actualFrame == frames) {
        actualFrame = 0;
    }
    else {
        actualFrame++;
    }
    
}

Pros:
- possibility of scaling without CSS3
- crossbrowser
- much simpler than clip:rect()

Cons:
- not possible to rotate, flip, etc
- two elements needed (img & div)

Example: [4. Div with overflow:hidden]

Changing size of animated elements is very important in gamedev. So as simplicity. That's why in my new JS game engine I will implement both, canvas and overflow:hidden methods. You can find all the sources on my GitHub account: [Javascript animation]

Tutorial: Simple game with HTML5 Canvas - part 5

2010-09-30T03:29:00.000-07:00

Tutorial: Simple game with HTML5 Canvas
Part 1 - Introduction & Background
Part 2 - Character & Animation
Part 3 - Physics & Controls
Part 4 - Platforms & Collisions
Part 5 - Scrolling & Game States

First of all I want to thanks for the responses to my tutorial, all the comments, emails and tweets I receive. It's an awesome feeling - to be aware that someone is reading all that stuff and even likes it. Oh, and don't forget to follow me on Twitter - http://twitter.com/michalbe.

Part 5a. SCROLLING & POINTS
During the last lesson we teach our angel how to use platforms. Now let him jump higher than screen height. To obtain that we need to use trick as old as platform games - stop the character in one place and move everything else in opposite direction. In our example angel will stop in the middle of the screen and rest of the speed will move background and platforms down. Let's modify checkJump() method of the player:

(...)
that.checkJump = function() {     
    if (that.Y > height*0.4) {
//if player is under about half of the screen - let him move
        that.setPosition(that.X, that.Y - that.jumpSpeed);        
    } else {
//in other dont move player up, move platforms and circles down instead
        MoveCircles(that.jumpSpeed * 0.5); 
//clouds are in the background, further than platforms and player, so we will move it with half speed
        
        platforms.forEach(function(platform, ind){
            platform.y += that.jumpSpeed;

            if (platform.y > height) {
//if platform moves outside the screen, we will generate another one on the top
                var type = ~~(Math.random() * 5);
                if (type == 0) 
                    type = 1;
                else 
                    type = 0;
                platforms[ind] = new Platform(Math.random() * (width - platformWidth), platform.y - height, type);
            }
        });
    }
    
    
    that.jumpSpeed--;
    if (that.jumpSpeed == 0) {
        that.isJumping = false;
        that.isFalling = true;
        that.fallSpeed = 1;
    }

}

When the platform moves outside the screen we will generates another one on the top, but not directly on 0-y, because we need to keep the distance between the platforms. So first we calculate how far it goes under the bottom, subtract hat value from total height and generate platform on that Y with random X. Yes, I know that it will show up suddenly in the middle of the screen, but while whole attention of the player is focused on the character, no one will notice that.
Ok, it is possible now to jump as high as we want, but there are still couple of things to fix, eg difficulty level.
To make everything harder let's give movement ability to some platforms. The higher your character will be, the faster platforms will move. To achieve this, first we will implement very simple points system, and after that modify a little Platform object and GameLoop() part responsible for drawing platforms.

var width = 320, 
    height = 500,
    gLoop,
    points = 0,
//adding points to global variables
(...)

var Platform = function(x, y, type){
(...)
    that.isMoving = ~~(Math.random() * 2);
//first, let's check if platform will be able to move (1) or not (0)
    that.direction= ~~(Math.random() * 2) ? -1 : 1;
//and then in which direction
(...)
}

var GameLoop = function(){
    clear();
    DrawCircles();

    if (player.isJumping) player.checkJump();
    if (player.isFalling) player.checkFall();
 
    player.draw();
//moving player.draw() above drawing platforms will draw player before, so platforms will be drawn over him. It looks better that way because sometimes angel 'sinks' in the platform with his legs.

    platforms.forEach(function(platform, index){
        if (platform.isMoving) {
//if platform is able to move
            if (platform.x < 0) {
//and if is on the end of the screen
                platform.direction = 1;
            } else if (platform.x > width - platformWidth) {
                platform.direction = -1;
//switch direction and start moving in the opposite direction
            }
            platform.x += platform.direction * (index / 2) * ~~(points / 100);
//with speed dependent on the index in platforms[] array (to avoid moving all the displayed platforms with the same speed, it looks ugly) and number of points
        }
        platform.draw();
    });

Increasing points should be implement in player.checkJump(), after checking if player is in the middle of the screen:

that.checkJump = function() {
    if (that.Y > height*0.4) {
        that.setPosition(that.X, that.Y - that.jumpSpeed);        
    } else {
        if (that.jumpSpeed > 10) points++; //here!
        MoveCircles(that.jumpSpeed * 0.5);
(...)

When everything is already drawn we could render GUI on the top of everything. So add in GameLoop(), just before calling another frame:

ctx.fillStyle = "Black";
//change active color to black
ctx.fillText("POINTS:" + points, 10, height-10);
//and add text in the left-bottom corner of the canvas

Part 5b. GAME STATES
Everything works cool, but it is not possible to lose. In case we use setTimeout() instead of setInterval(), we need to create boolean variable with game state. It will be 'true' during the game and 'false' when game ends. It is nice to prepare also some GameOver screen. Let's start with adding new variables and modifying GameLoop().

var width = 320, 
    height = 500,
    gLoop,
    points = 0,
    state = true,
(...)

var GameLoop = function(){
(...)
//go to another frame only when state is true
    if (state)
        gLoop = setTimeout(GameLoop, 1000 / 50);
(...)
}

//GameOver screen
var GameOver = function(){
    state = false;
//set state to false
    clearTimeout(gLoop);
//stop calling another frame
    setTimeout(function(){
//wait for already called frames to be drawn and then clear everything and render text
        clear(); 
        ctx.fillStyle = "Black";
        ctx.font = "10pt Arial";
        ctx.fillText("GAME OVER", width / 2 - 60, height / 2 - 50);
        ctx.fillText("YOUR RESULT:" + points, width / 2 - 60, height / 2 - 30);
    }, 100);
};

Now we must determine when to stop the game and display GameOver Screen. We need to modify player's checkfall() method

that.checkFall = function(){
    if (that.Y < height - that.height) {
        that.setPosition(that.X, that.Y + that.fallSpeed);
        that.fallSpeed++;
    } else {
        if (points == 0) 
//allow player to step on the floor at he beginning of the game
            that.fallStop();
        else 
            GameOver();
    }
}

And that's all! Thank you one more time for your time. I'm waiting for questions and ideas of improvement so feel free to ask/write. As usual: - sources on github Simple game with HTML5 Canvas- and working example on jsbin: Simple game with HTML5 CanvasTutorial: Simple game with HTML5 CanvasPart 1 - Introduction & BackgroundPart 2 - Character & AnimationPart 3 - Physics & ControlsPart 4 - Platforms & CollisionsPart 5 - Scrolling & Game States

UPDATE
I would like to thanks anyone who found my Simple HTML5 canvas game tutorial useful. I receive a lot of emails, tweets, and couple of comments in here with a lot of positive feedback. I know also that some of you tried to create own games based on my tips. Below I put links to games I know about, I hope authors don't mind. If you also have leaned something from my tutorial, and created anything interesting with it, feel free to write me about that, I will put your link here also.

Tutorial: Simple game with HTML5 Canvas - part 4

2010-09-19T18:55:00.000-07:00

Tutorial: Simple game with HTML5 Canvas
Part 1 - Introduction & Background
Part 2 - Character & Animation
Part 3 - Physics & Controls
Part 4 - Platforms & Collisions
Part 5 - Scrolling & Game States

Part 4a. DRAWING THE PLATFORMS
There are two types of platforms our character is able to jump on - ordinary one (orange) and green one - trampoline, gives extra speer and hyper-ultra-high jump. There are always seven platforms on the screen at the time (I tried different number, from 4 to 10 and only 7 works fine with screen size I declare at the beginning). Let's create Platform "class" (function platforms will inherit from).

var Platform = function(x, y, type){
//function takes position and platform type
var that=this;

that.firstColor = '#FF8C00';
that.secondColor = '#EEEE00';
that.onCollide = function(){
player.fallStop();
};
//if platform type is different than 1, set right color & collision function (in this case just call player's fallStop() method we defined last time
if (type === 1) {
//but if type is equal '1', set different color and set jumpSpeed to 50. After such an operation checkJump() method will takes substituted '50' instead of default '17' we set in jump().
that.firstColor = '#AADD00';
that.secondColor = '#698B22';
that.onCollide = function(){
player.fallStop();
player.jumpSpeed = 50;
};
}

that.x = ~~x;
that.y = y;
that.type = type;

return that;
};

Now it's necessary to create function which will generate all that platform stuff and put it into platforms[] array we will define shortly. After that it will be nice to draw the platforms on the screen.

var nrOfPlatforms = 7, 
platforms = [],
platformWidth = 70,
platformHeight = 20;
//global (so far) variables are not the best place for storing platform size information, but in case it will be needed to calculate collisions I put it here, not as a Platform attributes
var generatePlatforms = function(){
var position = 0, type;
//'position' is Y of the platform, to place it in quite similar intervals it starts from 0
for (var i = 0; i < nrOfPlatforms; i++) {
type = ~~(Math.random()*5);
if (type == 0) type = 1;
else type = 0;
//it's 5 times more possible to get 'ordinary' platform than 'super' one
platforms[i] = new Platform(Math.random()*(width-platformWidth),position,type);
//random X position
if (position < height - platformHeight) 
position += ~~(height / nrOfPlatforms);
}
//and Y position interval
}();
//we call that function only once, before game start

Extending Platform object with draw() method:

var Platform = function(x, y, type){
(...)
that.draw = function(){
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
//it's important to change transparency to '1' before drawing the platforms, in other case they acquire last set transparency in Google Chrome Browser, and because circles in background are semi-transparent it's good idea to fix it. I forgot about that in my 10kApart entry, I think because Firefox and Safari change it by default
var gradient = ctx.createRadialGradient(that.x + (platformWidth/2), that.y + (platformHeight/2), 5, that.x + (platformWidth/2), that.y + (platformHeight/2), 45);
gradient.addColorStop(0, that.firstColor);
gradient.addColorStop(1, that.secondColor);
ctx.fillStyle = gradient;
ctx.fillRect(that.x, that.y, platformWidth, platformHeight);
//drawing gradient inside rectangular platform
};

return that;
};

Platform must be drawn on each frame, so updating GameLoop() is a must.

var GameLoop = function(){
(...)
platforms.forEach(function(platform){
platform.draw();
});
(...)
};

Part 4b. COLLISIONSNice, but there is no interaction between angel and the platforms. But one little function will handle everything. Let me introduce checkCollision():

var checkCollision = function(){
platforms.forEach(function(e, ind){
//check every plaftorm
if (
(player.isFalling) && 
//only when player is falling
(player.X < e.x + platformWidth) && 
(player.X + player.width > e.x) && 
(player.Y + player.height > e.y) && 
(player.Y + player.height < e.y + platformHeight)
//and is directly over the platform
) {
e.onCollide();
}
})
}

Another update of main loop (it is good moment to comment line with MoveCircles() function - if platforms are standing still why background is falling down? It will makes more sense when we will implement platform scrolling. Whole GameLoop() function should looks like that now:

var GameLoop = function(){
clear();
//MoveCircles(5);
DrawCircles();

if (player.isJumping) player.checkJump();
if (player.isFalling) player.checkFall();

platforms.forEach(function(platform){
platform.draw();
});

checkCollision();

player.draw();
gLoop = setTimeout(GameLoop, 1000 / 50);
}

Final result: [platforms & collisions demo]Source: [MichalBe Github]I think next part will be the last one, but who knows:).

Tutorial: Simple game with HTML5 Canvas
Part 1 - Introduction & Background
Part 2 - Character & Animation
Part 3 - Physics & Controls
Part 4 - Platforms & Collisions
Part 5 - Scrolling & Game States

Samsung approval and Thai fonts

2010-09-17T03:51:00.000-07:00

Is it really impossible for Thai people to read their alphabet when some single gaps will be filled in? Latin alphabet I use every day has evolved through the ages in countless different fonts and shapes, from handwriting, Gothic fonts, print characters, to graffiti. And I'm able to read all of them, just like most people in the world. So why people of Thailand couldn't understand single word when I use custom font with filled gaps? Or maybe that is just another odd invention of Samsung testers? My Zombie Eliminator was removed from Thai Samsung Apps Catalog because, as they said, "Font is not good in Thailand". Why you couldn't understand this ('original' word above, and red mark on the screenshot made by Samsung Content Inspector):
...when Latin alphabet is totally understandable for me and rest of the world, even with filled gaps (like 'o' or 'p'):

Tutorial: Simple game with HTML5 Canvas - part 3

2010-09-16T09:56:00.001-07:00

Tutorial: Simple game with HTML5 Canvas
Part 1 - Introduction & Background
Part 2 - Character & Animation
Part 3 - Physics & Controls
Part 4 - Platforms & Collisions
Part 5 - Scrolling & Game States

Part 3a. PHYSICS
Because physics in StH is very simple, there is no need to include any Physics Engine such as Box2d. Jumping is so uncomplicated that it is possible to implement it just in few code lines.
Let's divide it into two unrelated parts - jumping and falling. When object start to jump, it has some initial velocity, deceased by gravity. It phase ends when that velocity is completely reduced and gravity starts to attract object down with increasing force. That is the second part of the jump - falling. To teach angel how to behave in such situations, let's expand player object with few more attributes:

var player = new (function(){
var that = this;
that.image = new Image();
(...)

//new attributes
that.isJumping = false;
that.isFalling = false;
//state of the object described by bool variables - is it rising or falling?

that.jumpSpeed = 0;
that.fallSpeed = 0;
//each - jumping & falling should have its speed values

(...) //rest of the code
})();

Now lets introduce methods responsible for jumping. Further expanding of player object:

that.jump = function() {
//initiation of the jump
if (!that.isJumping && !that.isFalling) {
//if objects isn't currently jumping or falling (preventing of 'double jumps', or bouncing from the air
that.fallSpeed = 0;
that.isJumping = true;
that.jumpSpeed = 17;
// initial velocity
}
}

that.checkJump = function() {
//when 'jumping' action was initiated by jump() method, initiative is taken by this one.
that.setPosition(that.X, that.Y - that.jumpSpeed);
//move object by number of pixels equal to current value of 'jumpSpeed'
that.jumpSpeed--;
//and decease it (simulation of gravity)
if (that.jumpSpeed == 0) {
//start to falling, similar to jump() function
that.isJumping = false;
that.isFalling = true;
that.fallSpeed = 1;
}

}

that.checkFall = function(){
//same situation as in checkJump()
if (that.Y < height - that.height) {
//check if the object meets the bottom of the screen, if not just change the position and increase fallSpeed (simulation of gravity acceleration)...
that.setPosition(that.X, that.Y + that.fallSpeed);
that.fallSpeed++;
} else {
//..if yes - bounce
that.fallStop();
}
}

that.fallStop = function(){
//stop falling, start jumping again
that.isFalling = false;
that.fallSpeed = 0;
that.jump();    
}

It's necessarily to update main loop function to redraw player's position while jumping and falling. Update GameLoop() with this code, just before drawing the character:

if (player.isJumping) player.checkJump();
if (player.isFalling) player.checkFall();

I think above code is clear enough to understand. Last action we have to take with all that physics stuff is simply initiation of the first jump, right after placing player on the stage.

player.setPosition(~~((width-player.width)/2), ~~((height - player.height)/2));
player.jump(); //here

Ok, it's jumping beautifully, piece of awesome pseudo-physics code. Now let's make some controls. Part 3b. CONTROLLSMain character of StH can move sideways only. It jumps automatically, up/down movement depends of platforms. User can only command angel to move left or right. One more time it could be achieved by with extension player object with additional methods.

var player = new(function(){
(...)
that.moveLeft = function(){
if (that.X > 0) {
//check whether the object is inside the screen
that.setPosition(that.X - 5, that.Y);
}
}

that.moveRight = function(){
if (that.X + that.width < width) {
//check whether the object is inside the screen
that.setPosition(that.X + 5, that.Y);
}
}
(...)
})();

Now bind that functions to the mouse pointer position (angel will follow it).

document.onmousemove = function(e){
if (player.X + c.offsetLeft > e.pageX) {
//if mouse is on the left side of the player.
player.moveLeft();
} else if (player.X + c.offsetLeft < e.pageX) {
//or on right?
player.moveRight();
}
}

It's everything for today. In next episode I will introduce platform drawing and collisions. As usual:[demo with jumping & controls] [source in GitHub repo]

Tutorial: Simple game with HTML5 Canvas
Part 1 - Introduction & Background
Part 2 - Character & Animation
Part 3 - Physics & Controls
Part 4 - Platforms & Collisions
Part 5 - Scrolling & Game States

Tutorial: Simple game with HTML5 Canvas - part 2

2010-09-11T15:07:00.000-07:00

Tutorial: Simple game with HTML5 Canvas
Part 1 - Introduction & Background
Part 2 - Character & Animation
Part 3 - Physics & Controls
Part 4 - Platforms & Collisions
Part 5 - Scrolling & Game States

Part 2. CHARACTER
It is time now to add main character to the awesome background created in the last part. In StH it was cute little angel with simple wing flapping animation in just two frames, saved in .png with transparent background. Exactly like this one:Let's create object representing main character with all necessarily methods and attributes. I will call it 'player'. The way of creating objects I present here is not the best one, all the attributes are visible from outside the object, there is no privacy at all. But that was simplest and shortest solution I was able to implement to fit 10KB, and most importantly - it works. If you want to know how to define proper objects with private attributes, inheritance, etc. read about Javascript Closures. Also it's important to remember, when you want to shrink your code with tools like Closure Compiler, that names of object's arguments won't change. That why in original code I use 2 letters shortcuts for describing player object, like 'player.im' instead of 'player.image', etc. SO, the object:

var player = new (function(){
//create new object based on function and assign 
//what it returns to the 'player' variable

    var that = this;
//'that' will be the context now

//attributes
    that.image = new Image();
    that.image.src = "angel.png";
//create new Image and set it's source to the 
//'angel.png' image I upload above

    that.width = 65;
//width of the single frame
    that.height = 95;
//height of the single frame

    that.X = 0;
    that.Y = 0;
//X&Y position

//methods 
    that.setPosition = function(x, y){
    that.X = x;
    that.Y = y;
}

    that.draw = function(){
        try {
            ctx.drawImage(that.image, 0, 0, that.width, that.height, that.X, that.Y, that.width, that.height);
//cutting source image and pasting it into destination one, drawImage(Image Object, source X, source Y, source Width, source Height, destination X (X position), destination Y (Y position), Destination width, Destination height)
        } catch (e) {
//sometimes, if character's image is too big and will not load until the drawing of the first frame, Javascript will throws error and stop executing everything. To avoid this we have to catch an error and retry painting in another frame. It is invisible for the user with 50 frames per second.
        }
    }
})();
//we immediately execute the function above and 
//assign its result to the 'player' variable
//as a new object 

player.setPosition(~~((width-player.width)/2),  ~~((height - player.height)/2));
//our character is ready, let's move it 
//to the center of the screen,
//'~~' returns nearest lower integer from
//given float, equivalent of Math.floor()

Ok, so now the angel needs to be redrawn on each frame. GameLoop() will be updated with player.draw() function:

var GameLoop = function(){
    clear();
    MoveCircles(5);
    DrawCircles();
    player.draw();
    gLoop = setTimeout(GameLoop, 1000 / 50);
}

But what about animation? Angel sprite has 2 frames, but only one is redrawn on each frame. To make an animation, our player needs additional attributes and a little changes in draw() method.

var player = new (function(){
(...)
    that.frames = 1;
//number of frames indexed from zero
    that.actualFrame = 0;
//start from which frame
    that.interval = 0;
//we don't need to switch animation frame
//on each game loop, interval will helps
//with this.

    that.draw = function(){
        try {
            ctx.drawImage(that.image, 0, that.height * that.actualFrame, that.width, that.height, that.X, that.Y, that.width, that.height);
//3rd agument needs to be multiplied by number of frames, so on each loop different frame will be cut from the source image
        } catch (e) {};

        if (that.interval == 4 ) {
            if (that.actualFrame == that.frames) {
                that.actualFrame = 0;
            } else {
                that.actualFrame++;
            }
            that.interval = 0;
        }
    that.interval++;
//all that logic above just
//switch frames every 4 loops  
    }
})();

Thanks for your attention. As usual, you can find final result in here: [Simple game with HTML5 Canvas] and all the sources on my Github account: [MichalBe].

Tutorial: Simple game with HTML5 Canvas
Part 1 - Introduction & Background
Part 2 - Character & Animation
Part 3 - Physics & Controls
Part 4 - Platforms & Collisions
Part 5 - Scrolling & Game States

Tutorial: Simple game with HTML5 Canvas - part 1

2010-09-10T18:19:00.000-07:00

Check other language versions: [RUSSIAN]

Tutorial: Simple game with HTML5 Canvas
Part 1 - Introduction & Background
Part 2 - Character & Animation
Part 3 - Physics & Controls
Part 4 - Platforms & Collisions
Part 5 - Scrolling & Game States

If you are interested in news and updates of that tutorial just follow me on twitter: [MichalBe's Twitter]

Because 10KApart is closed now, and we are all waiting for the results, it is good time to remind my very simple "Stairs to heaven" game and explain in details how it was made.

INTRODUCTION
StH is very simple clone of Doodle Jump, but to be honest I was inspired by Icy Tower and discover DJ after I submit StH to the competition. Never mind.
The goal is to control little angel & jump on the two kinds of platforms - orange (regular ones) and green (super high jump springboards). The game ends when the angel falls down to the bottom of the screen. Try it: [Stairs to heaven].
I create that game in about 8hours and later, after playing more and more, I discover few bugs so in this tutorial I want to fix it all. Let's do it!

Part 1. BACKGROUND
Because whole game, including images and scripts, couldn't be over 10K, I didn't want to use image on the background. It was cheaper to draw some generic-like stuff using canvas drawing functions.
First of all we need little HTML, nothing special, just one canvas element with some unique id, little bit of CSS and include of not existing yet game.js:

<html>
  <head>
    <title>Simple game with HTML5 Canvas</title>
  <style>
  body {
    margin:0px;
    padding:0px;
    text-align:center;
  }

  canvas{
    outline:0;
    border:1px solid #000;
    margin-left: auto;
    margin-right: auto;
  }
  </style>
  </head>
  <body>
    <canvas id='c'></canvas>
    <script src="game.js"></script>
  </body>
</html>

That's all in HTML we will need during this tutorial.
Ok, so let's create some Javascript.
First of all we need to create few global (for now, I know that global = evil) variables & change canvas attributes. That will be enough:

var width = 320,
//width of the canvas
  height = 500,
//height of the canvas

  c = document.getElementById('c'), 
//canvas itself 

  ctx = c.getContext('2d');
//and two-dimensional graphic context of the
//canvas, the only one supported by all 
//browsers for now

c.width = width;
c.height = height;
//setting canvas size

First of all its important to understand one thing about canvas - it is not possible to move objects in the canvas surface. It's necessarily to clear it, whole or in the parts, on each frame. To achieve this, let's create clear() function.

var clear = function(){
  ctx.fillStyle = '#d0e7f9';
//set active color to #d0e... (nice blue)
//UPDATE - as 'Ped7g' noticed - using clearRect() in here is useless, we cover whole surface of the canvas with blue rectangle two lines below. I just forget to remove that line
//ctx.clearRect(0, 0, width, height);
//clear whole surface
  ctx.beginPath();
//start drawing
  ctx.rect(0, 0, width, height);
//draw rectangle from point (0, 0) to
//(width, height) covering whole canvas
  ctx.closePath();
//end drawing
  ctx.fill();
//fill rectangle with active
//color selected before
}

One colored clear background is boring as hell, so let's draw some clouds on it. Maybe not regular clouds, but simple, semitransparent circles imitating clouds. First we will draw some in random places of the canvas, each with different size and transparency. We will keep all the informations about circles in 2d array (there are no two-dimensional arrays in JS, best way to solve this is just put one Array into another).

var howManyCircles = 10, circles = [];

for (var i = 0; i < howManyCircles; i++) 
  circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]);
//add information about circles into
//the 'circles' Array. It is x & y positions, 
//radius from 0-100 and transparency 
//from 0-0.5 (0 is invisible, 1 no transparency)

var DrawCircles = function(){
  for (var i = 0; i < howManyCircles; i++) {
    ctx.fillStyle = 'rgba(255, 255, 255, ' + circles[i][3] + ')';
//white color with transparency in rgba
    ctx.beginPath();
    ctx.arc(circles[i][0], circles[i][1], circles[i][2], 0, Math.PI * 2, true);
//arc(x, y, radius, startAngle, endAngle, anticlockwise)
//circle has always PI*2 end angle
    ctx.closePath();
    ctx.fill();
  }
};

Nice, but boring less only a little. Why are the clouds standing still? Lets make a tiny little function with one Number type argument, which moves clouds down given number of pixels, and when particular circle disappears under the canvas, it will moves it on the top with changed position X, radius and transparency:

var MoveCircles = function(deltaY){
  for (var i = 0; i < howManyCircles; i++) {
    if (circles[i][1] - circles[i][2] > height) {
//the circle is under the screen so we change
//informations about it 
      circles[i][0] = Math.random() * width;
      circles[i][2] = Math.random() * 100;
      circles[i][1] = 0 - circles[i][2];
      circles[i][3] = Math.random() / 2;
    } else {
//move circle deltaY pixels down
      circles[i][1] += deltaY;
    }
  }
};

Now, last but not least, let's create main game loop and connect everything we create for now in there. Each frame will clear the screen, move circles 5px lower, draw them and after 1/50sec call another frame. I use two setTimeouts except one setInterval, but I'm not pretty sure why:). I know that there was some performance issues in IE back in the days or something.Also don't forget to add gLoop variable to that declared at the beginning.

var width = 320,  
//width of the canvas  
  height = 500,  
//height of the canvas  
  gLoop,
(...) //rest of the code goes here

var GameLoop = function(){
  clear();
  MoveCircles(5);
  DrawCircles();
  gLoop = setTimeout(GameLoop, 1000 / 50);
}
GameLoop();

According to Luis Giribone's comment below, I avoid Intervals and use Timeouts instead intentionally - Interval is called every 1000/fps seconds - even if the previous one disn't not finished yet. If you use Timeout, it will call another one only after previous was finished. I hope it is clear now.I also want to thanks Ped7g, author of Whiskas & Pedigree Javascript ad game for catching mistakes.Final result of that part should looks like this: [Simple game with HTML5 Canvas part 1], and sources are available on my Github account: [MichalBe]Tutorial: Simple game with HTML5 CanvasPart 1 - Introduction & BackgroundPart 2 - Character & AnimationPart 3 - Physics & ControlsPart 4 - Platforms & CollisionsPart 5 - Scrolling & Game States

Zombie Eliminator & Real Decision Ball on bada

2010-09-04T20:32:00.000-07:00

My Zombie Eliminator (first mobile game in 16 languages, available on Palm Pre & Pixi, Android & Samsung bada) was today on place 20. (out of near 1800) in 'top 50 paid apps' in Chinese Samsung Apps Store, 32. in Italian & Mexican, 44. in Australian and 46. in Turkish. I feel gently honored:).

And my other App, Real Decision Ball (also on Palm Pre & Pixi, Android & Samsung bada) is now number 3 in Mexican Market.

NodeKnockout - Massivetris

2010-08-31T13:21:00.000-07:00

Try my first node.js app ever - created in 48h Massive Multiplayer Online Tetris. Choose from one of 72 avatars and play with others in realtime. It works best in Safari or Chrome, in Firefox WebSockets are emulated by Flash Plugin (awesome Socket.IO feature). There are couple of bugs I'm aware of, but it is possible to play and have some fun. If you enjoyed, don't forget to vote (button in right-top corner).
Direct links to the game: [Massivetris] and to the [Team Site].

And here is the source: [Massivetris]

NodeKnockout timeline

2010-08-27T17:07:00.000-07:00

VirtualDesign team represented by single person of MichalBe.

02:03 CET
Ok, everything starts. I want to make some socket based experiments so unfortunately i have to deploy my project to Joyent, instead of Heroku (which I found much easier to use).

02:11 CET
I already create few aliases for faster pushing my files to both, github repo and Joyent. You can check my activity on Node Leaderboard, little 'virtual-design' dot somewhere in central europe.

02:32 CET
Serving static files from server is working fine now, based on Socket.IO-node examples.

03:01 CET
We survived first hour without unexpected accidents. I've never worked with Joyent before, and in project like that is important to fully understand environment you're working on. That's why I'm testing everything before implementation.

03:20 CET
First little pizza-break. By the way, did I mention that I love Tabasco?

05:58 CET
Through the window on my wall I can see first rays of the morning sun, and through that one on my desk I see first excellent working socket connection game prototype. Well, almost excellent. I have no idea why Safari behaves so weird.

06:22 CET
Ok, now it works great everywhere. I had strange feelings about Firefox sockets, but I hope it is just my eternal flash aversion and everything will be fine.

07:37 CET
According to the Leaderboard, virtual-design team is 5th in deployment size and numbers of deploys.

08:48 CET
I'm seriously sleepy now, one and only thing that gives me big energy shot for now is progress of my game - for now my Massive Multi-player Tetris is able to generate blocks (of course on the server side) for one user and send it using sockets. Next I will make a ToDo list, I suppose it could be helpful.

23:46 CET
Since last update I finish main game mechanics and sleep a little. I plan finish everything with code tonight, and spend the whole day tomorrow to create graphics etc.

08:31 CET, DAY 2
All the logic is now on the server side, client just send the orders (keyboard input) and render game-board sent by the server. I'm excited, everything works brilliant. Now I have to create better look for it, coz table with one-color filled fields is boring as hell (4 players in the game, each has different color):

09:37 CET, DAY 2
Uh, I'm not web designer though I know a few Photoshop tricks, I hope that will be enough. That's why I plan to spend whole day on the visual aspects of my game. What do you think about the name "Massivetris", like MMO tetris?

21:06 CET, DAY 2
I prepared 72 block's textures, some of them are old graphics from my games, some ale totally random, and I add also few Knockout's sponsors logos:). Choose your favorite and enjoy Massivetris!

NodeKnockout

2010-08-27T09:42:00.000-07:00

It is about 7 hours to the Node Knockout, last time for final preparations. Because I don't plan to sleep during that 48h, I prepare a lot of coffee and energy drinks as well as easy-to-eat stuff like frozen pizzas or fries. If it will be possible I will describe everything I will be working on here in near real time. Wish me luck!

Random array sort in Javascript

2010-08-21T09:03:00.001-07:00

There is such an array method called sort, which puts up the elements of an array in alphabetical order, changing it (without copying the whole array). Additionally, it takes also one function parameter for defining the order of elements. If it returns negative number, given elements will be switched, and when positive one, nothing will happen. So to sort an array in random order, it just need to return random numbers in -1 to 1 range.

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
a.sort(function(){ return Math.random()-0.5; }); 
//'a' is now something like 
//[9, 0, 2, 3, 4, 1, 8, 5, 6, 7]

From the other hand, it is only one week to the NodeKnockout. I'm really looking forward for this!

Detecting orientation change of mobile devices

2010-08-19T10:50:00.000-07:00

Couple of weeks ago I was asked by one of the biggest online games company to adapt several of my games for their new portal designed for mobile devices.
One of the most important thing in this venture was to disable orientation changing of the phone. Simplest way to check if it is in landscape or in portrait mode (in every device, because I know there are functions dedicated for Iphone and maybe some for Android also) is to check if height of the screen is bigger or lower than it's width.


function checkOrientation() {
    if (window.innerHeight > window.innerWidth) {
        //portrait mode
    } else if(window.innerHeight< window.innerWidth) {        //landscape mode
    }            
}

It's not possible to guess in which mode user enters the page (game in that case) so it's important to check it in the begging, and each time the browser's window resize.


        checkOrientation();
        window.onresize = function() { //your code
            checkOrientation();
        }

Try this link from your phone to test it, or just open it in desktop browser and change window size: LANDSCAPE VS PORTRAIT
I know it won't works in IE, but almost all of the mobile web browsers are based on WebKit.

Recursion of anonymous functions

2010-08-18T09:15:00.000-07:00

When I declare anonymous function, like


(function(){
    //do something...
})();

name of the function is not added to any scope, either local or global, because there is no name at all. When I want to call the function again, for example in timer functions like setTimeout(), I simply call arguments.callee inside it


(function(){
    //do something...
    setTimeout(arguments.callee, 1000);
})();

According to Mozilla Developers Center:

arguments.callee allows anonymous functions to refer to themselves, which is necessary for recursive anonymous functions.

"Stairs to heaven in 6,22KB" competition!

2010-08-03T19:30:00.000-07:00

Inspired by few videos posted in comments I would like to announce a little competition. Rules are as simple as possible: play my "StHi6,22KB" game, make a video from it (using your mobile, camera or just record part of your desktop using programs like CamStudio) with your result visible, upload it on any video-hosting site like Youtube or Vimeo and put the link in the comments on 10k Apart site (here) before 25 of August. I will prepare two truly unique "Stairs to heaven in 6,22KB" T-shirts - one for the owner of the best result and one for the randomly chosen participant (e.g. by 'true random numbers generator - random.org). So, good luck and I'm waiting for your videos!

My best try (of course it doesn't count):

10K Apart competition

2010-07-31T20:37:00.000-07:00

In the early '90, when I had my first contact with computers, I don't even heard about Cd-roms, or other freaky inventions like hard discs. I had 2 floppy stations, 3.5' and 5.25', with that 'bigger' (by size, no capacity) all the time busy with DOS disk, so everything I had was only 1.44MB. My favorite games then were Prince of Persia (yes, that one from top of this blog) and King's Quest (I finish it first time in my life after almost 18 years of playing, couple months ago on Sarien, online canvas versions of Sierra games).
Today I felt a gust of those days. 'An Event Apart' organized crazy web-app competition called 10K Apart with two main rules: total file size, including images, scripts and markup, must be under 10K and app must work in IE9, Firefox and WebKit browsers.
After about 8 hours of developing two games and bugfixing one annoying webportal simultaneously, let me introduce Stairs to heaven in 6,22KB.

Enjoy and don't forget to click '5 stars' on 10kA site:).

Adapting to newer devices

2010-07-20T15:05:00.000-07:00

After PRE, the next device introduced by PALM was called PIXI. It's one big mystery why newer, more complex and forward-looking device has smaller screen size than its predecessor. Nowadays, when mobiles has all the time more and more additional goodies, it's at least not really clever. But if we want to get to the widest audience our apps need to be flexible. Because I was anxious at the time, I chose the simplest way to run my Zombie Eliminator also on Pixi - I just make 80px height 'dead zone' on the bottom. It is visible on PRE and hidden on PIXI. Simple & working.
I recommend also nice art about Effective Design for Multiple Screen Sizes by Bryan Rieger at Mobi forge.

First touch with Palm Pre

2010-07-13T18:11:00.000-07:00

My 'Zombie Eliminator' is now ready to download for your PalmPre phone in official Palm App Catalog. Twelve levels of pure fun served in sixteen languages. Check it:

The "A Game By Its Cover" Competition

2010-07-07T15:26:00.000-07:00

On the end of June the new "A Game By Its Cover" Competition started on the TIGSource.

"A Game By Its Cover" is a game development competition based on how people's work inspires others to think in new and wonderful ways. In it we'll make real games out of fake game carts whose creators probably never imagined would become something real!

Because I like the idea, and I was looking for some simple project to test first options of my Javascript canvas-based game engine, you can watch progress of my "Real-time tree growing simulation" in this threat on TIGForums.

"Impossible is nothing" play-off

2010-06-01T18:50:00.000-07:00

Few hours before I want to send our game to Ovi challenge I read on the site that organizers gave us additional week for app polishing. I don't think it was necessary - my game was complete on Monday, about 7-8am. I will use my extra time to change it from WRT widget to Symbian app.
About an hour after the announcement I found something called Rhodes, but using of Ruby and that all 'Network synchronization' stuff effectively deterred me.
What I found next was PhoneGap. Quoting creators:

PhoneGap is an open source development framework for building cross-platform mobile apps. Build apps in HTML and JavaScript and still take advantage of core features in iPhone/iTouch, iPad, Google Android, Palm, Symbian and Blackberry SDKs

It was everything I need. It seems that it also supports Symbian. My first try was 'Get Started with Symbian (Qt)' part from the tutorial. I installed another tons of useless stuff (really - it was another 20GB to make it 'works').
I did my best but nothing seems to work properly or even close to. I googled thousands of different forums, blogs, tutorials and manuals with no result. I even try to search for my answers on Stack, where i found nothing. So I asked new question in there and few hours later I got the answer (from one of the phoneGap developers), from which i concluded that it simply doesn't work. Fine. So I had to write something on my own.

One of the methods that come to my mind was to render HTML/JS in simple browser-like application. It is possible for example using WebKit.
Tired of installing millions of plug-ins, libs, etc. I download Nokia SDK All in one Beta and start new 'Mobile QT Application' project in Qt Creator.I will explain later what to do if we want render our applications with WebKit, now I'm happy that it works fine. I made minor changes in the game, like control system (now there are no buttons, you simply tap the screen - character goes in direction of your tap. I will also try with accelerometer). Tomorrow I will test it on device and if everything will go well I will submit it to the challenge.

"Impossible is nothing" 9 : 2

2010-05-29T16:54:00.000-07:00

I decide not to show everything in here - it has to be a little mysterious and something must motivate you to play when the game will be finished:). What I want to say & show today, two days before the deadline, is very simple table based map editor I write in about 200LOC with simple DOM manipulation using 24 sewers tiles placed in one png file. It is easy and not so annoying to use, just watch the video below. Second part shows early location exiting/entering (it is already changed), Zombies AI, and better than yesterday connected map tiles.
I don't know if tomorrow I will have time to write something because of last corrections. Results will be announced on 3rd June, I have good feelings because it is my birthday, so keep your fingers crossed.

"Impossible is nothing" 8 : 3

2010-05-28T22:29:00.001-07:00

IAs I promised before, here is the simple few seconds long video with basic gameplay on uncut scenery tiles. I want to focus now on mechanics, not visual details (I will improve it tomorrow or during the day after).

There is no interaction with Zombies and no Survivors for now, that is my job for the next days.

"Impossible is nothing", first week off, 4 more days.

2010-05-27T19:19:00.000-07:00

Today I improved frame rate detection using Scott Porter's Gamelib javascript library, modified by Brent Silby. Now it keeps constant number of frames on each device, I don't have to calibrate engine when I want test it on Nokia's, and i gained beautiful loading screen for introductory splash graphics. I will write something more about the library later.
I also fix few bugs, change sprites for that prepared by Kuba and start to think about particular missions. Unfortunately because of deadline getting closer every second, we decide to make only 2-3 different 'levels' with 5-6 missions each. It seems to be enough for 10-days-created game:). Last but not least for today - meet our survivors:

"Impossible is nothing" 6th day - after the half-way point

2010-05-26T16:32:00.000-07:00

Okay, we have now only 5 more days to deadline so without unnecessary words let me introduce Mr. & Mrs. Zombie as a first gamesprites created by Kuba:
No more pandas:). Tomorrow I will try to record screencast from my emulator to show some gameplay details.

And continuing saint war between Flash-lovers and JavaScript developers - Thoughts on Flash directly from the Apple.

"Impossible is nothing" 5th day - six to go.

2010-05-25T19:15:00.000-07:00

Today I expand features of my Map editor. It's now ready for multiple type tiles and 'special' cells (like that which are teleporting you to given place when you stand on it).
As I planned I also add first enemies - for now colorful pandas instead of zombies. I gave them simple AI using which they will moving in the player's direction.
I also change my plans about placing enemies and items on the map. I have no time for that. Maps will be designed using map editor, but all element like zombies, pellets and other items will be placed using random techniques (and it will change every time you get out and get back to the screen - I think that makes game more interesting and 'a little bit frightening' - you never know what is around the corner). Check first 15 screens of game world in the editor's mode preview with one screen pasted directly from the game:
And yes, I have changed tiles from simple red/yellow because they 'irritated' my eyes:), but this is still not target graphics.

"Impossible is nothing" 4th day, Only a week more.

2010-05-24T18:36:00.000-07:00

After first tests on mobile device my game seems to work. I've done basic logic such as displaying player, simple map (with locations and moving between them) and player control - with collisions with the environment. Tomorrow i will work on enemies (finally, ZOMBIES!) and survivors. I want to finish engine in next two days and use rest of the time to build world, expanded with many locations and put final graphics on. I already found graphic designer with enough free time in that week to make some sprites and tiles - meet Kuba from HighColors. And meet first Zombie I've ever seen - 1st location guy from Resident Evil (it was 1996 on PSX)

And one technical aspect of designing tileset-based map movement. Let us consider map created from simple array with '0' as road and '1' in the role of wall, e.g.


map[0] = [];
map[0].push([0, 0, 1, 0, 0, 0, 0]); //0
map[0].push([0, 0, 1, 0, 0, 0, 0]);
map[0].push([0, 0, 1, 0, 1, 1, 0]); //2
map[0].push([0, 0, 0, 0, 0, 0, 0]);
map[0].push([0, 0, 1, 0, 1, 0, 0]); //4
map[0].push([0, 0, 1, 0, 1, 0, 0]);
map[0].push([1, 1, 1, 0, 1, 0, 0]); //6
map[0].push([0, 0, 0, 0, 1, 0, 0]);
map[0].push([1, 1, 1, 1, 1, 1, 1]); //8
map[0].push([0, 0, 0, 0, 0, 0, 0]);

Movement and collision detection are easy if we want our character just 'jump' from one cell to another. We need then simply calculate if destination tile is not '1'type (wall).


var x = (player.xPosition/tileSize) + deltaX, 
    //if we move along X axis deltaX is 1 or -1 and deltaY is 0
    y = (player.yPosition/tileSize) + deltaY; 
    //and vice versa in here

if (map[actualMapIndex][y][x] !== 1) {

       //move player

} else {
    displayFunnyWallHitAnimation();
}

It gets complicated when we want it to take smaller steps, what is necessary if we want animation. For example our player moves 9px each step in 50px big tile. Because DOM coords are calculated from top-left corner, we can observe case in which our character is moving 'on the wall', like that:

With yellow fields as roads, red walls & dark blue dot as sprite's 0,0. We can see that 0 point of the sprite is on the road but the sprite itself is traveling on the wall. So I got the idea of adding one more point to that, i call it x2, like that:


var x = ((player.xPosition+tileSize*0.2)/tileSize) + deltaX,
    x2 = ((player.xPosition+tileSize*0.8)/tileSize) + deltaX
    y = (player.yPosition / tileSize) + deltaY;

if (map[actualMapIndex][y][x] !== 1 && map[actualMapIndex][y][x2] !== 1) {

   //move player

} else {

    displayFunnyWallHitAnimation();

}

I add 1/5 size of the tile to the 0.0 point, and 4/5 for another one. It's because my sprite has a little free, transparent space from each size. In practice it looks like that:

And because of kind of isometric (or oblique) view I use ('will use', because it's hard to say about perspective if i have only semi-colored squares as background), i don't have to introduce additional point in Y-s. It looks good when character is standing in front of the wall like on screen below (like in the old Pokemon games for gameboy).
Ok, I will return to developing now, because, paraphrasing George Bernard Shaw (I don't really remember how it was originally), "Able is creating, unable is teaching" , and I always find writing blogs as a kind of teaching:).

"Impossible is nothing" 3rd day, only 8 more

2010-05-23T19:47:00.000-07:00

Ok, finally I have an idea. Thanks to Squidi's so-called GameDocs, PacMan's birthday the day before yesterday and my true zombie-love I have a plan. I decide to design everything for Nokia 5800 XpressMusic (with 360x640 resolution) with very simple reason - that is one my neighbor have so I can test my game on it.
I use simple map editor I write before, initially for my first FaceBook Snake (where I finally never use it), used later in Eastern Compo Game. I made 7x10 map of 50px height tiles, what gives me up to 90px on the bottom of the screen for navigation panel (coz that device had no keys). Now I have to find someone who can make me some graphic.

"Impossible is nothing" 2nd day - 9 days left

2010-05-22T11:45:00.000-07:00

To create any game, you need:

idea

skills

time

tools

and resources

As I wrote in previous post, I have no skills in mobile dev, no idea for any interesting app, and I'm run out of time. What I have today are tools.

All night long i read mostly everything in the web about creating mobile widgets in web technologies. It wasn't so easy because Nokia's site is one big mess with everything upside-down. I download tons of stuff from there (really, it is almost 10GB, with most annoying thing ever - Symbian Emulator which is 4GB big and you have to reinstall it every time you want to clear all preferences. Fortunately Aptana has additional plugin with browser-based Nokia device emulator too), install everything they asked me to, read and tried to understand every "Getting started" and "Hello World!" tutorials, and not sleep at all.
Finally, I can proudly say that it is working. First photo of some pre-prototype game-like application running on Nokia's device (I don't even have one, thank one more time to Owca for help).

"Impossible is nothing" 1st day - 10 days left

2010-05-21T09:01:00.000-07:00

Ok, I give up with J2ME. My mate Jakub a.k.a Owca had an idea of cool J2me application inspired by alcoholic blackouts, with very strong chance to win ODC, but unfortunately Blue-tooth implementation for our needs was to difficult to overcome. Now we have 10 more days (challenge ends 31 May, at 15:00 Central European Time), no experience or even skills in mobile development for Nokias, no idea of any awesome app that could win, and no money to drink from grief.

But there is a little light at the end of the tunnel. According to Nokia Forum there is some way to write mobile applications using Web Technologies, such as HTML/CSS and our favorite JavaScript. I have to get familiar with that. We'll see what will happen.

Mobile applications

2010-05-13T18:47:00.000-07:00

Best proof that it's time for develop something for mobile devices is that in new Photoshop option 'Save for Web...' changed into 'Save for Web & Devices...'. That's why in my free time I'm working on social-like fun and nice application for Ovi Dev Challenge. I have almost two weeks, I have to speed up a little. Wish me luck & keep your fingers crossed:).

Simple puzzle game

2010-05-05T15:47:00.000-07:00

Internet is full of different programming frameworks. Nowadays you don't have to learn new language, you only need to know any friendly and easy to use framework and you can start your adventure with code.

I don't like that. I can't 'feel' the code when I use frameworks for everything. I got a feeling that it's no more mine - I just 'press a magic button' and some hard to understand and explain things happen. For sure - it's not serious to code huge project in pure code. But if it's your first contact with new programming language - try to explore it on your own. Try to understand what it's all about. And then feel free to use whatever you want - it's ok if you understand more or less what happens behind the scenes.

Today was my first serious attempt to create js game using something different than pure JavaScript. I choose jQuery because I made before a few projects using it. And here it is, a simple puzzle game like almost 10years old Clix. In few words, quoting www.javascriptgaming.com:

When you click a block (...) it and all neighbours that are the same color disappear. Gravity makes the blocks above fall down, creating new opportunities.

If a column is completely cleared, the remaining columns are moved closer together. When (...) the screen is all clear, the game is over. Points are awarded for clearing groups of blocks, the more blocks you remove in one click, the more points.

The only difference is that in my version there are new 'blocks' each 3 lvls. You have 11 levels of fun in FB version and unlimited in nonfacebook one (but there are only 5 types of 'mojito-blocks').

Try it on facebook (in Polish, click 'GRAJ' to play):
http://apps.facebook.com/modzajto/
or outside:
here.

Isometric Snake game for Facebook

2010-04-19T09:45:00.000-07:00

During the weekend I went with my girlfriend to my countryside house. Anyway, I didn't want to waste my daily gamedeveloping time.
I created there simple snake game (days ago one of the most popular mobile game for Nokia cells) with isometric graphic. I modify sprites from one wikipedia graphic and use logic from my old Snake game.

Find VD SNAKE 3d on Facebook or simply try this link: http://apps.facebook.com/vd_snakeiso/. (My average result is 700points, what's yours:)?)
You can also become a fan of the game.

Eastern Compo 2010

2010-04-05T15:34:00.000-07:00

It's almost tradition that during Eastern Holidays Warsztat members organize special edition of Compo (game developing competition, check). Randomly chosen topic of competition was "A game with particles-effect, Zombies, arrows and deadly spikes". Quite creative.

I tried to create Tower Defense Game with Zombies as creatures, particle-flame throwers and spike-guns as towers and arrows as obstacles. I use some old javascript particle effects and try even to build few fire-towers. Unfortunately JS and web browsers are not adapted to generate thousand of tiny objects. It worked fine with one tower, very bad with two of them, and with three haven't work at all. Because of that I decided that required 'particle effect' will be "Hell fire", shown on spawn place of Zombie creatures. The same situation was with spike/nail guns. So i change my mind and simply put spikes like arrows - on the ground as obstacles. It took me about 8 hours to design, code, prepare the graphics and test the game, so it is not finished at all.

Finally, except me, there was only one participant took part in Compo, so there was no results. If you are interested in my game, download it here: EasternCompo [290KB]
(Readme and gui are in polish, sorry).

Removing item with given value from an Array in Javascript

2010-03-04T14:37:00.000-08:00

'Delete' operator is the easiest way to remove from Javascript's array elements with given index. It works fine with objects like literals but using it on arrays is worst thing you can ever do. What happens if you try?


var tab = [1,2,3];
delete tab[1];
//result: [1, undefined, 3]

It just removes particular element, not even try to fix undefined space left after the operation. So its better to use splice() instead.


var tab = [1,2,3];
tab.splice(1, 1);
// result: [1, 3]

Okey, but what to do if we have to remove item with some given value? We can google a little and find how to expand prototype of an Array object with remove() method, like that:


Array.prototype.remove = function(value) {
       this.splice(this.indexOf(value), 1);
       return true;
};
a=[112, 234, 32545];
a.remove(234);
// a is [112, 32545];

It works for that case, for sure, but what when item we try to find is not in our array? indexOf() will return -1, and splice() will start to removing elements from end of an array.


a=[112, 234, 32545];
a.remove(22);
//a is [112, 234]

Not funny. So to avoid situations like that we have to put one additional condition to our method.


Array.prototype.remove = function(value) {
    if (this.indexOf(value)!==-1) {
       this.splice(this.indexOf(value), 1);
       return true;
   } else {
      return false;
   };
} 
 
a=[112, 234, 32545];
a.remove(234);
// [112, 32545];
a.remove(22); 
// still [112, 32545];

Everything's fine. But in IE (there is always some 'but' in there, thanks Bill), for sure in 6.0, i don't know about new versions, Array type Objects have no indexOf() method, so we have to build it on our own:


if(!Array.indexOf){ 
    Array.prototype.indexOf = function(obj){
        for(var i=0; i < this.length; i++){
            if(this[i]==obj){
                return i;
            }
        }
        return -1;
    };
}

Now it works fine. Thanks.

var blog = new Blog();

2010-03-03T14:56:00.000-08:00

Syntax highlighting test:


#!/usr/bin/env python
# encoding: utf-8
 
from django.core.mail import send_mail
from django import forms
from registration.forms import RegistrationForm
from registration.models import RegistrationProfile
from django.conf import settings
from accounts.models import User, UserProfile
from django.forms import ModelForm
 
class UserProfileForm(ModelForm):
class Meta:
model = UserProfile
exclude = ('user')
fields = (
    'about',
    'image',
    'address_street',
    'address_city',
    'address_zip',
    'address_country',
    'phone'
    )