Release 0.1 – Gladius ticket 6

The day for the 0.1 release finally arrived.

The ticket that I’m working on is not fully implemented yet, but has a few pieces working, so if anybody wants to try it, please don’t hesitate.
Any suggestions/comments are more than welcome.

Here is an overview of what has been done, and what I plan to do:
The goal for the Cache module, is to pre-load game resources in the browser. Also, to cache game resources for offline usage.

The module has three public methods:
get() - Loads resources
find() - Retrieves resource by name or url
clear() - Unload single/all resources

Each resource may have alternate sources, so if ones fails to load the other can be loaded.
Once the resource is loaded, it’s stored in an array for further usage:
resources = [
{
url: 'path to resource',
name: 'resource key',
data: resourceObject (image, video, audio, document),
alternates: ['path to alternate1', '....']
},
{
...
}
]

Before the resource is loaded, the module checks to see if the extension is valid.
The validation occurs by trying to match the resource extension with an array containing all the valid extensions.
*Another way I thought to validate the resource, is sending a request, and based on the mime-type contained on the response, determine if the resource is valid or not. The only question is performance issue, and if its really necessary.

Back to the validation:
If the extension is valid, the module tries to load the resource
If the extension is not valid, the module uses the first alternate.
If both ways fail the onError callback is invoked

Once the resource is loaded the onComplete callback is invoked, if there are any errors loading the resource, it then tries to load an alternate, if there are no alternates the onError callback is invoked

The callback chain is not fully implemented yet.
My idea is to count how many resources are there to be loaded.
Every time a resource finishes loading, or fails to load, the counter will decrease by one.
Once the counter reaches zero the onCompleteAll callback is called.

The way it works right now, the onCompleteAll callback is invoked once all the resources are initialized, but not loaded. That’s generates an error because even though the onCompleteAll callback is invoked, the resources are not always loaded in memory.

The clear method will unload a resource from memory.
I’m still not sure how the unload process will happen.
For now, the way I’m implementing, it’s setting the resource object to null, and then removing it from the resources array.
I don’t know if this method will actually remove the resource from memory. I think that by setting the resource to null, the garbage collector should remove it, but I’m not sure. I’ll do some more digging on the subject.

Other way I found to load and unload resources, it’s using URLObjects.
I ran some tests to compare both methods. The one that specifies the src attribute for the elements(video, audio, image) and the other that uses URLObjects.

I didn’t find any difference in the memory consumption of the browser. Maybe there are better ways to check memory consumption, since the one I did was by loading the images in the browser and using the task manager to check how much memory it was consuming.
Here is the link to URLObjects reference:
https://developer.mozilla.org/en/DOM/window.URL.createObjectURL

TODO:

Create different contexts for different levels

Use webworkers to load resources
*Not sure how this would work, since a worker doesn’t have access to the DOM

Clean resources from memory
*Find a way to remove the resources from the memory.

Validates different file formats for different browsers

Organize the way the callback functions are invoked.

Load resources other than images, videos, and audio.

Implement app cache/manifest/web storage.

Create qunit tests

Here is the link to the Cache module code:
https://github.com/diogogmt/gladius/blob/develop/src/core/cache.js

Here is a demo page I’m using to test the module:
https://github.com/diogogmt/gladius/blob/develop/test/core/Cache/testCache.html

Advertisements

Managing Game Assets – XHR2 and URLObjects

I ran into a problem while working on a ticket in the gladius project.
The ticket that I’m working on is about loading resources into the browser’s memory.
The part that I’m struggling with is how to remove the resources from the memory once they’ve been used.
For example:
Lets say a game has 10 levels, each level has different resources. It make sense to load the resources for level 1, level 2, etc, separately. So when the player finishes level 1 and goes to level 2, the resources from level 1 will be unloaded from memory.

I spent a few hours on google trying to find a way to manipulate the browser’s cache with javascript, but I hit a dead end. Not only I didn’t find any information, but all the information I found was saying that it was impossible to do such a thing.

if (!google) goto IRC 🙂

So there I was. Asking questions on different channels hoping to find a solution. The first answer I got wasn’t very encouraging. I was told that it was impossible to do what I wanted. But I knew it had to be possible. The ticket specifications were very clear, the module needed to unload cached content. So I kept asking.

Luckily, the second answer was a little bit more optimistic. It pointed me in the direction of XHR2 requests and URLObjects.

XHR2(XMLHttpRequest Level 2) has a lot of new features compared to the old XMLHttpRequest,some of the features are:
Cross-origin request
Upload progress events
Upload/Download of binary data
Plus, it can do a lot of other cools things, such as working with the new HTML5 APIs, like the File System, WebAudio and WebGL

But why XHR2 is handy when it comes to loading an image into the browser’s memory?
Because it provides a way to make a request to the server with a responseType set as blob. So the server sends the image back in binary format.
With the image in binary format it’s possible to create a temporary URLObject.
By having an image loaded as a URLObject, it gives the option to dynamically unload the image from the browser memory whenever needed. Here is an example:

