Crunched Bytes: April 2013

I love reading, novels, stories, articles...
There are many articles I read, few I find interesting and retweet, and this gave an inspiration to make a monthly compilation of these article with a short summary. As my professor from "How People Learn" would say, repetition is one strategy for effective learning and summarizing your learning is another... so this is a mix of both :).

This new monthly post series will be the compilation of these interesting articles. Most of them will be technology oriented but some can be general blogs or viewpoints as well!

So here goes my first collection drawn from April 2013 readings. Enjoy! 
(*Ordering of articles is not arbitrary)

How Pixar Used Moore’s Law to Predict the Future

http://www.wired.com/opinion/2013/04/how-pixar-used-moores-law-to-predict-the-future/
A very very interesting article from Alvy Ray Smith, co-Founder Pixar, reflecting on why Moore's Law exists and how it brought about the creation of Pixar and all those lovely movies along with it!!! And importantly the belief that "the law" still has life to live and imagine what all it can do…
"Moore’s Law reflects the top rate at which humans can innovate. If we could proceed faster, we would."
"That’s the reason for expressing Moore’s Law in orders of magnitude rather than factors of 10. The latter form is merely arithmetic, but the former implies an intellectual challenge. We use “order of magnitude” to imply a change so great that it requires new thought processes, new conceptualizations: It’s not simply more, it’s different."

Pixar's Senior Scientist explains how math makes the movies and games we love

http://www.theverge.com/2013/3/7/4074956/pixar-senior-scientist-derose-explains-how-math-makes-movies-games
A look into what goes behind those beautiful curly hairs or those cheering crowd in the car race - the mathematics and the chief person behind it.

There are no smartphones

http://bergie.iki.fi/blog/no-smartphones/
An article that puts into words, something that has been there in the back of my mind for some time now, especially after moving to Switzerland. I've been hardly using my mobile (smart)phone. Come to think of it, even back in India, the most used aspect of that device was to read novels (yes on a small 3 inch screen) while I travelled or to play games... and lately, I've been thinking to get a regular old-style Nokia (I still love those sturdy keypad devices) and rather buy a tablet for these purposes, a view recently pushed further by another professor of mine who is doing the same :)

The technique LucasArts used to design its classic adventure games

 http://www.gamasutra.com/view/news/189266/The_technique_LucasArts_used_to_design_its_classic_adventure_games.php
Using puzzle dependency chart for narrative-driven games.
Provide alternate paths for players to avoid getting stuck. Work it backwards from end to start (a matter of choice but does look easier to do). Makes it simpler to identify too easy and too hard, and align story with gameplay.
All this and more...

A Plain English Guide to JavaScript Prototypes

 http://sporto.github.io/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/
Confused about __proto__ and prototype in JavaScript? This article explains it well along with some background on inheritance and object model in JavaScript

Design Tips When Porting Mobile to Console

 http://gamasutra.com/blogs/NathanFouts/20130405/189905/Design_Tips_When_Porting_Mobile_to_Console.php
Planning to port your android games from mobile to upcoming OUYA console, here are some tips that are worth keeping in mind while porting!

INFOGRAPHIC: How Interviewers Know When to Hire You in 90 Seconds

http://theundercoverrecruiter.com/infographic-how-interviewers-know-when-hire-you-90-seconds/
Some quantification of the aspects you might generally know about, or do you??
E.g. 33% of bosses know within the first 90 seconds of an interview whether they will hire someone, The number one most common mistake at a job interview is: failing to ask for the job and much more

I follow the tech industry news, thanks to Twitter @Techcrunch, @GamesBeat, @IGN and many more, plus a few email subscriptions.

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

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

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

HTML5 Games 101 - An introductory tutorial to HTML5 Games

In my last blog, I had posted the game of Snake that I developed as my first attempt in HTML5 programming and all I can say is... it was fun!

In this tutorial, I will show you how to use the basic features of HTML5 and get the simple game of Snake up and ready within a couple of hours, even if you are a beginner. All you require is some basic logic and any experience with programming is a huge plus. However, I must also admit here that this is more of a JavaScript work than HTML5, as it just uses the canvas and a couple more elements.

Okay, so lets begin!

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