เครื่องมือสร้างสไปรต์ชีต

เลย์เอาต์ทำงานอย่างไร

เครื่องมือใช้เลย์เอาต์เดียวที่คาดเดาได้: กริดสม่ำเสมอ คุณกำหนดจำนวนคอลัมน์ ส่วนจำนวนแถวคือ ปัดขึ้น(ภาพ / คอลัมน์) ทุกเซลล์มีขนาดสี่เหลี่ยมจัตุรัสเท่ากัน (ขนาดไทล์ที่คุณเลือก) ดังนั้นแต่ละภาพจึงถูกปรับขนาดให้พอดีกับเซลล์ของตนโดยคงอัตราส่วน แล้วจัดกึ่งกลาง ภาพขนาดต่างกันจะไปอยู่ในเซลล์ที่เท่ากันทั้งหมด ซึ่งเป็นสิ่งที่สไปรต์ CSS ที่ใช้ background-position คาดหวังพอดี

รูปแบบของ CSS ที่สร้างขึ้น

แต่ละภาพจะกลายเป็นคลาสที่ตั้งชื่อตามไฟล์ (.spr-<ชื่อ>) มีขนาดเท่าไทล์และถูกเลื่อนไปยังเซลล์ของตน เมื่อมีสี่คอลัมน์ ขนาดไทล์ 128 px และไม่มีระยะห่าง แผ่นจะมีลักษณะดังนี้:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

ออฟเซ็ตขยับในสองมิติ: สไปรต์เติมแต่ละแถวจากซ้ายไปขวา แล้วขึ้นแถวถัดไป บันทึก PNG เป็น spritesheet.png ไว้ข้าง CSS ของคุณ (หรือแก้ url(...) ให้ตรงกับพาธของคุณ)

ระยะห่างและการเลอะ

สไปรต์ที่อัดชิดขอบต่อขอบอาจเลอะเข้าหากันเมื่อเบราว์เซอร์ปรับขนาดแผ่น (อัตราส่วนพิกเซลไม่เป็นจำนวนเต็ม การแปลง CSS) เพิ่มระยะห่าง 2 ถึง 4 พิกเซลระหว่างเซลล์เพื่อกันไม่ให้พิกเซลข้างเคียงรั่วเข้ามา

จอความละเอียดสูง (retina)

ไม่มีการส่งออก 2x อัตโนมัติ แต่คุณทำแผ่นให้คมชัดขึ้นได้ง่าย ๆ: เลือกขนาดไทล์ใหญ่ขึ้น (เช่น 256 px แทน 128 px) เพื่อให้แต่ละสไปรต์มีพิกเซลมากขึ้น แล้วแสดงที่ครึ่งหนึ่งของขนาด CSS เท่านี้คุณก็ได้สไปรต์คมชัดบนจอความละเอียดสูงโดยไม่ต้องทำรอบแยก

สไปรต์ชีตหรือทางเลือกอื่น

• สไปรต์ชีต: ชุดไอคอนคลาสสิกใน CSS เฟรมเกม HTML5 และหน้าที่ได้ประโยชน์จากการรวมภาพเล็กจำนวนมากไว้ในไฟล์เดียว
• สไปรต์ SVG (symbol): ดีกว่าสำหรับไอคอนอินเทอร์เฟซสมัยใหม่ ปรับขนาดได้โดยไม่เสียคุณภาพ รับ fill ของ CSS ไม่ต้องยุ่งกับ background-position
• ฟอนต์ไอคอน: จำกัด แต่ยังใช้กับไอคอนสีเดียวขนาดจิ๋ว
• ไฟล์แยกกับ HTTP/2 หรือ HTTP/3: การมัลติเพล็กซ์ทำให้จำนวนคำขอสำคัญน้อยลงกว่าแต่ก่อน