Been cooking this for a long while now..

Posted by Quakeboy Comments
It all began 2 years ago :P

Labels:

You haven't seen the Stack overflow calendar yet?

Posted by Quakeboy Comments
Today while on my SO profile page, I accidentally clicked on their "visited" statistics. (They have a few badges for people who come to the site regularly like 'for n consecutive days' and so on)



And then to my surprise I found a neat calendar view of all the days.


Though not very useful or anything. It was kinda cool and surprising to see how much my life/career has become dependent on stackoverflow.com
Labels:

Water Effect on HTML5 Canvas

Posted by Quakeboy Comments
Was bored, so made the water effect based on this article on a HTML 5 canvas.
Canvas seems promising, but far from flash performance yet.
 
Labels: ,

Flixel - first impressions and what can 'Unity3d' learn from it

Posted by Quakeboy Comments
Disclaimer : This purpose of this article is not to criticize the author of Flixel, rather to help new developers to get an idea of Flixel, its architecture and what to expect from it. I still believe it is a great library for making certain types of games very quickly and very good for prototyping certain game ideas, if not the best.

If you have been trying to make flash games in your free time, there is no way you haven't heard of Flixel. Canabalt's release also popularized the engine quite a bit. I dabbled with Flixel a few weeks ago for a small weekly prototype marathon we had at work. Me, being the usual awesome self, decided to go with a library that I haven't worked with before for the marathon. So it began.

Good, Bad Stuff

First of all Flixel's 'features' page is pretty amazing on their website. Multiple cameras for a 2d game, built-in simple physics/collision system, particle engine, game save/load and even a feature to record and replay demos. Wow! I thought.

Soon enough I plugged in Flixel into a new AS3 Flash builder project, and I was able to get the 'hello world' to work in no time. But gradually it started to slow me down. Of course like any library, I know I can't expect everything out of the box. I will have to write code for higher level custom functionality. But the problem was with Flixel's architecture. Having worked with AS3 framework, Java, .NET, and Unity 3d architecture etc. I am definitely used to having clean package hierarchies, naming and class design. I cannot blame the author though, he has stated something relevant to this clearly in their about section in his own words.

To explain the problem with architecture better, let me give an example. Flixel supports paths. You can make your objects move in custom paths. Now there is a FlxPath class which holds an array of points which make up the path. But that's all it does apart from having some methods to add/remove/retrieve points and for debug drawing.

Now FlxObject is your usual basic abstract game object class in any engine. It has everything - position, size, physics properties etc. Then there is a FlxSprite class which extends from it, and like you might have guessed it holds sprites, sprite sheets and also has code to animate with sprite sheets.

