Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to use node to develop an atlas packaging tool", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use node to develop an atlas packaging tool" this article.

For example, combine the following pictures into one.

This atlas is packaged and synthesized by me with the tools introduced in this article.

The quality of the synthesized picture is still very high.

Why do you need to use atlas web to develop

In web development, we need to request server resources every time we display a picture in a browser.

For example, there is an essential difference between 4k for 3 requests and 12k for one request, and then more often a request is not 3 * 4k.

The use of atlas allows us to optimize resource loading and improve the performance of the website.

Game development

In game development, the use of atlas is very important, whether it is general frame animation or svga and other animation solutions, will not request resources for each picture.

More often, we are packaged into atlas, and atlas packaging tool texturepacker is more popular.

Secondly, there are too many game scenes, we generally need to load resources step by step, sometimes an animation model, involving as few as a dozen pictures, as many as nearly a hundred.

The use of atlas is indispensable.

Let's take a look at how to write an atlas packaging tool.

Tool design

What skills are required to develop an atlas packaging tool script.

Node.js programming ability

Two-dimensional rectangular packing algorithm

Then we think about how to pack an atlas.

We need to find folders that need to be packaged, there may be multiple or nested folders.

The atlas is made up of multiple scattered pictures.

The size of the atlas needs to be configurable

Compress the atlas space as much as possible to make each picture fit closely

Each folder is packed into an atlas, and you need to consider that there are too many pictures.

You may need to generate the json file needed for the atlas to record the picture location information.

Start scripting IO

This is my design here.

First of all, we need a packaged object instance MySpritePackTool that supports writing the configuration parameter options.

