21
2020
12

使用flash导出css精灵图(雪碧图)

利用flash强大的功能,导出spritesheet,再自动生成css。

思路:自己写jsfl脚本,先生成spritesheet,然后读生成的json,根据json生成css样式。

jsfl脚本如下:(根据袭击需求修改)

var trace = fl.trace;
var JSFL_PATH = getDir(fl.scriptURI);
fl.runScript(JSFL_PATH + "json2.jsfl");
var flaDocument = fl.getDocumentDOM();
var flaName = flaDocument.name.replace(".fla", "");
;
var sheet = fl.spriteSheetExporter || new SpriteSheetExporter();
flaDocument.editScene(0);
initSheet();
parseDada();
save();
function parseDada() {
    flaDocument.selectAll();
    forEach(flaDocument.selection, function (element) {
        if (element.elementType === "instance") {
            var instance = element;
            if (instance.libraryItem.itemType === "bitmap") {
                var name_1 = instance.libraryItem.name.split(".")[0];
                sheet.addBitmap(instance, name_1);
            }
        }
    });
}
function initSheet() {
    sheet.borderPadding = 2;
    sheet.shapePadding = 2;
    sheet.layoutFormat = "JSON";
    sheet.canStackDuplicateFrames = false;
    sheet.stackDuplicateFrames = false;
}
function save() {
    var sheetStr = sheet.exportSpriteSheet(flaDocument.path.replace(".fla", ""), { format: "png", bitDepth: 32, backgroundColor: "#00000000" });
    var sheetData = JSON.parse(sheetStr);
    delete sheetData.meta.app;
    delete sheetData.meta.version;
    var cssStr = getCssData(sheetData);
    var cssPath = FLfile.platformPathToURI(flaDocument.path.replace(".fla", ".css"));
    FLfile.write(cssPath, cssStr);
    trace("save complete:" + cssPath);
    var jsonPath = FLfile.platformPathToURI(flaDocument.path.replace(".fla", ".json"));
    if (FLfile.exists(jsonPath)) {
        FLfile.remove(jsonPath);
    }
}
function getCssData(sheetData) {
    var a = [];
    a.push("." + flaName + "_sprite {background-image:url(./" + flaName + ".png); background-repeat:no-repeat}");
    for (var key in sheetData.frames) {
        var frame = sheetData.frames[key].frame;
        a.push(".icon_" + key + " {width:" + frame.w + "px;height:" + frame.h + "px;background-position:" + -frame.x + "px " + -frame.y + "px;}");
    }
    return a.join("\n");
}
function forEach(arr, callback, reverse) {
    if (reverse === void 0) { reverse = false; }
    if (reverse) {
        for (var i = arr.length - 1; i >= 0; i--) {
            callback(arr[i], i);
        }
    }
    else {
        for (var i = 0; i < arr.length; i++) {
            callback(arr[i], i);
        }
    }
}
function getDir(path) {
    return path.substr(0, path.lastIndexOf("/") + 1);
}

json2.jsfl参考:

从flash中导出资源供pixijs使用


spritesheet的生成算法是很难的,数学上成为“装箱问题”。

很多前端同学,认为spritesheet就是利用canvas,一行一行的把图片合并到一张图上。

这就导致一个很宽的图,撑开了整张图,导致占用大量的内存以及显存(不是图片的存储大小,而是加载到内存之后的大小,取决于图片的像素-及宽*高)。

flash生成spritesheet算法还算不错,可以拿来用。

texturemerge是要收费的。而且不能扩展自己的功能。



« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。