window.URL = window.URL || window.webkitURL;

function getBlob(url, cb) {
var r = new XMLHttpRequest();
r.open("GET", url);
r.responseType = "blob" // XHR2
r.send(null);
r.onload = function() { // XHR2
objectURL = window.URL.createObjectURL(r.response); // Creates a temporary URL

console.log('objectURL: ' + objectURL); // moz-filedata:b42305a0-29a2-4b1e-ae02-6ef78b4cfe4e

img = new Image();
img.src = objectURL;
img.onerror = function() {
console.log('onerror');
}
img.onload = function() {
console.log('onload');
}
}
}

.....
.....
getBlob('img1.jpg', null);
.....
.....
window.URL.revokeObjectURL(objectURL); // Releases the memory

Even though the solution worked, I’m not sure if it’s a feasible one.
First, it’s not supported by all major browsers. Only Chrome 8+ and Firefox 4+ provide support.
Second, I don’t know what are the performance issues compared to simple http requests.
However, using this technique it should be possible to implement webworkers to make the requests and then post back a message to the page containing the binary for the resource.(**it’s not)!
**At the moment XHR2 requests are not supported in a worker thread
The bug is already filled in bugzilla
https://bugzilla.mozilla.org/show_bug.cgi?id=675504
https://bugzilla.mozilla.org/show_bug.cgi?id=658178

If anybody is interested on the topic, these are some good references:

http://www.html5rocks.com/en/tutorials/file/xhr2/
http://caniuse.com/xhr2
http://davidflanagan.com/Talks/jsconf11/BytesAndBlobs.html
https://developer.mozilla.org/en/DOM/window.URL.createObjectURL
https://developer.mozilla.org/en/DOM/window.URL.revokeObjectURL#Browser_compatibility
https://developer.mozilla.org/en/Using_files_from_web_applications#Example.3a_Using_object_URLs_to_display_images
http://www.htmlfivewow.com/slide45
http://dev.w3.org/2006/webapi/FileAPI/
http://www.opera.com/docs/specs/presto28/file/


This and That – Understanding Javascript functions

Douglas Crockford mentions in his lectures OnJavascript, that javascript is so powerful that even without understanding the language it’s possible to program with it.
Now I understand what he means.
Javascript was the first language I was introduced to, not learnt, but introduced.
I’ve always used javascript to complement the development of web applications. Usually using frameworks, like jquery or mootols. But never by writing pure javascript code.

Even when I had to write some javascript code, was to use certain APIs, like googlemaps, or groupon for example.
Now that I actually need to write javascript code, I realized that I don’t know javascript as a language.

So what’s the solution? Read some books and write some code 🙂

This weekend I’ve been trying to understand the library html5PreLoader. The library pre-loads resources into the browser.
While reading the code, I end up looking at some parts and having no clue about what they were doing. Functions inside functions, functions inside objects, functions inside variables, and even functions inside functions.
Totally lost, I went to read about how functions work in javascript.

Here are a few examples of how functions can be used:

Functions used as methods:

A function can be a method in javascript. If the function is stored as a property in an object, it is considered to be a method.
When a method is invoked, this is bound to that object

var myObject = {
value: o;
increment: function (inc) {
this.value += typeof inc === 'number' ? inc : 1;
};
myObject.increment();
document.writeln(myObject.value); // 1
myObject.increment(2);
document.writeln(myObject.value); // 3

Inner functions:

If a method(function) of an object has a inner function, it is not possible to reference the object properties using the keyword this.
To access the properties of the object, the method must assign this to that. Then the inner function can refer to that as being the object itself.
To fix the problem the value of this is assigned to that

function add(n1, n2)
{
return typeof (n1 === 'number' && typeof n2 === 'number') ? n1 + n2 : 0;
}
myObject.doubleNumber = function () {
var that = this;
var helper = function () {
that.value = add(that.value, that.value);
};
helper();
}
myObject.doubleNumber();
document.writeln(myObject.value);

Another workaround for the problem is:

 if (!Function.prototype.bind) {

Function.prototype.bind = function (oThis) {

if (typeof this !== "function") // closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError("Function.prototype.bind - what is trying to be fBound is not callable");

var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP ? this : oThis || window, aArgs.concat(Array.prototype.slice.call(arguments)));
};

fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();

return fBound;
};
}

var x = 9;
var module = {
x: 81,
getX: function() { return this.x; }
};
document.writeln(getX()); // 81

var getX = module.getX;  
document.writeln(getX() + '<br />'); // 9, because in this case, "this" refers to the global object  

// create a new function with 'this' bound to module  
var boundGetX = getX.bind(module);  
document.writeln(boundGetX()); // 81

What happen is when getX is invoked as a method, it has access to this(module object).
However when the method getX is copied to a variable, it loses the module scope, and this now refers to the global object.
So this.x in getX access the global variable x.
The fix is binding getX to the module object. So then this.x will access the module.x variable.

