createjs初学-preloadJS的使用
来源:互联网 发布:游戏密码破解软件 编辑:程序博客网 时间:2024/06/06 18:08
preloadJS是没有包含在easelJS库中,使用的话去官网下载一下就好了。
使用preloadJS其实就是主要用里面的LoadQueue这个类,在这里把这个类的API简单说下。
LoadQueue这个类包含preloadJS主要接口。LoadQueue是一个加载管理类,可以用来加载单个文件或者多个文件。
构造函数
LoadQueue ( [preferXHR=true] [basePath=""] [crossOrigin=""] )
LoadQueue的构造函数有三个参数,都是可选的:
1.preferXHR 这个表明是用XHR还是用HTML标签来加载。如果是false的时候,就用标签来加载,如果不能用标签的话,就还是用XHR来加载。默认是true,也就是说默认是用XHR来加载。
2.basePath
在加载资源时的,会把basePath加载url前面。这样加载同一个目录下的文件时,可以方便一点。 但是如果url是以协议(如”http://”)或者”../”这样路径开头时,不会添加basePath。
3.crossOrgin
这个参数不再用了,被LoadItem.crossOrigin取代了,这个先不管了。
事件
你可以订阅LoadQueue的以下事件
1.complete:当所有的文件都加载完成时触发。
2.error:当队列中的任何一个文件发生错误时触发。
3.progress:整个队列的加载进度发生变化时触发。
4.fileload:每个单独的文件加载完成时触发。
5.fileprogress:单独的文件加载进度发生变化时触发。只有在用XHR加载的时候才会触发。
添加文件和manifest
使用loadFile方法来添加文件或者文件列表,也可以用loadManifest方法来添加要加载的manifest。每次调用这两个方法,都会自动把文件加到队列的尾部。你想加入多少文件或者manifest都可以。
queue.loadFile("filePath/file.jpg");queue.loadFile({id:"image", src:"filePath/file.jpg"});queue.loadManifest(["filePath/file.jpg", {id:"image",src:"filePath/file.jpg"}]);// Use an external manifestqueue.loadManifest("path/to/manifest.json");queue.loadManifest({src:"manifest.json", type:"manifest"});
下面给出一个最简单的例子
var loader=new createjs.LoadQueue();loader.on("complete",onComplete);loader.on("error",onError);loader.on("progress",onProgress);loader.on("fileload",onFileLoad);loader.on("fileprogress",onFileProgress);loader.loadFile("images/test1.jpg");function onComplete(e){ console.log("complete");}function onError(e){ console.log("error");}function onProgress(e){ console.log("progress");}function onFileLoad(e){ console.log("fileload");}function onFileProgress(e){ console.log("fileprogress");}
事件触发的顺序是这样的
progress
fileprogress
progress
fileprogress
progress
fileload
complete
使用manifest文件加载资源
LoadQueue的各种方法和设置还挺多的,我觉着初学也没必要先知道这么多。我这里写了一个自认为比较实用的例子。可以用来在游戏中预先把要用到的图片等资源加载进来,到达preload的目的。
总共分为四步
1.定义外部manifest;
2.加载外部manifest;
3.根据加载进来的manifest加载资源;
4.使用加载进来的资源。
首先我定义了一个manifest.json这样一个文件,用来存储我们资源的路径和id
[{"src": "images/test1.jpg", "id": "test1"},{"src": "images/test2.jpg", "id": "test2"},{"src": "images/test3.jpg", "id": "test3"},{"src": "images/test4.jpg", "id": "test4"}]
src表示资源的路径,id在后面用来取加载好的资源。
然后加载这个manifest文件
var manifestLoader=new createjs.LoadQueue();manifestLoader.loadManifest("images/manifest.json");
给manifestLoader添加fileload的事件侦听,
manifestLoader.on("fileload",function(e){ console.log(e.result); },this,true);
在e.result中就是manifest.json的内容,然后再用LoadQueue去加载这些内容。
全部代码如下
window.onload=init;var stage;var loader;function init(){ stage=new createjs.Stage("canvas"); var manifestLoader=new createjs.LoadQueue(); manifestLoader.on("fileload",function(e) { loader=new createjs.LoadQueue(); loader.on("complete",onComplete); loader.on("error",onError); loader.on("progress",onProgress); loader.on("fileload",onFileLoad); loader.on("fileprogress",onFileProgress); loader.loadManifest(e.result); },this,true); manifestLoader.loadManifest("images/manifest.json");}function onComplete(e){ console.log("complete"); var image1=loader.getResult("test1"); var bitmap1=new createjs.Bitmap(image1); stage.addChild(bitmap1); stage.update();}function onError(e){ console.log("error");}function onProgress(e){ console.log("progress");}function onFileLoad(e){ console.log("fileload");}function onFileProgress(e){ console.log("fileprogress");}
在loader加载完以后,用loader.getResult这个方法就可以得到相应的资源了。
- createjs初学-preloadJS的使用
- createjs初学-preloadJS的使用
- createjs初学-BitmapText使用实例
- createJS - 用法记载 ---preloadjs 序列加载
- createjs初学-简单的图片拖拽
- createjs初学-制作一个简单的TextButton
- createjs初学-关于cache
- createjs初学-关于Ticker
- createjs初学-所有的显示对象介绍(1)
- createjs初学-所有的显示对象介绍(2)
- createjs初学-创建一个button
- jquery 用creatjs preloadjs的方法
- 使用CreateJS绘制图形
- createjs初学-关于getBounds和getTransformedBounds
- CreateJS 学习2 图形与图像使用
- [初学]过滤器的使用
- Recycleview的初学使用
- mark html5游戏开发的引擎createjs
- 乱玩数字
- QT 多语言 字库 编码 文字方向相关问题
- C++函数
- MySql 数据库操作(持续更新...)
- 杭电1061 Rightmost Digit
- createjs初学-preloadJS的使用
- 局部变量返回问题
- window.parent与window.openner区别介绍
- prior 和 priori的区别
- day01
- 虚拟主机 (Virtual Host)
- hdu 1757 A Simple Math Problem 矩阵优化+快速幂
- Struts2自定义拦截器
- Maven 使用Nexus创建私服