现在就开始介绍HTML5游戏开发的几条实用建议,动画效果

  • 栏目:前端 时间:2020-04-17 09:05
<返回列表

当你开发基于HTML5的游戏时,你有很多选择。使用什么样的编辑器?是否用到Canvas 2d、WebGL?采用什么样的呈现框架和游戏引擎?这些选择大部分由开发者的个人经验和游戏将要发布的平台决定。

  使用 HTML5,CSS3 和 Javascript 可以帮助面向对象开发者开发拥有各种特性的游戏,比如:3D 动画效果,Canvas,数学,颜色,声音,WebGL 等等。最明显的优势在于使用 HTML5 开发的游戏能在任何现代化流行的设备上运行。

本文由 伯乐在线 - betty135 翻译。未经许可,禁止转载!
英文出处:mozilla。欢迎加入翻译组。

幸运的是,有关HTML5游戏开发的指南现在已经有很多了。而这篇文章则是要告诉开发者在开发HTML5游戏以前应该具备的一些全局概念。你能从这篇 文章中学到什么?这里会介绍HTML5游戏开发的一些框架,你将知道如何使你设计的游戏能够在更多的平台上运行,了解如何管理在线游戏的状态,如何处理性 能问题。

  某些游戏引擎仅仅是一个抽象的层次,就简单处理一些或者更多的繁杂游戏开发任务;其他只是注重 asset 加载,输入,物理效果,音频,sprite 地图和动画,而且相当多样化。还有一些引擎架构极其简单,只包括一个 2D 水平的编辑器和调试工具。

今天我们发布了Firefox 31,它具有一些可以帮助HTML5游戏开发者编写并调试复杂游戏的新特性。并且Mozilla用博客记录了用asm.js做的首款商业游戏,像Dungeon Defenders Eternity 和Cloud Raiders这两款游戏都是用Emscripten编译器交叉编译到JavaScript中的。像这样的游戏意味着HTML5已经是一个游戏平台了。

话不多说,现在就开始介绍HTML5游戏开发的几条实用建议。

韦德体育 ,  大部分的游戏引擎都能提高游戏开发的效率,即使是创建全功能型的游戏。但是,也有一些开发者为了能更好的理解游戏的每个组件,喜欢从头开始创作。现 在基于 Javascript-HTML5 的游戏引擎也不少,这是好事,同时,也是个坏事,因为事实上大多数开发出来的产品都没人维护,或者即将停止维护。所以,选择某一游戏引擎需要仔细考虑的就 是该引擎在未来几年是否会继续维护,更新,进行功能增强。

如果你对Emscripten感兴趣你可以在Emscripten wiki了解更多详细信息,也可以在github page上面获得代码。另外一个很好的资源是MDN上的 Emscripten tutorial。如果你想知道的asm.js性能,可以从这篇文章中获得更多细节asm.js performance improvements in the latest version of Firefox make games fly! 。

建议1:使用框架

如果只是用HTML5编写一些小程序其实非常简单,但如果想往你的游戏中加入更丰富的功能,那么就有许多其他的事情需要处理了。

比如,如果你的游戏中有大量的图片、音效或是其他的资源,那么浏览器需要从你的游戏服务器上下载这些资源,这往往需要花费很多的时间。如果你在 编写程序的时候没有考虑这些问题,那么你也许会对最后的结果感到意外。由于图形和声音文件都是异步下载的,也许在你的资源下载好以前你的 JavaScript脚步已经开始运行了。这就是所谓的“爆音”现象(图像显示异常),而声音也可能在错误的时间播放。一个好的解决方法就是创建一个预先 下载机制,保证所有的资源下载完以后才允许脚本执行。

另一个你可能碰到的问题就是你的游戏在不同的机器甚至是浏览器中运行的速度有所不同。虽然这也许在你的控制范围以外,但你还是可以尽量使得你的动画或是动作的速度不依赖于游戏运行框架的速度。

其实,现在有许多的游戏模板代码,里面实现了大多数游戏需要的功能。这样,开发者不需要从头到尾编写一个完整的游戏程序。现在有许多框架可以帮助开发者设计游戏,开发者只用关注具体的游戏逻辑,而不用担心如何使游戏顺畅运行这些细节问题。

