image loading issue HTML 5-Canvas JavaScript.

Need help with an engine or coding not on the list? Need help with a game or the website and forums here? Direct all questions here.
Post Reply
xgatherer
Posts: 8
Joined: Wed Jul 25, 2012 1:51 am

image loading issue HTML 5-Canvas JavaScript.

Post by xgatherer »

Code: Select all

         function LoadResources(){   
          alert("In load socket");
        
        var canvas   = document.getElementById("myCanvas");
        var context  = canvas.getContext("2d");
        var tiles= new Array();
       
        var loadedCount=0;
        for (x = 101; x <= 155; x++) {
            var imageObj = new Image(); // new instance for each image
            imageObj.src = "Resources/ClassicCardImages/deck1/dood_deck/"+x+".GIF";
            imageObj.onload= imageOnLoad;
            if(x==155){
            //setInterval(cardsImagesLoaded, 1200);
             }
             tiles.push(imageObj);
        }
          function imageOnLoad(){
              loadedCount++;
              console.log(loadedCount);
              if(loadedCount==55){
              cardsImagesLoaded();
              }else {
              alert(loadedCount);
          }
      };

      
      context.font = "italic 20pt Calibri";
      context.fillText("Your shuffled cards", 150, 460);
      };
So when i call the function LoadResources() it does give the alert "in load socket" but does not gives the alert while in imageObj.onload function.
Which means that the images are not loaded at all ...
Any kind of help clue will be alot appreciated.
If anyone can add me on skype see the whole code will surely get more idea ...
"lazygeeker" is my skype id...
Last edited by xgatherer on Thu Aug 02, 2012 6:01 am, edited 1 time in total.
Winawer
Posts: 180
Joined: Wed Aug 17, 2011 5:53 am

Re: image loading issue HTML 5-Canvas JavaScript.

Post by Winawer »

Try putting imageObj.onload = ... before imageObj.src = ...
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: image loading issue HTML 5-Canvas JavaScript.

Post by Jackolantern »

That very well could be it.

However, I would actually suggest using a real HTML5 preloader. They typically go far beyond the "onload" event and create a much more cohesive design that keeps all of your asset loading and the eventing system for their loading in one place instead of spread all over your code. A good and open source one can be found here.
The indelible lord of tl;dr
xgatherer
Posts: 8
Joined: Wed Jul 25, 2012 1:51 am

Re: image loading issue HTML 5-Canvas JavaScript.

Post by xgatherer »

Nope does not work dude!.BTW when i use window.onload() it does show images instead of function name and run it offline that is don't run from http://localhost:8080 but just run it browser from src path.Btw i m using sockcet.io(node.js) does this have to do anything with canvas onload method?
xgatherer
Posts: 8
Joined: Wed Jul 25, 2012 1:51 am

Re: image loading issue HTML 5-Canvas JavaScript.

Post by xgatherer »

@jackolantern
Can you also share the some good tutorials of html5 preloader.
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: image loading issue HTML 5-Canvas JavaScript.

Post by Jackolantern »

Really no tutorials are needed. Just scroll down the Github page I linked above and it shows how to use it. It is pretty simple. You just load the script, invoke the function to load your assets and then just wait for the events to fire that shows they are done.
The indelible lord of tl;dr
xgatherer
Posts: 8
Joined: Wed Jul 25, 2012 1:51 am

Re: image loading issue HTML 5-Canvas JavaScript.

Post by xgatherer »

Code: Select all

alert('before');
            myLoader.addFiles('Tempimage*:Resources/ClassicCardImages/deck1/dood_deck/'+x+'.GIF'); 
            alert('after');
What's wrong with this syntax ...Ain't working don't know why.
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: image loading issue HTML 5-Canvas JavaScript.

Post by Jackolantern »

This doesn't appear to be the same format as what is outlined on the HTML5 Loader page. You are only passing in 1 string, whereas the function appears to expect 2. The first string is the name of the file. That string needs to be ended with a single-quote (if you opened it with a single-quote), and then you make the format string. Here is the format from the page:

Code: Select all

myLoader.addFiles('file1', 'mysound*:sound.ogg||sound.mp3');
I honestly have not used this loader before. I use the one included with ImpactJS, but that is a commercial engine that costs $100, so obviously not worth it if you are only using it for the loader.

Here is another preloader called PreloadJS which is part of the "CreateJS" package, a highly-regarded library in HTML5 content creation. It may have some more documentation on its use than this one on Github if it isn't working out for you :)
The indelible lord of tl;dr
xgatherer
Posts: 8
Joined: Wed Jul 25, 2012 1:51 am

Re: image loading issue HTML 5-Canvas JavaScript.

Post by xgatherer »

Thanks for the link for the libraray.I have checked out the preaload.js its seems to working only online,or on server not for loading local assets from hard drive .Btw i m trying to make card game on canvas which means that it may have assets of like 10 Mb or more .I don't think it will be great idea that every time user wants to play game he will download that 10Mb assets everytime from server .I think users should download the assets only once then the users will play every time without downloading the assets,can you tell me how to do this.I mean through which library.
P.S Have you played contract killer on google chrome apps store.I mean its size is 340Mb .So where does the game data is being stored in the local hard drive.
Forgive me for being noobish and will be glad for your concern.
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: image loading issue HTML 5-Canvas JavaScript.

Post by Jackolantern »

That is always the way web assets work :) Browsers automatically cache everything they download, and simply use it from the hard drive when they are used again. No library is needed for this functionality.

You really should be testing out your game as though it was on a server (ie through WAMP or XAMPP on your development machine) since even client-side code can act a bit differently. Obviously your assets are going to have to be downloaded once to get to the user, and that is where the preloaders come into play. A 10mb download is not a serious deal to most broadband connections anymore provided it is only once at start-up.
The indelible lord of tl;dr
Post Reply

Return to “Advanced Help and Support”