Box2D & Javascript: Part 3

In part 2: I covered a basic setup for box2d based simulations and in this long promised final installment  of the tutorial series, I will cover the integration with KineticJS library. The most important aspect of this part is how to use a framework like KineticJS and use their features for image rendering and manipulation in physics based simulations without having to write your own physics engine for it.

Press 'd' to toggle debugDraw mode

Box2d Demo - by Aniruddha Loya

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

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

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

Configure apache localhost to use secure HTTP (HTTPS) using mod_ssl

For all those who want to test their website on localhost using the secure HTTP protocol, here is how you can configure apache for testing purpose. I did this on Mac OSX 10.6 using apache 2.2

Guidelines provided at apple are for older version. We'll use them to generate the certificate and then configure apache for newer version.

> mkdir ~/keys
> cd ~/keys
> openssl genrsa -des3 -out server.key 1024
Remember the passphrase you provide here. It will be required in next steps.

> openssl req -new -key server.key -out server.csr
Answers to all questions are straight-forward, except for Common Name: you need to provide 127.0.0.1 (i.e. server name)

> openssl genrsa -des3 -out ca.key 1024
For simplicity, keep the passphrase same as used above

> openssl req -new -x509 -days 365 -key ca.key -out ca.crt
This again asks same Questions as in step 4, but this time for Common Name you can provide any dummy name

Find sign.sh file if you have mod_ssl package downloaded, or else retrieve it from pkg.contrib folder from latest version of package. Copy the sign.sh to "keys" folder and make it executable

>chmod +x sign.sh
>./sign.sh server.csr
Say yes ("y") to the 2 questions

>sudo mkdir /etc/apache2/ssl.key
>sudo cp -r * /etc/apache2/ssl.key/

>cd /etc/apache2/ssl.key/
>sudo cp server.key server.key.original

>sudo openssl rsa -in server.key.original -out server.key

>sudo apachectl stop

>sudo vim /etc/apache2/httpd.conf
* You may want to make a backup before editing this

- Locate and comment out Port directive to listening on 80
*Note - Commenting this line will force to use only https, leave it as is if you want to use both.

- Locate and uncomment the LoadModule ssl_module libexec/apache2/mod_ssl.so

- sudo vim /etc/apache2/extra/httpd-ssl.conf
* Again make a backup before editing

- Change ServerName from www.example.com to 127.0.0.1
- Provide your email id for ServerAdmin

- Under SSLCertification, provide path to our own ssl certificate i.e. SSLCertificateFile "/private/etc/apache2/ssl.key/server.crt"

- Also, set ServerKey with: SSLCertificateKeyFile "/private/etc/apache2/ssl.key/server.key"
- You may also set the other paths as per requirement

> sudo httpd -D SSL
> sudo apachectl start

And you now have https://127.0.0.1 running

Snake: A beginner's attempt on HTML5 Games

HTML5 is the new buzz in the web technologies. The technology is in its infancy but with its variety of new features, it has captured everyone's attention with interesting applications and experiments across the globe. To list some check out the - interactive presentation by Seth Ladd @ Google IO 2011, use of WebGL to present geographic data or a cool way to show news, experiments like The Wilderness Downtown,  and Games like Angry Birds and those from Gopherwood Studios on Chrome web store. HTML5 is supported by all the new browsers including those on smartphones, and therefore, it has become a hot platform to develop games which developers can serve directly to the consumers bypassing the App stores. HTML5 is also expected to have enormous potential in online advertisement market (click for more details)

I decided to take a dig into this and thanks to some wonderful tutorials at html5rocks, html5games, tutsplus, links on Seth's presentation, and many more resources available, my first attempt is now on display.

I plan to put my experience in a tutorial (HTML5 Games 101) very soon. Meanwhile, share your comments and feel free to use the code and kindly acknowledge the source.

Score: 0      Level: 1

HTML5 Games 101 - by Aniruddha Loya