使用框架时唯一需要注意的一点就是如何从众多的框架中挑选一个合适的框架。像ImpactJS这样的框架功能非常强大,几乎可以在各个 方面为开发者提供帮助;而像EaselJS的框架则主要是处理图形方面的工作。最后,还是需要由开发者决定使用哪种框架更加合适。这看起来似乎很简单,但 在JavaScript的世界里面,选择一个框架时也意味着你选择了一种特定的编程风格。

functionsaveState(state) { 
    window.localStorage.setItem("gameState", JSON.stringify(state)); 
} 
functionrestoreState() { 
    varstate =window.localStorage.getItem("gameState"); 
    if(state) { 
        returnJSON.parse(state); 
    }else{ 
        retrun null; 
    } 
}

Monster=ig.Entity.extend({eyes : 42});});ImpactJS就是一个很好的例子,它不仅提供了图像显示和音效处理的方法,还在实现中插入了自己的对象和模型。

韦德体育 1

Ascended Arcade三个月内发开了三款游戏,全部使用的是ImpactJS的框架

虽然现在已经有很多HTML5游戏使用了一些框架,但是还是有很多开发者不嫌麻烦地选择不依赖任何框架完全自己开发。如果你想在合理的时间内完 成任务,使用框架当然是最有效的方法。Ascended Arcade就是一个很好的例子,在短短三个月的时间里,他们就开发出了三个游戏,全部使用了ImpactJS框架。

  在这篇文章中,我们经过各种资料探寻,测试,实际应用等方法,收集了专门提供给开发者的20 款免费的 JavaScript 游戏引擎, Enjoy!

在这篇文章中我们会介绍给你一些Mozilla开发者所创造的资源,利用这些资源你可以编写并调试基于HTML5的游戏。这不是一个非常详尽的列表,我们欢迎大家提供在这方面任何有价值的反馈,请在评论中告诉我们。

建议2:将小屏幕和触屏设备考虑在内

HTML5最大的卖点之一就是它既能在桌面PC上使用,也能在笔记本电脑、平板设备甚至是智能手机上运行。(这里有IE9在Windows Phone 7 Mango上的运行效果演示)。

HTML5与生俱来就具备了跨平台的特性,通常为开发者节省了很多工作。然而,有些事情是需要开发者考虑的…

韦德体育 2

SpyChase在Windows Phone 7 Mango上的运行效果

首先也是最重要的一点,不同的设备屏幕的尺寸也有所不同,屏幕的宽高比以及分辨率可能有很大的差别。如果想让你的HTML5在移动设备上拥有良 好的效果,确保它支持多种分辨率并且不超过WVGA的800×480框架大小。此外,由于大多数的移动设备无法在一个屏幕上显示所有的页面内容,他们常常 采用精确的缩放和平移技术,而这些技术通常并不适用于游戏的编写。可以在编程的时候使用viewport meta标志禁用这些功能。下面的代码片段可以用来使你的游戏视图根据屏幕的实际水平宽度自动调节。移动浏览器上的缩放功能常常与触控游戏控制功能产生冲 突,可以将“user-scaleable”参数设置为“no”,从而禁用浏览器的缩放功能。

现在你已经能够将你的游戏视图很好地呈现在小屏幕设备上了,接下来就该考虑如何处理用户输入的问题了。大多数触屏设备都有一个虚拟键盘,但是在 玩游戏的时候显示一个虚拟键盘实在太浪费空间了。你应该开发一个有限的虚拟键盘,只提供游戏中使用到的按键(比如箭头)。当然,最好是尽可能在游戏中不需 要使用额外的元素。Spy Chase在这方面做得很好,用户只用一个手指就能控制游戏中的汽车了。

 1. Crafty

  craftyJS 个轻量级的,模块化 JavaScript 游戏引擎,包括了许多组件:动画,事件管理,重新划分区域,碰撞检测,sprite 等等。它支持所有类型的浏览器,比如  IE9。不需要 dom 操作和自定义绘图程序。

从何处开始

