Craftyjs系列6-Assets

转自http://www.mniya.com/bbs/article-11-1.html

Assets是一套资源管理的库，主要任务就是进行资源加载和移除。

属性和方法

- Crafty.assets- Crafty.paths- Crafty.asset- Crafty.image_whitelist- Crafty.loader- Crafty.removeAssets

Crafty.assets

属性介绍：

   assets是一个Crafty game中的资源容器。他的key是资源的url,他的value是Audio或者Image对象。如果加载一个资源，可以从这个对象提前检查一下，避免2次加载。

例子
var isLoaded = !!Crafty.assets[“images/sprite.png”];

Crafty.paths

函数功能：用于设置资源的默认文件夹

函数声明：
public void Crafty.paths([Object paths])
paths
Object containing paths for audio and images folders
这个方法是用来设置用户自定义的audio和images所在文件夹位置的。这样可以在你加载资源的时候避免，重复出入同样的路径。默认情况下这个路径是空的。

例子
设置资源文件夹:

 Crafty.paths({ audio: "custom/audio/path/", images: "custom/images/path/" });    Crafty.load({      "audio": {      "ray": ['ray.mp3'] // This loads ray.mp3 from custom/audio/path/ray.mp3    }    }, function() {      console.log('loaded');    });

Crafty.asset

函数声明：
public void Crafty.asset(String key, Object asset)
key
资源url
asset
Audio or Image 对象.

函数功能：在资源容器assets中添加资源。

函数声明：
public void Crafty.asset(String key)
key
资源url

函数功能：从资源容器assets中获取资源。

例子
Crafty.asset(key, value);
var asset = Crafty.asset(key); //获取指定key的音频或者图片对象
事件
NewAsset [包含key和value两个属性分别是添加资源的key和value: Object]
//当新添加一个资源的时候触发

Crafty.image_whitelist

属性介绍：
一个包含允许加载图片文件扩展名的列表，在加载资源时使用

例子

  // 添加tif扩展名，是可以加载tif类型的图片    Crafty.image_whitelist.push("tif");    var assets = {    "sprites": {        "sprite.tif": {   //set a tif sprite           "tile": 64,           "tileh": 32,           "map": { "sprite_car": [0, 0] }        }    },    "audio": {        "jump": "jump.mp3";    }    };    Crafty.load( assets, //预加载资源    function() {     //加载完成执行的方法        Crafty.audio.play("jump"); //播放音频        Crafty.e('2D, DOM, sprite_car'); //创建实体    },    function(e) { //加载过程执行的方法    },    function(e) { //加载错误的时候执行方法    }    );

Crafty.loader

函数功能：用于加载图片，音频资源

函数声明：
public void Crafty.load(Object assets, Function onLoad[, Function onProgress[, Function onError]])
assets
一个json对象或者一个json字符串，用于描述被加载的资源（包括图片，对象和精灵对象）
onLoad
资源加载完成后的回调
onProgress
资源正在加载的回调，会传入相关进度信息等
onError
加载失败时候的回调
通过assets描述加载所有图片，音频资源到Crafty.assets容器总，也可以加载sprites对象。assets参数格式可以参考下面的例子，包含下面audio,images，sprites三个属性，但不是必须的，需要加载什么资源就添加什么属性。
默认资源加载从当前路径加载，可通过Crafty.paths改变默认路径。如果想加载非设置路径的资源，比如说跨域访问，就需要把协议带上了，这样才能改变默认路径。
能被加载的图片类型都在image_whitelist数组里面，而能被加载的音频文件类型包括ogg，mp3，wav，mp4。
onProgress方法传递进去的参数对象包括loaded以加载的资源数目，total总资源数目，percent加载百分比，src当前被加载的资源。

{ loaded: j, total: total, percent: (j / total * 100), src:src }   如果没有提供onError可能导致onLoaded无法执行，因为onError会修改加载资源的个数。提供了onError,不管是否有错误，onLoad方法最终都会被执行。

例子

  var assetsObj = {    "audio": {        "beep": ["beep.wav", "beep.mp3", "beep.ogg"],        "boop": "boop.wav",        "slash": "slash.wav"    },    "images": ["badguy.bmp", "goodguy.png"],    "sprites": {        "animals.png": {            "tile": 50,            "tileh": 40,            "map": { "ladybug": [0,0], "lazycat": [0,1], "ferociousdog": [0,2] }            "paddingX": 5,            "paddingY": 5,            "paddingAroundBorder": 10        },        "vehicles.png": {            "tile": 150,            "tileh": 75,            "map": { "car": [0,0], "truck": [0,1] }        }    },    };    Crafty.load(assetsObj, // preload assets    function() { //when loaded        Crafty.scene("main"); //go to main scene        Crafty.audio.play("boop"); //Play the audio file        Crafty.e('2D, DOM, lazycat'); // create entity with sprite    },    function(e) { //progress    },    function(e) { //uh oh, error loading    }    );

Crafty.removeAssets

函数功能：用于移除图片，音频资源

函数声明：
public void Crafty.removeAssets(Object data)
data
json对象或者json字符串，同load方法，这里是用于移除资源。
移除资源的的data参数，形式完全同load方法。但是对于sprites精灵，如果你想移除一些指定的组件，而保留另外一些，一个通过map属性。
注意为了移除精灵组件，我们需要通过map属性，这个属性不可省略，但是他可以为null或者undefined。移除对象的方式有下面两种形式”map”: [ “car”, “truck” ] 和map”: { “car”: [0,0], “truck”: [0,1] }。

例子

  var assetsToRemoveObj = {    "audio": {        "beep": ["beep.wav", "beep.mp3", "beep.ogg"],        "boop": "boop.wav"    },    "images": ["badguy.bmp", "goodguy.png"],    "sprites": {        "animals.png": {            "map": { "ladybug": [0,0], "lazycat": [0,1] },        },        "vehicles.png": {            "map": [ "car", "truck" ]        }    }    }    Crafty.removeAssets(assetsToRemoveObj);