/ * * Atlas packaged object * / const MySpritePackTool = function (opt) {this.options = {/ / A folder with too many pictures or too long recursive maximum number of times maxCount: opt.maxCount | | 2, / the file path to be packaged is assetsPath: opt.assetsPath, / / output file path outPutPath: opt.outPutPath / / maximum size maxSize for a single atlas: {width: 2048, height: 2048}}

Then we need to output this object, which can be referenced by other projects.

Module.exports = MySpritePackTool; traversal file to generate node tree

We have as few input parameters as possible, which requires our program to traverse the folder.

For example, we have the following directory tree:

| |-- assets |-- index |-- img-3.png |-- img-4.png |-- login |-- img-5.png |-- img-1.png |-- img-2.png |

We need to package an atlas under each folder.

Think: what kind of data structure do you need?

First of all, to facilitate js parsing, we agree on an object

For each layer, you need a picture information container assets

An included picture ID keys

A folder name, which is also convenient for us to name name for the atlas later.

Then set the same object in front of each folder

The structure is as follows:

{assets: [{id: 'assets/img-1.png', width: 190, height: 187},...], name:' assets', keys: 'img-1.png,img-2.png,', index: {assets: [{id:' assets/index/img-3.png', width: Height: 187},...], name: 'index', keys:' img-3.png,img-4.png,'}, login: {assets: [{id: 'assets/login/img-5.png', width: 190, height: 187}], name:' index' Keys: 'img-5.png,'},}

It is not difficult to find that we can already get all the files and folders that need to be packaged.

So how to implement it with the program?

The fs module of nodejs is mainly used to recursively operate folders and output the required node tree.

Note that when writing, you need to judge whether it is a picture or a folder.

MySpritePackTool.prototype.findAllFiles = function (obj, rootPath) {let nodeFiles = []; if (fs.existsSync (rootPath)) {/ / get all filenames nodeFiles = fs.readdirSync (rootPath); / / Assembly object let nameArr = rootPath.split ('/'); obj ["assets"] = []; obj ["name"] = nameArr [nameArr.length-1] Obj ["keys"] = "; nodeFiles.forEach (item = > {/ / determine that it is not a picture path if (! / (.png) | (.jpe? G) $/ .test (item)) {let newPath = path.join (rootPath, item) / / determine that the existing file is also a folder system if (fs.existsSync (newPath) & & fs.statSync (newPath). IsDirectory ()) {/ / console.log ("get a new address", newPath); obj [item] = {}; this.findAllFiles (obj [item], newPath) } else {console.log (`file path: ${newPath} does not exist!`);}} else {console.log (`picture path: ${item} `); obj ["keys"] + = item + ","; let params = {} Params ["id"] = path.resolve (rootPath, `. / ${item}`); / / get the width and height of the image params ["width"] = images (path.resolve (rootPath, `. / ${item}`). Width (); params ["height"] = images (path.resolve (rootPath, `. / ${item}`). Height () Obj ["assets"] .push (params);}} else {console.log (`File path: ${rootPath} does not exist! `);}}

In this way, we can get the node tree we need.

Get new atlas location information

Our operation on the folder has been completed, and then we need to think.

How to package these scattered pictures into one picture.

The scatter has two messages, a width and a height, which is actually a rectangle.

All we have to do now is to put these rectangles of different areas into a large rectangle with maximum length and width.

Jump away from the picture and start with the rectangle.

There are many two-dimensional rectangular packing algorithms, I choose a relatively simple one here.

First, a rectangular box with maximum length and width is obtained.

Let's put in a rectangle A. in this way, there are two remaining areas: the right side of rectangle An and the lower side of rectangle A.

Then we continue to put in rectangle B, which can be right and then down, and then there are two more blank spaces based on rectangle B.

And so on, we can put all the appropriate rectangles in.

For instance

Put the bulk rectangle on the left into the rectangle on the right to get:

As you can see, we have saved a lot of space and the rectangles are arranged compactly.

What does it look like if it is implemented in code?

/ * determine the width and height w h * blank area first, and the rest look for the right side and the lower side * whether it satisfies the right side, and if it does not, continue to traverse * whether it satisfies the following, or if it does not, continue to traverse * / const Packer = function (w, h) {this.root = {x: 0, y: 0, width: W, height: h} / * * matches all squares * / Packer.prototype.fit = function (blocks) {let node; for (let I = 0; I)

< blocks.length; i++) { let block = blocks[i]; node = this.findNode(this.root, block.width, block.height); if (node) { let fit = this.findEmptyNode(node, block.width, block.height); block.x = fit.x; block.y = fit.y; block.fit = fit; } } } /** 找到可以放入的节点 */ Packer.prototype.findNode = function (node, w, h) { if (node.used) { return this.findNode(node.rightArea, w, h) || this.findNode(node.downArea, w, h); } else if (node.width >

= w & & node.height > = h) {return node;} else {return null;}} / * * find vacancy * / Packer.prototype.findEmptyNode = function (node, w, h) {/ / deleted node.used = true that has been used / / right space node.rightArea = {x: node.x + w, y: node.y, width: node.width-w, height: h} / / the lower vacancy node.downArea = {x: node.x, y: node.y + h, width: node.width, height: node.height-h} return node;}}

The use of recursion, the amount of code is very small, but powerful.

But there is a problem, if it exceeds a fixed length and width, or a rectangle cannot be filled, our algorithm will not be put into a large rectangle.

This does not satisfy our idea of packing the atlas.

So we still need to improve this algorithm.

Add two variables, a total area used by the record and a rectangle in which the record is not loaded.

/ / record the total area used this.usedArea = {width: 0, height: 0}; / / record the rectangle this.levelBlocks that has not been loaded = []

The detailed code can see the packing in the source code.

Of course, this is just the simplest two-dimensional packing algorithm.

There is also an enhanced version of the packing algorithm, which I put in the source code, so I won't repeat it here. The principle is basically the same.

Now that we can box the rectangle properly, how can we use it to process it into an atlas?

Define a dealImgsPacking method to continue working on our node tree.

Our configuration item maxCount is used here, which is for the function of typing more atlas than one atlas.

Then our packaged atlas is named in the form of folder + current number.

`$ {obj ['name'] + (count? "-" + count:')} `

The specific methods are as follows:

MySpritePackTool.prototype.dealImgsPacking = function (obj) {let count = 0; if (obj.hasOwnProperty ("assets")) {let newBlocks = obj ["assets"]; obj ["assets"] = []; while (newBlocks.length > 0 & & count

< this.options.maxCount) { let packer1 = new Packer(this.options.maxSize.width, this.options.maxSize.height); packer1.fit(newBlocks); let sheets1 = { maxArea: packer1.usedArea, atlas: newBlocks, fileName: `${obj['name'] + (count ? "-" + count : '')}` }; newBlocks = packer1.levelBlocks; obj["assets"].push(sheets1); count++; } } for (let item in obj) { if (obj[item].hasOwnProperty("assets")) { this.dealImgsPacking(obj[item]); } }} 通过这个方法我们改造了之前的节点树; 将之前节点树中的assest变为了一个数组, 每个数组元素代表一张图集信息. 结构如下: assets: [ { maxArea: { width: 180,height: 340 }, atlas: [ { id: 'assets/index/img-3.png', width: 190, height: 187, x: 0, y: 0 } ], fileName: 'assets' }, ... ] 我们可以清晰的得到, 打包之后的图集, 最大宽高是maxArea, 每张图宽高位置信息是atlas,以及图集名称fileName. 接下来, 就是最后一步了, 绘制新的图片, 并输出图片文件. 注意 我们在使用打包算法的时候, 可以先进行一下基于图片大小的排序 这样以来打包出来的图集会留白更小 图集打包并输出 这里图集的绘制和输出均是使用了node-images的API; 遍历之前得到的节点树, 首先绘制一张maxArea大小的空白图像. images(item["maxArea"].width, item["maxArea"].height) 然后遍历一张图集所需要的图片信息, 将每一张图片绘制到空白图像上. //绘制空白图像let newSprites = images(item["maxArea"].width, item["maxArea"].height);//绘制图集imgObj.forEach(it =>

{newSprites.draw (images (it ["id"]), it ["x"], it ["y"]);})

Then draw an atlas and output one.

NewSprites.save (`${this.options.outPutPath} / ${item ['fileName']} .png`)

Finally, the node tree is called recursively to draw all the atlas.

The specific code is as follows:

MySpritePackTool.prototype.drawImages = function (obj) {let count = 0; if (obj.hasOwnProperty ("assets")) {/ / package one or more atlas let imgsInfo = obj ["assets"]; imgsInfo.forEach (item = > {if (item.hasOwnProperty ("atlas")) {let imgObj = item ["atlas"] / / console.log ("8888", imgObj) / / draw a transparent image let newSprites = images (item ["maxArea"] .width, item ["maxArea"] .height); imgObj.forEach (it = > {newSprites.draw (it ["id"]), it ["x"], it ["y"]) ); newSprites.save (`${this.options.outPutPath} / ${item ['fileName']} .png`); count++;}})} for (let item in obj) {if (obj [item] .hasOwnProperty ("assets")) {this.drawImages (obj [item]);}

In this way, we're done.

Run the test and get the following atlas:

The effect is not bad.

How to use

Installation

Npm i sprites-pack-tool

Use

Const MySpritePackTool = require ("sprites-pack-tool"); const path = require ("path"); / * * maximum number of recursions to be packaged * / const MAX_COUNT = 2 the path of the atlas to be synthesized const assetsPath = path.resolve (_ _ dirname, ". / assets") / * * atlas packaging tool configuration * / const mySpritePackTool = new MySpritePackTool ({/ / the maximum number of recursive times for too many or too long pictures in a folder maxCount: MAX_COUNT, / / the file path to be packaged is assetsPath: assetsPath, / / the output file path outPutPath: path.resolve (_ _ dirname, ". / res"), / / the maximum size maxSize for a single atlas package: {width: 2048 Height: 2048}}) / * * atlas packaging * / mySpritePackTool.Pack2Sprite (); the above is all the contents of the article "how to use node to develop an atlas packaging tool". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.