1. 기능
이 모듈을 통해 리소스를 로딩하고, 리소스 로딩이 완료된 후 게임오브젝트의 진입 함수를 호출하는 모듈입니다. 또한 이 모듈에는 게임 장면 간 전환은 물론 로딩 비율 계산 및 표시도 포함되어 있습니다.
게임을 시작할 때 먼저 로드해야 할 리소스 목록을 전달한 다음 게임 개체를 전달하고 마지막으로 각 리소스가 로드된 후 호출되는 함수를 전달합니다. 로딩 비율.
cnGame.loader.start(["src1","src2","src3"],gameObj,function(loadedPercent){});
이 경우 앞서 전달된 3개의 이미지 리소스가 먼저 로드되고, 사진이 로드될 때마다 후속 콜백 함수 가 호출되며, 이 기능은 로딩 비율을 얻고, 로딩 인터페이스를 구현하고, 사용자에게 현재 로딩 진행 상황과 기타 기능을 알려줄 수 있습니다. 로딩이 완료되면 게임 개체 gameObj의 초기화 메서드를 호출하여 게임을 시작합니다.
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 메소드가 호출되면 로더는 이미지 srcarray 순회를 시작하고 로드할 이미지 객체를 생성합니다. 또한 각 이미지 객체에 대해 원래 src 매개변수인 srcPath를 저장해야 합니다(기본적으로 브라우저는 src 매개변수를 완전한 이미지 경로로 변환하기 때문입니다). 다음 단계는 각 이미지에 대한 onLoad 핸들러를 추가하는 것입니다. 이 핸들러에서 로딩 비율을 계산하고 로드된 이미지 객체를 selectedImgs 객체에 저장하여 사용자가 이후에 쉽게 사용할 수 있도록 해야 합니다. 이미지 로딩 과정은 다음과 같습니다.
/** *图像加载完毕的处理程序 **/ 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 개발 기록 - 리소스 로딩 모듈 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!