Now the FlxObject holds a reference to a FlxPath object with some public properties like pathSpeed, pathAngle etc. along side few more protected properties related to path. This doesn't look clean to me and I have this OCD where I find this annoying too. I wish I could give more precise reasons than saying 'I doesn't feel right', but I have not yet reached that level yet in my programming career. I would say a better way to write it would be to isolate everything related to path in a different class. And that class should control the object from outside the object in a special internal post-update routine (After every FlxObject's update function gets called in the general game loop). Or just follow a component based architecture where PathFollow component could be added along side of other stuff like Physics, Controls etc. Maybe just use something similar to their existing plugin system and implement a PathFollow class just like DebugPathDisplay class.

Another thing that bothered me is the FlxG and FlxU classes. It so happened that there were a few functions which I was looking for in more obvious places, but were present in FlxG and FlxU classes. For e.g. FlxU has a static function called getDistance and it takes 2 FlxPoints. Instead it should be a method of FlxPoint class. The problem is once you have been programming for about 4-5 years you sort of get intuitive about quickly finding function in a framework without using google. It often happens with .NET, Java and AS3 thanks to their very clean design. I hated googling and to search on their 'not well' documented wiki for the simple things I needed to do. May be I was hoping for an even quicker start up than what I got with my first experience with Flixel.

But then again for someone who need to prototype simple games, maybe its handy when everything is available in a single class and doesn't have to init 2 or 3 more classes along with extra boiler plate code.

Good, really good stuff

But I found one class called FlxGroup to be extremely useful, pure awesomeness. Pooling of objects in game programming is not new, but this class makes it so easy to do that in a very generic fashion. Every FlxObject has a dead/alive state, and we can just call handy functions like getFirstAvailablegetFirstAlive and even getRandom. Also I couldn't help but notice that a function called callAll exists, it just calls a function on all objects in that FlxGroup. Moreover the FlxState (which is an equivalent of a GameScene) extends from FlxGroup. So when you reached the end of a level and you want all the enemies to explode no problem, you can do it with just one line :)

Now this is exactly the feature / class that would be awesome if it was in Unity3d. Having worked as producer for Unity based game projects, I found that programmers found it impossible to write even simple mobile games on Unity without Object Pooling for almost each and every thing. Their Object.instantiate is a terribly slow call, especially when you instantiate a Prefab directly and there used to be no warnings about it on their documentation (not sure about it now).

Though I did bi*** about the author of Flixel clubbing too many things in the same class, once you learn and get used to the library you will find it very quick for prototyping game ideas. Flixel has everything you need (Physics / Collision, Text support, Sound, Tile support, HUD/UI Buttons etc.) and in considerably less number of classes. But it is both a good and bad thing.

It is only a matter of time until the library goes through a little bit of cleaning up and thus making it even more modular, robust and still simple as it is now. So will I use it again? Definitely yes for prototypes, may be not for full games though. I am yet to check out Flash punk which I heard is a much more mature framework for experienced developers.
Labels:

Jailbroken development with iOS 5.0.1 and XCode 4.2

Posted by Quakeboy Comments
There is a lot of scattered information out there, so I am going to confirm this is going to work only for the specific configuration given below.

Configuration details

XCode version = 4.2
(BUILD 4D199 - But any build of XCode 4.2 should work)

MAC OS X = 10.7.2

iOS 5.0.1 (9A405)
Jailbroken iPod Touch 4th Gen (and has Cydia on it)

How to start developing with XCode without iPhone developer account ?

First is to disable CODESIGN (read code-sign).

Make a copy of this file on Desktop (Because finder won't allow you to edit in the same folder)
/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS5.0.sdk/SDKSettings.plist


Open that file in TextEdit and change the following values from YES to NO. So it looks like below

<key>CODE_SIGNING_REQUIRED</key>
<string>NO</string>
<key>ENTITLEMENTS_REQUIRED</key>
<string>NO</string>

Now restart XCode and set Code Signing Identity to Don't Code Sign


Now you should be able to select your device from the list and install your code/app.

But still you won't be able to debug, how to enable that ?

1) Select your target from Targets list, on the right side choose "Build phases"
2) Now on the bottom right you have a button called "Add Bhild Phase". Click that
3) Now select "Add Run Script"
4) Now copy paste the follow code in the run script box.


export CODESIGN_ALLOCATE=/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/codesign_allocate
if [ "${PLATFORM_NAME}" == "iphoneos" ]; then/Developer/iphoneentitlements41/gen_entitlements.py "my.company.${PROJECT_NAME}" "${BUILT_PRODUCTS_DIR}/${WRAPPER_NAME}/${PROJECT_NAME}.xcent";codesign -f -s "iPhone Developer" --entitlements "${BUILT_PRODUCTS_DIR}/${WRAPPER_NAME}/${PROJECT_NAME}.xcent" "${BUILT_PRODUCTS_DIR}/${WRAPPER_NAME}/"
fi

Note : The above code is taken from Alex Whittemore's Blog.
But there "/Developer/iphoneentitlements401/gen_entitlements.py" was used instead of "/Developer/iphoneentitlements41/gen_entitlements.py". I had to manually check that path and found that there was no 'iphoneentitlements401' folder on my machine. I changed it and it worked. Now I am able to debug also !

Let me know if this worked, so it will help others from wasting time as well.
If you ran into any problem let me know as well! I will try my best to help you.
Labels:

Lets learn pixel shaders - Chap 2 - Basics

Posted by Quakeboy Comments
Important - To move forward open another tab in your browser and open the URL http://www.iquilezles.org/apps/shadertoy/, I will refer to this tab simply as 'Shader Toy'

Chapter 2 - Basics of pixel shader with 'Shader toy'

Let us write some code, switch to the shader toy and notice that the "Deform" shader is already loaded and is running by default. On the right side bottom you see the source code, and on the left is the rendered effect. Take some time to notice the various details/controls shown to you like

1) fps, time, play/pause button, restart button on top of render area (place where the effect is played).

2) Dimensions panel - Width and height of the render area on top it. You can change it if you want.

3) The textures passed to the pixel shader are given right to the width/height box. You can pass up to 4 textures and use them in the pixel shader. The texture used in deform shader is given in the box 'unit 0'. Copy paste that URL path in a new tab and check the texture for yourself, or you can just click this link.

