圖片素材的打包是遊戲發布前的準備工作，以便遊戲在載入期間不需要載入大量數據或大量檔案。隨著瀏覽器對圖片解碼的支援擴展增大後，解包速度已經被限制在設備的運算能力上。對遊戲開發者來說，素材的打包的目的是降低傳輸時間以及方便使用。當前的遊戲引擎雖然有將多張圖片合併成一張的作法，但它們仍偏向於塞滿WebGL載入上限的容器為主。若圖片素材能透過適當的分堆與組合，圖片的壓縮比能夠再次提昇。

本論文提出一套素材打包系統，該系統包含多張圖片分堆偵測工具、單張圖片推薦色偵測工具，以及圖片排序工具。在多張圖片分堆偵測部份，本論文提出一個基於顏色作為圖片特徵，將多張圖片進行聚類的方法，並提供一個公式評估該聚類的價值。在單張圖片推薦色偵測部份，本論文提出一個顏色推薦策略，對於每一張圖片提供有利於壓縮的顏色對應清單。系統會使用該清單嘗試上色，以利美術觀察前後差異與檔案大小差別。在圖片排序部份，本論文提出一個圖片排序方法，以便圖片在後續堆放的時候能獲得較好的壓縮效果。

為了驗證素材打包系統的實際效果，本論文使用Vegasslotsonline.com的遊戲素材作為測試案例。在多張圖片分堆偵測部份，有部份案例能找出兩堆以上的組合，且該組合的壓縮比大於直接分成一堆的組合。在單張圖片推薦色偵測部份，色彩空間距離介於10 $\sim$ 15之間的推薦清單可以有效提昇理論壓縮比，但部份圖片的漸層色區域容易生成顏色區塊。在圖片排序部份，該方法的執行時間遠小於暴力法。且對於大部分的案例來說，至少有一種圖片相似度參數可以讓圖片排序後的檔案大小小於排序前。

關鍵字：多張圖片壓縮、推薦色、圖片排序

Image asset packing is a preprocessing of game deployment so that the game won't load a huge amount of data or a lot of files in loading time. The speed of decoding is limited by the computing power of a platform in the browser because the browser supports more decoders of images. The requirement of asset packing for the game developer is lowering the transmission time and ease of use. Although current game engines provide the method of packing images into one container, they're focusing on filling a container which is limited by WebGL. If the images are properly piled and combined, the compression ratio of images can be increased more.

The paper proposed an asset packing system that contains multiple image pile-detecting, single image color-suggesting, and multiple image sorting. In multiple image pile-detecting, the paper proposed a method of clustering images based on color as an image feature. There is a formula to evaluate the pile result after clustering. In single image color-suggesting, the paper proposed a strategy of color suggestion. For each image, it will provide a list of color correspondences that are favorable for compression. Based on the list, the system will try to colorize the image, then the art can observe the difference in file size and visual effects between the images. In multiple image sorting, the paper proposed a method of sorting images, so that the images will get a better compression ratio after stacking in proper order.

To verify the effect of the asset packing system, the paper used games on Vegasslotsonline.com as the input cases. In multiple image pile-detecting, some of the cases can be clustered into two more piles, and the compression ratio of these cases is better than the one-pile solution. In single image color-suggesting, a color-suggesting list based on the color distance between 10 $\sim$ 15 is good for improving the compression ratio, but the part of an image that contains a color gradient will cause color blocks. In multiple image sorting, the method uses much less time than brute force. For most cases, there is at least one image-similarity parameter available for soring images. After sorting, the file size will be smaller than before.

Keywords: Multiple Image Compression, Suggesting Color, Image Sorting

