如何使用Createjs来编写HTML5游戏EaselJS简介

如何使用Createjs来编写HTML5游戏EaselJS简介,第1张

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 , 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===32&&man.jumpNum<man.jumpMax){

man.jump()

}

})

}

获得加载完成后端的图片数据就直接用loader.getResult就可以获取了,跑酷游戏需要一个背景,所以,我们实例化一个sky,然后进行位图绘制,bf方法是beginBitmapFill的缩写,该方法就是开始绘制位图,后面的drawRect是位图的绘制区域,区域当然是整个画布啦,所以就是drawRect(0,0,C_W,C_H)。实例化出来sky后就直接添加到舞台stage里面就行了。接下来是实例化一个角色,createMan方法后面有说,是自己封装的。

然后进行舞台循环设置,上面有注释了,就不说了。

最火的HTML5 js游戏引擎也是使用最多的:

1:Collie是一款基于HTML5的高性能JavaScript动画库,可用于创建高度优化的HTML5动画和游戏。

2:Traffic Cone 这个一般是做2D游戏用的要求比较高,所以不建议学。

3:Quintus是一款易于上手、轻量级、开源的HTML5 JavaScript游戏引擎,包含一个模块化的引擎可轻松开发游戏,并在同一个页面上运行多个实例,支持桌面及移动平台浏览器。(里面有一个自带的游戏示例,个人感觉用这个错,推荐使用)

4:gameQuery是一款非常易于上手和使用的开源JavaScript游戏引擎,通过添加一些简单的游戏类,使用jQuery插件来帮助开发者开发JavaScript游戏,即使是初学者也可以轻松编写一个功能丰富的2D游戏。

亲!!如果你是刚开始开发HTML5游戏话,,建议你用第三和第四个。。

感觉有用,,请采纳,谢谢!!

文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。 网页的本质就是HTML,通过结合使用其他的Web技术(如:脚本语言、CGI、组件等),可以创造出功能强大的网页。因而,HTML是Web编程的基础,也就是说万维网是建立在超文本基础之上的 ==================================================== 上面是在百度百科找的。说明javascript属于其他web技术。其实flash也是属于其他web技术。6楼的兄弟估计以为只要是浏览器的东西就是HTML的。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6997730.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存