概述

原来的cc.Loader被改造为一个单例cc.loader,采用了插件机制设计,让loader做更纯粹的事。

各种资源类型的loader可以在外部注册进来,而不是直接将所有的代码杂揉在cc.Loader中,更好的方便管理以及用户自定义loader的创建。

cc.loader中包含了一些网络资源获取的基本api,例如加载js、加载image等。

API描述

(注:以下描述中,全路径的意思为 "资源的根路径" + "资源路径", 例如设置图片资源根路径(cc.loader.resPath)为"res",图片资源路径为"a.png", 那么全路径为"res/a.png",非全路径为"a.png"。)

resPath

资源的根路径(音频资源除外)。

audioPath

音频资源的根路径。

getXMLHttpRequest

获取XMLHttpRequest对象。

loadJs

加载js文件。

参数:
url 资源路径(注意,必须是全路径)
cb 回调函数 返回值: 无
  • 用法1:
cc.loader.loadJs("src", [
"a.js", "b.js"
], function(err){
if(err) return console.log("load failed");
//success
});
  • 用法2:
cc.loader.loadJs([
"src/a.js", "src/b.js"
], function(err){
if(err) return console.log("load failed");
//success
});
  • 用法3:
cc.loader.loadJs("src/a.js", function(err){
if(err) return console.log("load failed");
//success
});
loadJsWithImg

用法同loadJs,只是在加载js文件的时候会显示一个loading的图片而已。

loadTxt

加载文本资源。

参数:
url 资源路径(注意,必须是全路径)
cb 回调函数 返回值: 无

用法:

cc.loader.loadTxt("res/a.txt", function(err, data){
if(err) return console.log("load failed");
//success
});
loadImg

加载图片资源。

参数:
url 资源路径(注意,必须是全路径)
option 选项,目前结构如:`{isCrossOrigin : true}`,`isCrossOrigin`默认为`true`(可选)
cb 回调函数 返回值: Image对象。
loadBinary

加载二进制文件(异步)。

参数:
url 资源路径(注意,必须是全路径)
cb 回调函数 返回值: 二进制数据。
loadBinarySync

加载二进制文件(同步,不推荐使用)。

参数:
url 资源路径(注意,必须是全路径)
cb 回调函数 返回值: 二进制数据。
getUrl

获取到资源全路径。

参数:
basePath 资源的根路径
url 资源路径 返回值:资源全路径。

用法:

cc.loader.getUrl("res", "a.png");//-->"res/a.png"
cc.loader.getUrl("a.png");//(set cc.loader.resPath = "res")--->"res/a.png"。
load

加载资源的入口api。相当于原来的cc.Loader.preload

参数:
res 资源列表,可以是一个数组或者一个string或者一个包含`src`属性的对象。
option 选项(可选),有以下属性:
cb 回调函数
cbTarget 回调函数的执行者
trigger 触发器(函数)
triggerTarget 触发器的执行者
cb 回调函数(可选)

用法:

var res = ["res/a.png", "res/a.plist", "audio/b.mp3"];
var testTarget = {
name : "the name is testTarget",
trigger : function(){...},
cb : function(err){...}
};
var option = {
trigger : testTarget.trigger,
triggerTarget : testTarget,
cbTarget : testTarget
}
//用法1:
cc.loader.load(res, option, function(err){
if(err) return console.log("load failed");
console.log(this.name);//the name is testTarget
}); //用法2:
cc.loader.load(res, function(err){
if(err) return console.log("load failed");
}); //用法3:
option.cb = testTarget.cb;
cc.loader.load(res, option); //用法4:
cc.loader.load(res);
loadAliases

加载plist配置文件从而获得别名。

