通过HTML5和WebGL来制作2D游戏

PHP中文网

发布时间：2016-05-17 09:07:01

3156人浏览过

来源于php中文网

原创

　　Istrolid是一款采用诸多web新技术的HTML5游戏。游戏的作者treeform分别使用webGL、WebSocket、AudioContext和作者自制的响应式HTML框架来渲染图形、创建网络连接、播放音频和设计UI。另外，他还使用了Electron来将游戏打包成Windows和Mac的桌面应用程序。笔者这次给大家分享一下 Istrolid作者的游戏开发心得。

立即学习“前端免费学习笔记（深入）”；

　　2D WebGL

　　在使用openGL和WebGL引擎时，开发者通常会创建多个网格和纹理对象。但是Istrolid的作者却有着自己独特的建构方法。他通过一个网格和纹理对象来绘画所有的游戏内容。游戏中的飞船有非常简单的多边形构成，有的甚至是由若干个三角形构成的。因此作者认为没有必为每一个要绘制的物体都新建一个网格对象。取而代之的是创建一个动态的网格并在每一帧画面中通过代码来调整这个网格。这样会大大加快绘制的速度。这种方法和通常被开发者们弃用的openGL的immediate模式比较类似。同时，作者不推荐使用 3D ModelView的矩阵。在编写 Istrolid时，他仅仅将一个视点的矩形传递给了着色器。因此这款游戏是完全基于2D引擎的。

立即学习“前端免费学习笔记（深入）”；

　　图1 游戏中的飞船均由简单的多边形构成

　　纹理对象也很简单，而且和网格对象一样是动态的。在一个区域或者地形上绘制图片时，游戏程序会加载这个纹理对象并将它放到一个实时打包的纹理地图集中。之后程序会根据新的UI坐标系来创建网格对象。

立即学习“前端免费学习笔记（深入）”；

　　图2 2048px*2048px的地图集

　　作者对着色器的操作也很简单。他将所有的颜色都转换到了HSV颜色空间中以便于进行颜色的调整。

立即学习“前端免费学习笔记（深入）”；

　　图3 HSV颜色空间

立即学习“前端免费学习笔记（深入）”；

　　Coffee Script

　　JavaScript快得难以置信。作者原本利用Panda3d和Python来编写却发现Python并不能满足他对速度的需求。他认为不断发展壮大的JavaScript在满足他对速度的追求的同时还能实现更多的功能。他使用CoffeeScript来编写整个游戏并非常喜爱它的缩进排版和箭头标识符。特别令他印象深刻的一点是箭头标识符可以非常快速的创建内联函数。

　　他利用自己三年前编写的基于HTML的编辑器在服务器上编写代码。这样的好处是他可以通过访问编辑器的URL来在任意一台电脑上开始他的开发工作。他用过Windows、Mac和ChromeOS并非常支持ChromeOS的云理念。

立即学习“前端免费学习笔记（深入）”；

　　图4 作者自制的基于网络的编辑器

立即学习“前端免费学习笔记（深入）”；

　　WebSocket和服务器

　　作者利用CoffeeScript来编写服务器端程序并用Node.js来运行。他希望这款游戏能够同时支持单人模式和多人模式。当玩家进行单人模式游戏时会开启一个本地服务器。程序通过一个伪WebSocket来连接到本地服务器。这样的好处是可以在一个真实的网络环境中来测试代码，从而简化调试的过程。所有的调试和单步调试都在一个进程中完成。另外，他还可以在这个伪WebSocket中设置网络延时和抖动来模拟复杂的网络环境。

illostrationAI

AI插画生成，lowpoly、3D、矢量、logo、像素风、皮克斯等风格

下载

　　在开发即时战略类游戏时，开发者通常会选择锁步(Lock Step)方法。但是 Istrolid得作者并没有这么做。他认为锁步已经过时，不易于编写(尤其是用JavaScript编写时)。而且在这个个人电脑普遍拥有高带宽的时代，锁步的优势已不再明显。他采用delta编码方式，并仅将变动的数据从服务器传给每个玩家的服务器上。

立即学习“前端免费学习笔记（深入）”；

