This weekend there was a big event at my employer InnoGames: The InnoGames GameJam Volume 2!
It was the second Jam InnoGames organized, but the first time for me attending. So there were tons of new experience and fun for me.

The countdown started Friday at 6 P.M. GMT + 1 and holds 48 hours of hardcore programming for us. At the beginning Michael, our organizer, hold a little (not well prepared) keynote and announced the topic of the jam: Space

I teamed up with two of my regular WestWars colleagues, Patrick another developer and David an awesome graphic (3D) artist. And we decided to make a 2D Action-RTS-Multiplayer-Shooting Game. Sounds awesome? Indeed it is! You’ll get the link at the end of the post.

We got inspired by this video i found a few month ago in my twitter stream:

So we started working and working and working… We used Node.js, with express, jade and Socket.io in the frontend we choosed Crafty.
Finally we came close to the end of the 48 hours countdown, and yeha, i’m proud that i can say that we got a result. AND its very impressiv and cool! Of cause there were a few bugs, and honestly the code quality is like shit. But it’s ok we (and you) have to keep in mind that the whole game including ideas, graphics, programming and testing has to be done in just 48 hours.
I only got 6 hours sleep over the whole weekend, that wasn’t much but I’m ok with that. InnoGames sponsored RedBull and Pizza for all so we got awesome support!

So and this is what we got and we call it Space Kitchen:

Space Kitchen

And you can test and play it here. Keep in mind that this is a multiplayer game and that it won’t be much fun to play alone, or let me say you can not really play alone. So pick up a colleague and go for a round full of Action and Fun! Oh and please don’t use Chrome, there was a little bug that we can not solve in time. But IE is working (loooool, but really it works) and of cause FF, Opera and Safari too. And don’t forget to turn up your volume

At the end of this article I’d like to say a huuuuge thanks to all attendees, organizers and of cuase my awesum employer InnoGames!

Hope to see ya’ all at the next InnoGames GameJam!

If you have any game related feedback for us, please leave a comment here in my blog.

P.S. Did you found the penis?

Update 11.01.2012 10:30 Uhr:
InnoGames shared this post at The InnoGames Blog

Hey there! I’m back!

After a long time of silence here in this Blog, I’ll post some new stuff. This time just a little test or example from my labs. I wrote Conways Game of Life in JavaScript and rendered it on a Canvas element.

And yeha, i just like simple like this:

You can find the pages here. It’s only client-side code and not obfuscated or some thing, so feel free to take a look on the uncommented source.

Next step maybe is replace the canvas rendering with divs and dom, cuz … yeha … canvas is just too slow and maybe i’ll post this here again.

Hello again!
If you follow me on twitter you’ve already noticed that I took a look into the Chromium source.
I was searching for a way to profile specific code snippets.
I asked google for the WebKit Inspector Profile API with no result.
So i digged around in the WebKit Inspector code and found out how it works.

console.profile("Hard Calculations");
// the script you want to profile
console.profileEnd();

Pretty easy, huh? “Hard Calculations” is the name of the profile that will be created.
Btw. if you run this in the console itself you’ll only see injection functions so try it in your project.

Hope this was helpful for you.
Have a nice day!

Hello and welcome to the show

I’m the new guy in the hood, i’ll also mostly talk about javascript development, maybe some server-side stuff and, if somebody cares, also 3D related stuff. Alright lets hit it.

We all know and use it, facebook. As a webdeveloper you may have noticed that the “main content area”(where the posts are) is the only part that reloads. It’s AJAX, damn you already knew that?! Ok, but you may asked your self how they’re changing the URL without a reload. I can tell you,this it not the all so mighty web 2.0 ajax magic thing. The stuff we are talking about is cooler, a lot cooler, it’s this experimental stuff, this “you can do everything, and more, in the browser without plugins” – HTML5.

So if you’re developing with browser compatibility in mind, take a second look at the url on facebook. It has a questionmark in the beginning, so PHP will parse these URL too. On the one hand it’s to be compatible with those other browsers on the other hand you need this for users who are browsing directly to one of those subpages.

“Stop talking and show me how it works!”

Alright!

You may think it has something to do with the window.location object. Sorry, it’s not! The object we’re looking at now is the window.history object.

window.history.pushState(
{
'test':"oh i am a test text :O",
'stuff':"some stuff here"
},"History title","/?changed");

So what do we have here?

The first parameter is an object which we’ll parse later, the second one is simply the name of the state and the third and last one is the new url. You can also change the whole url by starting with “http://” but same origin policy will prevent you from doing malicius stuff with it.

So lets go one step further and parse this object and also detecting and reacting on state changes.

window.onpopstate = function(event){
alert(event.state.test);
alert(event.state.stuff);
}

So i think this is pretty self explanatory, the onpopstate event get triggered if you move forward or backward in your browser history.
The state object contains the stuff you pushed in there. You’ll also find the state name somewhere in the event object.

I hope you enjoyed the read and we’ll see us again.
Follow me @twitter if you want to get news about WebGL and gamedevelopment related topics
and stay tuned to this blog for bleeding edge web technology informations.

see ya!

After I did my last oral exam last weeks, this blog title shouldn’t be longer about trainee ship.
So the blog title change, but the topics will stay the same!

Ohh and I forgot to mention … The “Download” section will close in near future. Because that’s so 2000-style. I’ll host all interesting code on github

Hey there,

After about only 3 Month of developemnt time, my newest project goes live: www.RauteMusik.FM
That´s also the reason why it was so damn quiet the last month. And I hope, that I now have more time for this blog.

RauteMusik.FM Homepage

