🗂️ เครื่องสร้าง Sprite Sheet
รวบรวมภาพหลายภาพเข้าเป็น PNG Sprite Sheet ที่ได้รับการปรับแต่ง และได้รับกฎเกณฑ์ CSS background-position ที่พร้อมใช้งาน — ฟรี ใช้งานในเบราว์เซอร์ ไม่จำเป็นต้องอัปโหลด
ออกแบบมาเพื่อความเป็นส่วนตัว. เครื่องมือนี้ทำงานทั้งหมดในเบราว์เซอร์ของคุณ — ข้อมูลที่คุณป้อนไม่ได้ถูกอัปโหลดหรือเก็บไว้ และยังสามารถใช้งานได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต
เกี่ยวกับ
เครื่องมือนี้ใช้ API Canvas ของเบราว์เซอร์เพื่อจัดวางภาพของคุณเข้าด้วยกันใน Sprite Sheet PNG ที่แน่นที่สุด ทั้งหมดดำเนินการบนอุปกรณ์ของคุณ — ไม่มีการอัปโหลดไปยังเซิร์ฟเวอร์ใด ๆ วางภาพที่คุณต้องการไว้ได้มากเท่าที่ต้องการ ตั้งค่าความกว้างของแถวสูงสุดและระยะห่างของแต่ละ Sprite แล้วเครื่องจัดวางจะจัดเรียงภาพของคุณเป็นแถว ๆ เพื่อลดพื้นที่ที่สูญเสียไป เมื่อสร้างเสร็จแล้วคุณสามารถดาวน์โหลด PNG ที่รวมไว้แล้ว และคัดลอกส่วน CSS ซึ่งมีคลาสสำหรับแต่ละ Sprite พร้อมค่า background-image, background-position, width และ height ที่ถูกต้องสำหรับการวางในไฟล์สไตล์ของคุณ เนื่องจากทุกอย่างทำงานในเบราว์เซอร์ของคุณ กระบวนการจึงรวดเร็วและเป็นส่วนตัวทั้งหมด
วิธีใช้งาน
- วางภาพของคุณลงในพื้นที่อัปโหลด หรือคลิกเพื่อเลือกไฟล์หลายไฟล์ทีเดียว
- ตั้งค่าความกว้างของแถวสูงสุด (ในหน่วยพิกเซล) และระยะห่างรอบแต่ละ Sprite เพื่อควบคุมว่าภาพถูกจัดวางแน่นแค่ไหน
- คลิก Generate Sprite Sheet เพื่อรวมภาพทั้งหมดเข้าเป็น PNG ที่รวมไว้แล้ว พร้อมดูตัวอย่างทันทีบน Canvas
- คัดลอก CSS ที่สร้างขึ้น — แต่ละ Sprite จะได้รับคลาสของตัวเองพร้อมค่า background-position, width และ height ที่ถูกต้อง
- ดาวน์โหลด PNG Sprite Sheet และวาง CSS ลงในไฟล์สไตล์ของโครงการของคุณ — เสร็จสิ้น
คำถามที่พบบ่อย
- ภาพของฉันถูกอัปโหลดไปยังเซิร์ฟเวอร์ไหม?
- ไม่ ทุกอย่างทำงานในเบราว์เซอร์ของคุณโดยใช้ API Canvas ไฟล์ของคุณจะไม่ถูกส่งออกจากรายการอุปกรณ์ของคุณ
- ฉันสามารถเพิ่มภาพได้กี่ภาพใน Sprite Sheet หนึ่ง?
- ไม่มีข้อจำกัดที่ชัดเจน — เครื่องมือนี้สามารถจัดวางภาพได้มากเท่าที่หน่วยความจำของเบราว์เซอร์ของคุณอนุญาต สำหรับประสิทธิภาพที่ดีที่สุด ให้รักษาขนาดของ Sprite แต่ละตัวให้เหมาะสม
- การตั้งค่าความกว้างสูงสุดของแถวทำอะไรได้บ้าง?
- มันจำกัดความกว้างของแต่ละแถวของสปไรท์ก่อนที่แพ็กเกอร์จะเริ่มแถวใหม่ ค่าที่มากกว่าจะทำให้ได้แผ่นสปไรท์ที่กว้างขึ้น ในขณะที่ค่าที่น้อยกว่าจะทำให้ได้แผ่นสปไรท์ที่สูงและแคบกว่า
- ฉันสามารถใช้ CSS ที่สร้างขึ้นได้โดยตรงในโครงการของฉันได้ไหม?
- ได้ แต่ละคลาสของสปไรท์จะมี URL ของ background-image (ชี้ไปยังไฟล์ PNG ที่คุณดาวน์โหลดแล้ว) background-position, width และ height — คัดลอกและวางลงในไฟล์ stylesheet ใด ๆ และใช้คลาสนั้นกับองค์ประกอบ HTML ของคุณ
- ฉันสามารถใช้รูปแบบไฟล์ภาพใดเป็นสปไรท์นำเข้าได้บ้าง?
- รูปแบบใด ๆ ที่เบราว์เซอร์ของคุณสามารถถอดรหัสได้ — PNG, JPEG, WebP, GIF, SVG, AVIF และอื่น ๆ อีกมาก แผ่นสปไรท์ที่ผลลัพธ์จะเป็นไฟล์ PNG เดียวเสมอเพื่อความเข้ากันได้สูงสุด
- เครื่องมือนี้จะอัปโหลดข้อมูลของฉันหรือไม่?
- ไม่ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ดังนั้นข้อมูลของคุณจึงไม่เคยออกจากอุปกรณ์ของคุณ — และหลังจากโหลดหน้าแล้วยังใช้งานแบบออฟไลน์ได้ด้วย