15+ Useful HTML5 Game Developer Resources #1

#1 Retro sound with JSFX

Need some cheap C64ish sound for your game? Check out JSFX

#2 Free beautiful isometric road tiles

Just noticed this on reddit and decided to put it on top of the list.

#3 Procedural ships generator

Get your personally generated ship

#4 No idea for a game?



300 mechanics is here to save the day!

#5 Mozilla Persona – sign up provider which does signup and nothing more.

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.

#6 Good free pixelart editor

Aseprite is the anwser

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.

#7 Tired of finding sprite boundaries in a spritesheet?

Sprite Cutie


#8 Online javascript/css sandbox

Do you have an urge to troll some js/css idea? Need to share it quickly or colaborate? Looking for inspiration? JSFiddle feels clumsy?

Try CSSDeck – I would call it a dribbble for frontend developers

# Ads by google

[inlinead]

#9 Hungry for cutting edge knowledge?

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

#10 Looking for an inspiration?

Keep yourself motivated and full of ideas looking at friendly programmers work.

Peep and share with Screenshot Saturday



#11 Best IDE/Editor for web stuff

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.

Sublime Text

Be sure to read some Tips and tricks

#12 Universal Map editor


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.

#13 Micro JS – because the world is not all about jQuery

#14 Free resources

Open game art is probably the most popular website with free game graphics/sounds etc.

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

#15 Get in touch with art

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.

#16 Organise better

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.

Workflowy – you might think it is just a simple list – and you are right.

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.


#bbg The brotherhood of nerds

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?

Join us

We are a community of people devoted to making browser based games and barbecue

That’s all (for now)

If you know more useful stuff – leave it in comments. You will be credited and linked (just provide your homepage) in the next issue. Thanks for reading and see you soon.

10+ Tips For Optimizing Websockets Bandwidth Usage in HTML5 Games

Try the effect before reading

These are the techniques I’ve used in my upcoming game

Zom Zok – Realtime multiplayer shmup

0. Einaros

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

1. Use BISON to reduce packet size about 50%

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 */
  }

2. Define numeric values for your string constants

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:

  • string consistent of ASCII characters takes 1 byte for each character
  • integer takes 1 byte for value up to 128, then another byte for value up to 32768

3. Clever structured packets

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.

4. Commands

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 ];

5. It doesn’t changed? DON’T SEND IT

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.

6. Ads by google

[inlinead]

7. (again) It doesn’t changed? DON’T SEND IT

This is kind of a tricky thing.

   var packet = [ DEFS.UPDATE, "101001", "something", 32, "anything" ];

Now what it does:

  • I keep previous state of shared entity.
  • If value changed I add it to the packet.
  • Then I build an identifier which tells are the values present or not in the packet.
  • “10100″ means “yes skip yes skip skip”.
  • Of course it is binary so I am using integer to store it – string above is to make it more understandable
  • 8. Bullets

    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.

    9. Grouping/summing events

    Instead of sending *Player lost 12 hp* whenever it happens – sum it and send once per some time / snapshot.

    10. BISON vs LZW

    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

    11. Fixed structure packets

    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.

    Prologue

    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.

    Readers addendum

    Reddit

    You may find some of reddit comments useful

    1. Use protocol buffers

    by Amit Patel on #bbg

    http://en.wikipedia.org/wiki/Protocol_Buffers
    https://github.com/sirikata/protojs#readme

    2. Use flat structure

    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

    Stripes – pixelart Star Wars, Avengers and IT Crowd

    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

    You can play what has been done so far.

    How to earn money with your javascript skills – pt.1 – how to write jQuery plugins

    Straight to the buisness.

    jQuery plugins

    Why? jQuery is one of the most popular libraries among webdevelopers. It’s free and there is a well established marketplace for your plugins.

    Plugin basics.

    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`.

    Chainability

    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.

    Tooltip plugin

    javascript

    (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);

    css

    .tooltip { 
        background: #222;
        border-radius: 6px;
        color: #eee;
        display: none;
        padding: 4px 8px;
        position: absolute;
    }

    Demo

    Conclusion

    That’s it. Your own working plugin! Stay tuned for the next part where we gonna learn how to sell a jQuery plugin.

    Self invoking functions in javascript

    Understanding the function scope and self invoking functions.

    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));

    Example usage

    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.

    How to avoid code nesting when working with javascript async requests.

    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.