如何使用Createjs来编写HTML5游戏EaselJS简介
展开全部
CreateJS
CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，旨在降低 HTML5 项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。
CreateJS 中包含：
EaselJS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控），同时提供 Flash 中的“显示列表”功能。
TweenJS：一个简单的用于制作类似 Flash 中“补间动画”的引擎，可生成数字或非数字的连续变化效果。
SoundJS：一个音频播放引擎，能够根据浏览器性能选择音频播放方式。将音频文件作为模块，可随时加载和卸载。
PrloadJS：帮助你简化网站资源预加载工作，无论加载内容是图形、视频、声音、JS、数据……
以上的Createjs介绍来自百度，不过通过介绍可以知道，虽然CreateJS看起来复杂，不过四个部分各有作用，其中最主要的就是EaselJS，其余三项不过是为他服务。
一.如何使用EaselJS
首先到http://createjs.com/ 下载最新版的EaselJS，下载解压后可以在lib文件夹中找到easeljs-0.8.1.min.js,同时在压缩包中可以找到一个examples和tutorials目录，这两个目录中包含一些入门介绍和例子，有英语基础可以看看，DOC文件夹中包含easeljs所有的api。（同理，可以得到createjs包含的其他三项，其目录结构都与EaselJS相似）。
1.得到easeljs-0.8.1.min.js后，新建一个HTML5文件并导入之：
[html] view plain copy
<script src="easeljs-0.8.1.min.js"></script>
2.入口函数和创建canvas标签
[html] view plain copy
<body onload="init();">
<canvas id="game" width="1000" height="700" style="background-color: white"></canvas>
</body>
3.编写自己的javascript代码，在函数init()中首先应该使用HTML中的canvas标签来创建一个Stage，createjs中用到的所有元素，都是添加在这个stage当中的，添加后调用stage.update()方法即可使得添加的元素显示在页面上。在创建Stage时，可以直接使用Canvas的id来创建，也可以调用document.getElementById("game")，选取canvas来创建，没有区别。
[javascript] view plain copy
<script>
function init(){
var stage = new createjs.Stage("game");
.......
stage.update();
}
</script>
二.使用EaselJS创建图形和文字
最简单的游戏都是由文字和图形组成，使用EaselJS添加文字和图形非常的简单。
1.添加文字
[html] view plain copy
var txt = new createjs.Text("HELLO","20px Times","#000");
Createjs中所有的元素都通过调用new createjs.XXXXX来创建，Text包含三个参数分别是显示的字符，字体及大小，最后是颜色。当然在创建完成后可以随意改变txt的x,y坐标和对其，居中以及内容等等的属性。例如：
[html] view plain copy
txt.x = 100;
txt.y = 100;
txt.text = "hello, world!"
完成后记得一定要把新创建的txt添加到stage中才能正常显示
CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，旨在降低 HTML5 项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。
CreateJS 中包含：
EaselJS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控），同时提供 Flash 中的“显示列表”功能。
TweenJS：一个简单的用于制作类似 Flash 中“补间动画”的引擎，可生成数字或非数字的连续变化效果。
SoundJS：一个音频播放引擎，能够根据浏览器性能选择音频播放方式。将音频文件作为模块，可随时加载和卸载。
PrloadJS：帮助你简化网站资源预加载工作，无论加载内容是图形、视频、声音、JS、数据……
以上的Createjs介绍来自百度，不过通过介绍可以知道，虽然CreateJS看起来复杂，不过四个部分各有作用，其中最主要的就是EaselJS，其余三项不过是为他服务。
一.如何使用EaselJS
首先到http://createjs.com/ 下载最新版的EaselJS，下载解压后可以在lib文件夹中找到easeljs-0.8.1.min.js,同时在压缩包中可以找到一个examples和tutorials目录，这两个目录中包含一些入门介绍和例子，有英语基础可以看看，DOC文件夹中包含easeljs所有的api。（同理，可以得到createjs包含的其他三项，其目录结构都与EaselJS相似）。
1.得到easeljs-0.8.1.min.js后，新建一个HTML5文件并导入之：
[html] view plain copy
<script src="easeljs-0.8.1.min.js"></script>
2.入口函数和创建canvas标签
[html] view plain copy
<body onload="init();">
<canvas id="game" width="1000" height="700" style="background-color: white"></canvas>
</body>
3.编写自己的javascript代码，在函数init()中首先应该使用HTML中的canvas标签来创建一个Stage，createjs中用到的所有元素，都是添加在这个stage当中的，添加后调用stage.update()方法即可使得添加的元素显示在页面上。在创建Stage时，可以直接使用Canvas的id来创建，也可以调用document.getElementById("game")，选取canvas来创建，没有区别。
[javascript] view plain copy
<script>
function init(){
var stage = new createjs.Stage("game");
.......
stage.update();
}
</script>
二.使用EaselJS创建图形和文字
最简单的游戏都是由文字和图形组成，使用EaselJS添加文字和图形非常的简单。
1.添加文字
[html] view plain copy
var txt = new createjs.Text("HELLO","20px Times","#000");
Createjs中所有的元素都通过调用new createjs.XXXXX来创建，Text包含三个参数分别是显示的字符，字体及大小，最后是颜色。当然在创建完成后可以随意改变txt的x,y坐标和对其，居中以及内容等等的属性。例如：
[html] view plain copy
txt.x = 100;
txt.y = 100;
txt.text = "hello, world!"
完成后记得一定要把新创建的txt添加到stage中才能正常显示
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
