Html5游戏框架createJS组件--EaselJS - 叶超Luka_H5之家

CreateJS库是一款HTML5游戏开发的引擎，是一套可以构建丰富交互体验的HTML5游戏的开源工具包，旨在降低HTML5项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。

掌握了CreateJS可以更方便的完成HTML5的游戏开发。

CreateJS提供了EaselJS、TweenJS、SoundJS和PreLoadJS四款工具：

EaselJS:简化处理HTML5画布 TweenJS:用来帮助调整HTML5和Javascript属性 SoundJS:用来简化处理HTML5 audio PreLoadJS:帮助管理和协调加载中的一些资源

可以在官网的下载页面进行下载JS文件，或者使用直接官方的CDN 链接

EaselJS 库给画布提供了保留图形模式，其中包括一个完整的分层显示列表、一个核心的交互模型以及一个让2D图形在画布上更容易实现的助手类。

开始

最开始我们需要创建一个Stage对象来包装一个画布（Canvas）元素，并且添加一个DisplayObject对象实例作为子类。EaselJS支持：

* 使用 Bitmap 创建图像

* 使用 Shape 和 Graphics 创建矢量图形

* 使用 SpriteSheet 和 Sprite 创建动态的位图

* 使用 Text 创建简单的文本

* 使用 Container 创建保存其他显示对象的容器

所有的显示对象都可以作为子类被添加到舞台（stage）上，或者直接在画布（canvas）上绘制出来。

用户交互

当使用鼠标或者触摸交互时，除了DOM 元素，所有的显示对象都可以调度事件。EaselJS 支持悬停、按压、释放事件，以及一个容易使用的拖放模块。点击 MouseEvent 可以获得更多信息。

实例

1. 使用 Bitmap 创建图像

首先，我们需要引用 EaselJS 文件：

接着，我们需要在HTML文档中创建一个 canvas 元素：

您的浏览器版本过低，请更换更高版本的浏览器

然后，我就可以在 Javascript 代码中创建图像：

stage = new createjs.Stage("imageView"); theBitmap = new createjs.Bitmap("imgs/testImg.jpg"); // 设置画布大小等于图片实际大小 stage.canvas.width = theBitmap.image.naturalWidth; stage.canvas.height = theBitmap.image.naturalHeight; // 把Bitmap 实例添加到 stage 的显示列表中 stage.addChild(theBitmap); // 更新 stage 渲染画面 stage.update();

这样，图像就创建成功了，源码见 easeljs-image.html 。

2.使用 Shape 和 Graphics 创建矢量图形

和上面一样，我们需要添加对 EaselJS的引用以及在HTML文档中，创建canvas元素。然后就是我们自定义的js文件代码:

stage = new createjs.Stage("circleView"); circle = new createjs.Shape(); circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,40); //Set position of Shape instance. circle.x = circle.y = 50; //Add Shape instance to stage display list. stage.addChild(circle); //Update stage will render next frame stage.update();

这样我们就创建了一个深天蓝色，圆心为（50.50），半径为40像素的圆形（源码见 easeljs-shape-circle.html）：

渲染前的画布如下（宽高为100像素）：

我们还可以添加简单的交互事件：

stage.addEventListener("click",handleClick); function handleClick() { // Click happened; console.log("The mouse is clicked."); } stage.addEventListener("mousedown",handlePress); function handlePress() { console.log("The mouse is pressed."); stage.addEventListener("mousemove",handleMove); } function handleMove() { // Check out the DragAndDrop example in GitHub for more console.log("The mouse is moved."); }

当我们点击圆的事件，控制台会显示：

The mouse is pressed. The mouse is clicked.

我们还可以通过 tick 事件进行图形的移动等动画效果（源码见 easeljs-shape-circle-move.js）：

// Update stage will render next frame createjs.Ticker.addEventListener("tick",handleTick); handleTick() { var maxX = stage.canvas.width - 50; var maxY = stage.canvas.height - 50; (circle.x < maxX && circle.y == 50){ // Circle will move 10 units to the right. circle.x +=10; }else if(circle.x == maxX && circle.y <maxY){ circle.y +=10; }else if(circle.x > 50 && circle.y == maxY){ circle.x -=10; }else if(circle.x<= 50){ circle.y -=10; } stage.update(); }

效果：

3.使用 SpriteSheet 和 Sprite 创建动态的位图

同样，先对 EaselJS 进行引用，然后创建 canvas HTML元素：

需要使用到的图片：

接下来在 JS 文件中对资源进行引用加载：