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

JavaScript09

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

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中才能正常显示

Web标准是由一系列规范组成,由于Web设计越来越趋向于整体化与结构化,此前的Web标准也逐步成为由三大部分组成的标准集:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的网站标准也分三方面:结构化标准语言、表现标准语言(主要包括CSS)和行为标准。\x0d\x0a其中,html就是结构,主要存放网页一元素;\x0d\x0acss就是表现,对元素的样式进行设置,例如宽度,高度,位置,字体等等;\x0d\x0ajavascript就是行为,对元素取值,动态的改变等等

自学肯定是可以的,但是还是要看你学习的初衷是什么吧,如果是个人兴趣,只想业余学习一下,自学是不错的选择,但是如果是想从事这一块的工作,之后往这一块发展的话,去机构学习还是很有帮助的,而且如果是零基础的话,不建议自学,因为自学需要很好的自制力,学习理解能力等等,很多自学的时间战线会拉很长,而且一些小问题都容易卡住,找不到解决方法,影响学习进度,从而很多最后半途而废放弃学习。在机构的话,学习比较系统,还有专门的老师授课和解决问题,而且一群同学一起学习,学习氛围和环境都是很不错的。但是如果在机构学习的话,要注意机构的选择很重要的,主要看授课方式,师资,服务和就业,最好能自己亲自上门看看 ,感受一下学习环境和氛围。