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