Comments (11)
Implemented on branch https://github.com/soimy/maxrects-packer/tree/non-exclusive-tag
introducing new packer option exclusiveTag
, if set to false
, packer will try to pack sprites with the same tag into the same bin, if all bin cannot fit, new bin is created.
Test needed @CosmoMyzrailGorynych @tionkje
from maxrects-packer.
Ok, here is the "comparison". Both cases use the same set of sprites. Restrictions:
- Each sprite/animation has a unique tag.
- Each ship has a pair of sprites (With and without a jet flame). Pairs should not be separated.
- All the aliens from https://kenney.nl/assets/platformer-pack-redux (side-view aliens) should be on one atlas. They are in one sprite.
- Small items from https://kenney.nl/assets/platformer-pack-redux (keys, flags) are individual sprites that can be packed arbitrarily.
First case — 2048x2048 atlases.
It is expected that there will be a lot of backgrounds alone in separate atlases, as they have padding and two of them won't fit.
My approach: (13 bins)
https://github.com/soimy/maxrects-packer/tree/non-exclusive-tag (12 bins)
Okay, this case sucks, now:
Second case — 4kx4k bins
My approach (2 bins):
https://github.com/soimy/maxrects-packer/tree/non-exclusive-tag (2 bins):
Observations
Both methods seem to work. My method seems to be more space-efficient with sprites relatively smaller than the bin's size.
There is no sorting algorithm across numerous tags in https://github.com/soimy/maxrects-packer/tree/non-exclusive-tag (using
b4827b8 commit), or there is something wrong with it. See the 4kx4k case. We clearly see that the a0
atlas (on the left) could contain all the coins, flags, diamons, and keys (they all have different tags), and probably all the aliens, too. It seems that it creates a new bin after the first failure, skipping all the smaller rectangles. I feel that a combination of very wide and very long sprites will make unreasonably large amount of bins (will try to do so soon).
from maxrects-packer.
fix: Non-exclusive tag logic: Restart test iteration on next tag group
:D
Testing 8b59925
"Extreme" case with very long/very tall images:
Perfect
Aliens and ships, 2k×2k
11 atlases, it is an improvement if compared to the previous 12 atlases from v2.7.0.
Aliens and ships, 4k×4k
Does the job in a pretty optimal way
Summary
Great work
from maxrects-packer.
Close via eb3c665
New version is now https://github.com/soimy/maxrects-packer/releases/tag/v2.7.1
from maxrects-packer.
Yes, I think we don't have that feature yet. Currently, rect without tag will have a defaut bin tag, thus tagged rects will not packed into the defaut bins.
from maxrects-packer.
It will be epic if it is implemented. My use case is packing animated sprites into atlases, but not spreading any animation over multiple atlases.
I have some heuristics in mind that might help with this job, but I need to check whether an array of rectangles may fit into the current bin prior to actually adding them. Maybe I can do it with packer.save()
method. Will share the results later once I flesh out my alorithm.
from maxrects-packer.
Ok, time to make some tests.
For the record, I ended up with this code that did the job: https://github.com/ct-js/ct-js/blob/ac6f02c103b123e510999add3669c81f205914f7/src/node_requires/exporter/textures.js#L163-L323
from maxrects-packer.
This feature is merged in the new 2.7.0
version, just update maxrects-packer
from maxrects-packer.
Ok so I set up that "extreme" case with horizontal/vertical sprites:
3 boxes of 2000x64 size and 3 rects of 64x2000 (blue ones).
2 rects of 1800x64 and 2 of 64x1800 (pink ones).
Each rect is tagged, but each rects' tag is unique.
Bins are restricted to be at max 2048x2048 pixels.
Here is how I created them: one vertical, one horizontal, one vertical, one horizontal...
A simple solution is putting all the vertical rects in one bin, and the horizontal ones — into another. We can get 2 bins this way.
The results
They both are awful.
Upper images — v2.7.0, bottom images — my approach. Both produce 4 bins.
In v2.7.0, all the images are added through packer.addArray(blocks);
in one go.
And here is the packed result without tagging at all:
from maxrects-packer.
Thanks, @CosmoMyzrailGorynych ! Very detailed testing.
Currently, I do not have time to do any practical case test so yours is really helpful!.
New tweak on logic by commit 8b59925, let's see it will make any difference.
from maxrects-packer.
I just adopted this new feature into my Repo https://github.com/soimy/atlasify by adding new option --group-folder
. Everything working as expected so far.
from maxrects-packer.
Related Issues (18)
- Packing result is worse when rotation allowed HOT 2
- alphabetical grouping HOT 3
- Actual examples? HOT 5
- packer.addArray(array) fails if the array is empty and exclusiveTag: false is set
- Example broken
- Infinite recrusion when using addArray of oversized rect with non-exclusive tag matching HOT 2
- Allow rotation HOT 5
- Release 2.7.3 HOT 2
- Add CLI to do packing and image compositing on the go HOT 1
- Fixed placement for certain rectangles HOT 1
- System hang HOT 1
- addArray examples violate typescript types HOT 2
- Border padding ? HOT 7
- .save() method is not saving rects. HOT 4
- [FR] Packer free expanding in one dimension HOT 4
- Rectangle class typescript serialization
- Bugs in edgy rect placement in updateBinSize() HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from maxrects-packer.