HTML5小游戏开发不可不知的五大必备工具

原创 2016年01月11日 15:50:51

作为一个HTML5移动游戏开发者,你必须了解很多HTML5开发工具,良师益友网已经介绍了很多为Firefox开发者提供的开发工具, 包括JavaScript Debugger, Style Editor, Page Inspector, Scratchpad, Profiler, Network Monitorand Web Console.下面我们会介绍一引起最近更新的HTML5小游戏开发工具,希望大家看完有点收获。

Canvas Debugger

在最新版本的firefox中,我们在浏览器中添加了Canvas调试。

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

 Shader Editor

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

 Web Audio Editor

在最新的Firefox Aurora(32)版本中有一个Web Audio Editor,这个编辑器通过图表展示了所有的音频结点和当前AudioContext的连接。你可以通过它查看每个结点的特定属性。

Web Audio API提供了更多混音的创建,对音频的操作和处理比HTML5的Audio标签强大很多。

 Network Monitor

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

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

 Web IDE

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

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

总结

如果你对上面的资源感兴趣,可以进行深入的学习,良师益友网在线学习平台有免费的HTML5视频课程学习。


html5游戏开发-弹幕+仿雷电小游戏demo

本游戏使用的是html5的canvas,运行游戏需要浏览器支持html5。本篇文章详细讲解如何用html5来开发一款射击游戏,雷电可以说是射击游戏中的经典,下面就来模仿一下。先看一下游戏截图演示地址h...

html5游戏开发之-----祖玛小游戏<原创>

/*祖玛小游戏相信很多人玩过, 今天我尝试在html5的画布上尝试用js写了一个小游戏, 开过过程的感悟是: 遇到一堆代码的时候,应该首先得出一个整体的框架 然后根据这个粗略的框架进行...

html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

开言: 以前lufy前辈写过叫“ html5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本。自从看了那几篇文章,我便对游戏开发有了基本的认识。今天我也以零基础...

construct2HTML5游戏开发工具

  • 2012年08月16日 11:19
  • 28.83MB
  • 下载

HTML5游戏开发工具推荐:IMPACT

Impact 是一个 JavaScript 游戏引擎,可以为桌面和手机浏览器开发令人惊叹的 HTML5 游戏。 我已经试过了四个其他 JavaScript 游戏引擎,这是我用过的第一个比较有意义...

HTML5游戏开发的5条实用建议和开发工具盘点

当你开发基于HTML5的游戏时,你有很多选择。使用什么样的编辑器?是否用到Canvas2d、WebGL?采用什么样的呈现框架和游戏引擎?这些选择大部分由开发者的个人经验和游戏将要发布的平台决定。 ...
  • bboyjoe
  • bboyjoe
  • 2015年09月09日 17:36
  • 488

html5游戏开发工具

1. Lakeshore  地址:http://edn.egret.com/cn20/index.php/page/index/id/8

HTML5游戏开发必备资源

[导读] 一个月前火狐发布了最新版本Firefox 31,新增了很多关于帮助游戏开发者开发和调试HTML5游戏的功能。除了Mozilla基金会目前依靠asm js开发HTML5游戏外,其它游戏制作公司...

html5游戏开发--"动静"结合(二)-用地图块拼成大地图 & 初探lufylegend

一、前言 本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏。 首先让我们来了解了解如何用html5实现动画,毕竟“...

html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl

一、前言   本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏。   首先让我们来了解了解如何用html5实现...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5小游戏开发不可不知的五大必备工具
举报原因:
原因补充:

(最多只允许输入30个字)