glayout 介绍:OpenGL/WebGL 的界面绘制库

在我的 Ludum Dare 42 和 43 游戏中,我使用了自己的库作为界面绘制库 glayout 。这个库可以用于常规的 2D 界面绘制,接口和 DOM 有点像。这篇文章是对它的一个介绍,感兴趣的技术小伙伴可以读一下。

特点

glayout 是一个 rust 语言编写的库。它的最大特点是可以编译成两大类目标代码:

  • 普通的客户端二进制程序,理论上可以通过 OpenGL ES 支持所有主流桌面和移动操作系统(但目前我只测试过 Windows )。
  • asm.js / WebAssembly 代码,可以运行在主流浏览器中(我的游戏就是这样运行在浏览器里的)。在这种方式下,还可以使用 JavaScript 接口来调用 glayout 进行界面绘制。

glayout 主要做两件事情:基于 GL 的 2D 绘制、简单的排版。

glayout 的接口从模型上近似于浏览器的 DOM 接口,目前也有初步的排版能力和一点点 CSS 支持。

Hello World

下面是 rust 语言版本 hello world 的代码片段(省略了一些周边代码)。

let cfg = context.canvas_config();
cfg.append_style_sheet("
    .text {
        display: block;
        color: #222;
    }
");
let elem = element!(&cfg, Empty {
    Text {
        class: "text";
        font_size: 50.;
        line_height: 80.;
        set_text("Hello world");
    };
    Text {
        class: "text";
        font_size: 24.;
        line_height: 40.;
        set_text("from glayout");
    };
});
let mut body = context.root();
body.append(elem);

如果编译为 Windows 客户端程序,效果如下:

hello-world-windows

如果编译到 asm.js 的网页上,效果如下:

hello-world-asmjs

将这段代码编译为客户端程序时,glayout 仅需要常规的 rust 工具链支持。编译为 asm.js 代码时,需要 node.js 和 emscripten 工具链,以进行 asm.js 代码生成。

目前开发状态

glayout 目前还处在一个很早期的开发状态,虽然开发比较久了,但我的业余时间比较少而且项目工程量很大。感兴趣的小伙伴可以去 GitHub 看看,如果有兴趣参与开发就更好了~(直接联系我吧!)