Creation
เครื่องสร้าง Sprite Sheet
รวมรูปภาพหลายรูปเป็น Sprite Sheet พร้อมเอาต์พุต CSS, JSON และ SCSS สำหรับนักพัฒนา
Your files stay on your device - processed locally via WebAssembly, never uploaded
Drop sprites (PNG, JPEG, WebP)
Drop multiple files at once. Add more anytime.
Embed this tool on your website
Copy this code to add the เครื่องสร้าง Sprite Sheet to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.
<iframe src="https://optipix.art/embed/sprite-sheet" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="เครื่องสร้าง Sprite Sheet by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/sprite-sheet">OptiPix เครื่องสร้าง Sprite Sheet</a></p>
❤️ Love this tool? Support our team.
No ads, no tracking, no limits. Tips keep 104 tools free for everyone.
Secure payment via Stripe · No account needed
About เครื่องสร้าง Sprite Sheet
Last updated: May 2026
OptiPix Sprite Sheet Generator รวมรูปภาพหลายรูปเป็นสไปรต์ชีตที่ปรับให้เหมาะสมเพียงแผ่นเดียว พร้อม CSS ที่พร้อมใช้งาน, JSON coordinates และ SCSS variables ให้เลือกรูปแบบ: แถบแนวนอน, แถบแนวตั้ง, กริด (จำนวนคอลัมน์ที่กำหนดเอง), หรือแพ็ก (จัดเรียงแบบ bin-packed เพื่อลดพื้นที่สูญเปล่าให้น้อยที่สุด) ตั้งค่าระยะห่างระหว่างสไปรต์เพื่อป้องกันการรั่วไหลของขอบ ผลลัพธ์คือสไปรต์ชีต PNG เดียว พร้อม CSS ที่สร้างขึ้นสำหรับทุกสไปรต์ ('.sprite-icon-home { background-position: -0px -0px; … }'), แผนที่พิกัด JSON และ SCSS variables รองรับการปรับขนาด Retina @1x และ @2x แต่ละสไปรต์จะถูกตั้งชื่อตามชื่อไฟล์ต้นฉบับ ทุกอย่างทำงานบนเครื่อง - รูปภาพของคุณจะไม่ไปไหน สร้างขึ้นสำหรับนักพัฒนาเกม, นักพัฒนาเว็บที่ใช้ CSS sprites และใครก็ตามที่ต้องการรวมไอคอนขนาดเล็กเข้ากับการร้องขอเครือข่ายเพียงครั้งเดียว
How It Works
รูปภาพอินพุตแต่ละรูปจะถูกโหลดเข้าหน่วยความจำ; อัลกอริทึมเลย์เอาต์ที่เลือก (strip, grid, หรือ shelf bin-pack) จะคำนวณพิกัด (x, y, w, h) ต่อสไปรต์; สไปรต์ชีตจะถูกเรนเดอร์ลงบน canvas; CSS / JSON / SCSS จะถูกสร้างขึ้นจากแผนที่พิกัดเดียวกัน
Use Cases
- •รวมไอคอน UI เป็นสไปรต์ชีต PNG + CSS เดียว
- •สร้างสไปรต์แอทลาสสำหรับเกม 2D ใน Phaser หรือ Pixi
- •รวมไอคอนโซเชียลมีเดียเป็นสไปรต์ CSS เดียวเพื่อเว็บไซต์ที่เร็วขึ้น
- •จัดเฟรมแอนิเมชันตัวละครเป็นแถบแนวนอน
- •สร้างสไปรต์ชีต @2x ที่พร้อมใช้งานสำหรับ Retina จากรูปภาพต้นฉบับ
You Might Also Like
If you find เครื่องสร้าง Sprite Sheet useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.
Explore more: Browse all tools · Step-by-step guides · Tips & tutorials · Compare tools
Frequently Asked Questions
ฉันควรใช้เลย์เอาต์แบบไหน?
Bin-packing คืออะไร?
ฉันสามารถส่งออก CSS / JSON / SCSS ได้หรือไม่?
ทำไมต้องใช้สไปรต์ชีต?
รูปภาพของฉันถูกอัปโหลดหรือไม่?
Related Tools
เครื่องครอบตัดรูปภาพ
ครอบตัดเป็นอัตราส่วนภาพหรือรูปร่างใดก็ได้ – วงกลม หัวใจ ดาว หกเหลี่ยม – พร้อมการหมุนและปรับให้ตรง
เครื่องปรับขนาดรูปภาพ
ปรับขนาดรูปภาพสำหรับ Instagram, Twitter, LinkedIn และอื่นๆ
เครื่องแปลงรูปแบบ
แปลงรูปภาพระหว่าง JPEG, PNG, WebP และอื่นๆ
เครื่องสร้าง Favicon
สร้าง Favicon ทุกขนาด + ไฟล์ ICO + เว็บแมตริกซ์จากรูปภาพ ข้อความ หรืออิโมจิใดๆ