HTML5技术

HTML5游戏开发引擎,初识CreateJS - 请叫我头头哥

字号+ 作者:H5之家 来源:博客园 2015-11-03 08:05 我要评论( )

CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎。打造 HTML5 游戏,构建新游戏,提供构建最新 HTML5 的技术、你可以通过这个网站学习如何构建跨平台和跨终端游戏。这个资源库还会告诉你如何构建多人在线游戏。CreateJS 是一套可以构建丰富交互体

CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎。打造 HTML5 游戏,构建新游戏,提供构建最新 HTML5 的技术、你可以通过这个网站学习如何构建跨平台和跨终端游戏。这个资源库还会告诉你如何构建多人在线游戏。CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,旨在降低 HTML5 项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验。

HTML5游戏开发的引擎,初识CreateJS

v准备工作

1.进入createjs首页 

首页有几个tab页,有EASEJS、TweenJS、SoundJS、PrloadJS、ZOE五种.(最新的官网好像没有ZOE的tab页了,不过在下载页面的最下面还是可以找到下载的。) 基于这些库,可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。运行环境请使用Safari, Chrome, Firefox 或者 IE 9+ 。

HTML5游戏开发的引擎,初识CreateJS

2.首页解析: 

3.进入下载页: 

HTML5游戏开发的引擎,初识CreateJS


因为这篇博客主要介绍HTML5游戏开发的引擎canvas,所以我们下载EASEJS就可以了。

4.帮助文档: 

HTML5游戏开发的引擎,初识CreateJS

 
帮助文档里有很多类的介绍,还有对应类的方法、属性、事件的介绍。不过是英文版本的,暂时还没有找到比较好的中文的版本。ps:如果英文比较差的园友,那就只能用web工具强硬翻译了。具体web工具翻译页面的方法可以看我之前的一篇博客:谷歌/微软/必应web页面免费翻译插件

5.引入主要JS: 

HTML5游戏开发的引擎,初识CreateJS


这个文件是我们需要引入的js文件。

v简单demo

1.html代码: 

First Canvas for CNBlogs

2.js代码: 

var canvas; var stage; var txt; var count = 0; window.onload = function () { canvas = document.getElementById("canvas"); // 创建一个舞台对象 stage = new createjs.Stage(canvas); txt = new createjs.Text("Hello CNBlogs->", "20px Arial", "#ff7700"); stage.addChild(txt); createjs.Ticker.addEventListener("tick", tick); } function tick(e) { count++; txt.text = "Hello CNBlogs->" + count + ""; stage.update(); }

3.运行效果: 

HTML5游戏开发的引擎,初识CreateJS

v鼠标经过特效

1.html代码: 

First Canvas for CNBlogs

2.js代码: 

var canvas; var stage; var img = new Image(); var sprite; window.onload = function () { canvas = document.getElementById("canvas"); // 创建一个舞台对象 stage = new createjs.Stage(canvas); stage.addEventListener("stagemousedown", clickCanvas); stage.addEventListener("stagemousemove", moveCanvas); var data = { images: ["cnblogsLogo.png"], frames: { width: 20, height: 20, regX: 10, regY: 10 } } sprite = new createjs.Sprite(new createjs.SpriteSheet(data)); createjs.Ticker.setFPS(20); createjs.Ticker.addEventListener("tick", tick); } function tick(e) { var t = stage.getNumChildren(); for (var i = t-1; i >0; i--) { var st = stage.getChildAt(i); // 设置单位帧的位置 st.vY += 2; st.vX += 1; st.x += st.vX; st.y += st.vY; // 设置大小变形 st.scaleX = st.scaleY = st.scaleX + st.vS; // 设置透明度 st.alpha += st.vA; if (st.alpha <= 0 || st.y > canvas.height) { // 如果超标则移除当前的 stage.removeChildAt(i); } } // 每做一次操作,需要对舞台一次更新 stage.update(e); } function clickCanvas(e) { // 设置鼠标点击出现的图案多 addS(Math.random() * 200 + 100, stage.mouseX, stage.mouseY, 2); } function moveCanvas(e) { // 设置鼠标经过出现的图案少 addS(Math.random() * 2 + 10, stage.mouseX, stage.mouseY, 1); } addS(count,x,y,speed) { for (var i = 0; i < count; i++) { sp = sprite.clone(); // 设置图标出现位置 sp.x = x; sp.y = y; // 利用随机数控制图标随机亮度 sp.alpha = Math.random() * 0.5 + 0.5; // 设置大小 sp.scaleX = sp.scaleY = Math.random() + 0.3; a = Math.PI * 2 * Math.random(); v = (Math.random() - 0.5) * 30 * speed; sp.vX = Math.cos(a) * v; sp.vY = Math.sin(a) * v; sp.vS = (Math.random() - 0.5) * 0.2; // scale sp.vA = -Math.random() * 0.05 - 0.01;// alpha stage.addChild(sp); } }

3.运行效果: 

HTML5游戏开发的引擎,初识CreateJS

4.源码下载: 

https://github.com/toutouge/WebProject/tree/master/FirstEaselJSCanvas

v博客总结

对于HTML5优秀的JS类库或者是引擎框架还有很多,如果你有什么好的可以拿出来分享一下。

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    2017-04-30 16:00

  • 在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    2017-04-28 15:00

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

网友点评
h