Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-03-24 16:01:51
Original
1437 Leute haben es durchsucht

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){});
Nach dem Login kopieren

In diesem Fall werden die drei zuvor übergebenen Bildressourcen zuerst geladen, und jedes Mal, wenn ein Bild geladen wird, wird die nachfolgende Rückruffunktion , <🎜 geladen >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
                }
                    
            }
            
        }
        
    }
Nach dem Login kopieren
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();
                }
                
            }
            
        
        }
    }
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage