As I png reduced 4 times
This idea arose a year ago, when I came to the miscalculation of a web game project with a lot of animation, which was supposed to be done in high quality sprites (large sprites) and with high-quality alpha channel (in the sense, not with an indexed transparency color). In this game you throw the dice on the table and it is necessary that they always fall in different ways.
It was not difficult for me, including the animator, to make one such png-animation of the size of one frame 400 by 400. Making dropping cubes was always different. It was a non-trivial task in no place. However, motivated by a round sum of hairy hands, I started the assault, thinking first of all about how to make the game beautiful at the same time (as I’m originally a designer, 3D artist and esthet, and I’ll never become a programmer), and this one will load in less than a thousand minutes.
Wanting to estimate the volume of graphic animation files, I made a variation of the fall of one cube in a strip, in order to later reset several similar variations at different angles and, perhaps, it would be quite diverse. When I assembled the sequence of frames in a horizontal strip, the thought of the GIF, its horizontal compression and indexed colors lit up immediately and released only last night.
From my experience as an expert in animation of three-dimensional cubes, I know that while they are jumping and animating in every way, the importance of the quality of displaying their edges and other details is inversely proportional to speed. Therefore, somewhere they can be shaken to the maximum both in alpha and rgb, and on frames where the movement calms down and the cube rises, it is already done at 100%. That is, png with its huge size is claimed only in the last 5-10 frames from a 50-frame sequence - and only in that place of the frame where the cube stopped. The desire to reap all that is possible, suggests itself.
')
Making a variation of the cube drop, I allowed that then it would be possible to make one alpha channel and six rgb variants with different textures (different final values of the cube) for it. While the cube is flying, it flies in a straight line, after the first strike it slightly deviates, and then deviates strongly, therefore the frame bar is not as thin as we would like, and most of each frame remains empty, which is painful for png, but it would not be problem for gif. As a result, with all the tricks on one option in the png32 format, half a megabyte of kilobytes was consumed. This is not taking into account that such variations of the fall should have been, say, 10 pieces at least, and a lot of other graphics were expected in the game.
At that moment, when I already tasted some wonderful people offered the customer to make an order for 7 kopecks less and the order was shaved off, and everything written above lost its logical end. Unpleasant right However, I was left with an understanding of the clearly outlined problem: the alpha channel in modern large and beautiful images is sometimes wastefully used to the ugliness and with an understanding of how this problem can be solved.
I waited a year, then sat down, found this article, took all the code from it, inserted semicolons in random places and turned out a javascript plugin that can create monstrous things with animation on the website, reduce the traffic of full-color RGBA according to my sore imagination. images 2-10 times and translate the use of large RGBA images on the site to the plane of reasonable. Also, the function of splitting into sprites is immediately embedded in it, so it can be useful for those lucky people who are concerned with front-end optimization.
upd
As a result of the publication and commenting, the optimal use of the plugin became clear: due to the fact that it processes images during the page loading, it will be especially interesting for those who use sprite cards or animations with transparency and bother with the pre-processing of these sprites cards, as well as who needs true-large images with transparency and the ability to twist the compression ratio. For single and small images fit tinipng and similar services.
It is assumed that you are able to pull out a black and white alpha channel from an existing image with transparency and shake it yourself in accordance with your wishes for quality and size.
During the page loading, the function alpha_spriter is called and 4 attributes are fed into it:
At the same second, the function loads images, combines them using canvas into a full png32 and cuts onto sprites. At the output, generated images are assigned by id (specified in the JS object), prepared in the document body in two variants: src for <img>, or background-image (over the other necessary background properties already set).
The minimum first working version is immediately tested and successfully combines on a live project an image of a dancing snow leopard, sometimes rooster-like, and thus saves the it-infrastructure of one country from irreversible overheating.
I attach for comparison the timing of loading the page. The page itself, the plugin and the test files can be found on the githaba , if it is not prohibited here. If it is forbidden - just do not click, please.
Just in case, please note again that my canvas was doing its job in terms of the web environment and only from its origin. This moment is specified.
Now tell me that there are already 10 such solutions and no one needs them. About rgb8 and about alpha in css. But seriously, I would like to first of all understand how much this is in demand and in case of that, finish up to the level of hi-end 3000 and make a sprite map generator. Well, actually, if you have any wishes, well-wishers.
Thank!
That same article , which served to accelerate the development of the plug-in and, possibly, caused its appearance - thanks, sergof !
It was not difficult for me, including the animator, to make one such png-animation of the size of one frame 400 by 400. Making dropping cubes was always different. It was a non-trivial task in no place. However, motivated by a round sum of hairy hands, I started the assault, thinking first of all about how to make the game beautiful at the same time (as I’m originally a designer, 3D artist and esthet, and I’ll never become a programmer), and this one will load in less than a thousand minutes.
Wanting to estimate the volume of graphic animation files, I made a variation of the fall of one cube in a strip, in order to later reset several similar variations at different angles and, perhaps, it would be quite diverse. When I assembled the sequence of frames in a horizontal strip, the thought of the GIF, its horizontal compression and indexed colors lit up immediately and released only last night.
From my experience as an expert in animation of three-dimensional cubes, I know that while they are jumping and animating in every way, the importance of the quality of displaying their edges and other details is inversely proportional to speed. Therefore, somewhere they can be shaken to the maximum both in alpha and rgb, and on frames where the movement calms down and the cube rises, it is already done at 100%. That is, png with its huge size is claimed only in the last 5-10 frames from a 50-frame sequence - and only in that place of the frame where the cube stopped. The desire to reap all that is possible, suggests itself.
')
Making a variation of the cube drop, I allowed that then it would be possible to make one alpha channel and six rgb variants with different textures (different final values of the cube) for it. While the cube is flying, it flies in a straight line, after the first strike it slightly deviates, and then deviates strongly, therefore the frame bar is not as thin as we would like, and most of each frame remains empty, which is painful for png, but it would not be problem for gif. As a result, with all the tricks on one option in the png32 format, half a megabyte of kilobytes was consumed. This is not taking into account that such variations of the fall should have been, say, 10 pieces at least, and a lot of other graphics were expected in the game.
But suddenly!
At that moment, when I already tasted some wonderful people offered the customer to make an order for 7 kopecks less and the order was shaved off, and everything written above lost its logical end. Unpleasant right However, I was left with an understanding of the clearly outlined problem: the alpha channel in modern large and beautiful images is sometimes wastefully used to the ugliness and with an understanding of how this problem can be solved.
I waited a year, then sat down, found this article, took all the code from it, inserted semicolons in random places and turned out a javascript plugin that can create monstrous things with animation on the website, reduce the traffic of full-color RGBA according to my sore imagination. images 2-10 times and translate the use of large RGBA images on the site to the plane of reasonable. Also, the function of splitting into sprites is immediately embedded in it, so it can be useful for those lucky people who are concerned with front-end optimization.
upd
As a result of the publication and commenting, the optimal use of the plugin became clear: due to the fact that it processes images during the page loading, it will be especially interesting for those who use sprite cards or animations with transparency and bother with the pre-processing of these sprites cards, as well as who needs true-large images with transparency and the ability to twist the compression ratio. For single and small images fit tinipng and similar services.
Materiel
It is assumed that you are able to pull out a black and white alpha channel from an existing image with transparency and shake it yourself in accordance with your wishes for quality and size.
During the page loading, the function alpha_spriter is called and 4 attributes are fed into it:
- URL of rgb file with sprites
- The URL of the corresponding file with the alpha channel is again in any format, in most cases it is gif / png8.
Both files must be on the same domain. - Javascript-free form object with sprite markup. Joke! (Noticed?) The form is quite accurate and its example is available in the plugin code.
- Well, the function that you want to finish
At the same second, the function loads images, combines them using canvas into a full png32 and cuts onto sprites. At the output, generated images are assigned by id (specified in the JS object), prepared in the document body in two variants: src for <img>, or background-image (over the other necessary background properties already set).
The minimum first working version is immediately tested and successfully combines on a live project an image of a dancing snow leopard, sometimes rooster-like, and thus saves the it-infrastructure of one country from irreversible overheating.
I attach for comparison the timing of loading the page. The page itself, the plugin and the test files can be found on the githaba , if it is not prohibited here. If it is forbidden - just do not click, please.
Just in case, please note again that my canvas was doing its job in terms of the web environment and only from its origin. This moment is specified.
Everything
Now tell me that there are already 10 such solutions and no one needs them. About rgb8 and about alpha in css. But seriously, I would like to first of all understand how much this is in demand and in case of that, finish up to the level of hi-end 3000 and make a sprite map generator. Well, actually, if you have any wishes, well-wishers.
Thank!
Bibliography
That same article , which served to accelerate the development of the plug-in and, possibly, caused its appearance - thanks, sergof !
Source: https://habr.com/ru/post/259613/
All Articles