当开发一个基于HTML5的游戏时,你可以有很多种选择。从选择哪种编辑器,到游戏中根据使用的渲染框架和游戏引擎决定的是否会用到Canvas 2d、 WebGL、SVG 或者 CSS。大多数这种决定都会根据开发者的经验或者是游戏发布的平台来决定。没有任何一篇文章可以回答这些问题,不过我们想要把材料集合在一起,这样可以帮助你立刻起步。

对游戏开发者来说,MDN上最关键的资源之一就是 Games Zone.MDN的这一部分包括游戏开发的文章,演示,外部资源以及实例。它也包括一些对于开发者完成HMTL5需要了解的API的详细描述,包括声音管理,网络,存储和图形渲染。我们现在正在对这部分内容进行添加和补充。我们希望将来有大多数普通场景,框架和工具链的内容和实例。

同时这里也有一些帖子和MDN上面的文章可以帮助游戏开发者进行工作。

建议3:自动保存用户的记录

使用 site pinning,web浏览器试图让Web Apps可以像桌面apps一样工作。但是,让网站像Apps一样运行的想法还比较新鲜,同样的,让Web页面保存客户端的状态也尚未成熟。用户在关闭 Microsoft Word的文档时可能会思考一下内容是否已经保存,而在关闭Web页面时往往不会这么仔细了。通常这并不会带来什么问题——大多数的Web页面是没有状态 的,或者是将用户的记录保存在了服务器上。

但如果是处理浏览器游戏,情况就完全不同了。通常在客户端执行的是JavaScript代码,HTML5游戏通常将游戏的状态缓存在内存中(RAM)。一旦关闭浏览器窗口,用户辛辛苦苦赢得的高分就永远地丢失了。

你可以要求用户小心一点,不要将正在进行的游戏窗口关闭,但是意外总是会发生的,尤其是当用户开了多个窗口或是电池没电的时候。

长话短说:在编写HTML5游戏时,最好是经常将游戏玩家的进度状态保存一下,当用户重新打开关闭的web页面时,应该让用户可以继续之前没有结束的游戏而不是重头来过。

你应该将用户的记录保存在哪里呢?过去,答案往往是服务器端的数据库或是客户端的cookie。但是这两个都不是最佳的选择。如果是在服务器 端,则会产生额外的HTTP请求开销。如果是cookie的话,则可以保存记录的空间非常有限,并且cookie的寿命取决于浏览器的配置。

一个更有效的方法是使用HTML5 DOM storage。DOM Storage提供了一个key-value存储(或是JavaScript定义的对象)的接口,可以为每个网站保存几兆的数据。使用起来非常方便,但是 在HTML5游戏中,你可能想要记录一些更加复杂的数据结构——这些DOM storage本身可能并不支持。幸运的是,现在的JavaScript提供了一套机制帮助开发者将一组对象压缩成一些紧凑的符号,这就是JSON机制。 使用这套机制,DOM storage可以保存任何格式的信息。下面的两个函数展示了如何使用HTML5 DOM storage保存游戏状态以及ECMAScript5中的JSON功能:

functionsaveState(state) { 
    window.localStorage.setItem("gameState", JSON.stringify(state)); 
} 
functionrestoreState() { 
    varstate =window.localStorage.getItem("gameState"); 
    if(state) { 
        returnJSON.parse(state); 
    }else{ 
        retrun null; 
    } 
}

 2. Quintus

  Quintus 引擎是个 HTML5 游戏引擎,模块化,轻量级,而且带有简洁的 Javascript 友好的语法。 Quintus 是一个易学,使用有趣的 JavaScript HTML5 游戏引擎,支持移动和桌面开发。包含一个模块化的引擎可轻松开发游戏,并在同一个页面上运行多个实例。 

工具

作为一名HTML5开发者,你并不会缺少可随意使用的工具。在Mozilla社区中我们一直致力于扩展Firefox开发者工具。这些包括一个功能全面的JavaScrip调试器,样式编辑器,页面探测器,暂存器,分析器,网络监测和网页控制台。

除了这些,最近也引进和更新了一些著名的工具,它们可以为游戏开发者提供很好的功能。

