GLantern 的第一次 Alpha 测试

2015-11-28

Tech

GLantern, 发布

GLantern 是一个 TypeScript 项目，希望基于 WebGL 提供一个 Flash 接口。我已经将其放到了 GitHub。详细阅读请展开。

GLantern 是从 Bulletproof 的 WebGL 实现（对，还没推送到 GitHub 上，因为不稳定）中分离出来的。看 Bulletproof，很大一部分都是 Flash 和 WebGL 的代码，而这些和弹幕的实现并没有多大关系，还造成了调试困难，所以将它们分离出来……一句话，就是系统解耦，好处什么的就不分条列举了。

为什么要继续造轮子？TWO.js 为了追求速度，采用了 THREE.js 样式的接口和“节点”思想；Pixi.js 的 WebGL 渲染方式对多段线的处理不正确（见以前的示例）；Egret 和 lufylegend。主要针对的是 Canvas2D，而且需要进行转换（Egret 提供了转换工具）。

此次进行的是简单绘制测试，没有图层 alpha，没有滤镜。

/**
 * test/visual/index.ts
 */
import {GLantern} from "../../src/GLantern";
import {Shape} from "../../src/flash/display/Shape";
import {Graphics} from "../../src/flash/display/Graphics";

var lantern:GLantern = new GLantern();
lantern.initialize(682, 438);
document.body.appendChild(lantern.view);

window.addEventListener("unload", (ev:Event):void => {
    lantern.uninitialize();
});

var s:Shape = new Shape(lantern.stage, lantern.stage);
lantern.stage.addChild(s);
var g:Graphics = s.graphics;

g.lineStyle(6, 0xff0000);
g.drawRect(100, 100, 200, 200);

lantern.runOneFrame();

document.body.addEventListener("mousedown", (ev:MouseEvent):void => {
    s.x += (ev.button === 0 ? 1 : -1) * 10;
    console.log(s.x);
    lantern.runOneFrame();
});

我习惯用自动完成，所以用的是 TypeScript 编译到 JavaScript，所以引用的是 src 中的文件。如果作为 JavaScript 模块引用，写成的是这个样子：

// 在 index.js 中也可以 require("../../build/index")
var GLantern = require("glantern");
GLantern.injectToGlobal(this);

var lantern = new GLantern.GLantern();
var stage = lantern.stage;
// ...
var s = new flash.display.Shape(stage, stage);
stage.addChild(s);
var g = s.graphics;
// ...

是不是和 ActionScript 的版本比较相似了？

以前jabbany向我解释过，他不用完整的模型，是为了减小生成大小，提高运行速度。我觉得……先让他们写得舒服（几乎在运行时不用作转换，例如 flash.display.DisplayObject → DisplayObject），就牺牲了一些速度和大小，换来接口的一致性。

这次尝试用了一下 Gulp，而不是 WebStorm 内的 TypeScript 编译。这样下一次各位安装、生成的时候就没这么麻烦了。虽然不再用 WebStorm 内置的编译协助，还是先赞一下 JetBrains，WebStorm 11 中的 TypeScript 支持（捆绑的到 1.6.2）不错了，支持了 1.6 的新 import 解析，还有 tsconfig.json，比 WebStorm 10 那蛋疼的 1.4 好多了，现在能享受到 1.6 的自动完成和实时查错，顺手很多。

试验的还有 TypeScript 的类按文件组织。这样有好处有蛋疼的地方，在项目 readme 里写得很清楚了。话说如果某天 tsc 能跟上 csc（csc /optimize /target:library /out:lib.dll *.cs）那就更方便了。（你说 --outFile 参数？我好像是试一次失败一次。）

在从 Bulletproof 抽出 Flash 结构和 WebGL 绘制代码的时候，没有遇到太大阻力。——要是大了，那就说明我原来的模块分离做得太差了！现在的评价是“差”（看看 bulletproof-bilidanmaku.ts 那组织混乱的代码），还没下滑到“太差”的程度。不过幸好在迁移之前，Flash 和 WebGL 的这两块我是专门调整梳理了依赖关系的。所以最后，许多代码没怎么变（功能组织上有变化），组合了一下启动就跑起来了。