4) Also you can check the other shaders by going through presets drop down list. Don't forget to click 'Load'. There are some cool effects which you have no idea how to create, but at the end of this series you will learn to make most of them.

5) Most important thing we need to notice is the compile button. It is given above the source code area along with 'help' button.

n00b note - Every time we write new code, we need to press the compile button to see new source code taking effect.





6) Now let us write some code. We will begin with a blank program. Copy paste the following code in the code window.


#ifdef GL_ES
precision highp float;
#endif
uniform float time;
uniform vec2 resolution;
uniform vec4 mouse;
uniform sampler2D tex0;
uniform sampler2D tex1;
void main(void)
{
}

--- Now hit the compile button and see the output on the left side ---

7) Beautiful isn't it !
It will be a blank screen. Basically for now we have not written any code. Being a programmer I'm sure  you can notice that main function is empty. If you don't know what main() function is, then stop reading right away, don't waste your time. Grab a good C or C++ book or tutorial.

8) Now let us write our first line. If you recap I said - "pixel shaders are programs that are run for every pixel on the screen and they can do one thing, set the pixel color". So let us do that now. Inside the void main function block write the following line
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
gl_FragColor is a built-in variable through which we can write the pixel color. vec4 is a custom data type just like int, float, bool etc. But vec4 is a vector of 4 float numbers. The numbers are the colors - R, G, B and A. So here we say R, G, B are zero and Alpha is one which works out to black color. Hit compile button and make sure it is not paused on the left side, you will see the screen turning black. Now try replacing that line with the following.
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
Click compile and run again, you get the idea? As the same program is running for each pixel on the rendering area, and what we are doing is just setting it to white, the whole screen looks white.

Now how do we make things interesting? Wait for next chapter :)

Lets learn pixel shaders! - New Series - Chapter 1

Posted by Quakeboy Comments
This is the beginning of a series of tutorials, about pixel shaders (aka fragment shaders) with WebGL. I will start by assuming you are someone who has "absolutely no experience in graphics programming", but you should know what pixels are, what their components are. And optionally if you have basic 3d texturing knowledge, it will help a lot, but again not compulsory.

Without more blah, blah, let us start learning fellow programmers!

without which I would have never even started this! All our tutorials will be explain with reference to that web app. You will need one of the latest browser to run it.

Chapter 1 - Pre-requisite (for the n00b graphics programmer)

Pixels (skip if you know)

Everything you see on your monitor is made of pixels. If you zoom into your computer monitor, basically it is made of basic blocks (usually square shaped) called pixels. But as they are very small and closely packed, you are not able to notice them. Every monitor doesn't have the same number of pixels.

Resolution (skip if you know)

It is (number of pixels lengthwise) x (number of pixels widthwise). For eg. iPhone 3GS has a resolution of 320 x 480 when you hold the phone in portrait mode. iPhone 4 / 4S has 960 x 640 as their resolution. A full HD (High Definition) monitor has 1920 x 1080 pixels. More the resolution, more is the image detail/clarity. Will you be able to show more details with a 10x10 grid of dots or a 100x100 grid of dots? Think about it.

Pixel components (skip if you know)

Each pixel can do only one thing - "They can display a color". A pixel has three basic components - R, G and B. They are the primary colors, and combining them in various ways, we can make thousands (or millions, in latest monitors) of other colors. Usually each color is represented with one byte (8 bits, so value range is 0 - 255). So put together for each pixel you will have total of 3 x 8 bits = 24 bits or 3 bytes of color information.

For eg.
black (R = 0, G = 0, B = 0)
white (R = 255, G = 255, B = 255)

Introducing Alpha (skip if you know)

Apart from R, G and B, there is another component for a pixel, its called Alpha. Alpha = Transparency. Often pixels can be overwritten on top of each other, when that happens they are "mixed" according to their alpha levels. So R, G, B and A are the components of a pixel, which takes 32 bits per pixel. Understand there are more ways to represent a pixel, its not always 32 bits, but it is the most advanced pixel format, and enables an individual pixel to represent the max number of colours.

So, what are pixel shaders ?

Now that you know what pixels are, pixel shaders are nothing but programs, very similar to a C program. Next paragraph is very important.
A pixel shader is run for every pixel, before getting displayed on the screen. So let us say we have 1920 x 1080 pixels for a full screen game, which is a total of 2073600 pixels, which means a pixel shader is run that many times! But that is okay because they are all run on the GPU, instead of the CPU (Graphics processing unit, a special hardware dedicated to graphics, present nowadays on almost all computers).