建议4:使用profiler

游戏开发中最大的挑战是在加入许多功能以后,如何保证游戏仍然具有高的帧显示频率。

好的消息是近几年来,浏览器的速度越来越快了,基于HTML5的游戏已经可以达到每秒60帧了。

这是非常了不起的。对IE9来说,这意味着开发了一个全新的JavaScript引擎,能够利用多CPU内核以及基于Direct2D的硬件渲染管道。换言之,如果你配备了高配置的游戏平台,IE9就能充分地利用这些硬件平台。

韦德体育 3

IE9整合了JavaScript分析器,能够发现性能瓶颈

对于简单的游戏,这意味着你不必担心它的性能问题。但由于HTML5可以运行在任何平台上,这意味着你发开的HTML5游戏应该能够运行在任何 一个设备或是浏览器上,其中有些设备或浏览器的处理能力可能并没有你希望的那么快。即使你的应用只针对高性能的PC,游戏的性能也是一个不得不考虑的问 题。

如果你要求你的游戏达到每秒60帧,这意味着每一帧的渲染时间不能超过16毫秒。也就是说,在你一眨眼的时间里面,你需要完成至少6帧的渲染工作。现在听起来可能有点难以想象…但是有些非凡的游戏确实能够做到。

幸运的是,这里有些工具可能能够帮助你。在IE9(或是IE10)上,通过按下F12按键可以打开开发工具面板。选择“Profile”选项然后选中“Start profiling”。

现在在你觉得性能需要提升的地方停留30秒,profiler将收集相关数据,然后选择“stop profiling”。你将看到你的游戏中的每个功能的累积执行时间。通常,你会发现某些功能占用了大部分的时间。这样你就能有针对性地优化那些特别耗时的功能了。

不要过分相信自己的直觉——有些代码可能看起来效率很低,但在某些JavaScript引擎上执行起来速度却很快。最好的办法就是时常地反复分析程序,对于修改过的代码,需要反复进行测试确保你的修改确实能够提升程序的性能。

韦德体育 4

游戏变得越来越社会化:Warimals是基于HTML5的游戏,用户可以与Facebook上的好友一起参与游戏

 3. Gamequery

  gameQuery  是 个易于使用的 jQuery 插件,可以通过添加相关游戏的类来帮助开发 Javascript 游戏,自从它使用 DOM 操作代替了 Canvas gameQuery ,现在可以兼容大量的浏览器,即使是比较旧的版本:Firefox, Chrome, Internet Explorer, Safari, Safari for iOS, mobile versions of Webkit 和 Opera。

调试器

在最新推出的Firefox中,我们为浏览器增加了一个Canvas调试器。韦德体育 5

这个Canvas调试器可以追踪所有用来生成框架的canvas指令,有些特别的指令都会用颜色标注出来比如画一个部件或者使用特定的着色程序。这个Canvas调试器不仅可以用来开发基于WebGL的游戏,同时也可以用来调试基于Canvas 2D的游戏。在下面的游戏用你可以在动画中看到每个图像都被画到画布上。你可以点击任意一行直接跳到控制这个动作的JavaScript部分。韦德体育 6

Canvas调试器最常报的两个错误是 setInterval instead of requestAnimationFrame和inspecting canvas elements in an iFrame。

如果想要了解关于Canvas调试器的更多的详细信息,请阅读Introducing the Canvas Debugger in Firefox Developer Tools。

建议5:要有创造性!

能够开发出在浏览器中运行的游戏是一件很棒的事情,而更酷的是可以使用HTML5在浏览器上开发游戏应用!从技术的角度看,HTML5是非常棒的,而浏览器也是非常理想的游戏平台。

想想看…各种不同的设备上都有浏览器,它们通常是时时在线的,它是人们接收邮件、聊天和社交网络的工具。浏览器游戏的开发者,可以利用自己开发的游戏将来自世界各地的人们联系在一起。

作为一个HTML5游戏开发者,你必须了解很多很酷的开发工具,在Mozilla社区中我们已经介绍了很多为Firefox开发者提供的开发工具,包 括JavaScript Debugger, Style Editor, Page Inspector, Scratchpad, Profiler, Network Monitorand Web Console.

