cocoscreator网页游戏远程资源加载
背景引擎版本cocoscreator v 2.4.2,语言javascript。情况1用户头像为非微信头像,即公司服务器头像加载,需首先设置存放用户头像的静态资源服务器运行跨域;如果配置了域名,则设置域名运行跨域,前端代码代码实现如下:/*** 渲染头像* @param {cc.Sprite} spAvatar头像节点* @param {String} url头像地址* @returns 头像地址
·
背景
引擎版本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映射。这样,每个用户头像只需远程加载一次成功后,即可缓存至本地。
至此,结束。
![Logo](https://devpress.csdnimg.cn/0eaa3f4efff14b1ab0a46fbad1f275ab.jpg)
这里是一个专注于游戏开发的社区,我们致力于为广大游戏爱好者提供一个良好的学习和交流平台。我们的专区包含了各大流行引擎的技术博文,涵盖了从入门到进阶的各个阶段,无论你是初学者还是资深开发者,都能在这里找到适合自己的内容。除此之外,我们还会不定期举办游戏开发相关的活动,让大家更好地交流互动。加入我们,一起探索游戏开发的奥秘吧!
更多推荐
所有评论(0)