Crunched Bytes: May 2013

Alright, so here is a compilation of interesting articles read for the month of May

Starting this month's reading is with the big question - "Why are you making games?" followed by a look at the problem affecting the Game Reviews and much more!

Why Are You Making Games?

http://gamasutra.com/blogs/BenServiss/20130425/191183/Why_Are_You_Making_Games.php
A very thought provoking article forcing the reader (read game developers) to re-evaluate why they are actually making games?? What's the motivation?

“Surely there is some reason you are going through all the trouble of trying to design great games.” –Jesse Schell, The Art of Game Design

So have you figured out your reason yet?? May be this article is just meant for you!

The Problem with Game Reviews (And Why Games Are Like Restaurants)

http://www.gamasutra.com/blogs/BenServiss/20130502/191616/The_Problem_with_Game_Reviews_And_Why_Games_Are_Like_Restaurants.php
Author Ben Serviss indicates how we have simply copied the rating systems from a linear comparable domain of movies and mapped it to use for rating the interactive and immersive experience of games, and why such a system is incomplete and broken.

Cognitive Overhead, Or Why Your Product Isn’t As Simple As You Think

http://techcrunch.com/2013/04/20/cognitive-overhead/
Does any of these sounds familiar -

• Make your product simpler, 
• Minimize the number of steps, 
• minimize time required, 
• minimize the features, etc. etc.

David Lieb, co-founder and CEO of Bump has something different to say... Making simple is all about reducing the cognitive overhead and this may even mean adding an additional step i.e. make users do more rather less!!!

Google Introduces Portable Native Client, Makes It Easier For Developers To Add C And C++ Code To Their Web Apps

http://techcrunch.com/2013/05/17/google-introduces-portable-native-client-makes-it-easier-for-developers-to-add-c-and-c-code-to-their-web-apps
After Mozilla's asm.js now we have PNaCl… its soon going to be c/c++ on web as well… way to go!

Ten classic games you can actually beat, but probably won’t

http://arstechnica.com/gaming/2013/04/ten-classic-games-that-are-surprisingly-technically-beatable/
A fun read on games that you weren't supposed to win and what happens if you win

Anatomy of a hack: How crackers ransack passwords like “qeadzcwrsfxv1331”

http://arstechnica.com/security/2013/05/how-crackers-make-minced-meat-out-of-your-passwords/
With hackers decoding upto 90% of leaked passwords (in the form of md5 hashes) within
a day… are your passwords really secure?

Why you should move that button 3px to the left

https://medium.com/adventures-in-consumer-technology/c012e5ad32f7
How to bring together design and engineering. As an engineer, its a nice read into a designer's mind.

Designing Game Logos

http://gamasutra.com/blogs/SimonDean/20130425/191184/Designing_Game_Logos.php
A quick writeup based on the experience of designing their game logo. Few good tips to keep in mind though

Euler vs Verlet

http://kahrstrom.com/gamephysics/2011/08/03/euler-vs-verlet/
A small primer to help you decide how to integrate the laws of motion in your game/simulation. If you have ever wondered how to model the movement (velocity, distance, etc.) of your scene objects and wrote a code to model the Laws of motion, this article will help you name the method you used or better, provide you with a better alternative.

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

Zip/Unzip using Windows Shell

Okay, so here I was suppose to write a module for compressing / decompressing files in windows. I went through a lot of stuff over the net and found some open source libraries to do it. Out of those I narrowed down to the one provided by Info-Zip. Although no longer actively maintained, this is in existence for a long time and is known to be stable. This is used in various forms in a number of programs including Mac OS X.

However, on Windows there is another way to zip files free of cost. I found this article - Easily zip / unzip files using Windows Shell32 on CodeProject which provides a neat way to use windows routines to zip and unzip files programmatically. The code provided is in VB but since my requirement was in c++, I wrote a small c++ module which is shared here. I found the discussion and code snippets provided here to be very useful.

Zip
To compress and zip files first we need to create the required zip file. The code below creates “test.zip” in "C:"

Code Snippet
------------------------------------------------------------------------------------------------------------------------

// Create Zip file
BYTE startBuffer[] = {80, 75, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0};
FILE *f = fopen("C:\\test.zip", "wb");
fwrite(startBuffer,sizeof(startBuffer),1,f);
fclose(f);

------------------------------------------------------------------------------------------------------------------------

Now that our zip file is created, lets add the files to be compressed inside this zip.
For this we use the CopyHere function wherein we treat our newly created zip file as a folder.

Code Snippet
------------------------------------------------------------------------------------------------------------------------

BSTR source = L"C:\\test.txt\0\0";
BSTR dest = L"C:\\test.zip\\\0\0";

HRESULT hResult;
IShellDispatch *pISD;
Folder *pToFolder = NULL;
VARIANT vDir, vFile, vOpt;

CoInitialize(NULL);

hResult = CoCreateInstance(CLSID_Shell, NULL, CLSCTX_INPROC_SERVER, IID_IShellDispatch, (void **)&pISD);

if (SUCCEEDED(hResult))
{

VariantInit(&vDir);
vDir.vt = VT_BSTR;
vDir.bstrVal = dest;
// Destination is our zip file
hResult = pISD->NameSpace(vDir, &pToFolder);
if (SUCCEEDED(hResult))
{

// Now copy source file(s) to the zip
VariantInit(&vFile);
vFile.vt = VT_BSTR;
vFile.bstrVal = source;
// ****NOTE**** To copy multiple files into the zip, need to create a FolderItems object (see unzip implementation below for more details)
VariantInit(&vOpt);
vOpt.vt = VT_I4;
vOpt.lVal = FOF_NO_UI;//Do not display a progress dialog box, not useful in compression

// Copying and compressing the source files to our zip
hResult = pToFolder->CopyHere(vFile, vOpt);
// CopyHere() creates a separate thread to copy files and it may happen that the main thread exits before the copy thread is initialized. So we put the main thread to sleep for a second to give time for the copy thread to start.
Sleep(1000);
pToFolder->Release();

}
pISD->Release();

}
CoUninitialize();

------------------------------------------------------------------------------------------------------------------------

Unzip is similar to zip except that we now have zip (treated as source folder) and destination which anyways is a folder. The code below currently assumes that there already exist the destination folder, however adding a code to check for a folder or create a new folder on the fly should not be difficult.
The minor change (compared to above code) in unzip comes only in identifying the source files. Here we use the folderItems, which is essentially a list of all files/folders inside the given folder, instead of a single source file.

Code Snippet
------------------------------------------------------------------------------------------------------------------------

if (SUCCEEDED(hResult))
{

Folder *pFromFolder = NULL;


VariantInit(&vFile);
vFile.vt = VT_BSTR;
vFile.bstrVal = source;


pISD->NameSpace(vFile, &pFromFolder);
FolderItems *fi = NULL;
pFromFolder->Items(&fi);


VariantInit(&vOpt);
vOpt.vt = VT_I4;
vOpt.lVal = FOF_NO_UI; // Do not display a progress dialog box

// Creating a new Variant with pointer to FolderItems to be copied
VARIANT newV;
VariantInit(&newV);
newV.vt = VT_DISPATCH;
newV.pdispVal = fi;


hResult = pToFolder->CopyHere(newV, vOpt);
Sleep(1000);
pFromFolder->Release();
pToFolder->Release();

}

------------------------------------------------------------------------------------------------------------------------

Complete project (in VS2010) is available here via CodeProject.