The only problem with this solution is that isn’t cross browser compatible.

Further readings and references:
Javascript the Good Parts
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function


Running rescuefox

I had kind of a battle with my laptop to run the rescuefox demo game. But with the help of the community(big thanks to humph and ack) I was able to have everything installed, and finally able to run it.

Some of the key configuration points:
In the about:config page on firefox, I set the security.fileuri.strict_origin_policy to false and webgl.force-enabled to true. The first option I’m still not sure what it does, but the webgl.force-enable I understand that forces the browser to run pages that use webgl, even when the hardware doesn’t provide support.
I have an integrated graphics card, so that might be the reason why webgl is not supported on my laptop. Anyway, by changing those two settings, firefox now can run webgl pages, and the good part: it didn’t crash… yet 🙂

Other important points that I’ve learned:
-Git supports inclusion of external projects and libraries.
-This feature is very handy. By dynamicly including modules to the project, anybody who forks the repo will have up to date libraries, since it is downloading the libraries directly from the source, it just makes things a lot easier.


Getting involved in a project

Now I have decided, I’ll work on the Paladin project

After just watching the paladin IRC channel for about a week , I realized that was time to get involved.
At the beginning I thought that by just being on the channel and reading the discussions would be enough to get started in the project, I was wrong.

Now I’m starting to understand all the videos I watched last week. That’s is all about the community, without the community there is no project.
I was amazed to see that in just on quick chat with ack, I was able to clarify some questions I had about the project and find enough information to get me busy for at least a week.

I must say, it’s hard chatting about something that that I have no idea how it works.  A lot of times I feel lost, like I don’t belong to the place, but at the same time I feel more confident every second. I’m starting to understand a few pieces, and that’s encouraging. Especially knowing that there is a community to give me support and help.

One funny thing that happened today, was that after asking a few questions on the channel, I realized that would be better if I used ubuntu for the dev instead of windows. So then I powered up my VM and re-installed Ubuntu. During the installation I was remembering the first time I used ubuntu, I had never used any linux distro before, I had no idea how the OS worked, so I played a little bit with the system and then switched back to windows. However, the second time I tried it was a little bit easier, and third time easier then the second, the fourth easier then the third, until one point I felt comfortable enough to use it, and all shell commands, the file structure, installing a program, weren’t things of another world anymore.

The point is that I feel the same thing is happening right now, I’m leaving my comfort zone and entering in a territory that I know nothing about. But just like my experience with linux, I feel that by doing something I don’t know, one day I’ll end up knowing it.


Innovation, don’t be afraid.

After reading Raymond’s blog post : http://raymondhung.wordpress.com/2011/09/15/learning-about-javascript/

I watched  the first video from Douglas Crockford lectures on Javascript.
That was one of the most informational videos I have ever watched. He explains the trajectory of programming language since the 1800’s.  Going over why, and how programming languages were created.

During his lecture he enfhasizes the fact that the programming community doesn’t like to accept new ideas as they should.

That point gave me something to think about. Instead of accepting things like they are simple because they are, to start questining more, and not be afraid of new things.

For those who want to know more about the topic, Douglas Crockford recommends this book http://www.amazon.com/Programming-Languages-Fundamentals-Automatic-Computation/dp/0137299885

Check the min 38 in the video, important message there.


Installing Windows 8 on a Virtual Machine

As easy as may seem in some tutorials out there of how to install Windows 8 on a virtual machine, I struggled a bit to get it working. It took me a couple of days to have the windows 8 running on my PC.

I tought that would be a no brainer installing windows 8. All the tutorials were saying that all one needed was the ISO and either the VMware/Virtualbox

First I chose to go with Virtual Box, since is the one I use to run a few linux distros.

I created the VM, loaded the ISO, and then got this error message:

I searched but couldn’t find any information about it.

Unable to run it on virtual box, I tried to install it on the VM Server. Again I got an error message:

And again there was no solution online

The only hint I found after going through a few forums was that the Vmware Workstation supposed to install the Windows 8 withouth any erros. However, it required a license key, and the trial version was only for 30 days (if somebody finds the solution for the errors above please send me a message I’m not going to pay R$199.99 for the key ;P )

For the third time in a row, now in the VMware Workstation, I tried to install it, and wasn’t sucesfull. This time there was the following message:

The good news is that there was a solution for this problem.

Because the VMs don’t have an option for a Windows 8 guest operating system, all the tutorials recommend that when configuring the VM the best option was to chose Windows 7 as the OS. That was causing the error. The solution is very simple: by selecting “other” operating system when configuring the VM, windows 8 will install smoothly withouth any error messages.

For the first two errors it seemed to be some problem with the BIOS, and was happening in older computers.

The final result looks like this:

If you are thinking about installing Windows 8 , you can find the 32 and 64 bit version here http://msdn.microsoft.com/en-us/windows/apps/br229516

VMware workstation here http://www.vmware.com/products/workstation/overview.html