　　图5 Istrolid的网络结构

立即学习“前端免费学习笔记（深入）”；

　　AudioContext

　　浏览器的音频播放能力已经改善许多。作者通过过程生成技术来创建背景音乐，并创建一个随着游戏的进行动态响应的鼓。当一个单位被集中或者爆炸时他会提高这个鼓的音量。他将每一个武器开火时的声音的音量设定成一个随机数以保证每一个武器的声音都有差别，尽管这个差别很细微。除非要开发一个音乐游戏否则作者不推荐在这方面花太多时间。

立即学习“前端免费学习笔记（深入）”；

　　HTML UI

　　如果游戏中的UI非常多的话，那么完全靠自己用代码来实现就会非常困难。这时就需要一些些复杂的UI框架来进行辅助。对于HTML5游戏来说，无需使用复杂的工具包即可实现复杂的UI效果。作者还利用HTML5的特性自己设计了一个响应式框架从而简化UI的编写过程。

立即学习“前端免费学习笔记（深入）”；

　　Electorn “Shell”

　　如今将HTML5游戏编译成适合于Windows、Mac或Linux的桌面应用程序非常容易。Istrolid的作者非常推荐那些因为插件拓展、浏览器过时或者驱动故障等问题头疼的开发者尝试一下Electron。同时这也为把你的游戏发布到类似Steam这样需要提供可下载文件的游戏平台创造了可能。

立即学习“前端免费学习笔记（深入）”；

　　图6 Electron

来源：http://www.gbtags.com/gb/share/10213.htm

以上就是通过HTML5和WebGL来制作2D游戏的内容，更多相关内容请关注PHP中文网（www.php.cn）！

H5页面制作适合哪些应用场景

H5页面制作如何进行测试

H5页面制作的流程是怎样的

H5页面制作能做什么

H5页面制作是开发网页吗

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关专题

拼多多赚钱的5种方法拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变，以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销，利用平台社交电商红利实现盈利。

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页，请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”，点击“添加新页面”并输入网址。若要使用主页按钮，需在“外观”设置中开启“显示主页按钮”并设定网址。

2026.01.26

苹果官方查询网站苹果手机正品激活查询入口

苹果官方查询网站主要通过 checkcoverage.apple.com/cn/zh/ 进行，可用于查询序列号（SN）对应的保修状态、激活日期及技术支持服务。此外，查找丢失设备请使用 iCloud.com/find，购买信息与物流可访问 Apple (中国大陆) 订单状态页面。

2026.01.26

npd人格什么意思 npd人格有什么特征

NPD（Narcissistic Personality Disorder）即自恋型人格障碍，是一种心理健康问题，特点是极度夸大自我重要性、需要过度赞美与关注，同时极度缺乏共情能力，背后常掩藏着低自尊和不安全感，影响人际关系、工作和生活，通常在青少年时期开始显现，需由专业人士诊断。

2026.01.26

windows安全中心怎么关闭 windows安全中心怎么执行操作

关闭Windows安全中心（Windows Defender）可通过系统设置暂时关闭，或使用组策略/注册表永久关闭。最简单的方法是：进入设置 > 隐私和安全性 > Windows安全中心 > 病毒和威胁防护 > 管理设置，将实时保护等选项关闭。

2026.01.26

2026年春运抢票攻略大全春运抢票攻略教你三招手【技巧】

铁路12306提供起售时间查询、起售提醒、购票预填、候补购票及误购限时免费退票五项服务，并强调官方渠道唯一性与信息安全。

2026.01.26

个人所得税税率表2026 个人所得税率最新税率表

以工资薪金所得为例，应纳税额 = 应纳税所得额 × 税率 - 速算扣除数。应纳税所得额 = 月度收入 - 5000 元 - 专项扣除 - 专项附加扣除 - 依法确定的其他扣除。假设某员工月工资 10000 元，专项扣除 1000 元，专项附加扣除 2000 元，当月应纳税所得额为 10000 - 5000 - 1000 - 2000 = 2000 元，对应税率为 3%，速算扣除数为 0，则当月应纳税额为 2000×3% = 60 元。

2026.01.26