HTML5游戏开发工具推荐:IMPACT

标签: HTML5学习资源 | 发表时间:2011-09-27 12:10 | 作者:xielisha iDesperadO
出处:http://www.mhtml5.com

Impact 是一个 JavaScript 游戏引擎,可以为桌面和手机浏览器开发令人惊叹的 HTML5 游戏。

我已经试过了四个其他 JavaScript 游戏引擎,这是我用过的第一个比较有意义的(……)Impact 是市场上第一个真正专业级的 JavaScript 和 HTML5 游戏引擎。

——《Game Developer Magazine》,2011年5月

随处可玩
Impact 可以在所有支持 HTML5 的浏览器上运行:火狐、Chrome、Safari、Opera 和(看吧),甚至是 Internet Explorer 9 。当然也包括 iPhone、iPod Touch 和 iPad。Kilofox.Net

想尝试一下吗?点击你的手机浏览器到 playbiolab.comimpactjs.org/drop 。手上没有 iPhone?看一个简短的演示视频吧!

更多关于在这些平台上的 Impact »

灵活的 2D 关卡编辑器

Impact 自带的多功能 Weltmeister 关卡编辑器,让您轻松创建您的游戏世界。无论是横向卷轴 Jump’n'Run ,还是纵向 RPG,Weltmeister 都能胜任。Kilofox.Net

所有实体(敌人、NPC、机关等)都可以立即在 Weltmeister 上使用。您可以在各实体间创建逻辑链:查找按钮、开门。

观看 Weltmeister 的介绍截图 »

强大的调试工具
易于使用的调试菜单可以帮助您找到性能瓶颈,随时查看究竟是什么正在你的游戏中运行。Kilofox.Net

几分钟入门
Impact 文档回答了你所有的问题。越来越多的视频教程和文章,以及带有大量代码示例的详细类引用,今天将帮助您开发第一个 HTML5 游戏!

 

