A trailer from extended version of what i’ve done for Ludum Dare #26
It is HTML5
The full version is coming to IOS/Android using CocoonJS
Windows/OSX/Linux – If I manage to port it using node-webkit
A trailer from extended version of what i’ve done for Ludum Dare #26
It is HTML5
The full version is coming to IOS/Android using CocoonJS
Windows/OSX/Linux – If I manage to port it using node-webkit
Need some cheap C64ish sound for your game? Check out JSFX
Just noticed this on reddit and decided to put it on top of the list.
Get your personally generated ship



Aren’t you annoyed by users saying — i am not going to register using my twitter/facebook/whatever because it is sooo private and u are 100% evil? Finally someone noticed the need for a no-password system which does one and one thing only – lets the user sign up. It is really easy and convenient for both users – and – developers.
It is really simple and straightforward yet having everything you need as a pixelartist. Layers, animations, palettes to count some features. Perfect if you feel that you don’t need 90% of photoshop doohickies.

![]()
Do you have an urge to troll some js/css idea? Need to share it quickly or colaborate? Looking for inspiration? JSFiddle feels clumsy?
[inlinead]
Mozilla Hacks is one of the key resources for people developing for the Open Web, talking about news and in-depth descriptions of technologies and features
Keep yourself motivated and full of ideas looking at friendly programmers work.



It is beyond discussion. Forget about anything else you have been using before. It is a clash of inferior power of VI and simplicity of notepad. No distracting buttons and useless shortcuts yet it has more features than most IDE’s you have been using until today.

![]()
![]()
Tiled is a general purpose tile map editor. It’s built to be easy to use, yet flexible enough to work with varying game engines, whether your game is an RPG, platformer or Breakout clone. It supports both orthogonal and isometric view.
It is not a secret a that most of it is not a quality stuff but there are some pearls like for example Painterly Spells serie

Not only you can get inspired but – what is even more valuable – get in contact with people involved in drawing real game graphics. Observe, learn aesthetics, start making subtle comments and then lurk into the world of pixelart.
After using tons of project managing software I realized that all I need as a freelancer are not overblown tools to manage army of hundreds but an utility to free my own mind of the things that I have to do.
A simple list is one of the most genuine tools to organise yourself. I am using it not only to remember my duties but also to write down ideas, colaborate with team and manage projects.
Are you lonely in your game development process? Depressed because everyone is out for a weekend and you are spending another night doing some nerdy stuff? Having questions about browser based gamedev, html5, javascript or just need some feedback?

We are a community of people devoted to making browser based games and barbecue
These are the techniques I’ve used in my upcoming game
Zom Zok – Realtime multiplayer shmup
For all examples I will be using einaros/ws websocket implementation which is much more lightweight and straightforward than Socket.io
Einaros/ws: https://github.com/einaros/ws
Get very nice implementation here https://github.com/BonsaiDen/BiSON.js
var packet = {
command: "something",
data: {
all: "my",
pretty: "data",
number: 1337
}
};
ws.send(BISON.encode(packet));
ws.onmessage = function(event) {
var packet = BISON.decode(message.data);
/* do whatever with the packet */
}
This rule applies to everything what is enumerable but you are doing it using strings.
var packet = {
action: "update_entity",
entity: [ ... ]
};
var DEFS = {
UPDATE_ENTITIY: 1
};
var packet = {
action: DEFS.UPADTE_ENTITY,
entity: [ ... ]
};
In this case:
All above examples are somewhat wrong – take a look below:
var packet = {
command: "update-something",
minerals: [32, 12, 16],
name: "fancy",
jesus: "christ"
}
var packet = [ DEFS.UPDATE_SOMETHING, [32, 12, 16], "fancy", "christ" ];
tip: You can write a converter between this two formats – however – for performance sake I advise you to just keep the packets well documented.
When something happens from time to time – not at every step you don’t really want to send it in every frame. For example:
var packet = [ ..., player.shooting ];
/* only if the state changes send this */ var packet = [ DEFS.PLAYER_SET_SHOOTING, player.shooting ];
For example – you have static objects like asteroids in mine game (which are randomly spread at the beginning of the game) – you only need to send them once – don’t send them in each snapshot.
[inlinead]
This is kind of a tricky thing.
var packet = [ DEFS.UPDATE, "101001", "something", 32, "anything" ];
Now what it does:
If there are a lot of them you should simulate them 100% at the client side. I am using commands PLAYER_START_SHOOTING, PLAYER_STOP_SHOOTING. Note that this is not fully accurate – and can lead to bullet missing the target yet still damaging it – however it is not very noticeable when the count is great.
Instead of sending *Player lost 12 hp* whenever it happens – sum it and send once per some time / snapshot.
If your data relies on strings more than numbers you could give a try to LZW algorithm instead of BISON. LZW is very good when it comes to compress strings with a lot of repetitive words/segments.
Here is an example implementation. It is used in the same way as JSON.stringify or BISON.encode
If you have done all the optimisation and still not satisfied with the result you can try fixed packets. It means that there is no separators between values but each size has to be constant. It means you have to define how many bits are used by each value in packet. It also means that you will have to add headers for each collection describing how many objects are within.
These are the major ideas that made my realtime multiplayer games capable of handling a lot of entities. I’ve wasted a lot of time (and toilet paper) to come out with them as the internet isn’t very generous at multiplayer knowledge. If you have any thoughts – ideas – improvements – please share them below.
If you want to show appreciation consider using share/like buttons or a donation <3,
Comments like awful or awesome with no meritorical value will be deleted as I want to keep this thread helpful.
Cheers.
You may find some of reddit comments useful
by Amit Patel on #bbg
http://en.wikipedia.org/wiki/Protocol_Buffers
https://github.com/sirikata/protojs#readme
This is similar approach to using fixed structure but doesn’t require understanding on binary level.
You can ensure packet structure as a flat array by yourself or use PacketFlattener which converts complex/deep objects structure to flat array.
by Karel Crombecq from Sileni Studios on #bbg
Project I’ve started some time ago. However I didn’t found people willing to colaborate.
I am also not sure about using trademarked material :)

