当前位置:Gxlcms > html代码 > HTML5游戏框架cnGameJS开发实录-资源加载模块代码详解

HTML5游戏框架cnGameJS开发实录-资源加载模块代码详解

时间:2021-07-01 10:21:17 帮助过:37人阅读

1.功能  

  该模块是游戏的入口,我们通过该模块加载资源,并且在资源加载完成后调用游戏对象的入口函数。另外该模块还包括游戏场景之间的切换,以及加载百分比的计算和显示。

  当开始游戏时,首先传入需要加载的资源列表,然后传入游戏对象,最后传入每个资源加载完成后调用的函数,该函数可以获取加载的百分比。如下:

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

  这样的话,会先加载前面传入的三个图像资源,并且每次加载完一张图片,就调用后面的回调函数,该函数可以获取加载的百分比,实现加载界面,告诉用户目前加载的进度之类的功能。当加载完成后,调用游戏对象gameObj的intialize方法,开始游戏。

2.具体实现:

  首先我们看看加载器的代码:

/**
     *图像加载器
    **/    
    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
                }
                    
            }
            
        }
        
    }

  首先,资源加载器保存如下几个字段:已加载资源的列表,未加载资源的列表,资源总数,已加载总数。当调用start方法,加载器就开始遍历图片src数组,并生成image对象进行加载。另外我们需要为每个图片对象保存srcPath,该参数为原始的src参数(因为默认情况下浏览器会把src参数转换成完整的图片路径)。之后就是为每张图片添加onLoad的处理程序,我们需要在该处理程序中进行加载百分比的计算,以及把加载好的图片对象保存进loadedImgs对象,方便用户后续使用。图片加载的处理程序如下:

/**
     *图像加载完毕的处理程序
    **/    
    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();
                }
                
            }
            
        
        }
    }

  每张图片加载完成后,加载数量加1,把该图像对象保存,并且计算加载完成的百分比。最后还需要删除该图像的处理程序(因为图像已加载完成,处理程序已无用,可以释放掉节约内存资源)。当加载百分比为100%,则重置所有值,并释放loadingImgs,为下次加载资源所用,另外,还会启动游戏循环(游戏循环负责每帧对所有游戏对象的更新和绘制)

/**
 *
 *资源加载器
 *
**/
cnGame.register("cnGame",function(cg){

    /**
     *图像加载完毕的处理程序
    **/    
    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();
                }
                
            }
            
        
        }
    }
    /**
     *图像加载器
    **/    
    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
                }
                    
            }
            
        }
        
    }
    
    
    this.loader=loader;
});

以上就是HTML5游戏框架cnGameJS开发实录-资源加载模块代码详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行