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 文件:

<script src="js/easeljs-0.8.2.min.js"></script>

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

<canvas id="imageView" width="560" height="410">您的浏览器版本过低,请更换更高版本的浏览器</canvas>

然后,我就可以在 Javascript 代码中创建图像:

// 通过画布ID 创建一个 Stage 实例
var stage = new createjs.Stage("imageView");
// 创建一个 Bitmap 实例
var 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文件代码:

//Create a stage by getting a reference to the canvas
var stage = new createjs.Stage("circleView");
//Create a Shape DisplayObject.
var 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() {
// A mouse press happened.
// Listen for mouse move while the mouse is down:
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);
//添加一个Ticker类帮助避免多次调用update方法
function handleTick() {
var maxX = stage.canvas.width - 50;
var maxY = stage.canvas.height - 50;
//Will cause the circle to wrap back
if(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元素:

<canvas id="view" width="80" height="80"></canvas>

需要使用到的图片:

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

var stage = new createjs.Stage("view");
container = new createjs.Container();
var data = {
// 源图像的数组。图像可以是一个html image实例,或URI图片。前者是建议控制堆载预压
images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],
// 定义单个帧。有两个支持格式的帧数据:当所有的帧大小是一样的(在一个网格), 使用对象的width, height, regX, regY 统计特性。
// width & height 所需和指定的帧的尺寸
// regX & regY 指示帧的注册点或“原点”
// spacing 表示帧之间的间隔
// margin 指定图像边缘的边缘
// count 允许您指定在spritesheet帧的总数;如果省略,这将根据源图像的尺寸和结构计算。帧将被分配的指标,根据他们的位置在源图像(左至右,顶部至底部)。
frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},
// 一个定义序列的帧的对象,以发挥命名动画。每个属性对应一个同名动画。
// 每个动画必须指定播放的帧,还可以包括相关的播放速度(如2 将播放速度的两倍,0.5半)和下一个动画序列的名称。
animations:{
run:[0,3]
}
}
var spriteSheet = new createjs.SpriteSheet(data)
var instance = new createjs.Sprite(spriteSheet,"run") container.addChild(instance);
stage.addChild(container);
createjs.Ticker.setFPS(5); //设置帧
createjs.Ticker.addEventListener("tick",stage);
stage.update();

这样,简单走路的效果就出来了(源码见 easeljs-sprite-01.html):

如果想通过按钮控制动画的变换的话使用 gotoAndPlay(action) 方法调用对应的动画效果就行了。

我们修改HTML文档代码如下:

<canvas id="view" width="80" height="80"></canvas>
<div class="buttons">
<input id="goStraight" value="Go Straight" type="button" />
<input id="goLeft" value="Go Left" type="button"/>
<input id="goRight" value="Go Right" type="button"/>
<input id="goBack" value="Go Back" type="button"/>
</div>

然后修改JS代码如下:

var stage = new createjs.Stage("view");
container = new createjs.Container();
var data = {
images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],
frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},
animations:{
stand:0,
run1:[0,3],
run2:[4,7],
run3:[8,11],
run4:[12,15]
}
}
var spriteSheet = new createjs.SpriteSheet(data)
var instance = new createjs.Sprite(spriteSheet,"run1") container.addChild(instance);
stage.addChild(container);
createjs.Ticker.setFPS(5);
createjs.Ticker.addEventListener("tick",stage);
stage.update(); document.getElementById('goStraight').onclick = function goStraight() {
instance.gotoAndPlay("run1");
}
document.getElementById('goLeft').onclick = function goLeft() {
instance.gotoAndPlay("run2");
}
document.getElementById('goRight').onclick = function goRight() {
instance.gotoAndPlay("run3");
}
document.getElementById('goBack').onclick = function goBack() {
instance.gotoAndPlay("run4");
}

效果就出来了(源码见 easeljs-sprite-02.html):

4.使用 Text 创建简单的文本

这个就比较简单了,直接看代码:

<canvas id="View" width="300" height="80"></canvas>
<script>
var stage = new createjs.Stage("View");
var theText = new createjs.Text("Hello,EaselJS!","normal 32px microsoft yahei","#222222");
stage.addChild(theText);
stage.update();
</script>

这里有设置背景色为粉红:

#View { background-color: #fddfdf;}

显示效果为:

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

其实这个在前面已经用过了。不过还是单独写个例子,这个比较简单:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 Container 创建保存其他显示对象的容器</title>
<script src="js/base/easeljs-0.8.2.min.js"></script>
</head>
<body>
<canvas id="view" width="300" height="300"></canvas>
<script>
var stage = new createjs.Stage("view");
container = new createjs.Container();
//先来绘制个正方形
var square = new createjs.Shape();
square.graphics.beginFill("#ff0000").drawRect(0,0,300,300);
container.addChild(square);
//先来绘制个正方形
var square2 = new createjs.Shape();
square2.graphics.beginFill("orange").drawRect(50,50,200,200);
container.addChild(square2);
//然后我们来绘制个圆形
var circle = new createjs.Shape();
circle.graphics.beginFill("blue").drawCircle(150,150,100);
container.addChild(circle);
//最后我们再绘制个圆形
var circle2 = new createjs.Shape();
circle2.graphics.beginFill("white").drawCircle(150,150,50);
container.addChild(circle2); stage.addChild(container);
stage.update();
</script>
</body>
</html>