下面继续介绍一些HTML游戏开发的工具。

 4. GMP

  GMP  是个杰出的制作基于 sprite ,2D 游戏的引擎。它可以很容易就设计出最 retro 风格的街机游戏,同时也是很好的制作游戏的工具(比如 sudoku 和 gogopop)。在线演示

Shader编辑器

当开发基于WebGL的游戏时,当应用运行时能够测试并且改变着色程序是非常有帮助的。使用开发者工具里面的Shader编辑器可以实现这一功能。顶点和分片着色程序都不用重新加载页面就可以修改,或者直接可以查看对输出有何影响。

韦德体育 7

如果你想要对Shader编辑器有更多了解,请看这个帖子 Live editing WebGL shaders with Firefox Developer Tools,也可以看看这篇 MDN文章,它包含了一些展示实时编辑的视频。

Canvas Debugger

在最新版本的firefox中,我们在浏览器中添加了Canvas调试。Canvas Debugger允许你跟踪所有的canvas上下文调用, 像绘制元素和使用特定的调色器一样,它会根据具体的要求调用颜色编码。它不仅在开发基于WebGL的游戏时有用,它同时也可以用来测试基于Canvas 2D的游戏。 在下面的游戏中,你可以看到动画被分解成很多个静态图,你可以点击任意一行直接查看那一部分的响应。

韦德体育 8

 5. lycheeJS

  lycheeJS 是个 JavaScript 游戏库,提供完整的原型解决方案和 HTML5 Canvas 部署,在 Web 浏览器或者原生环境的WebGL 或者是基于原生 OpenGL(ES) 的游戏。这个项目的开发过程优化了 Google Chrome 和它自身的开发工具。

网络音频编辑器

现在的版本Firefox Aurora (32)有一个网络音频编辑器。这个编辑器用图形展示了所有的音频节点以及它们在现有的AudioContext中的联系。你可以详细查询每个节点的属性并监测它们。

韦德体育 9

 Web Audio API提供了比HTML5的 Audio tag更加复杂和强健的声音创造,操控和处理的功能。当使用网络音频API时记得读一下 Writing Web Audio API code that works in every browser,它包含了支持多种音频节点的相关信息。

如果你想要对网络音频编辑器有更多了解,记得读这篇介绍网络编辑器的文章,以及MDN 上的这篇文章。

Shader Editor

当你创建一个基于WebGL的游戏时,如果能在游戏运行时测试和修改着色器程序将是非常酷的一件事。使用Shader Editor就可以做到这么酷的事情。你不需要重新加载界面就可以修改顶点和片段着色器,还可以查看其对输出结果的影响。

 6. Enchant.js

  Enchant.js  是个简单的 JavaScript 框架,可以使用 HTML5 和 JavaScript 来开发简单的游戏和应用。现在还是由 UEI 的 Akihabara 研究中心来开发和维护。在线演示

网络监测器

当开发一个基于HTML5游戏的网站时,这个网站对于手机用户来说是非常麻烦和非常耗费时间的。使用这个网络检测器你可以直观地监测所有请求地址的网络请求,操作所花费的时间,以及终端的大小和型号。

韦德体育 10

另外使用网络监测器你可以看到一个你的app在缓存和未缓存情况下的表现的分析。

韦德体育 11

如果你想要知道更多关于网络监测器的详细信息请看MDN 网页。

Web Audio Editor

在Firefox Aurora(32)版本中有一个Web Audio Editor,这个编辑器通过图表展示了所有的音频结点和当前AudioContext的连接。你可以通过它查看每个结点的特定属性。Web Audio API提供了更多混音的创建,对音频的操作和处理比HTML5的Audio标签强大很多。

 7. Starlingjs

  Starling Starling 是在 Stage3D APIs 基础上开发的一种 ActionScript 3 2D 框架(可用于 Flash Player 11 和 Adobe AIR 3的桌面)。 Starling 是为游戏开发设计的,但是你可以将它应用于很多其它的应用程序。 在不必涉及低级 Stage3D APIs 情况下,Starling 使得编写具有快速 GPU 加速功能的应用程序成为可能。 