Hope you all like this site. It tooks a lot of work for my and my friends (Tom, Martin and Mike).

Now I can also write about the daily work from time to time. Because its not top secret anymore =)

There is also a YouTube video where you can watch us during the release.

RauteMusik Developers during the release! Yep! I’m in there too ^^

Hope you all like it, and please leave a comment if you do so If not just stfu!

Bye!

Hey there,

First of all I want to say sorry, that I don’t write anything for such a long time, but I’ve a really big project running and this is why I have no time for blogging at the moment. BUT I want share a little codesnippet with you. The project I mentioned is a big community site and therefor I needed a cool way to get the age from a user, but we only have his birthday. And nearly all solutions google shows me don’t respect the leap-years. So I have to look for a solution on myself. And yeah it’s pretty easy with the “new” PHP DateTime. Take a look:

$oDateNow = new DateTime();
$oDateBirth = new DateTime($sDateBirth);
$oDateIntervall = $oDateNow->diff($oDateBirth);
/* @var $oDateIntervall DateInterval */
echo $oDateIntervall->y;

That’s it. Easy, huh?

The next post in abount two weeks hopefully will announce the “big” project I’m working on. So stay tuned…

Hey folks,

It’s weekend, so there’s time for own projects and if you do like me, you already programmed the first five days before weekend. So its time for a variety!

While I clicked through the NetBeans wiki (Do you know that NetBeans 7 will come with git support?), I discovered that netbeans can also handle some kind like themes, called Look and Feel in Java. And you can easily switch between a few themes without any download anything, all the look and feel’s came with the JDK. I tried a few, but most of the things I downloaded are broken in any kind. So I will show you the inbuild ones. take a look!

GTK - NetBeans IDE 6.9.1

Metal - NetBeans IDE 6.9.1

Nimbus - NetBeans IDE 6.9.1

And you can also download a variety of others.

You can try these themes with a single parameter on you netbeans call, like:

$ /bin/sh "path/to/netbeans/bin/netbeans" --laf com.sun.java.swing.plaf.nimbus.NimbusLookAndFeel

You want to keep these theme? Just set it in your netbeans.conf, its located in your NetBeans etc folder. Just add the –laf parameter to netbeans_default_options

If you want to see more screens or need more help with the config. Take a look at The NetBeansPHP Blog, they put a lot more screens on their page. I think I will go on with Nimbus, or Metal, don’t really know:)

Happy coding!

Hey there,

The first post in 2011. So happy new year to all of you!

The last days I played around with JavaScript, it’s a very cool language, and this post should be the first a few JavaScript OOP tutorial posts. And I want to start with a little example for inner classes in JavaScript. Okok, you all know there are no classes in JavaScript, so there couldn’t be inner classes. But the known behavior of inner classes like in Java could be ported to JavaScript. Lets see…

In this example we have a little Object/Class/Function, whatever which loads HTML templates from a Server with AJAX, and to prevent multiple ajax calls to the same template, I want to have a little cache (Note: I you have configured your web server right, it’ll answer 304 NOT MODIFIED, but we also want to save the request. If you want to learn more about configuring your webserver the right way, read my articles about performance optimization for a Apache web server).

But lets take a look at the code:

var TemplatingStuff = function(){
	/** some code **/
	var cache = new function(){
		var cacheData = {};
		this.set = function(name, data){
			cacheData[name] = data;
		};
		this.get = function(name){
			return cacheData[name] || false;
		};
		this.deleteEntry = function(name){
			cacheData[name] = undefined;
		};
		this.flush = function(){
			cacheData = {};
		};
	};
	/** some code **/
}
}

Yeah thats it, define a function as usual and add a new in front of it, and assign it to a var, so you can use your cache in the rest of the ‘object’/class/function, whatever And of cause you can also use it with prototyping, but here its public, not private like in the first example.

TemplatingStuff.prototype.cache = new function(){
	var cacheData = {};
	this.set = function(name, data){
		cacheData[name] = data;
	};
	this.get = function(name){
		return cacheData[name] || false;
	};
	this.deleteEntry = function(name){
		cacheData[name] = undefined;
	};
	this.flush = function(){
		cacheData = {};
	};
};

Ohh and if you’re curious what I’m doing there with templating stuff in JavaScript, be prepared. Maybe I’ll publish it later, just let me say; I’ll call it UrgeEngine.

See Ya!

Hey folks,

Today I want to show you a little nice tool which I coded today, it’s not eyeflashing-hardcore-awesomeness BUT its nice! Do you ever saw a desktop gamedeveloper during his work? They mostly have debug output on their screen. Like FPS or s.th. depinding on their needs. They just push string to the upper (mostly left) corner.

I’m not a desktop game developer, but I wanna have such a tool, too. So I take a few hours and made one, and its cool. Want to see a demo? Here it is:

Nice, isn’t it?

And it’s really easy to use, look

// made it accessible in global scope
// and give a target (in jQuery notation)
var vConsole = new visualconsole('#debug');

// now you can use it like this
vConsole.log("foo");
vConsole.log("bar", 'bazID');
vConsole.update('bazID', 'foobar');

For me the most important feature is that not like the browser console. Which creates a new line for every entry, you can update existing entries. As you can see in the example the mouse position on the site.

VisualConsole UML

And yeha we’re so used to UML so I’ll offer a UML for this too. Greets to my Classmates

But there are a few things to note, first this tool requires jQuery, only strings can be displayed correctly and note there’s no scrolling in it. But feel free to add it, I will add it as soon as I needed it Ohh and I nearly missed it to give you the download: [download id="3"]

Hope you enjoy it. If you do, don’t forget to share this with all your friends via twitter or share it on Facebook