CVP认证学习笔记--(何小成)017--图片资源的异步加载

API

本节课讲了cocos中图片资源的异步加载，主要涉及到的api如下：

cc.textureCache.addImageAsync(allpic[n],this.callback,this);

以上api通过纹理缓存来异步加载资源，实际上每次调试启动的时候的那个进度条也是一个异步加载，这样可以让资源在每个场景需要用到的时候来进行加载，而不用一进游戏就全部加载完成，提高资源利用率。

作业

本节作业要求把示例中的文字显示进度更换了进度条显示，并且提示了使用上一周所学的节点绘制。我的做法是封装一个绘制矩形的方法，通过传入需要的参数来绘制一个矩形，并且每次addImageAsync回调的时候，都更新进度条，使进度条产生一个动态的效果，实现过程如下：

var HelloWorldLayer = cc.Layer.extend({
    process:0,
    sprite:null,
    size:cc.winSize,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();
        //还记得启动我们之前作业的启动画面吗
        //是在main.js cc.LoadScene.preload .....
        //这个文件在frameworks/cocos2d-html5/cocos2d/core/scenes/CCloaderScene.js
        //有兴趣可以看看引擎源码 其原理是用一个场景加载进度
        // 本节作业：
        // 本节课介绍如何loading资源在纹理缓存
        // cc.textureCache提供了很多有用的函数如：
        // removeTextureCacheForKey(文件名)
        // clear 清空所有纹理缓存（所以每个游戏的每一关都会load新资源释放旧资源，否则浏览器就崩溃啦）
        // 本课作业
        // 实现一个loading进度条（还记得画矩形吗？）
        // 当loading完成，显示data游戏战斗画面
        var allpic=["res/bg.jpg",
                    "res/h2.png",
                    "res/walk01.png",
                    "res/walk02.png",
                    "res/walk03.png",
                    "res/walk04.png",
                    "res/walk05.png"];
        //使用异步任务加载所有图片，定义全局进度process
        for(var n=0;n<allpic.length;n++) {//异步加载图片
            cc.textureCache.addImageAsync(allpic[n],this.callback,this);
        }
        return true;
    },
    callback:function(){//每个图片加载完成都会回调
        this.process++;
        var width = this.size.width-50;
        // 画外框
        this.drawProgress(1,(this.size.width-width)/2,100,width,50,cc.color(255,0,0,255),5,cc.color(255,0,0,0));
        var np=this.process*100/7;//计算进度
        // 画进度
        this.drawProgress(2,(this.size.width-width)/2,100,width*(np/100),50,cc.color(255,0,0,255),5,cc.color(255,0,0,255));
        if(np==100){
            // 加载完成，清除进度条，显示场景资源或通过导演切换场景
            this.removeChild(100,true);
            var spbg=new cc.Sprite("res/bg.jpg");//这时候就会从缓存读取
            this.addChild(spbg);
            var sphero=new cc.Sprite("res/h2.png");//
            this.addChild(sphero);
            spbg.setPosition(cc.winSize.width/2,cc.winSize.height/2);
            sphero.setScale(0.3);
            sphero.setPosition(200,200);
        }
    },
    // 绘制进度条
    drawProgress:function(tag,x,y,width,height,borderColor,border,fillColor){
        if(this.getChildByTag(tag)!=null){
            this.removeChildByTag(tag);
        }
        var rect = new cc.DrawNode();
        this.addChild(rect);
        rect.setTag(tag);
        var points = [
            cc.p(x,y),
            cc.p(x+width,y),
            cc.p(x+width,y+height),
            cc.p(x,y+height)
        ];
        rect.drawPoly(points, fillColor, border,borderColor);
    }
});

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

最终效果

http://www.cocoscvp.com/usercode/2016_04_23/5231fee76d1bf8e0db21b35e6e59f9485bf68563/