createJs作为一个轻量级框架,使得canvas开发轻松不少;不过初次接触还是有些坑。createJs分成easelJs(图形动画)、preloadJs(文件加载)、soundJs(音频控制)以及tweenJs(补间动画)四部分,直接写一个小demo当入门吧。
最终效果是用w、a、s、d控制小人的移动与跳跃,这里只需要引入easelJs和preloadJs即可。
var canvas = document.getElementById("canvas"); var stage = new createjs.Stage(canvas); var preload = new createjs.LoadQueue(false);先用LoadQueue对象加载资源,这里传一个false参数。(true为使用 XHRLoader,false将使用 TagLoader;本地开发使用false即可)
然后加载资源:
function startPreload() { var manifest = [{ id: 'ground', src: 'ground.png' }, { id: 'man', src: 'man.png' }]; preload.setMaxConnections(3); preload.maintainScriptOrder = true; preload.installPlugin(createjs.Sound); preload.on("error", loadError); preload.on("complete", loadComplete); preload.loadManifest(manifest); } startPreload();将需要的资源写成JSON,调用loadManifest()方法加载。这里记录一下LoadQueue对象的常用方法。
preload.setMaxConnections(3);//设置并发数
preload.maintainScriptOrder=true;//设置并发数的同时需要将此属性设为true
preload.installPlugin(createjs.Sound);//如果有音频资源需要加载此插件
preload.on("error", loadError);//监听加载的过程以及相应的处理函数
// 1.complete:当所有的文件都加载完成时触发
// 2.error:当队列中的任何一个文件发生错误时触发
// 3.progress:整个队列的加载进度发生变化时触发
// 4.fileload:每个单独的文件加载完成时触发
// 5.fileprogress:单独的文件加载进度发生变化时触发。只有在用XHR加载的时候才会触发
这里需要注意,当加载队列内有文件加载错误,还是会触发complete完成:
开发时注意在complete函数内判断资源是否正确加载(或许有更好的方法?)
资源加载成功后,根据id调用:
var groundImage = preload.getResult('ground'); var manImage = preload.getResult('man'); var ground = new createjs.Bitmap(groundImage);因为是本地开发,上传用的是TagLoader,所以获取的对象只是标签,需要注意。
用到的图片:
//克隆地面图片生成区域的地面效果 for (i = 0; i < groundNum; i++) { var tempBlockGround = ground.clone(); tempBlockGround.x = i * 70; tempBlockGround.y = stageHeight - blockHeight; stage.addChild(tempBlockGround); }要看实现效果用stage.update();更新画布即可。
接下来,划分素材,制作精灵动画表:
var spritesheetMan = new createjs.SpriteSheet({ 'images': [manImage], 'frames': { 'height': 96, 'count': 10, 'width': 75 }, // 定义每一帧的数据,宽高等等,形成动画的每一帧 // 有两种方法,如果所有的帧的尺寸相同,只需要统一定义 // 如果帧数据的尺寸不同,分别定义即可 // x, y, width, height, imageIndex, regX, regY,这里的imageIndex对应“images”列表中的图片索引 // [0,0,64,64,0,32,64], 'animations': { run: [0, 9], jump: [3, 4] //[开始帧,结束帧,动画完成后的动作,速度] } });有了精灵动画表,就可以制作精灵对象:
var character = new createjs.Sprite(spritesheetMan); character.x = 50; character.y = manGround; stage.addChild(character);监听输入事件播放动画:
createjs.Ticker.addEventListener('tick', handleTicker); document.onkeydown = handleKeyDown; document.onkeyup = handleKeyUp; function handleTicker() { //控制人物的移动和翻转效果 if (moveLeft) { character.x -= xVel; if (character.scaleX > 0) { character.scaleX *= -1; character.x += 100; } } if (moveRight) { character.x += xVel; if (character.scaleX < 0) { character.scaleX *= -1; character.x -= 100; } } if (jumping) { yVel += 1.2; character.y += yVel; if (character.y > manGround) { character.y = manGround; yVel = 0; jumping = false; } } stage.update(); } function handleKeyDown(e) { switch (e.keyCode) { case 87: // W if (jumping == false) { yVel = -15; jumping = true; character.play('jump'); } break; case 65: // A moveLeft = true; character.play('run'); break; case 68: // D moveRight = true; character.play('run'); break; } } function handleKeyUp(e) { switch (e.keyCode) { case 65: // A moveLeft = false; character.gotoAndStop(0); break; case 68: // D moveRight = false; character.gotoAndStop(0); break; } } }主要记录下Ticker这个类:
Ticker类为游戏开发提供了一个主要的定时类。它主要的目的就是把stage渲染的工作集中起来,也就是说定时调用stage.update()这个方法。Ticker设置的频率也就是游戏的帧数。
留个链接,以供参考:
http://blog.csdn.net/k_shl_2011/article/details/47659139