等距视角渲染
以斜视角方式绘制地图与角色,形成暗黑破坏神系列标志性的俯视斜角画面。
diablo-js · mitallast/diablo-js
基于 HTML5 Canvas 与 JavaScript 的等距视角小游戏,主打精简代码。README 提供在线 Demo 链接,并说明已从《暗黑破坏神2》提取一张原始关卡,地图分为墙体、地面、物件等图层,按 Tab 可显示地图。仓库另含资源提取工具 dttool 与阴影...
diablo-js 是一个运行在 HTML5 Canvas 与 JavaScript 之上的等距视角(Isometric)小游戏项目,作者将其定位为「minimal-code style」——用尽量精简的代码实现暗黑破坏神式的斜 45 度视角场景与角色移动表现。项目并不追求完整复刻商业作品,而是把重点放在「如何用最少的代码把等距地图、图层与角色渲染跑起来」这件事上。
README 中给出的在线 Demo 地址为 http://mitallast.github.com/diablo-js/,可以直接在浏览器中打开体验,无需本地构建即可先看到效果。
值得注意的是,仓库的主语言标记为 Java,但游戏本体是 JavaScript + Canvas;Java 部分主要服务于配套的资源提取与图像处理工具(见下文「配套工具」一节)。阅读代码时不要把两者混淆。
以斜视角方式绘制地图与角色,形成暗黑破坏神系列标志性的俯视斜角画面。
CHANGELOG 提到一次「Big update」,从《暗黑破坏神 2》中提取了一张原始关卡用于演示,因此地图并非随手绘制的占位图。
地图被拆分为墙体(walls)、地面(floors)、物件(objects)等图层,渲染与逻辑可以按层处理。
按下 `Tab` 键可以显示地图,便于观察关卡整体布局。
仓库附带从原版《暗黑破坏神 2》文件中提取关卡、图片及其他资源的工具。
附带用于为提取出的怪物与英雄图块计算并转换简易阴影的工具。
从 README 与仓库结构可以确认的技术信息如下:
monsters/make.sh 与 monsters/rename.sh。README 还指向 blizzhackers 论坛上的原始研究帖,说明资源格式的逆向工作并非本项目原创,而是在既有研究基础上继续推进。
README 没有提供构建步骤说明,但根据项目形态可以做出如下判断:
file:// 打开可能受浏览器同源策略限制。shadowmaker.jar 需要 Java 运行环境;dttool 为 Java 源码,需自行编译。以上为基于仓库结构的合理推断,README 未逐条写明,实际使用时请以仓库当前状态为准。
仓库除游戏本体外,还包含两个独立工具目录:
https://github.com/mitallast/diablo-js/tree/master/dttool。shadowmaker 目录,同时仓库根目录提供了已构建的 shadowmaker.jar,可直接运行而无需自行编译。这两个工具以 Java 编写,也解释了仓库主语言标记为 Java 的原因。对于想研究「游戏资源如何从商业作品中提取并复用」的读者,这部分代码与游戏本体同样有参考价值。
这个项目适合以下几类读者:
由于 README 信息有限,建议先跑通在线 Demo 建立直观印象,再回到源码对照地图分层与渲染逻辑阅读,最后再看工具链部分。
jfduke3d 是 JonoF 对 3D Realms《Duke Nukem 3D》的源码移植,基于其 Build...
Hypersomnia 是 TeamHypersomnia 用 C++ 从零编写的一款多人俯视角(top-down...
Endless Sky 是一款 C++ 编写的 2D 沙盒式太空探索游戏,玩法接近 Elite、Esc...
NBlood 是用 EDuke32 引擎技术与开发思路对 Build 引擎游戏所做的逆向工程移...