参数:
url 配置文件url
配置文件的格式如下:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>metadata</key>
<dict>
<key>version</key>
<integer>1</integer>
</dict>
<key>filenames</key>
<dict>
<key>grossini.bmp</key>
<string>res/Images/grossini.png</string>
</dict>
</dict>
</plist> cb 回调 用法: cc.loader.loadAliases("res/lookup-html5.plist", function(){
var sprite = cc.Sprite.create("grossini.bmp");
self.addChild( sprite );
sprite.x = winSize.width/2;
sprite.y = winSize.height/2;
});
register

注册loader。

参数:
extNames 后缀名(String数组或者String)
loader loader对象,
必须包含一个名为"load"的方法,
方法将接受四个个参数:realUrl, url, res, cb,分别表示资源全路径、原来的路径、res对象(就是cc.loader.load方法的资源列表的项),回调函数。
可能包含一个名为"getBasePath"的方法,该方法返回该类型资源的根路径,不设置该方法默认为cc.loader.resPath。 返回值:无

用法:

cc.txtLoader = {
load : function(realUrl, url, res, cb){
cc.loader.loadTxt(realUrl, cb);
}
}
cc.loader.register(["txt", "xml", "tmx", "tsx"], cc.txtLoader);
getRes

获取资源缓存数据。

参数:
url 资源路径(非全路径) 返回值: 资源数据

用法:

var img = cc.loader.getRes("a.png");
release

释放资源缓存数据。

参数:
url 资源路径(非全路径) 返回值: 无

用法:

cc.loader.release("a.png");
releaseAlll

释放所有的资源缓存数据

参数:         无

返回值:       无

用法:

cc.loader.releaseAll();

注册loader插件

引擎自带loader写在CCLoaders.js中。实现方式也很简单,相信看下源码就懂了,这里就不多说了。

资源配置格式

这次cc.loader的改造,也废除了v2版本中一直让人诟病的资源列表的配置。

v2:

var resources = [
{src:"res/a.png"},
{fontName:"Marker Felt",src:[{src:"res/cocosgui/Marker Felt.ttf",type:"truetype"}]},
{
fontName:"Schwarzwald Regular",
src:[
{src:"res/fonts/Schwarzwald_Regular.eot", type:"embedded-opentype"},
{src:"res/fonts/Schwarzwald Regular.ttf",type:"truetype"}
]
}
]

v3:

var resources = [
"res/a.png",
"res/cocosgui/Marker Felt.ttf",
{
type:"font",
name:"Schwarzwald Regular",
srcs:["res/fonts/Schwarzwald_Regular.eot", "res/fonts/Schwarzwald Regular.ttf"]
}
]

在v3中,通常情况下只要配路径就行,这样简化了配置,同时减少了对象的频繁创建。 如果有特殊需求,例如font,就使用{type:"resType", name:"resName"}数据结构自定义自己的资源加载配置方案。 type字段指定注册的loader插件,name加上"."再加上type来作为缓存资源的key值。

注意,v2版本中的资源列表配置在v3中是不支持的。