Now that we know the basics, let us get started with
1) what can be done in a pixel shader,
2) how it can be done and
3) what information we have access to in the next chapter !

Any doubts are welcome in the comments section.

XCode 4 icon

Posted by Quakeboy Comments

Like me if you have installed both XCode3 and XCode4, and you wanna have both in the dock, you will find having the same icon is confusing, so here is a custom icon which you can use.

Right click XCode.app and click "Show Package Contents" and after that navigate to "Contents/Resources" and replace the existing Xcode.icns with this one.

Download Custom Xcode.icns file.

Download Android SDK standalone for offline installation

Posted by Quakeboy Comments
Update :- SDK for Android version (4.2.2) added !



How to install Android SDK without internet connection


I searched all over the internet and found no posts like this, hence I'm making one hoping it would be helpful for a lot of people.

The magic URL used to be - http://dl-ssl.google.com/android/repository/repository.xml (Outdated)
That is the XML file from which the URL for downloading the SDK packages are obtained.

Update :- The previous URL is now invalid, the new URL is given below
https://dl-ssl.google.com/android/repository/repository-5.xml (Outdated)

Update 2:- The URL has changed again, thanks to the post readers
https://dl-ssl.google.com/android/repository/repository-7.xml

For e.g. if you want to download Android SDK for version 4.0.3 for all platforms, you could look up that XML file. You will find a block under tag SDK 4.0.3 like this

<sdk:archive arch="any" os="any">

<sdk:size>44758833</sdk:size>
<sdk:checksum type="sha1">f2aa75133c29916b0b0b984974c2d5e46cb09e9c</sdk:checksum>
<sdk:url>android-15_r01.zip</sdk:url>
</sdk:archive>



So the URL will be is http://dl-ssl.google.com/android/repository/android-15_r01.zip



If all the above sounds too complex

You can directly download from the below links. If this page does turn out to be useful, then I might update it regularly. Do leave a comment to let me know if it has helped you.


Android SDK Platform 4.2.2 (*** NEW ***)
All Platforms



Android SDK Platform 4.1.2 (*** NEW ***)
All Platforms


Android SDK Platform 4.0.3
All Platforms

Android SDK Platform 4.0
All Platforms

Android SDK Platform 3.2 revision 1
All Platforms

Android SDK Platform 3.1 revision 3
All Platforms

Android SDK Platform 3.0, revision 2
All Platforms

Android SDK Platform 2.3.3_r2
All Platforms

Android SDK Platform 2.3.1_r2
All Platforms

Android SDK Platform 2.2_r3
All Platforms

--- OLDER LINKS (Still working) ---

Android SDK Platform Honeycomb Preview, revision 1
All Platforms

Android SDK Platform 2.3.3_r1 (Offline complete download) - Approx 80 MB
All Platforms

Android SDK Platform 2.3_r1 (Offline complete download) - Approx 80 MB
All Platforms

Android SDK Platform 2.2_r2 (Offline complete download) - Approx 80 MB
Windows
Mac
Linux

Android SDK Platform 2.1_r1 (Offline complete download) - Approx 80 MB
Windows
Mac
Linux

Android SDK Platform 2.0.1_r1 (Offline complete download) - Approx 80 MB
Windows
Mac
Linux

Android SDK Platform 2.0, revision 1 (Offline complete download) - Approx 80 MB
Windows
Mac
Linux

Android SDK Platform 1.6_r2  (Offline complete download) - Approx 63 MB
Windows
Mac
Linux

Android SDK Platform 1.5_r3  (Offline complete download) - Approx 54 MB
Windows
Mac
Linux

Android SDK Docs for Android API 7, revision 1 - Approx 48 MB
All Platforms

Android SDK Tools, revision 5  (16 to 23 MB)
Windows
Mac
Linux
Labels:

Pointer not declared even when declared !

Posted by Quakeboy Comments
A Strange problem encountered yesterday which left us puzzled for a few mins :) (Check image below)


So now, we tried everything possible. Until at last when we saw that there was a backslash after "Plist" in the comment line. As backslash is an escape sequence, it made the whole next line invalid, more like a comment.

Once we deleted that backslash, things were back to normal. But hey, aren't comments supposed to suppress anything in them including escape characters
Labels: ,