抠腚爱揉曼 Coding Iron Man

关于UI的若干纠结

话说最近哥对UI的感情那是各种的错综复杂，似乎业界使用Flash来做In Game UI逐渐成为主流。望着ScaleForm各种强大和稳健，看着自家的Homebrew的UI库，各种兴叹，无奈各种BOSS光环哥只能将错就错了。
既然说到UI不得不提到的就是走哪里都必须很吃香的PS各种版本，做UI总得画个图切个图啥的伐。不过PS各种切，Flash再各种导入，各种费时又费力。不过人家大牌厂家的东西都不是省油的灯，jsfl和jsx简直就是拯救哥于水火之中的各种救命草。（话说为什么我每次提到这些上面的人貌似有些漠视的感觉......）
简单来说Flash是支持只用导入一张完整的大图，然后基于这张大图创建若干小元件（Symbol，Movie Clip或者Graphic）的，原理就像CSS Spirit。不过如果你想人肉在Flash里面去切那你注定会各种杯具的，因为你会发现Flash的切图功能简直渣到几乎没有。
于是你必须需要jsfl了。我们可以通过jsfl来精确创建各种元件，所谓精切就是说你可以直接像素级别定为图块的各种上下左右而不是靠鼠标凭手感去割，于是：

// Get the document
var doc = fl.getDocumentDOM();
// Get the library
var lib = doc.library;
// Get the selected item in library
var libItem = lib.getSelectedItems()[0];
// Get current fill object
var fill = doc.getCustomFill();
// Set the style to "bitmap", available since CS4
fill.style = "bitmap";
// I don't know what is this neither
fill.bitmapIsClipped = false;
// Set the name of the selected item to the fill object
fill.bitmapPath = libItem.name;
// Well, to get some parameters about this bitmap, you have to instantiate one in the scene first
lib.addItemToDocument({x:0, y:0}, libItem.name);
// And then get the instance
var bitmap = doc.selection[0];
// Then you need to create a mystery matrix
var matrix = bitmap.matrix;
// The spirit's left bound
matrix.tx = -l;
// The spirit's top bound
matrix.ty = -t;
// God knows what does it mean
matrix.a = matrix.d = 20;
// Or Adobe either
matrix.b = matrix.c = 0;
// Set the matrix to the fill object
fill.matrix = matrix;
// And use it
doc.setCustomFill(fill);
// Then it is time to create the spirit
doc.addNewPrimitiveRectangle({left : 0, top : 0, right : r - l, bottom : b - t},0,false,true);

这随之而来就带来了第二个问题，我如何知道每个Spirit的各种上下左右边界，目测加人肉记录似乎可行，不过面对成百上千的各种图的时候，你只会喊破喉咙都没人能救你。 于是jsx这次向你伸出了上帝之手。
只要你在PSD里面将图按照每个Spirit一个图层的方式进行管理，并且每个图层之间相互没有重叠部分，那就可以通过jsx批量的将图层边界信息导出：

// Get the document
var doc = app.activeDocument;
// And prepare to store something
var code = "";
// Traverse all the layers
for(var i = 0; i < doc.layers.length; i++)
{
    // Get current layer's bounds
    var bounds = doc.layers[i].bounds;
    // Concatenate the bounds info of every layer
    if (code != "") code += "|";
    // Make the bounds info of current layer
    code += layer.name + "," + bounds[0] + "," + bounds[1] + "," + bounds[2] + "," + bounds[3];
}

然后你只需要将这生成的code里面的内容，通过各种方式整到之前的jsfl里面去，然后各种华丽你就懂得了。