【cocos2d-js官方文档】九、cc.loader的更多相关文章

  1. bootbox.js官方文档中文版

    bootbox.js官方文档中文版简介:Bootbox.js是一个小型的JavaScript库,基于Bootstrap模态框开发,用于创建可编程的对话框. 不像原生的alert等对话框,所有的Boot ...

  2. Hui之Hui.js 官方文档

    基础 // 判断值是否是指定数据类型 var result = hui.isTargetType("百签软件", "string"); //=>true ...

  3. node.js官方文档解析 02—buffer 缓冲器

    Buffer 类的实例类似于整数数组,但 Buffer 的大小是固定的.且在 V8 堆外分配物理内存.Buffer 的大小在被创建时确定,且无法调整. Buffer 类在 Node.js 中是一个全局 ...

  4. Node.js官方文档:到底什么是阻塞(Blocking)与非阻塞(Non-Blocking)?

    译者按: Node.js文档阅读系列之一. 原文: Overview of Blocking vs Non-Blocking 译者: Fundebug 为了保证可读性,本文采用意译而非直译. 这篇博客 ...

  5. node.js官方文档解析 01—assert 断言

    assert-------断言 new assert.AssertionError(options) Error 的一个子类,表明断言的失败. options(选项)有下列对象 message < ...

  6. bootbox.js官方文档

    简介 Bootbox.js是一个小型的JavaScript库,基于Bootstrap模态框开发,用于创建可编程的对话框. 不像原生的alert等对话框,所有的Bootstrap模态框生成的都是非阻塞事 ...

  7. node.js官方文档chm电子书的制作

    制作软件:WebCHMSetup2.22.zip,http://www.onlinedown.net/soft/31553.htm 制作好的电子书:Node.js(v6.10.2).zip 参考链接: ...

  8. Vue.js官方文档学习笔记(一)起步篇

    Vue.js起步 Vue.js介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...

  9. vue.js官方文档 PDF

    链接:https://pan.baidu.com/s/1jHMBb5W 密码:gsks

  10. Vue.js官方文档学习笔记(三)创建Vue实例

    创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm=new Vue({ //选项 }) Vue的设计受到了mvvm的启发 当创建一个 Vue 实 ...

随机推荐

  1. require.js 模块化

    什么是模块化? 将若干功能进行封装,以备将来被重复使用. 为什么要前端模块化? 将公共功能进行封装实现复用 灵活解决依赖 解决全局变量污染 如何实现前端模块化? <!DOCTYPE html&g ...

  2. 条件查询Criteria

    public User getUserByNameCri(String name){ Session session = null; User user = null; try { session = ...

  3. BZOJ4311 向量(线段树分治+三分)

    由点积的几何意义(即投影)可以发现答案一定在凸壳上,并且投影的变化是一个单峰函数,可以三分.现在需要处理的只有删除操作,线段树分治即可. #include<iostream> #inclu ...

  4. 【题解】ZJOI2017仙人掌

    感觉这题很厉害啊,虽然想了一天多但还是失败了……(:д:) 这题首先注意到给定图中如果存在环其实对于答案是没有影响的.然后关键之处就在于两个 \(dp\) 数组,其中 \(f[u]\) 表示以 \(u ...

  5. [bzoj1062] [NOI2008]糖果雨

    Description 有一个美丽的童话:在天空的尽头有一个" 糖果国" ,这里大到摩天大厦,小到小花小草都是用糖果建造而成的.更加神奇的是,天空中飘满了五颜六色的糖果云,很快糖果 ...

  6. 解决Vue方法中setTimeout改变变量的值无效

    把data里的变量继承过来重新封装一下 let that = this; this.rightAnswer = false; setTimeout(function() { that.rightAns ...

  7. 转载--博弈问题及SG函数(真的很经典)

    博弈问题若你想仔细学习博弈论,我强烈推荐加利福尼亚大学的Thomas S. Ferguson教授精心撰写并免费提供的这份教材,它使我受益太多.(如果你的英文水平不足以阅读它,我只能说,恐怕你还没到需要 ...

  8. 最短路算法详解(Dijkstra,Floyd)

    最短路径 在一个无权的图中,若从一个顶点到另一个顶点存在着一条路径,则称该路径长度为该路径上所经过的边的数目,它等于该路径上的顶点数减1.由于从一个顶点到另一个顶点可能存在着多条路径,每条路径上所经过 ...

  9. [bzoj1015][JSOI2008]星球大战——并查集+离线处理

    题解 给定一张图,支持删点和询问连通块个数 按操作顺序处理的话要在删除点的同时维护图的形态(即图具体的连边情况),这是几乎不可做的 我们发现,这道题可以先读入操作,把没删的点的边先连上,然后再倒序处理 ...

  10. bzoj 1878 SDOI2009树状数组 离线操作

    本来想写2120的,结果想起来了这个 我们先对于询问左端点排序,用树状数组存区间字母个数,对于每种字母, 第一次出现的位置记录为1,剩下的记录为0,然后记录下,每种颜色 后面第一个和他相同颜色的位置 ...