Star wars by Me

Avengers by Qrakis
IT Crowd by Me

Hi-res Avengers by Adam Sargent
Click on image to run the demo.

Straight to the buisness.
Why? jQuery is one of the most popular libraries among webdevelopers. It’s free and there is a well established marketplace for your plugins.
To jump straight into the business we are going to write another `tooltips` plugin.
(function($) {
$.fn.tooltip = function() {
}
})(jQuery);
This is the basic jQuery plugin structure. We are extending jQuery.fn object to add a method to the results of jQuery select query.
$("selector").tooltip();
We use self invoking function to keep our mess within the plugin. It also allows us to use $ symbol – even if there are conflicting libraries like `mootols` or `prototype.js`.
One of the best values of jQuery is its chainability. You often meet constructions like this:
$("selector").addClass("some-class").attr("id", "some-id").appendTo(document.body);
This is called the chain and we have to keep it working.
(function($) {
$.fn.tooltip = function() {
return this; // keep the chainability
}
})(jQuery);
this is simply a reference to objects matched by query. You work with it just like with a result of $(“.selector”) function. Let’s make some helper which will give matched objects desired functionability. I call it setup();
(function($) {
function setup(element) {
// add a shorthand for jquery wrapper over element
var $element = $(element);
// add extra features to the matched $element
}
$.fn.tooltip = function() {
return this.each(function(index, element) {
setup(element);
});
}
})(jQuery);
We call setup() method for each matched element. Also we know that jQuery methods maintains chainability by returning this, so we are allowed to return the straight result of $.each method.
Currently our plugin does nothing – lets give it some life.
(function($) {
// need a container for our tooltip
var $tooltip = $("<div>").addClass("tooltip");
// add container to body when the DOM is ready
$(function() {
$tooltip.appendTo(document.body);
});
function setup(element, text) {
// wrap jQuery functions around DOMElement
var $element = $(element);
// assign text to $element using $.data method
$element.data("tooltip", text);
// show tooltip on mouseenter
$element.on("mouseenter", function() {
// our text variable has been poluted by the previous scope,
// so we are going to retrieve the text which we saved in $element
var text = $(this).data("tooltip");
// center the tooltip and make it below the element
$tooltip
.html(text)
.css({ left: $element.position().left + $element.outerWidth() / 2 - $tooltip.width() / 2, top: $element.position().top + $element.outerHeight() + 16 })
.show();
});
$element.on("mouseleave", function() {
$tooltip.hide();
});
}
$.fn.tooltip = function(text) {
this.each(function(index, element) {
setup(element, text);
});
}
})(jQuery);
.tooltip {
background: #222;
border-radius: 6px;
color: #eee;
display: none;
padding: 4px 8px;
position: absolute;
}
That’s it. Your own working plugin! Stay tuned for the next part where we gonna learn how to sell a jQuery plugin.
Sounds mysterious – but it is not. When you write a plugin or a library you want it to produce as little trash in global scope as it is possible. You want it to be elegant and javascript has a mechanism to do it like a sir. Each function has it’s own scope – which means variables declared with var – stay within that function.
function elegantFunction() {
var something = "hello I work only in this function";
console.log("elegant function says", something);
};
elegantFunction();
console.log("global scope says", something); /* error - undefined variable */
function messyFunction() {
// notice that the var is gone
something = "hello I shit where I stand";
console.log("messy function says", something);
};
messyFunction();
/* the something variable has been poluted by the dirty function */
console.log("global scope says again", something);
Another elegant thing are self invoking functions – which literally mean that you create a function, and call it right after – not even giving it a name.
(function() {
console.log("Hey I am working");
})( );
Simple as that. Self invoking function can even take arguments and return values;
var val = (function(name, text) {
var data = { name: name, text: text }
alert(name + " says " + text);
return data;
})("gooby", "fu dolan");
alert("returned value is" + JSON.stringify(val));
var TextureManager = (function() {
var textures = { };
function generateTextureFromImage(src) {
...
}
return {
getTexture: function(id) {
return textures[id] || false;
},
addTexture: function(id, src) {
this.textures[id] = generateTextureFromImage(src);
}
}
})();
TextureManager.addTexture("wall", "assets/wall.png");
TextureManager.getTexture("wall");
Of course you can avoid mess in many other ways. For example using object literals (singletons). Elegant thing in this solution is that you don’t have to call any constructors/initializators.
Usually when you are in need for an outside resource you will head towards some kind of asynchronous request. Examples: loading image, sending XHR Request (AJAX) or making a query to database. Standard javascript construction for this kind of task is
someRequest(arguments, callback);
Which leads to extremely unreadable constructions like:
$.post("somthing.php", { a: 3, b: 4 } function() {
$.post("anything.php", { foo: "bar" }, function() {
loadImage("nudity.jpg", function() {
// everything is done, execute the code
});
});
});
Now admit that it looks gross, but notice that there is a common element for all async functions in javascript – the last argument is always a callback (if some library breaks this standard – it’s probably lame and you should find a replacement). Now lets take advantage on this construction.
The most typical requests are serial (which means the next request runs after previous) and parallel (a callback is fired when all requests have done they job). This is called the “flow control”. I will give you an template for parallel request which you can modify to fit your needs.
Here is mine implementation (first some usage examples):
parallel( functionName, [argument1, argument2...], functionName2, [argument1, argument2...], ... callback );
It’s quite self explainatory. Callback arguments are results (as an array) from each request.
Example:
parallel(
$.post, ["script1.php", { user_id: 32 }],
$.post, ["script2.php", { foo: "bar" }],
function(script1, script2) {
// jquery $.post callback arguments are [data, textStatus, jqXHR]
// so to get the right response
script1Response = script1[0];
script2Response = script2[0];
}
);
The standard construction of callback function should be callback(response, error) – I am not saying that jQuery is an example of a bad design, but it’s designed for fronted developers so it has its flaws. In fact the last $.post argument is dataType which is usually set to “JSON” and doesn’t fits to our implementation. However it’s really easy to wrap the $.post in another function so you don’t have to give up jQuery.
// you can upgrade it to more robust version
// I just presume you don't care about error, and expect some JSON data
function myPost(url, arguments, callback) {
$.post(url, arguments, callback, "JSON");
}
Ok now – the parallel function body.
parallel = function() {
var onReady = arguments[arguments.length - 1];
var ready = 0;
var results = [ ];
var count = (arguments.length - 1) / 2;
for(var i = 0; i < arguments.length - 1; i += 2) {
var func = arguments[i];
var args = arguments[i + 1];
var f = function foo() {
var i = arguments[arguments.length - 1];
results[foo.i / 2] = arguments;
ready++;
if(ready == count) {
onReady.apply(null, results);
}
}
f.i = i;
args.push(f);
func.apply(null, args)
}
}
What it simply does is wrapping the callback function for each request. We take advantage of function scope in which we put an array agregating results from callbacks and some counter which is increased within wrappers. When the counter reaches the count of requests the main callback is being fired with results as arguments.
If you want more ready and complex solutions there are a lot of libraries dealing with async jobs. I recommend Caolan McMahon Async.js
Yeah, I should’ve mentioned this at the beginning of the article, but now you not only know how to deal with problem – you also understand it.
I have created a little benchmark on jsPerf
Social Widgets powered by AB-WebLog.com.