效果如下:

相关源码地址:Demo4CreateJS

Html5游戏框架createJS组件--EaselJS的更多相关文章

  1. Html5游戏框架createJs组件--EaselJS(二)绘图类graphics

    有端友问我是否有文档,有确实有,但没有中文的,只有英文的,先提供浏览地址供大家参考学习createJs英文文档.                        EaselJS其实主要就是createJ ...

  2. Html5游戏框架createJs组件--EaselJS(一)

    现在html5小游戏越来越火爆了,由于公司业务的需要,也开发过几款微信小游戏,用canvas写的没有利用什么框架,发现性能一直不怎么好,所以楼主就只能硬着头皮去学习比较火的Adobe公司出的Creat ...

  3. Html5游戏框架createJs的简单用法

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢!http://www.it165.net/pro/html/201403/11105.html 楼主记忆力不好,最近刚好用了一下create ...

  4. 主流HTML5游戏框架的分析和对比

    本文主要选取了Construct2.ImactJS.LimeJS.GameMaker.CreateJS.lycheeJS.Crafty.three.js.melonJS.Turbulenz.Quint ...

  5. Phaser开源2d引擎 javascript/html5游戏框架

    功能特点(Features) 易维护代码(Easy Asset Loading) Phaser可以加载图片,音频文件,数据文件,文本文件和自动解析精灵图和纹理地图集数据(出口纹理封隔器或Flash C ...

  6. Phaser开源2d引擎 html5游戏框架中文简介

    功能特点(Features) 易维护代码(Easy Asset Loading) Phaser可以加载图片,音频文件,数据文件,文本文件和自动解析精灵图和纹理地图集数据(出口纹理封隔器或Flash C ...

  7. 用Phaser来制作一个html5游戏——flappy bird (一)

    Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...

  8. HTML5游戏引擎深度测评

    https://zhuanlan.zhihu.com/p/20768495 最近看到网上一篇文章,标题叫做<2016年 最火的 15 款 HTML5 游戏引擎>.目前针对HTML5游戏的解 ...

  9. 用Phaser来制作一个html5游戏——flappy bird (二)

    在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...

随机推荐

  1. Luogu P4945 【最后的战役】

    本来以为做法一样,就是少带个$log$,结果发现看不懂出题人的题解(我好菜啊) 那就自己写一篇吧 比较简单的$DP$思路 状态定义: 前两个转移很好处理,第三个好像就不好办了 不妨暴力定义进状态里 设 ...

  2. cf803c 数论

    细节很多的题 #include<bits/stdc++.h> using namespace std; #define ll long long int main(){ ll n,k,tm ...

  3. poj3410单调队列(单调栈)

    思路:求每个人的左使者就是从左到右把每个人加入到单调队列中去,加入时最后一个出队的就是那个最大的小于这个数的数 求右信使同理 由于本题的单调队列队头不需要出队,所以其实是一个单调栈 /* 每个人只要找 ...

  4. CSS 滤镜

    声明: web前端学习笔记,欢迎大神指点.联系QQ:1522025433. CSS样式表是一种为超文本标签语言提供增强补充服务的技术,可对每一个html的标签做精雕细刻的修饰.只用html制作的网页, ...

  5. Linux学习笔记:scp远程拷贝文件

    scp是secure copy的简写,用于Linux下进行远程拷贝文件的命令,类似的有cp,不过cp仅在本机上进行拷贝不能跨服务器. 命令格式: scp [参数] [原路径] [目标路径] -q 不显 ...

  6. mydate97时间控件的使用

    mydate97官网: http://www.my97.net/dp/index.asp 1:用法如下所示,首先下载一个这个东西: 链接:http://pan.baidu.com/s/1kVmIckv ...

  7. NodeMCU入门(1):刷入At固件,透传数据到TcpServer和Yeelink平台

    准备工作 1. NodeMCU  LUA ESP8266 CP2102  WIFI Internet Development Board,仔细看背面可以看出自带cp2102模块,可以通过普通的手机充电 ...

  8. 【Java】 剑指offer(41) 数据流中的中位数

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中 ...

  9. AGC01 A - BBQ Easy

    目录 题目链接 题解 代码 题目链接 AGC01 A - BBQ Easy 题解 贪心 排序之后从大到小,没两组取小的那个 代码 #include<cstdio> #include< ...

  10. Nowcoder 提高 Day1

    比赛链接 A 中位数(前缀和 二分) 额,确实没想到逼近... 然后写了n^2log的暴力,还CE了 只需要判断是否能有大于当前mid的中位数就好 这显然是可以二分的 代码 #include<b ...