[1] D. Arthur and S. Vassilvitskii, K-Means++: The Advantages of Careful Seeding,
p. 1027–1035. SODA ’07, USA: Society for Industrial and Applied Mathematics,
2007.
[2] M. N. R. Fielding and J. Reschke, “Http semantics,” RFC 9110, RFC Editor, 06
2022.
[3] G. Roelofs and R. Koman, “Png: The definitive guide,” in PNG: The Definitive
Guide, USA: O’Reilly & Associates, Inc., 1999.
[4] “Examples - loader - asset pack.” https://phaser.io/examples/v2/loader/asset-pack.
Accessed: 2022-04-11.
[5] “Auto atlas ·cocos creator.” https:// docs.cocos.com/creator/manual/en/asset -
workflow/auto-atlas.html. Accessed: 2022-04-11.
[6] “Texturepacker - create sprite sheets for your game!.” https://www.codeandweb.
com/texturepacker. Accessed: 2022-04-11.
[7] S. S. Mahfoudh, M. Bellalouna, and L. Horchani, “Solving css-sprite packing problem using a transformation to the probabilistic non-oriented bin packing problem,”
in ICCS, 2018.
[8] D. L. Applegate, R. E. Bixby, V. Chvatal, and W. J. Cook, The Traveling Salesman
Problem: A Computational Study (Princeton Series in Applied Mathematics). USA:
Princeton University Press, 2007.
[9] W. Y. Wei, “An introduction to image compression.” http://disp.ee.ntu.edu.tw/
meeting/%E7%B6%AD%E6%AF%85/An%20Introduction%20to%20Image%
20Compression/An%20introduction%20to%20Image%20Compression.pdf, 2008.
Accessed: 2022-04-11.
[10] A. Koschan and M. Abidi, Digital Color Image Processing. Hoboken, NJ: WileyBlackwell, 2008.
[11] S. Segenchuk, “An overview of color quantization techniques.” https://web.cs.wpi.
edu/~matt/courses/cs563/talks/color_quant/CQindex.html. Acessed: 2021-02-04.
[12] P. Heckbert, “Color image quantization for frame buffer display,” in Proceedings
of the 9th Annual Conference on Computer Graphics and Interactive Techniques,
SIGGRAPH ’82, (New York, NY, USA), p. 297–307, Association for Computing
Machinery, 1982.
[13] D. Bloomberg and Leptonica, “Color quantization using modified median cut.” http:
//leptonica.org/papers/mediancut.pdf, 2008. Accessed: 2022-04-11.
[14] D. Bloomberg and Leptonica, “Color quantization using octrees.” http://www.
leptonica.org/papers/colorquant.pdf, 2003. Accessed: 2022-04-11.
[15] A. Dekker, “Kohonen neural networks for optimal colour quantization,” Network:
Computation In Neural Systems, vol. 5, pp. 351–367, 1994.
[16] C. H. Lee, H. Y. Lu, and J. H. Horng, “Color quantization by hierarchical octapartition in rgb color space,” in 2018 IEEE International Conference on Applied
System Invention (ICASI), pp. 147–150, 2018.
[17] MathWorks, “Reduce the number of colors in an image - matlab & simulink.” https:
//www.mathworks.com/help/images/reduce-the-number-of-colors-in-an-image.
html. Acessed: 2021-02-04.
[18] P. Madhavee Latha and A. Annis Fathima, “Collective compression of images using
averaging and transform coding,” Measurement, vol. 135, pp. 795 – 805, 2019.
[19] B. D. Hasnat Abul, “A proposed multi-image compression technique,” Journal of
Intelligent & Fuzzy Systems, vol. 36, no. 4, pp. 3177-3193, 2019, 2019.
[20] M. J. Swain and D. H. Ballard, “Color indexing,” International Journal of Computer
Vision, vol. 7, pp. 11–32, Nov 1991.
[21] A. Raza, S. Jost-Boissard, M. Dubail, and D. Dumortier, “Automatic colour segmentation and colour palette identification of complex images,” Journal of International
Colour Association, vol. 26, pp. 11–21, 02 2021.
[22] J. Jylänki, “A thousand ways to pack the bin-a practical approach to twodimensional rectangle bin packing,” retrived from http://clb.demon.fi/files/RectangleBinPack.pdf, 2010.
[23] J. Kennedy and R. Eberhart, Particle swarm optimization, vol. 4, pp. 1942–1948.
IEEE, 1995.
[24] A. Lodi, S. Martello, and M. Monaci, “Two-dimensional packing problems: A survey,” European Journal of Operational Research, vol. 141, no. 2, pp. 241–252, 2002.
[25] “Portable network graphics (png) specification (second edition).” https://www.w3.
org/TR/PNG/#4Concepts.Encoding. Acessed: 2021-02-04.
[26] Z. Wang, A. Bovik, H. Sheikh, and E. Simoncelli, “Image quality assessment: from
error visibility to structural similarity,” IEEE Transactions on Image Processing,
vol. 13, no. 4, pp. 600–612, 2004.
[27] Z. Wang and A. Bovik, “A universal image quality index,” IEEE Signal Processing
Letters, vol. 9, no. 3, pp. 81–84, 2002.
[28] L. Wald, “Quality of high resolution synthesised images: Is there a simple criterion
?,” in Third conference ”Fusion of Earth data: merging point measurements, raster
maps and remotely sensed images”, pp. 99–103, SEE/URISCA, Jan. 2000.
[29] S. Rashmi, S. Addamani, and A. Ravikiran, “Spectral angle mapper algorithm for
remote sensing image classification,” International Journal of Innovative Science
Engineering and Technology, 2014.
[30] “Speedtest awards - fastest mobile network.” https://www.speedtest.net/awards/
reports/2022/Taiwan%20Mobile%20Fastest%20Q1Q22022.pdf. Accessed: 2022-
08-15.