For an entire week I've been working on a canvas/html5 project of mine: the Kiflea Engine. "What's that?", you ask? It stands for "Kipdola's Flat Earth" Engine. It's a tiled based engine on which you can build a game. Or at least: that's the goal of the project. I'm not there yet, even though I feel like I've already made huge advancements.

The maps are built using Tiled. Any tileset you load in there will load in the engine. The HUD is built using a simple JSON file, ... As you can see in the image above, I've just finished my pathfinding algorithm.

If you want to try the engine in its current state out, you can do so here.

If you would like to download the source, I've set up an SVN repository over here: http://kipdola.be/trac/repos/ You can download the code by executing this SVN command: svn co http://kipdola.be/svn/kiflea/

I would really apreciate any feedback, ideas, code optimization (did I tell you this is my first ever JavaScript program?), patches, ... Don't ask my why you can't kill anything, though. It's an engine, not a game (yet).

var flattr_url = 'http://www.kipdola.be/en/blog/skerit/126-presenting-kiflea-canvas-game-engine-html5';

On the main page ofour Kipdola site is a flash video just under the menu. When a menu expands, it unfortunately hides behind the flash file. That's incredibly annoying.

I searched for a few fixes. Some suggested to adjust the z-index of the menu, but that still did not work. At least not in Firefox. And then I found out you actually have to add a few parameters to the object itself. These, to be precise:

<param name="wmode" value="transparent" />

This goes in the <object> element. For it to work on both Firefox and IE you have to add another one to the <embed> element. Like this:

<embed src="http://some.url/flash.swf" wmode="transparent">

So the video in the showcase section on our frontpage has this code:

<object width="400" height="225"> <param name="wmode" value="transparent" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11104140&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" /> <embed src="http://vimeo.com/moogaloop.swf?clip_id=11104140&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225" wmode="transparent"> </embed> </object>

It also does what it says: makes the flash object transparent. Vimeo, for example, shows a little animation while loading the video. With transparency turned on this isn't drawn on a black background, but directly on your page. Which is pretty

Have you ever had a bunch of subdirectories each filled with only one zip file? Or have you ever had a task that needed to be done in the same way? Well here's a handy little line of code that will help you on your way!

find -name '*.zip' | xargs -n1 echo unzip

This doesn't actually do anything yet, it searches for .zip files in every subdirectory relative to the one you're currently in and then echoes what it'll do to those files once you remove the `echo` command So actually typing:

find -name '*.zip' | xargs -n1 unzip

Will perform the command. Another example, if you want to copy lots of files from the subdirectory of one map to another, you can do this:

find /home/user/map/ -name "*.txt" | xargs -i cp -v .

This will copy every .txt file under any directory, starting from /home/user/map/, to your current directory. (No matter where you are)

I love it, and it has saved me lots of time!

Binny V A over at Bin-Blog has written something marvellous: a print_r function for Javascript.

What does it do? It takes an array (or hash or object) and prints out every key with its value. If it comes along another array, it does the same thing again. It's such a useful feature in PHP, it's a great debugger-friend.

There are a few code snippets out there that do the same job, but I thought this one was quite small and compact. Don't forget to wrap it in a <pre> tag to get a nice layout.

/** * Function : dump() * Arguments: The data - array,hash(associative array),object * The level - OPTIONAL * Returns : The textual representation of the array. * This function was inspired by the print_r function of PHP. * This will accept some data as the argument and return a * text that will be a more readable version of the * array/hash/object that is given. * Docs: http://www.openjs.com/scripts/others/dump_function_php_print_r.php */ function dump(arr,level) else } } else return dumped_text; }

I've only recently gotten into Javascript, thanks to the <canvas> element. I'm currently building a 2D tile-based render engine for a game. (What better way to learn something new than to build a game, right?)

Ofcourse, this game also has to respond to the keyboard. I got tired of looking up keycodes real quick and decided to just create an associative array out of them, for the hell of it. My IDE even autocompletes them. Here's the list:

// A var storing all useful keys for easy access var key =

Now you can use things like "key.Uparrow" in your code in stead of it's corresponding number. For example:

// Bind the onKeyDown function to the onkeydown event. window.onkeydown = onKeyDown; /** *This function is called whenever a key is pressed on the keyboard *@param key The key */ function onKeyDown(keypress) }