HTML5-Spiel-Framework cnGameJS-Entwicklungsaufzeichnung – detaillierte Erläuterung des Codes des Ressourcenlademoduls

1. Funktion　　

Dieses Modul ist der Eingang zum Spiel und ruft die Eingabefunktion des Spielobjekts auf, nachdem das Laden der Ressource abgeschlossen ist. Darüber hinaus umfasst dieses Modul auch den Wechsel zwischen Spielszenen sowie die Berechnung und Anzeige des Ladeprozentsatzes.

Übergeben Sie beim Starten des Spiels zuerst die Liste der zu ladenden Ressourcen, dann das Spielobjekt und schließlich die Funktion, die nach dem Laden jeder Ressource aufgerufen wird. Diese Funktion kann abgerufen werden der Ladeprozentsatz. Wie folgt:

cnGame.loader.start(["src1","src2","src3"],gameObj,function(loadedPercent){});

In diesem Fall werden die drei zuvor übergebenen Bildressourcen zuerst geladen, und jedes Mal, wenn ein Bild geladen wird, wird die nachfolgende Rückruffunktion , Diese Funktion kann den Ladeprozentsatz ermitteln, die Ladeschnittstelle implementieren und dem Benutzer den aktuellen Ladefortschritt und andere Funktionen mitteilen. Wenn der Ladevorgang abgeschlossen ist, rufen Sie die Initialisierungsmethode des Spielobjekts gameObj auf, um das Spiel zu starten.

2. Spezifische Implementierung:

Zuerst schauen wir uns den Code des Loaders an:

/**
     *图像加载器
    **/    
    var loader={
        sum:0,            //图片总数
        loadedCount:0,    //图片已加载数
        loadingImgs:{}, //未加载图片集合
        loadedImgs:{},    //已加载图片集合
        /**
         *图像加载，之后启动游戏
        **/    
        start:function(src,gameObj,onLoad){//可传入src数组或单个src "xxx.jpg" or ["xxx.jpg","ggg,gif","www.png"]
        
            if(cg.core.isArray(src)){ 
                this.sum=src.length;
                for(var i=0,len=src.length;i<len;i++){
                    this.gameObj=gameObj;
                    this.onLoad=onLoad;
                    this.loadingImgs[src[i]]=new Image();
                    this.loadingImgs[src[i]].onload=imgLoad(this);
                    this.loadingImgs[src[i]].src=src[i];
                    this.loadingImgs[src[i]].srcPath=src[i];//没有经过自动变换的src
                }
                    
            }
            
        }
        
    }

Zuerst der Ressourcenlader speichert Die folgenden Felder sind: Liste der geladenen Ressourcen, Liste der entladenen Ressourcen, Gesamtzahl der Ressourcen und Gesamtzahl der geladenen Ressourcen. Wenn die Startmethode aufgerufen wird, beginnt der Loader, das Bild src

array zu durchlaufen und generiert ein Bildobjekt zum Laden. Außerdem müssen wir srcPath für jedes Bildobjekt speichern, das der ursprüngliche src-Parameter ist (da der Browser standardmäßig den src-Parameter in einen vollständigen Bildpfad umwandelt) . Der nächste Schritt besteht darin, für jedes Bild einen OnLoad-Handler hinzuzufügen. Wir müssen den Ladeprozentsatz in diesem Handler berechnen und das geladene Bildobjekt im LoadedImgs-Objekt speichern, um die spätere Verwendung durch Benutzer zu erleichtern. Der Bildladevorgang läuft wie folgt ab:

/**
     *图像加载完毕的处理程序
    **/    
    var imgLoad=function(self){
        return function(){
            self.loadedCount+=1;
            self.loadedImgs[this.srcPath]=this;
            this.onLoad=null;                    //保证图片的onLoad执行一次后销毁
            self.loadedPercent=Math.floor(self.loadedCount/self.sum*100);
            self.onLoad&&self.onLoad(self.loadedPercent);
            if(self.loadedPercent===100){
                self.loadedCount=0;
                self.loadedPercent=0;
                loadingImgs={};
                if(self.gameObj&&self.gameObj.initialize){
                    self.gameObj.initialize();
                    if(cg.loop&&!cg.loop.stop){//结束上一个循环
                        cg.loop.end();
                    }
                    cg.loop=new cg.GameLoop(self.gameObj);//开始新游戏循环
                    cg.loop.start();
                }
                
            }
            
        
        }
    }

Nachdem jedes Bild geladen wurde, wird die Lademenge um 1 erhöht, das Bildobjekt wird gespeichert und der Prozentsatz für den Ladeabschluss wird berechnet.

Schließlich müssen Sie den Handler des Bildes löschen (da das Bild geladen wurde, ist der Handler nutzlos und kann freigegeben werden, um Speicherressourcen zu sparen). Wenn der Ladeprozentsatz 100 % beträgt, werden alle Werte zurückgesetzt und LoadingImgs für das nächste Laden von Ressourcen freigegeben. Außerdem wird auch die Spiel-Schleife gestartet ist für alle Spielobjekte in jedem Frame verantwortlich) aktualisiert und gezeichnet)

Das obige ist der detaillierte Inhalt vonHTML5-Spiel-Framework cnGameJS-Entwicklungsaufzeichnung – detaillierte Erläuterung des Codes des Ressourcenlademoduls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!