如何使用Createjs来编写HTML5游戏完成一个简单的打飞机游戏

html-css016

如何使用Createjs来编写HTML5游戏完成一个简单的打飞机游戏,第1张

CreateJS包含4个部分,EaselJS、TweenJS、PreloadJS、SoundJS,其中最主要的部分EaselJS包含了开发Html5游戏的所有功能,仅仅使用EaselJS几乎可以完成所有的开发工作,其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能,而使用TweenJS来创建补间动画,则可以省去你很多代码,简化了操作。一个简单的tick动画看起来是这样的:<pre t="code" l="js">var stage, circle

function 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()

}

主要原因是在移动互联网时代,玩家的娱乐需求更加碎片化,而HTML5游戏更符合这种娱乐趋势。

以HTML5游戏《打飞机》为例,玩家的操作方式简单方便,为划屏控制,在攻击炮弹输出、爆炸特效、大技能效果等各方面都表现出色。点击“马上玩”在短短几秒就可跳转到游戏界面,准入门槛相当低。

玩家对HTML5游戏接受度非常之高,与此同时,手游的开发成本、营销成本居高不下,3D超重度游戏竞争非常惨烈,HTML5游戏则为开发者提供了一个发展出位的新思路。于是HTML5游戏占领玩家屏幕、获得开发者重视也不足为怪。

如果开发者要开发应用,游戏,但自己并不擅长美工,那么只能去网上到处找素材,但网上的免费素材并不多,免费素材很少能满足开发者的需求。不过还有一个办法,我们可以从其他应用中提取素材,这些素材的质量还是比较高的。

我们就拿微信的打飞机为例,首先把微信的安装包下下来,apk文件,或者ipa文件,把后缀名改成rar,然后用winrar解压出来。

ipa解压后素材很好找,资源都放在一个目录下,直接用缩略图来找就能找到需要的图片素材,有些是单独一个对象的图片,可以拿来直接用,有些是多个对象的图片合成一张大图,这就需要对应的打包配置文件才能读取各区域的小图片,如果配置文件加密了,那么这个大图基本上没办法用。

apk解压出来素材都放在assets和res目录下,不过由于微信打飞机是做成一个jar集成在微信里面的,所以我们在assets/preload目录下可以看到一个名字带有“shoot”的jar文件,把这个jar解压出来,在res目录下可以找到一些图片素材,另外在shoot目录下可以找到打包过的图片素材,雷达下载更专业。

这些打包的图片也有对应的打包配置文件,记录了各个小图的裁剪区域,也需要用配置文件来读取图片信息。好在apk版本的配置文件并没有加密,用文本模式打开我们就可以看到配置信息,包括各个小图片的区域和名称,稍作调整支持我们常用的开发引擎,就可以拿来用了。

但并不是所有的应用都可以提取其素材,有些会把图片信息加密处理了,在加载的时候再解密出来使用,这样我们就没法盗用它的素材了。另外,如果明显盗用其他应用的素材,就会涉及到侵权了,所以开发者提取应用的素材最好以自己开发练习来用,不要光明正大的把应用发布到市场上去。

最后还是要说,成功的应用离不开优秀的美工,美工转独立开发者成功的案例很多,但程序员要自己做美工还是很有难度的,实在需要美工的话可以考虑招人或者外包出去。