安装
尽管用 Impact 写的游戏可以脱机工作,但大多数浏览器都不允许。这些浏览器由于同源策略的缺陷,拒绝访问某些功能(在 file://game/lib/ 下的文件与在 file://game/ 下的文件不被认为是在同一个“域”下)。 Opera 是个显著的例外。

此外,Weltmeister 关卡编辑器使用一些 .php 脚本来加载和保存关卡,列出目录的内容。Kilofox.Net

长话短说,您需要一个网页服务器。说到网页服务器,并不意味着是一个单独的服务器计算机,它只是你电脑里的一个提供 web 服务的程序。如果您使用的是 MacOSX ,您就已经拥有网页服务器了,也安装了 PHP ,只需启用它。在 Windows 中,您可以安装 Apache 和 PHP。这不是很复杂。如果您使用的是 Linux,那么您应该是个电脑虫,完全可以自己配置出来。^_^

如果你想手动安装 Apache 和 PHP,需要帮助,请问谷歌。Kilofox.Net

现在,你已经有网页服务器了,PHP 也运行了,对吧?好!不仅要把 Impact 解压到网页服务器的根目录下,还要让你的浏览器指向 http://localhost/ 。您应该看到了一个目录列表,包括您刚刚创建的 impact/ 子目录。试着通过 http://localhost/impact/weltmeister.html 加载 Weltmeister 。载入后应该没有任何错误。Kilofox.Net

如果有错误信息,你应该在浏览器控制台里查看。如果你不知道去哪里找错误控制台,往下读。

其他解决方案:

  • 如果你不想使用 PHP 或者 Apache,Conner Petzold 制作了一个 nodejs 模块,它可以让 Impact 在一个 HTTP 服务器节点上运行。他的 node-impact 模块在 GitHub 上有。
  • 如果您使用的是 Windows,并且喜欢在 IIS .NET 上开发 Impact,试试 Mike Hamilton 的 ImpactJS-IIS-.NET-API 项目
  • 为方便 Ruby 爱好者,Chris Darroch 为 Impact 集成了 Sinatra 后台,您只需在 lib/weltmeister/config.js 的 API 调用中删除 .php 扩展,启用 impact.rb

设置工作环境
如果你正在用 Impact 制作游戏(或者其它浏览器相关),浏览器的开发工具和 JavaScript 控制台将派上用场。如果你不使用它们,某些东西不工作了,你将陷入茫然。

  • 在谷歌浏览器中,你可以点击“扳手”图标 -> 工具 -> JavaScript 控制台,找到控制台。
  • 在 Safari 浏览器中,你必须先开启开发菜单:打开 Safari 的 Preferences through Safari -> Preferences,点击“高级”选项卡,选中“Show Develop menu in menu bar”。之后,您可以通过 Develop -> Show Error Console 打开控制台。
  • 对于 Firefox,请安装最棒的 Firebug 扩展。Kilofox.Net
  • 在 Opera 中,你可以在菜单 -> 网页 ->开发者工具 -> Opera Dragonfly 里找到开发工具。
  • 如果您正在使用 Internet Explorer ,那就考虑使用其他浏览器吧。Impact 可以在 IE9 上运行,但是速度有点慢。您可以按 F12 键打开”开发人员工具“。

现在你只需要一个文本编辑器来编辑你的源文件。如果你是自虐型的,Windows 的记事本都可以。然而,使用支持语法高亮的编辑器将使您生活得更轻松。

我使用的是 Komodo Edit,基本上是 Komodo IDE 的免费版本。不用看它的名字,Komodo Edit 还是一种 IDE。它真的很棒,可以用在 Windows、MacOSX 和 Linux 上。

如果你只是想要一个轻量级的编辑器,我可以推荐 SciTE for Windows 和 Linux。它还可以用在 MacOSX 上,但是设置它有点麻烦。

对于 MacOSX ,听说 BBEdit 和 TextMate 大概是“最好”的编辑器。Kilofox.Net

这些只是根据我个人的经验提出的一些建议。不要信任我。请随意到处看看,尝试不同的编辑器和 IDE。

目录结构
Impact 安装完成以后,应该有以下的目录结构:

  1. media/
  2. lib/
  3. lib/game/
  4. lib/game/entities/
  5. lib/game/levels/
  6. lib/impact/
  7. lib/weltmeister/

复制代码

您的所有游戏资源,比如图像、声音和音乐,都应放在 media/ 目录下。Kilofox.Net

lib/ 目录存放所有的 JavaScript 文件。lib/impact/ 存放 Impact 引擎本身。
lib/weltmeister/ 存放关卡编辑器的所有源文件。
您自己的游戏源文件应该放在 lib/game/ 下。
实体的源文件应该放在 lib/game/entities/ 下。
这样 Weltmeister 才能找到它们。

HTML 文件
用 Impact 写的游戏可以直接在浏览器中运行。不需要任何插件。然而,由于 JavaScript 本身没有显示东西的地方,Impact 需要在一个 HTML 页的 <canvas> 标记上渲染游戏画面。

最基本的 HTML 页看起来类似这样:Kilofox.Net

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>My Awesome Game!</title>
  5. <script type=”text/javascript” src=”lib/impact/impact.js”></script>
  6. <script type=”text/javascript” src=”lib/game/game.js”></script>
  7. </head>
  8. <body>
  9. <canvas id=”canvas”></canvas>
  10. </body>
  11. </html>

复制代码

当然,这个页可以用后来的内容(文字、链接、图像等)进一步扩展,就像其他 HTML 页一样。也可以使用 CSS 样式。我在这儿真的不能再详细说了,因为这本身就是一个庞大的话题。但是,这个基本的 HTML 页确实是你的游戏开发工作所需要的全部。

请注意,这个 HTML 页只引用了两个 JavaScript 文件:引擎和游戏主脚本。其他的所有 JavaScript 文件会被这两个文件自动包含进来。Kilofox.Net

在发布您的游戏之前,也可以把所有的 JavaScript 烘焙到一个(压缩的)文件中。这将大大缩短你的游戏的初始加载时间。然而,为方便开发,最好是让文件分开,有一个更好地综览。更多信息,请参阅烘焙

您的游戏所需的所有图像和声音文件,也将通过 JavaScript 动态加载。Impact 的预加载,确保在游戏开始之前,所有的资源都被加载进来。Kilofox.Net

Impact 自带一个默认的 index.html ,用来加载 lib/game/game.js 文件。

weltmeister.html 用来加载编辑器。更多信息,请查看 Weltmeister 编辑器的介绍。

模块
JavaScript 本身并不提供 include() 函数,来加载其他 JavaScript 源文件。你可以写你自己的 include() 函数,用 Ajax 来加载文件,但是这会使你的游戏无法调试,因为所有的行号和文件名都会丢失,错误信息将比“匿名函数 anonymous() 中的错误“更难确定。

相反,Impact 的源代码被组织成模块。一个模块定义通常看起来类似这样:Kilofox.Net

  1. ig.module(
  2. ‘game.my-file’
  3. )
  4. .requires(
  5. ‘impact.game’,
  6. ‘impact.image’,
  7. ‘game.other-file’
  8. )
  9. .defines(function(){
  10. // code for this module
  11. });

复制代码

模 块名“game.my-file”直接对应文件名。因此,这个模块位于 lib/game/my-file.js。同样,在 requires() 方法中列出的模块将分别从 lib/impact/game.js、 lib/impact/image.js 和 lib/game/other-file.js 载入。这些必需的文件会在模块主体(传递给 .defines() 的函数)执行之前被加载。你可以阅读更多”ig 核心“参考资料中有关模块的部分。

Impact 是如何工作的?
Impact 引擎的核心,不是一个库,而是一个框架。也就是说,Impact 提供一个功能齐全的盒子,你可以把你的代码扔进去。Impact 运行其自身。你只需要把你的东西添加给它,也由引擎来管理。

“你的东西”,在大多数情况下,是 Impact 的一个基类的子类。最重要的一个就是 ig.Entity 类。游戏世界中的每一个对象,都将是 ig.Entity 的一个子类。Kilofox.Net

只要你启动你的游戏,Impact 就会建立一个调用 ig.system.run() 方法的时间间隔,每秒钟60次。这个方法做一些看家的东西,然后调用你的游戏的 run() 方法(默认情况下,只调用它自身的 update() 和 draw() )。

ig.Game 的 draw() 方法是很无聊的,它只是清除屏幕,在每一个背景层和实体上调用 draw()。

update() 方法更新背景层的位置(这是它感兴趣的地方),在每个实体上调用 update() 。实体默认的 update() 方法,是根据它的物理属性(位置、速度、反弹力等)移动,并且把游戏的碰撞地图也考虑进去。Kilofox.Net

在所有的实体更新完成后,游戏的 .checkEntities() 方法被调用。这个用来解决所有的动态碰撞,也就是实体与实体的碰撞。如果它与另一个实体重叠,而且“希望”检查,它还调用一个实体的 .check() 方法(更多详细信息,请参阅”类引用“)。

您可以在自己的 ig.Entity 和 ig.Game 子类中重写这些方法——您可以提供自己的逻辑,然后,如果你喜欢,可以用 this.parent() 调用原有方法。Kilofox.Net

记住,所有这一切都发生在每一帧上。那就是(如果浏览器能够跟上的话)每秒60次。

 

(转自:http://www.kilofox.net/forum/forum.php?mod=viewthread&tid=224,原文:http://impactjs.com/documentation)

相关 [html5 游戏开发 工具] 推荐:

HTML5游戏开发工具推荐:IMPACT

- iDesperadO - HTML5研究小组
Impact 是一个 JavaScript 游戏引擎,可以为桌面和手机浏览器开发令人惊叹的 HTML5 游戏. 我已经试过了四个其他 JavaScript 游戏引擎,这是我用过的第一个比较有意义的(……)Impact 是市场上第一个真正专业级的 JavaScript 和 HTML5 游戏引擎. ——《Game Developer Magazine》,2011年5月.

游戏开发商开源HTML5游戏

- - Solidot
游戏工作室Wooga开源了其开发的HTML5游戏Pocket Island,源代码托管在GitHub上,该公司在官方博客上介绍了他们的开发经验,认为HTML5游戏有潜力,但尚未做好准备,开源的意图将是让其他人了解他们的工作,学习和改进. Wooga认为,2012年也许不是HTML5的黄金时代,但它的黄金时代即将到来.

以圆桌骑士为例浅尝HTML5游戏开发

- never-online - 搜索研发部官方博客
随着XHTML的逐渐式微,Chrome,Safari,FireFox,Opera等现代浏览器正在积极完善HTML5实现,IE9也加入到标准的行列并将在今年上半年发布正式版,HTML5时代来临了. 在各种HTML5特性中,最吸引人的莫过于canvas标签,其提供的绘图API将颠覆以往web表现力匮乏的形象.

HTML5游戏开发的5条最佳实践

- - HTML5研究小组
HTML5很棒,因为它几乎无所不能——它并不是为某种特殊的应用设计的. 更重要的是,HTML5几乎是无处不在的. 它就在你的PC机上、你的手机上、你的平板设备上——它甚至可能就在你的厨房电器上. 正是由于HTML5具有丰富的功能并且无处不在,所以它给开发者带来了很多的灵感. 俗话说得好,“一旦开发者有了灵感,他们就开始编写游戏了.

HTML5游戏开发之将Easel.js和Box2d在画布中结合起来

- - Web App Trend
开发HTML5游戏 Luxahoy时遇到的比较大的困难之一是:如何将Easel.js和Box2d这两个框架结合起来. 在本指南中我们将介绍基本的actor对象,让大家学会如何将box2d中的尺寸转换成easel中的x、y坐标以及旋转参数. 要想学习本指南,你应该具备box2d和easel的基本知识,知道它们是如何工作的.

AppMobi公开HTML 5游戏开发工具

- - HTML5研究小组
AppMobi发布了公测版PlayMobi,这是一种HTML 5游戏开发工具,用于开发iOS,Android,Facebook游戏,同样为不同的支付系统提了“1touch”跨平台应用内购买方案. AppMobi说:PlayMobi游戏可为不同的支付系统自动完成转账交易,比如iOS的iTunes,Android版Google Payments,Facebook的Credits 及Open Web(即Facebook以外的游戏)的Paypal.

【iphone游戏开发】iphone-Cocos2D游戏开发之二:精灵表的详细讲解(一)和Zwoptex工具的使用

- Linker Lin - 博客园-首页原创精华区
简单精灵表:精灵表中的图片都具有相同维度. 复杂精灵表:精灵表中的图片可以具有不同的维度. 通过SpriteSheet类将提供的图像切割成大小相同的子图像,当一个新的精灵表被实例化时将提供切割时用到的维度,同时也将提供精灵表图像中已用的“间隔”信息. 通过PackedSpriteSheet类来解析,该类需要一个图像和控制文件的名称.

HTML5文档转换工具Crocodoc兴起

- - 脚本爱好者
  Crocodoc 官网首页.   北京时间 5月 2 日消息, Crocodoc 是一个可以将 PDF 和 Office 文档迅速转变成 HTML5 的工具,目前该工具使用范围很广泛,包括 Drophox、LinkedIn、SAP、Yammer 和 Edomodo 等公司都是 Crocodoc 的付费企业客户.

HTML5开发工具大盘点

- - CSS库
相信到目前你应该已经对Canvas这一神奇的HTML5新元素有了一定的了解. 在本文中,我们将深入了解画布的功能及特点,学习如何在HTML中利用Canvas绘制图形以及其它类型对象. 正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发工具,哪款开发工具更适合我?下面就一一盘点下:   一、HTML5开发工具之Adobe Dreamweaver.

【转载】HTML5开发工具介绍

- - HTML5研究小组
HTML5被看做是web开发者创建流行web 应用的利器,增加了对 视频和Canvas 2D的支持. HTML5的诞生还让人们重新审视浏览器专用多媒体插件的未来,如Adobe的Flash和微软的Silverlight,HTML5为实现这些插件的功能提供了一种标准化的方式.        虽然HTML5标准尚未开发完成,但是随着开发者对HTML5的兴趣日渐浓厚,开发工具提供商也开始跟进.