利用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是要收费的。而且不能扩展自己的功能。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。