cocoscreator网页游戏远程资源加载

背景

引擎版本cocoscreator v 2.4.2，语言javascript。

情况1

用户头像为非微信头像，即公司服务器头像加载，需首先设置存放用户头像的静态资源服务器运行跨域；如果配置了域名，则设置域名运行跨域，前端代码代码实现如下：

/**
     * 渲染头像
     * @param {cc.Sprite} spAvatar  头像节点
     * @param {String} url          头像地址
     * @returns 头像地址为空时 返回
     */
    renderAvatar(spAvatar, url){
    	//空地址判断
        if(url == '')return;
	    //非微信头像
	    cc.assetManager.loadRemote(url, function (err, texture) {
	        //资源加载成功
	        if(err === null){
	        	//将texture对象转为SpriteFrame资源对象
	            let spriteFrame = new cc.SpriteFrame(texture);
	            //渲染对象
	            spAvatar.spriteFrame = spriteFrame;
	            //因引擎自身原因这里需进行延迟显示(跳过当前帧)
	            spAvatar.node.opacity = 0;
	            setTimeout(()=>{
	                spAvatar.node.width = 120;
	                spAvatar.node.height = 120;
	                spAvatar.node.opacity = 255;
	            }, 1);
	        }else{
	            log.debug('远程资源加载失败:', err);
	        }
	    });
	}

情况2

用户头像为微信头像，即用户注册为新用户后，默认使用微信头像。前端代码代码实现如下：

    /**
     * 渲染头像
     * @param {cc.Sprite} spAvatar  头像节点
     * @param {String} url          头像地址
     * @returns 头像地址为空时 返回
     */
    renderAvatar(spAvatar, url){
		//空地址判断
        if(url == '')return;
        //创建Image对象
        let img = new Image();
	    img.crossOrigin = 'Anonymous';
	    img.src = url;
	    //将传统网页Image对象转为cocos纹理对象
	    let texture2D = new cc.Texture2D();
	    texture2D.initWithElement(img);
	    //将纹理转为SpriteFrame类型的资源
	    let spriteFrame = new cc.SpriteFrame(texture2D);
	    //渲染图片资源
        spAvatar.spriteFrame = spriteFrame;
	}

汇总

以上两种方式，可以统一在游戏工具类中封装成一个方法，并设置远程资源缓存对象池，根据用户唯一标识性ID进行map中的key-value映射。这样，每个用户头像只需远程加载一次成功后，即可缓存至本地。
至此，结束。