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

百变鹏仔 2个月前 (10-18) #H5教程

文章标签实录

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开发实录-资源加载模块代码详解

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集