[FRAGE] Variableübergabe - CreateJS, RequireJS, ...

[terra75]

Hallo zusammen,

habe hier ein komisches Problem, wo ich nicht weiterkomme.
Lade alles mittels RequireJS.

Datei: PRELOAD.JS

// Preload

var pl =  pl || {};

var loadProgressLabel, 
	bar,
	preload, 
	progresPrecentage;
var progressResult = new Array();

		
define(['cjs'], function() {


   // UNWICHTIGE FUNKTIONEN AUSGEBLENDET


	pl.handleComplete = function(event) {	
		var et = event.target['_loadItemsById'];
		for (var i = 0; i < Object.keys(et).length; i++) {
            // progressResult SOLL ÜBERGEBEN WERDEN
			progressResult[Object.keys(et)[i]] = preload.getResult(Object.keys(et)[i]);		
		}		
	
		game.stage.removeChild(loadProgressLabel, bar);	

		//console.log(progressResult); // ZEIGE GELADENE DATEN AN
	}

	pl.preloadData = function(data){
		loadProgressLabel = new createjs.Text("Loading Data ...","12px Arial","#fff");
		loadProgressLabel.lineWidth = 200;
		loadProgressLabel.textAlign = "center";
		loadProgressLabel.x = canvas.width/2;
		loadProgressLabel.y = canvas.height/2 - 25;
		game.stage.addChild(loadProgressLabel);
		
		bar = new LoadingBar(100, 3, 3, "#fff", "#fff");
		bar.y = canvas.height/2;
		game.stage.addChild(bar);
		
		preload = new createjs.LoadQueue(false);
		preload.on("complete", pl.handleComplete, this);
		preload.on("progress", pl.handleProgress, this);
		
		preload.loadManifest(data);
		game.stage.update();
	}

});

Datei: Controller.js

// Game Controller
define(['cjs'], function() {
	
	game.startGame = function () {
		
		pl.preloadData(g_start);   // LADE GRAFIK DATEN
			
		var logo = new createjs.Bitmap(progressResult['bg']);
		game.stage.addChild(logo);
		game.stage.update();

		console.log(progressResult);
				
		createjs.Ticker.addEventListener("tick", game.handleTick);
		//createjs.Ticker.setFPS(40);
		
	}
	
	game.handleTick = function(event) {
		 game.stage.update();
	}

});

Und zwar geht es um die "progressResult"-Variable. So weit wird in der Preload.js alles richtig gemacht. Lasse ich dort das Ergebnis in der Console anzeigen, werden alle geladenen Daten angezeigt.

Möchte ich aber den Inhalt des progressResult in der Controller.js ausgeben, ist die Variable aber auf einmal leer. Wie kann das denn sein, da ich die Variable nirgends leere.

In der Console bei der Controller.js wird mir die Variable als [] angezeigt.


Wo liegt mein Denkfehler ?


Gruß,
Terra

 

[tsseh]

Wo liegt mein Denkfehler ?

handleComplete wird vermutlich asynchron aufgerufen, also irgendwann, wenn deine LoadQueue fertig ist.
ausgeben willst du die daten aber sofort

 

[terra75]

OK.

Kann ich das denn irgendwie umgehen?
Sorry, bin nicht so fit in JavaScript, das ich jetzt wüsste, wie ich das ändern könnte.

Logisch gesehen müsste ich ja das ausführen von pl.preloadData(g_start); abfragen, ob es fertig ist und dann weiter zum nächsten Schritt gehen. Also If (pl.preloadData(g_start)) fertig, dann ...

Aber scheinbar denke ich da auch falsch oder ich habe noch was nicht übergeben aus dem handleComplete, damit das funktioniert.

Kann mir da wer weiterhelfen ?



Gruß,
Terra

 

[tsseh]

Kann ich das denn irgendwie umgehen?

du musst alles, was auf daten zugreift die erst in handleComplete gesetzt werden auch dort erst ausführen. das macht man i.d.r. durch ein callback.
da hier mehrere instanzen und callbacks im spiel sind, musst du aufpassen, daß context und parameter der callbacks stimmen
so ganz grob:

pl.handleComplete = function(cb, event) {    
        var et = event.target['_loadItemsById'];
        for (var i = 0; i < Object.keys(et).length; i++) {
            // progressResult SOLL ÜBERGEBEN WERDEN
            progressResult[Object.keys(et)[i]] = preload.getResult(Object.keys(et)[i]);        
        }        
        
        game.stage.removeChild(loadProgressLabel, bar);    
        cb();
    }

das musst du dann so übergeben

pl.preloadData = function(cb, data)
{ 
  ... 
  preload.on("complete", pl.handleComplete.bind(pl, cb), this);
  ...
}

und in startGame wiederum musst du das cb wiederum an preloadData übergeben

game.startGame = function () {
        
        pl.preloadData(function()
        {
          //hier kannst du jetzt auf progressResult zugreifen, was allerdings nicht global sein sollte
          console.log(progressResult);
        }, g_start);   // LADE GRAFIK DATEN
            
        ...
        
    }

um progressResult nicht global zu haben müstest du das an das cb als parameter übergeben
also:

pl.handleComplete = function(cb, event) {    
        var et = event.target['_loadItemsById'];
        for (var i = 0; i < Object.keys(et).length; i++) {
            // progressResult SOLL ÜBERGEBEN WERDEN
            progressResult[Object.keys(et)[i]] = preload.getResult(Object.keys(et)[i]);        
        }        
        
        game.stage.removeChild(loadProgressLabel, bar);    
        cb(progressResult);
    }

dann kannst du auf progressResult als parameter zugreifen

game.startGame = function () {
        
        pl.preloadData(function(pr)
        {
          console.log(pr);
        }, g_start);   // LADE GRAFIK DATEN
            
        ...
        
    }

die anderen globalen variablen solltest du auch entfernen

 

[terra75]

Meine Güte, ist das kompliziert.

Ich sollte mich echt mehr mit JavaScript beschäftigen, wenn ich schon an solchen Sachen rummache. Aber vielen Dank für die ausführliche Hilfe.

Kennt jemand ein gutes Buch, das genau solche Themen beinhaltet?

Gruß,
Terra