本文目录一览:
如何使用Createjs来编写HTML5游戏EaselJS简介
createJs的由来,基础什么的就不说了,就直接说createJs的用法吧。
首先到createJs官网下载,createJs分成easelJs(图形动画)、preloadJs(文件加载)、soundJs(音频控制)以及tweenJs(补间动画)四部分,大家下载的时候,建议下载两个文件,一个是压缩版文件,用于项目中的引用,再下载个源码文件,用于查看用法、API、demo等。因为楼主目前只用了easelJs和preloadJs,所以暂时就只说这两个,其实就这两个已经非常够用了。
接下来开始分析代码:
首先引入js文件
script
src="easeljs-0.7.1.min.js"/script
script
src="preloadjs-0.4.1.min.js"/script
然后进行舞台初始化操作:
function
init(){
stage
=
new
createjs.Stage("cas");
C_W
=
stage.canvas.width;
C_H
=
stage.canvas.height;
var
manifest
=
[
{src:"image/man.png"
,
id:"man"},
{src:"image/ground.png"
,
id:"ground"},
{src:"image/bg.png"
,
id:"bg"},
{src:"image/high.jpg"
,
id:"high"},
{src:"image/coins.png"
,
id:"coin"}
]
loader
=
new
createjs.LoadQueue(false);
loader.addEventListener("complete"
,
handleComplete);
loader.loadManifest(manifest);
drawLoading();
}
上面就用到了preloadJs中的方法,实例化一个loader,把需要加载的图片文件放在manifest里面,进行加载,加载完成后调用回调handleCompelete函数:
function
handleComplete(){
//当图片素材load完后执行该方法
var
manImage
=
loader.getResult("man"),
lowground
=
loader.getResult("ground"),
highground
=
loader.getResult("high"),
bgImage
=
loader.getResult("bg"),
coins
=
loader.getResult("coin");
sky
=
new
createjs.Shape();
sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);
sky.setTransform(0,
0,
1
,
C_H/bgImage.height);
stage.addChild(sky);
man
=
createMan(200,326,manImage);
//该框为判定角色的判定区域
kuang
=
new
createjs.Shape();
kuang.graphics.beginStroke("rgba(255,0,0,0.5)").drawRect(0
,
,
man.size().w
,
man.picsize().h*1.5);
//
stage.addChild(kuang);
mapHandle(lowground
,
highground
,
coins);
createjs.Ticker.timingMode
=
createjs.Ticker.RAF;//设置循环方法,可以是requestAnimationFrame或者是setTimeout
createjs.Ticker.setFPS(30);//舞台帧率控制
createjs.Ticker.addEventListener("tick",
tick);//绑定舞台每一帧的逻辑发生函数
window.addEventListener("keydown"
,
function(event){
event
=
event||window.event;
if(event.keyCode===32man.jumpNumman.jumpMax){
man.jump();
}
})
}
获得加载完成后端的图片数据就直接用loader.getResult就可以获取了,跑酷游戏需要一个背景,所以,我们实例化一个sky,然后进行位图绘制,bf方法是beginBitmapFill的缩写,该方法就是开始绘制位图,后面的drawRect是位图的绘制区域,区域当然是整个画布啦,所以就是drawRect(0,0,C_W,C_H)。实例化出来sky后就直接添加到舞台stage里面就行了。接下来是实例化一个角色,createMan方法后面有说,是自己封装的。
然后进行舞台循环设置,上面有注释了,就不说了。
如何使用Createjs来编写HTML5游戏PreloadJS和SoundJS
CreateJS最后两个部分,PreloadJS用来加载并统一管理你游戏中用到资源,图片,json文件等等,而SoundJS用来播放声音,两者的用法都非常的简单而且固定。
首先是SoundJS,顾名思义播放声音,使用时只需要先
createjs.Sound.registerSound("assets/sound.mp3", "soundname");
使用时调用:
createjs.Sound.play("soundname");
最后是PreloadJS,使用PreloadJS导入文件首先建立一个LoadQueue,然后即可使用它来载入单个文件,或者载入一个文件列表
var queue = new createjs.LoadQueue(false);//本地开发使用false即可
queue.installPlugin(createjs.Sound);//如果载入声音,必须先注册createjs.Sound
queue.on("complete", handleComplete, this);//载入完成后调用
queue.loadFile({id:"sound", src:"sound.mp3"});//载入单个文件
//载入一个文件列表
queue.loadManifest([
{id: "myImage1", src:"Image1.jpg"},
{id: "myImage2", src:"Image2.jpg"}
{id: "myImage3", src:"Image3.jpg"}
{id: "myImage4", src:"Image4.jpg"}
]);
function handleComplete() {
createjs.Sound.play("sound");
var image = queue.getResult("myImage1");
var bitmap = new createjs.Bitmap(image);
}
你可以把游戏中用到的所有资源,先编辑到一个manifest列表当中,可以是图片,json,css,js等等,最后使用loadManifest(manifest)导入
哪个h5游戏引擎目前最受欢迎?
之前咨询过TOM游戏的客服!大致是这样的
目前使用最广泛的引擎是egret、cocos,createjs,jawjs等等