สร้างสไปรต์ · แอนิเมชันพิกเซลอาร์ต

ผืนผ้าใบของสไปรต์ไม่ใช่ภาพที่จะย่อทีหลัง ขนาดที่คุณเลือกคือความละเอียดที่ผู้เล่นเห็นจริง ที่ 16×16 ตัวละครคือเงาโครงร่างที่มีตาสองพิกเซล ขนาดนี้จึงเหมาะกับไอเทม ไอคอน และฮีโร่ตัวเล็ก ที่ 32×32 มีที่พอสำหรับใบหน้า มือที่ดูออก และลำดับเฉดแสงเงา ที่ 64×64 จะใกล้งานภาพประกอบมากขึ้น และแอนิเมชันแต่ละเฟรมต้องวาดพิกเซลมากกว่าเฟรมขนาด 32×32 ถึงสี่เท่า

เลือกขนาดตามสไปรต์อื่น ๆ ในเกมของคุณ ไม่ใช่ตามรายละเอียดที่อยากใส่ ไทล์เซ็ตบนกริด 16 พิกเซลต้องการตัวละครที่สูง 16 หรือ 32 พิกเซล หากสไปรต์ต้องขยาย แผงขนาดจะยึดภาพไว้กับขอบหรือมุมที่คุณเลือก และทุกเฟรมจะถูกปรับขนาดแบบเดียวกัน แอนิเมชันจึงยังตรงกันทุกเฟรม

สไปรต์ที่ดีส่วนใหญ่ใช้สีราวสี่ถึงสิบหกสี จานสีเล็ก ๆ บังคับให้แต่ละสีมีหน้าที่ของตัวเอง ได้แก่ เส้นขอบ สีพื้น เงาหนึ่งหรือสองระดับ และไฮไลต์ เลือกสีพื้นแล้วใช้ปุ่ม “เข้มขึ้น” และ “อ่อนลง” ข้าง ๆ ไล่เป็นชุดเฉดสี ถ้าขยับโทนสีในเงาไปทางน้ำเงินเล็กน้อย และในไฮไลต์ไปทางเหลือง จะดูเป็นแสงแทนที่จะดูเป็นสีเทา

เส้นขอบช่วยแยกสไปรต์ออกจากพื้นหลังใดก็ตามที่มันไปอยู่ สำหรับสไปรต์เล็ก เส้นขอบสีเข้มรอบตัวคือทางเลือกที่ปลอดภัยที่สุด ส่วนสไปรต์ใหญ่ เส้นขอบที่ใช้สีตามรูปทรงที่มันล้อมอยู่ (selective outline) จะดูนุ่มนวลกว่า หลีกเลี่ยงการลงเงาทุกรูปทรงจากขอบเข้าหาด้านใน (pillow shading) ซึ่งทำให้รูปทรงดูแบน แสงมาจากด้านหนึ่ง และเงาตกไปอีกด้าน

แอนิเมชันในเกมส่วนใหญ่เป็นลูปสั้น ๆ ท่าหายใจหรือขยับตัวตอนยืนนิ่งใช้สองถึงสี่เฟรมที่สี่ถึงหกเฟรมต่อวินาทีก็พอ ท่าเดินวนมักใช้สี่ถึงแปดเฟรมที่แปดถึงสิบสองเฟรมต่อวินาที ประกอบด้วยท่าเท้าแตะพื้นสองท่า และท่าก้าวผ่านระหว่างนั้น ท่าโจมตีหรือโดนโจมตีจะอ่านง่ายที่สุดเมื่อมีเฟรมเตรียมท่าที่ช้า ตามด้วยเฟรมแอ็กชันที่เร็วมากหนึ่งหรือสองเฟรม และท่าค้างไว้หลังจากนั้น

วาดท่าหลักก่อน แล้วค่อยเติมเฟรมระหว่างกลาง ทำสำเนาเฟรมคือเครื่องมือสำหรับเรื่องนี้ คัดลอกเฟรมที่คุณอยู่แล้วเปลี่ยนเฉพาะพิกเซลที่ขยับ ตัวละครจะได้ไม่สั่นจากเฟรมหนึ่งไปอีกเฟรม เมื่อเปิดออเนียนสกิน เฟรมก่อนหน้าจะโผล่จาง ๆ ใต้พิกเซลว่าง ทำให้ขยับแขนไปหนึ่งหรือสองพิกเซลได้ง่ายโดยไม่ต้องวาดใหม่ ถ้าอยากให้ท่าใดค้างนานขึ้น ให้ทำสำเนาเฟรมนั้น เพราะใน GIF ทุกเฟรมแสดงนานเท่ากัน

ดูพรีวิวด้วยความเร็วที่เกมจะใช้จริง แอนิเมชันที่ดูลื่นตอนเล่นช้า มักกระตุกเมื่อเล่นเต็มความเร็ว และวิธีแก้แทบทุกครั้งคือให้พิกเซลเปลี่ยนระหว่างเฟรมน้อยลง ไม่ใช่เพิ่มจำนวนเฟรม

สไปรต์ชีตคือการวางทุกเฟรมของแอนิเมชันไว้บนภาพเดียว ชีตที่เครื่องมือนี้ส่งออกไม่มีขอบหรือช่องว่างระหว่างเฟรม เอนจินใดก็ตัดแบ่งได้ด้วยขนาดเฟรมอย่างเดียว สไปรต์ 32×32 ที่มีแปดเฟรมจะถูกส่งออกเป็นแถบ 256×32 หรือเป็นตาราง 3×3 ที่ช่องสุดท้ายว่าง

ส่งออกที่ 1× สำหรับเอนจิน แล้วให้เอนจินขยายเอง ใน Godot ให้ตั้งฟิลเตอร์เท็กซ์เจอร์เป็น Nearest เพื่อให้พิกเซลคมอยู่เสมอ ใน Unity ตั้ง Filter Mode เป็น Point (no filter) ปิดการบีบอัด และตั้ง Pixels Per Unit ให้เท่ากับขนาดสไปรต์ ใน GameMaker ให้นำเข้าแถบภาพและระบุจำนวนเฟรม พิกเซลโปร่งใสจะยังโปร่งใส สไปรต์จึงวางบนพื้นหลังใดก็ได้

GIF ขนาด 32×32 ตามขนาดจริงเล็กกว่ารูปย่อเสียอีก และเว็บไซต์ส่วนใหญ่จะทำให้ภาพเล็กเบลอเมื่อขยาย ให้ส่งออกที่ 4× หรือ 8× แทน แต่ละพิกเซลจะกลายเป็นบล็อกพิกเซลสีเดียวกันขนาด 4×4 หรือ 8×8 และไฟล์ยังเล็กอยู่ เพราะ GIF บีบอัดพิกเซลสีเดียวกันที่เรียงต่อกันได้ดีมาก

ความโปร่งใสใน GIF คือการปิดสีหนึ่งสีไว้ แอปแชตและโซเชียลมีเดียบางแห่งจึงแสดงเป็นสีดำหรือสีขาว ถ้าจะโพสต์แอนิเมชันในที่ที่คุณเลือกพื้นหลังไม่ได้ ให้ส่งออกบนพื้นสีขาว