Web IDE

当开始开发游戏时你首先要选择使用哪个编辑器。这里有很多编辑器(Sublime, Eclipse, Dreamweaver, vi等)。在大多数情况下,你已经有一个最喜欢的编辑器了。如果你对在浏览器内进行开发感兴趣的话你应该会想要试一下Firefox Nightly最新推出的Web IDE。

韦德体育 12

Web IDE不仅提供了一个功能全面的编辑器,也可以作为很多本地和远程平台,调试器,模板框架和应用管理的发布代理。并且,支持Web IDE的框架提供了API,使得其它编辑器可以使用它提供的函数。想要了解这方面的更多细节,请看一下这个帖子。

想要同步看Firefox Developer Tools的更多新闻,请看他们在Hacks博客上的系列文章。想要最新的最稳定的开发者工具特性,可以看他们在MDN上的文档。

Network Monitor

对于HTML5游戏开发者来说,需要花费昂贵的代码来对游戏进行繁琐的测试。如果游戏是在手机设备中运行,可以使用Network Monitor直观地看到所有的网络请求,系统耗时和类型大小等属性。

韦德体育 13

除此之外,你还可以通过Network Monitor直观地看到游戏的性能分析。

韦德体育 14

 8. The Render Engine

  The Render Engine 是个跨浏览器的,开源游戏引擎,完全使用 JavaScript 编写。它拥有一个扩展的 API 和使用当前最新的现代浏览器特性。此款引擎旨在帮助用户使用基础的工具来开发游戏,加快游戏概念到成品的过程。

API

MDN Games Zone列出了很多可以帮助开展游戏开发的API和文章。

韦德体育 15

除了这些资源你可能对额外的对开发有帮助的文章也感兴趣。

如果你的游戏支持使用WebRTC或WebSockets的多媒体互动,你可能对Together.js也感兴趣,它提供了web app的协作特定。想要了解可以实现什么可以看一看Introducing TogetherJS。

很多游戏需要存储空间,IndexedDB可以满足这一需求。想要了解扩展IndexedDB的性能,可以读Breaking the Borders of IndexedDB。你可能也对 localForage感兴趣,它提供了和浏览器无关的简单存储支持。想要知道更多详细信息可以读这个 Hacks post。

Web IDE

开发游戏之前你必须先选择一个开发环境,同样,你有很多种选择(Sublime,Eclipse,Dreamweaver,vi等等),重要的是你肯 定已经有一款常用的开发环境了。如果你对浏览器端的开发环境感兴趣,你可以试一下Web IDE,它已经在Firefox的最新版本中上线了。

韦德体育 16

Web IDE不仅提供开发者进行正常的编码,还可以远程发布、调试、框架管理等。

 9. Akihabara

  akihabara 是一系列的库和工具,可以预置创建 pixelated indie-style 8/16-bit era games ,使用 JavaScript , HTML5 canvas 标签和一些标准 hooks 开发。

游戏优化

现在的HTML5游戏给尤其开发者提供了很大的力量。很多游戏将会在移动设备上运行,这和在桌面运行相比效果会差很大。所以如果你想要你的游戏在多种平台上都取得成功,优化你的代码非常重要。 Optimizing your JavaScript Game for Firefox OS 这个帖子提供了很多可以帮助你开发出在低端移动设备上也能良好运行的游戏的技巧。

 10. JsGameSoup

  Js Gamesoup 是个开源免费的软件框架,使用 JavaScript 和其他开放 web 技术来开发游戏:

本地化

为了你的游戏有更多的用户,你可能想要你的游戏提供对多种语言的支持。由于部分开发者将本地化也考虑在游戏的制作中,我们做了很多的招募翻译的工作来帮助你翻译游戏。想要了解这方面的更多信息请看这里。

 11. Gamejs

  GameJs 是一个基于浏览器的2D游戏开发框架,使用JavaScript和Canvas。使用GameJS这个超酷的Canvas游戏库,能写出优秀的基于Canvas的游戏。 

你的声音

