Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have made a type to shoot game using HTML5, Javascript and Ruby on Rails.
Here is the link for the game Tweetraitor

I wanted to make a loader for resources (sounds, images) when the game starts. Currently when the game starts the background image takes time to load and it does not look good. This loader should load all the assets those are used later in the game.

Code for the game is here: Tweetraitor on GitHub

In the current version, all the images are loaded using js in an erb file which controls the game logic. Is there a better way to do this?

share|improve this question

I have to admit I have no idea of Ruby and how it's used together with js, but here is how I'd do it with js:

window.onload = function() {
        var sources = {
            resource1: "img/sprite1.png",
            resource2: "img/sprite2.png",
            resource3: "img/sprite3.png"
        loadImages(sources, initGame);  // calls initGame after *all* images have finished loading

    function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        for (var src in sources) {
        for (var src in sources) {
            images[src] = new Image();
            images[src].onload = function(){
                if (++loadedImages >= numImages) {
            images[src].src = sources[src];

    function initGame(images) {
        // some code here...
share|improve this answer
Thank you. That's definitely better than what i am doing. – s2n Feb 18 '12 at 6:25
Note that when there is just one image which doesn't load for some reason, the game will load forever and there will be no error message. So you should also add an .onerror handler to the images you load. – Philipp Jan 28 '13 at 10:27

check this out: But its pure JS.

This preloader is used in HTML5 version of Cut the Rope game:

share|improve this answer
Thank you. Will check it out. – s2n Feb 18 '12 at 6:22

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.