Bilder laden in anonymen Funktionen

  • JavaScript

Es gibt 5 Antworten in diesem Thema. Der letzte Beitrag () ist von StarGate01.

    Bilder laden in anonymen Funktionen

    Hallo VB-P'ler,

    ich bin gerade dabei in Javascript und HTML5 Canvas ein 2D-Spiel zu schreiben.
    Da gibt es ein Modul das sich um das Bildermanagement kümmern soll.
    D.h. die Bilder sollen am Anfang geladen werden und danach (Event) bereitstehen.
    Gestartet wird der Vorgang so:

    C-Quellcode

    1. Game1.load(function(){ Game1.run() });

    Da wird der Manager angewiesen, die Bilder zu laden und danach wird über die Callback-Funktion das Spiel gestartet.
    Die load-Prozedur:

    C-Quellcode

    1. this.load = function(callbackRun) {
    2. this.media.addImage("texbox.jgp", "holz");
    3. this.media.addImage("texbox2.jgp", "ziegel");
    4. this.media.addImage("grasstex.jgp", "gras");
    5. this.media.addImage("texfloor.jpg", "stein");
    7. this.media.loadAllImages(function(){ callbackRun() });
    8. });

    (this.media wird im Konstruktor von Game instanziiert)
    Soweit, so gut.
    Das Manager-Modul sieht dso aus:

    C-Quellcode

    1. Media = function()
    2. {
    3. this.images = [];
    4. this.addImage = function(path, name)
    5. {
    6. this.images.push({"path":"res/game/img/"+path, "name":name});
    7. };
    8. this.loadAllImages = function(callbackMain)
    9. {
    10. this.loadImage(0, function(prog){ if(prog == 1) callbackMain() }, this);
    11. };
    12. this.loadImage = function(index, callbackLoad, t)
    13. {
    14. if(index < this.images.length)
    15. {
    16. var nImg = new Image();
    17. nImg.onload = function() {
    18. callbackLoad((index+1) / t.images.length);
    19. }
    20. nImg.src = this.images[index].path;
    21. this.images[index].img = nImg;
    22. this.loadImage(index+1, callbackLoad, this);
    23. }
    24. };
    25. };


    Wird das Skript nun ausgeführt, wird nur das letzte Bild im Array geladen, die ersten drei sind irgendwie "kaputt" (img.readyState=undefined, nur bei Nummer 4 ist es complete). Bei einer Umsortierung ist es immer noch das letzte.
    Daher meine Frage: Warum tritt dieser Fehler auf und wie kann ich ihn beheben? Wie kann ich sicherstellen dass ich nach der Ausführung 4 gültige Bilder im Array habe?

    Ich bin für jede Hilfe dankbar,
    SᴛᴀʀGᴀᴛᴇ01

    So, ich habe eine Idee wo der Fehler sein könnte:
    Zu dem Zeitpunkt wo die rekursive Schleife durch ist, steht index auf 3.
    Aber es werden erst dann die Bilder geladen -> nur index=3.
    Man müsste also die Index variable für jedes callback einzeln setzten.
    Habt ihr da eine Idee?
    SᴛᴀʀGᴀᴛᴇ01

    Hat niemand eine Idee?
    Ich habe meinen Code noch etwas umgeschrieben und den ersten Fehler beseitigt, allerdings wird immer noch nur das letzte Bild korrekt geladen.

    C-Quellcode

    1. Media = function()
    2. {
    3. var thatMedia = this;
    4. this.images = [];
    5. this.addImage = function(path, name)
    6. {
    7. this.images.push({"path":"res/game/img/"+path, "name":name});
    8. };
    9. this.getImage = function(name)
    10. {
    11. for(var i=0; i<this.images.length; i++) if(this.images[i].name == name) return this.images[i].img;
    12. };
    13. this.loadAllImages = function(callbackMain)
    14. {
    15. this.callBackLoaded = callbackMain;
    16. for(var i=0; i<this.images.length; i++)
    17. {
    18. thatMedia.images[i].img = new Image();
    19. thatMedia.images[i].img.src = thatMedia.images[i].path;
    20. thatMedia.images[i].img.onload = this.imageLoaded;
    21. }
    22. };
    23. this.loadedImages = 0;
    24. this.imageLoaded = function()
    25. {
    26. if(((thatMedia.loadedImages + 1) / thatMedia.images.length) == 1) thatMedia.callBackLoaded();
    27. thatMedia.loadedImages++;
    28. };
    29. };



    Waaaruuum??
    SᴛᴀʀGᴀᴛᴇ01

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „StarGate01“ ()

    Super.

    Ich habe also den Fehler gefunden.
    Der Code stimmt zu 100% - Nur werden nicht alle Bilder akzeptiert.
    Der Himmel weiß warum - ich nicht.
    Einige meiner Testbilder waren ihm wohl nicht fein genug und wurden nicht geladen.

    Damit wäre die Sache also erledigt.
    #FML
    SᴛᴀʀGᴀᴛᴇ01

    StarGate01 schrieb:

    [...]

    C-Quellcode

    1. this.load = function(callbackRun) {
    2. this.media.addImage("texbox.jgp", "holz");
    3. this.media.addImage("texbox2.jgp", "ziegel");
    4. this.media.addImage("grasstex.jgp", "gras");
    5. this.media.addImage("texfloor.jpg", "stein");
    7. this.media.loadAllImages(function(){ callbackRun() });
    8. });
    [...]
    ich glaube du hast dich da verschrieben ... "jgp"? Was ist das denn für ein Endung oO

    D:

    Du hast so recht! :cursing:
    DESHALB gings nicht!
    Naaa geil :/ Aber immerhin den Fehler gefunden.

    Immerhin bestand der Fehler mit dem Schleifenindex tatsächlich.
    SᴛᴀʀGᴀᴛᴇ01

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „StarGate01“ ()