CreateJS包含4个部分,EaselJS、TweenJS、PreloadJS、SoundJS,其中最主要的部分EaselJS包含了开发Html5游戏的所有功能,仅仅使用EaselJS几乎可以完成所有的开发工作,其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能,而使用TweenJS来创建补间动画,则可以省去你很多代码,简化了操作。
一个简单的tick动画看起来是这样的:
var stage, circlefunction init(){
stage = new createjs.Stage(document.getElementById('game'))
createjs.Ticker.addEventListener("tick", handleTick)
createjs.Ticker.setFPS(60)
circle = new createjs.Shape()
circle.graphics.f("red").dc(0,0,50)
circle.x = 0
circle.y = 100
stage.addChild(circle)
circle.addEventListener("click", function(event){
createjs.Ticker.setPaused(!createjs.Ticker.getPaused())
})
}
function handleTick(event){
if(!event.paused){
circle.x +=5
if(circle.x > 1000){
circle.x = 0
}
}
stage.update()
}
CreateJSCreateJS 是一套可以构建丰富交互体验的 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中才能正常显示
reatejs,看看你应该能懂1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//敌机与子弹的碰撞检测
function updateEnemy(){
var i, j,fire,enemy1
for(i=0i<fires.lengthi++){
for(j=0j<enemy.lengthj++){
fire = fires[i]
enemy1 = enemy[j]
var fx = fire.x
var fy = fire.y
var ex = enemy1.x
var ey = enemy1.y
var ew = enemy1.getBounds().width
var eh = enemy1.getBounds().height
if(ey>=800 || ex>=600){
enemy.splice(j,1)
stage.removeChild(enemy1)
}
if(fy <ey+eh &&fy >ey &&fx>ex &&fx<ex+ew &&ey >0){
score += 10
fires.splice(i,1)
enemy.splice(j,1)
stage.removeChild(fire)
stage.removeChild(enemy1)
createjs.Sound.play("explosion")
var exp1 = new createjs.Sprite(spriteSheet,"exp")
exp1.x = ex
exp1.y = ey
exp1.addEventListener('animationend',function(e){
stage.removeChild(e.target)
})
stage.addChild(exp1)
}
}