Sunday, November 11, 2012

Box2D & Javascript: Part 2

In part 1: I covered what Box2d is along with some of its application and a number of links to possible box2d resource. Now in this blog, I'm going to demonstrate a basic setup for box2d based simulations and the next one will cover the integration with KineticJS library.



Press 'd' to toggle debugDraw mode
Box2d Demo - by Aniruddha Loya

This example was adapted from the Box2dWeb example.

Now let's break up the code and see how it works

Saturday, October 6, 2012

Box2D & Javascript

After a long break which saw me completing my semester, developing a number of HTML5 mobile games (including the one in which I'm using Box2D), planning for a new website to host all of them and finally selecting courses for the new semester, I finally manage to take out time to write this series of posts on Box2D and its use in HTML5 games along with KineticJS.

This post is an introduction to Box2D (for those who do not know) and the next in the series would cover details on how to build a game using Box2D and combining it with KineticJS library.

So what is Box2D?

Box2D started as an open source C++ library, a 2-d physics engine to be precise, to simulate 2-dimensional rigid bodies. More details can be looked up on their website. It has been used in many applications and games, and have been ported to be used in various other platforms. I came to know about it with the success of Rovio's Angry Birds franchise. Box2DFlash, the flash port of the library has been extensively used and there has been multiple ports for javascript of which the following 3 appears to be the major ones - box2d-js,  box2dweb, box2d.js.

Box2d-js was converted from Box2DFlashAS3_1.4.3.1 in an automatic manner and is very old and not up-to-date. It requires a big amount of imports to get it to work and I couldn't find much support/ samples for this.

Box2d.js is a Javascript version of Box2DFlash 2.1a and Heiko Behrens, who maintains the git repository, has mentioned that this has become a part of cocos2d-javascript. There are a number of samples available in the git repository, and here is a link to one of the useful tutorials I found using this library.

Box2dweb is also a port from Box2DFlash 2.1a generated using a ActionScript - to - Javascript compiler. Its is available as one single file and is promoted by Seth Ladd on his blog along with many examples. Here is a compilation of the posts.

Box2D Resources:

  • Box2D V2.2.0 Manual - Gives details about the various objects, parameters, functions in Box2D, and their uses.
  • Box2DFlash documentation - More of an API and works well with box2dweb as the later being a direct conversion from the actively maintained flash port.

In the coming posts, I'll talk about how to use box2dweb in HTML5 games in conjunction with KineticJS library.
Box2D & Javascript : Part 2

Tuesday, May 15, 2012

Google: Annoying and not so annoying recent changes

The new "Social" search!

Google has long become a synonym for search... "Google it!" is something we often say and do a number of times every day/hour. And I've been doing the same for last 8 years and was able to find useful result with ease. But recently something went wrong, terribly wrong... there was no relevant result on Google even while looking to as much as "Page 3"... I'm convinced that in normal use, no one ever has to go beyond "Page 1" and I believe what I was searching was a normal query (tried all sorts of permutations and combinations of keywords and their synonyms). A normal question on php related stuff... but all I got was frustation with results displaying how to do those things in Android or Javascript or dont know what. The question then arise is why it was showing such results?

Well, the answer to that is trivial. Because, for last couple of months I have been doing search for results related to Android and Javascript while I was working on couple of projects. And now even when I'm searching with keyword "php"... results shows up Android and Javascript fixes... all thanks to tracking my search history and intelligent guessing made on my queries.

Secondly, if you are frequently selecting a couple of sites from search results the next time you search, these sites get higher preference even though they may not have relevant information for the search you made. What was the problem with the plain old search that provided the results irrespective of my interaction but depending upon the content? Why so much emphasis on making everything social? And if the same site (for example Stack Overflow) has more than one relevant result, why not show them at the first place rather than a small hyperlink saying "Get more discussion results"?

And call it a coincidence, I just happened to find this article (Introducing the New Bing: Spend Less Time Searching, More Time Doing) via codeproject newsletter which made me seriously think considering a change to Bing! (at least they are keeping social separate from normal search).

Location specific customization... grrr....

Another annoying thing happening lately is Google tracking my location and changing my default from Google.com to Google.ch even after I made Google.com as default search engine in Chrome (yes, a Google product). Even my Blog preview is in German (I suppose) though my blog interface where I'm composing this is in English. Com'on Google, if I'm in Switzerland does not mean I can read German or French. So why change to something else from what I had been using for so-so long? Why?

The missing simplicity of old Google interfaces!

Change some Settings:

A couple of days back, the time-zone settings for my GMail changed by itself and then I had to "Google It" to find how to restore it. The simple interface of Google that made me like it so much (over Yahoo & Hotmail) is getting cluttered day-by-day. For simple setting like timezone for my email, I had to do about 10 clicks on 4 or 5 different screens (for the actual process, ignoring the wrong ones I made).

New GMail Interface:

Anyone with comments on new GMail interface? Sorry to say, the old one was much better without requiring me to scroll separately in each sub frames or do a tradeoff between seeing more options for mail (labels) or making my chat list longer.

New Blogger Interface:

I tried the new blogger interface and within minutes was back to the older version... and praying that it stays longer and am not forced to change to new one!

But not all is BAD... There are a couple of welcome changes/ updates

Google Play!

Finally, better late than never! Now its much easier to browse and choose apps for effortless installation not only for my Android, but more importantly for my father's android sitting miles away from him  (all I need is to log-in through his account). Just loved it! Not to say, a fairly neat and intuitive interface as well.
Do I expect Chrome store to merge with this, well it sounds like a possibility to me!

Google +

Well I would simply say Google has got this one way better compared to the new timeline interface on Facebook (where again I'm sticking with the old profile page and hoping they dont force me to change anytime soon, scare about people getting access to all the old posts with one click unless I spend some hours choosing what to keep public and what private and hate those ugly name labels on friends' display pics).
Sadly, Google+ is not catching up... people not willing to migrate from Facebook or are simply too tired to make yet another social network profile or have made it (like myself) but do not actively maintain it like the old Orkut profile.

Thursday, March 1, 2012

HTML5: How to ensure images are loaded before rendering them

Okay, so I have been busy developing HTML5 games for a company so cannot share it here... but what I can share is a small trick that helps to make sure that my images are loaded before I go about rendering them

Why and where do you need it?
Well, "why" is just to put things in context but "where you need it is more important".
It is a good idea to ensure the images are uploaded before rendering them because unless you have scoped all your code with a try catch block, it is difficult to find where the error is, esp. when you have tens of images being displayed and only a couple of them missing.

Although the technique is useful for all the browsers, its requirement is more pronounced in the case of mobile browsers which are the primary targets if your are building mobile games that run across the platforms with same code base.

And finally, the main thing - "HOW"
The basic idea is this:
  • Make a list of all the images you want to upload
  • Create image objects for all the images listed above
  • Add "onLoad" event listener to each one of them such that the listener calls the same function, lets call it onImgLoad
  • Now comes our onImgLoad function which will be fired every time an image gets loaded enough that it can be rendered or at least that when trying to render the image all the basic image data will be available so that no error is thrown.
    • Every time this function is called we increment a variable i.e. imgLoaded by 1
    • If the imgLoaded becomes equal to total number of images to be loaded i.e. imgToLoad, we can now safely draw them.
Here is the code snippet where I'm loading 10 images 1.png to 10.png from images folder

var imgLoaded = 0;
var imgToLoad = 10;
var onImgLoad = function()
{
   imgLoaded++;
   if(imgLoaded == imgToLoad)
   {
      drawImage()             //Call to our draw function
   }
}
 
for(var i = 0; i < 10; i++)
{
  images[i] = new Image();
  images[i].onload = onImgLoad;
  images[i].src = 'images/'+i+'.png';
}

Also a key point to note here is that
 images[i].onload = onImgLoad;
is assigned before providing the image source.

This is done as a hack for IE (That's something I read in some post while I was hunting to solve this problem of mine)