立体像素画：Obelisk.js绘制等轴透视立体图形（Isometric Graphics） 作者：Alex Young

译者注：IsometricGraphics, 游戏绘图中的常用术语，可直观理解为透视立体图形，就像你在《帝国时代》或者《暗黑破坏神》这些游戏里看到那样。关于这里面的背景知识：这篇博文很有帮助/content/3812658.html

原文链接：http://dailyjs.com/2014/03/24/obelisk/



（图片说明：Obelisk.js现有的全套5种原型图形（Brick、Cube、SideY、SideX与Pyramid）以及上色后的效果，未来将会有更多的isometric原型图加入到引擎中。）

在创建等轴图形（Isometric Graphics）的时候，由Max Huang创作的Obelisk.js (GitHub: nosir/obelisk.js,License: MIT)是一个非常好用的JS类库。

Obelisk.js引擎提供的API非常简单灵活，你可以很方便的在HTML5画布上添加上类似砖块、立方体和金字塔这样的isometric pixel图形元素。Obelisk.js的线条绘图遵循pixel neat pattern, 也就是说，线条的像素排列严格使用1:2高宽比例，并使线条形成22.6度(arctan(0.5) = 26.565)的角度。

Max用Obelisk.js写了一些非常酷的例子，比如这个从Gif转换成isometric图形的三个小人的动画（链接：http://codepen.io/nosir/details/mdiHe），还有可以将任意输入的文字转换成isometric图形的渲染文本功能，，还有可以将任意输入的文字转换成isometric图形的渲染文本功能（链接：http://codepen.io/nosir/details/IxBJn）。

译者注：另外JSFiddle上的这个例子也会很有助于理解（http://jsfiddle.net/nosir/ygWEW/）



（图片说明：Isometric文字效果）

Max还写了一些教程来指导怎样创建立方体和其他的原型图形。下面我们就用Obelisk.js来分步建立一个isometric pixel的立方体，也许你对这些代码还不能立刻想清楚，但是没关系，只需要知道这有多么简单就可以了。

// 第一步，我们来创建一个isometric 3D坐标轴的零点instance变量。
var point = new obelisk.Point(200, 200);

// 然后在HTML5 Canvas object中创建pixel view的instance变量，在这里摆放所有的图形。
var pixelView = new obelisk.PixelView(canvas, point);

// 同时创建立方体的dimension变量和上色用的color instance变量。
var dimension = new obelisk.CubeDimension(80, 100, 120);
var gray = obelisk.ColorPattern.GRAY;
var color = new obelisk.CubeColor().getByHorizontalColor(gray);

//然后把上面建立的三个变量作为参数传递给cube构造器，生成一个cube instance变量。
var cube = new obelisk.Cube(dimension, color, true);

// 最后一步，把cube原型渲染出来。
pixelView.renderObject(cube);

这样在canvas中就可以看到它了：



现在我们可以放大浏览器的显示比例，离近了仔细看一看：