HTML5 게임 프레임워크 cnGameJS 개발 기록 - 리소스 로딩 모듈 코드에 대한 자세한 설명

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!