Mozilla是一个关于开发者和用户的社区,我们需要你的帮助和反馈。如果你有一些想要在未来产品中看到的特性,请加入irc.mozilla.org的讨论,或者通过 mailing lists联系。你也可以记录bugzilla.mozilla.org的bug。另外,我们也在DevTools  和Open Web Apps上有额外的反馈渠道。

赞 1 收藏 评论

 12. CSS Game Engine

  CSS game engine 使用 JavaScript 和 CSS (Cascading Style Sheets) 来装饰页面,他们在一起使用非常可靠。使用这个引擎可以创建属于用户自己的游戏,这个项目主要针对的是初学者,想学习如何编写音频游戏的开发者。用户最好 是个 web 设计师,有点 CSS 基础。

关于作者:betty135

韦德体育 17

(新浪微博: 个人主页 · 我的文章

 13. Clanfx

  clanfx 是个 2D ,平铺的一个 JavaScript 游戏引擎,使用 JavaScript 和 CSS 开发。当前支持的浏览器有:Firefox, Epiphany 和 Opera browsers。主要特性包括许多动态 sprites,spell 效果,建筑,瓷砖纹理和基础的游戏 AI。 

 14. gTile

  gTile 是个基于浏览器的游戏引擎,完全由 Javascript 和 DHTML 开发。它使用 2D 视图来保证简单性和可访问性。此款游戏的成功之处是较强的交互性和游戏对象行为,而不是花俏的图像和动画。在线演示。支持的浏览器有: IE6+, Firefox 2.0+, Safari 2.0+ and Opera 9.5+,不需要下载任何组件或者插件。

 15. J5g3

  j5g3 是个开源 Javascript 图像引擎,语法非常易于使用,可以进行快速开发和扩展。 

 16. Jaws

  Jaws 是个 HTML5 驱动的 2D 游戏库,刚开发的时候只能用来制作 canvas,现在支持通过同样的 API 来制作普通基于 DOM 的 sprites。支持:Chrome 9+, Firefox 3.6+, Safari 5+ & IE9。

 17. Cocos2D

  Cocos2D JavaScript 是 Cocos2D for iPhone 的 HTML5 端口。它是个 2D 图像引擎,允许快速开发 2D 游戏和图像应用。它可以在任何现代化浏览器中运行,不需要第三方插件,比如 Adobe Flash。 

 18. CopperLicht

  CopperLicht 是个 WebGL 库,同时也是 JavaScript 3D 引擎,可以创建 3D 游戏和网页应用。它使用 WebGL canvas ,支持现代主流浏览器,不需要任何插件就可以硬件加速渲染 3D 图片。 

 19. Aves

  Aves  是个 html 和 javascript 游戏引擎,让人想起 oldieworldie RPGs (除了, 更多的图像功能),所有的渲染效果都是由 html 和 javascript 开发的,不需要任何插件!

 20. LimeJS

  LimeJS 是个 HTML5 游戏框架,用来构建游戏。它在现代化触屏设备和桌面浏览器上看起来像是原生的,而且运行速度快。LimeJS 通过 Google 和相关的函数/类 来创建 Closure 库,控制时间线,时间,形状和动画效果。同时,此框架完全支持 sprite 表(用户可以从单个文件中收集所有图片)。

  文章来源 codegeekz.com

HTML5,CSS3 和 Javascript 可以帮助面向对象开发者开发拥有各种特性的游戏,比如:3D 动画效果,Canvas,数学,颜色,声音,WebGL 等等。...

上一篇:苹果的产品一直以精美的UI著称,付费投稿计划 下一篇:没有了

更多阅读

现在就开始介绍HTML5游戏开发的几条实用

前端 2020-04-17
当你开发基于HTML5的游戏时,你有很多选择。使用什么样的编辑器?是否用到Canvas2d、WebGL?采...
查看全文

苹果的产品一直以精美的UI著称,付费投

前端 2020-04-17
本文由码农网 –小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 苹...
查看全文

付费投稿计划,而且翻页动画非常逼真

前端 2020-04-17
本文由码农网 –小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 6个...
查看全文

友情链接: 网站地图

Copyright © 2015-2019 http://www.koi-bumi.com. 韦德体育有限公司 版权所有