About-简介

createJs框架
ajexoop博客
Creatine-基于create.js的游戏引擎
Creatine-地图编辑器

createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分

preloadJS的使用

定义依赖模块

1
2
3
4
5
6
require.config({
    paths: {
		jquery:	'lib/jquery-3.1.0.min',
		PreloadJS: 'lib/preloadjs-0.6.2.min',
    }
});

定义manifest

1
2
3
4
5
6
7
Global.manifest = [
               {src:"image/man.png" , id:"man"},
               {src:"image/ground.png" , id:"ground"},
               {src:"image/bg.png" , id:"bg"},
               {src:"image/high.jpg" , id:"high"},
               {src:"image/coins.png" , id:"coin"}
];

src表示资源的路径，id在后面用来取加载好的资源。

加载资源

1
2
3
4
5
6
7
8
9
// 加载资源
var loader = new createjs.LoadQueue(false);
   loader.setMaxConnections(100);
   loader.maintainScriptOrder = true;
loader.addEventListener('progress', function (e) {
	console.log(Math.floor(e.progress * 100) + '%');
});
   loader.addEventListener('complete', function () {});//当图片素材load完后执行该方法
   loader.loadManifest(Global.manifest);

实例

参照网络上的酷跑demo

初始化舞台

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function init(){
	stage = new createjs.Stage("cas");
	C_W = stage.canvas.width;
	C_H = stage.canvas.height;
	var manifest = [
		{src:"image/man.png" , id:"man"},
		{src:"image/ground.png" , id:"ground"},
		{src:"image/bg.png" , id:"bg"},
		{src:"image/high.jpg" , id:"high"},
		{src:"image/coins.png" , id:"coin"}
	]
	loader = new createjs.LoadQueue(false);
	loader.addEventListener("complete" , handleComplete);
	loader.loadManifest(manifest);
	drawLoading();
}