How to Make a Sprite Sheet from Separate Images
Combine icons or animation frames into one PNG grid, set the columns and gap, and work out where each image sits.
Why use a sprite sheet
A sprite sheet puts many small images into one file. Games use it for animation frames, and websites use it to load a set of icons with a single request.
Build the sheet
Open the Sprite Sheet Generator and add your images. Set the number of columns and the gap between images, check the preview, and download the PNG.
Image order
Images are placed left to right, top to bottom, in the order you selected them. Check the preview before you download. If the order is wrong, clear the list and add the images again in the order you want.
How cells are sized
Every cell is as large as your largest image. Smaller images are centered inside their cell and are not resized. If you set more columns than you have images, the sheet still has that many columns, so there will be empty space on the right.
Find each image
Count columns and rows from 0. An image's position is x = column x (cell width + gap) and y = row x (cell height + gap). For example, with 32 px cells and a 2 px gap, the image in column 2, row 1 starts at x = 68 and y = 34. The tool outputs the PNG only, so you write the CSS or game code yourself.
Privacy
Images are combined in your browser and are not uploaded.
블로그의 다른 글
Becoderr란? 145개 이상의 무료 온라인 도구를 한곳에
Becoderr는 PDF, 이미지, JSON, 텍스트, 개발자용, 일상 작업을 위한 145개 이상의 무료 온라인 도구 모음입니다. 비공개, 빠름, 가입 불필요.
화질 저하 없이 이미지 압축하는 방법
사진을 선명하게 유지하면서 이미지 용량을 최대 90%까지 줄이세요. JPG와 PNG를 무료로 안전하게 온라인 압축하는 간단 가이드.
PDF를 편집 가능한 Word 문서로 변환하는 방법
어떤 PDF든 Microsoft Word에서 편집할 수 있는 .docx로 변환하세요. 무료, 가입 불필요.