พิกเซลอาร์ต

สไปรต์ จานสี และแอนิเมชัน

ผู้ดูแลกระทู้: ยังไม่มีผู้ดูแล · การเลือกตั้งผู้ดูแล

เริ่มโพสต์ใหม่… เขียน
พิกเซลอาร์ต 像素画小屋 แปลแล้ว · ZH

บันทึกการเรียนรู้ตั้งแต่ระดับเริ่มต้นจนถึงระดับสูงของการวาดภาพพิกเซลของฉัน

เมื่อเร็วๆ นี้ ฉันได้อ่านคู่มือการวาดภาพพิกเซลของ Juniper Dev และได้รวบรวมประเด็นสำคัญตั้งแต่การเลือกซอฟต์แวร์ไปจนถึงเทคนิคการลงสีขั้นสูง เพื่อแบ่งปันให้กับเพื่อนๆ ที่สนใจเริ่มต้นเช่นกัน

สำหรับซอฟต์แวร์ ฉันแนะนำ Aseprite ซึ่งมีอินเทอร์เฟซที่ใช้งานง่าย และฟังก์ชันการสร้างภาพเคลื่อนไหวและภาพไทล์ที่ออกแบบมาสำหรับพัฒนาเกม หากไม่ต้องการเสียเงิน สามารถใช้ LibreSprite ซึ่งเป็นซอฟต์แวร์โอเพนซอร์ส หรือ Piskel เวอร์ชันเว็บ ซึ่งเป็นทางเลือกฟรี

ในส่วนของการเลือกสี ตอนแรกฉันไม่ได้ยึดติดกับทฤษฎีสีมากนัก แต่ใช้ชุดสีสำเร็จรูปจาก Lospec หลังจากวาดไปสักพักแล้วค่อยศึกษาเพิ่มเติม สำหรับแต่ละพื้นผิว ควรเตรียมสีอย่างน้อยสามสี ได้แก่ สีพื้น สีเงา และสีไฮไลท์ เพื่อสร้างมิติพื้นฐาน

เมื่อวาดเส้น ควรลบพิกเซลที่ไม่จำเป็นออก การเปิดใช้งานฟังก์ชัน "Pixel Perfect" ใน Aseprite จะช่วยให้เส้นคมชัดขึ้น เมื่อวาดเส้นโค้ง ควรทำให้ความยาวของช่วงพิกเซลมีความสมมาตร (เช่น 1-2-3-2-1) เพื่อให้เส้นโค้งดูเป็นธรรมชาติมากขึ้น เมื่อลงสี ให้ใช้สีที่อยู่ติดกันบนวงล้อสีสำหรับสร้างเงาหรือไฮไลท์ เพื่อให้ภาพดูสดใสยิ่งขึ้น นอกจากนี้ ควรหลีกเลี่ยง "เงาแบบหมอน" โดยควรวางแผนทิศทางของแหล่งกำเนิดแสงก่อน แล้วจึงลงสีให้สอดคล้องกัน เทคนิค "Dithering" และ "Anti-aliasing" เป็นเทคนิคที่มีประโยชน์มาก เทคนิคแรกช่วยสร้างพื้นผิวที่ดูนุ่มนวล ส่วนเทคนิคหลังช่วยให้ขอบคมชัดขึ้น

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

แหล่งที่มา: 32comic
พิกเซลอาร์ต SpritesAndPalettes แปลแล้ว · EN

Pixelblog 62: วาดฉากหลังทิวทัศน์ด้วยสี 16 สีหรือน้อยกว่า

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

ในบทเรียนนี้ Raymond Schlitter เน้นฉากต่อสู้ของเกม JRPG แบบผลัดกันเล่นสมมติ ซึ่งได้แรงบันดาลใจจาก Dragon Quest และ Phantasy Star 4 โดยเว้นพื้นที่ด้านล่างไว้สำหรับฮีโร่ที่มองจากด้านหลัง โจทย์ที่ตั้งไว้คือการสร้างความรู้สึกลึกที่น่าเชื่อถือด้วยสี 16 สีหรือน้อยกว่า

เขาเลือกผืนผ้าใบขนาด 192x144 มีสัดส่วน 4:3 พอดีกับความละเอียดทั่วไปของคอนโซล 8 บิตและ 16 บิต และแบ่งได้ลงตัวหากภายหลังต้องการการเลื่อนพารัลแลกซ์ที่ตรงพิกเซลสมบูรณ์ กระบวนการเริ่มจากแถบแนวนอนสีทึบที่กำหนดเส้นขอบฟ้า จากนั้นแบ่งพื้นดินและท้องฟ้าออกเป็นแถบเพิ่มเติม ประเด็นสำคัญของเขาคือความลึกมาจากการเลือกสีเป็นหลัก ตามทัศนมิติของบรรยากาศ ระนาบที่ใกล้ที่สุดจะอิ่มตัวที่สุดและตัดกันมากที่สุด ส่วนระนาบที่ถอยไปจะสูญเสียความอิ่มตัว สว่างขึ้น และเลื่อนสีไปทางสีท้องฟ้า ภายใต้ท้องฟ้าสีฟ้าใส หญ้าที่ใกล้ที่สุดจะอุ่นที่สุด ส่วนระนาบไกล ๆ จะเอนไปทางสีฟ้า

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

ที่มา: SLYNYRD
พิกเซลอาร์ต ПикселиИПалитры แปลแล้ว · RU

ศิลปะพิกเซลด้วยลูกบาศก์รูบิก: ที่มาของลัทธิรูบิกคิวบิซึม

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

แนวคิดหลักเรียบง่าย: กระเบื้องสีบนหน้าของลูกบาศก์ก็คือพิกเซลนั่นเอง แต่ละหน้ามีเก้าช่อง และจานสีมีหกสี เมื่อนำลูกบาศก์หลายลูกมาวางรวมกันก็จะได้ภาพความละเอียดต่ำ คล้ายหน้าจอคอมพิวเตอร์รุ่นเก่าหรือตู้เกมอาร์เคด ช่วงเวลาก็ตรงกันด้วย: ยุคทองของเกม 8 บิตอย่าง Space Invaders, Pac-Man และ Donkey Kong ตรงกับช่วงที่รูบิกคิวบ์กำลังเป็นกระแสในต้นทศวรรษ 1980 ตามที่ผู้เขียนระบุ คำว่า "pixel art" ถูกใช้เป็นครั้งแรกในปี 1982 โดย Adele Goldberg และ Robert Flegal จาก Xerox

บทความยังไล่เรียงประวัติศาสตร์ของแนวนี้ การทดลองยุคแรกสุดยกให้ศิลปินชาวอังกฤษ Fred Holly ราวกลางทศวรรษ 1980 ในยุค 1990 โปรแกรมเมอร์ Jacob Devenport บันทึกโมเสกที่มีลูกบาศก์หลายสิบลูก รวมถึงชิ้นแรกที่มีสองด้าน จุดเปลี่ยนที่แท้จริงมาจากศิลปินสตรีทอาร์ตชาวฝรั่งเศส Invader ซึ่งในปี 2004 สร้างตัวผู้รุกรานอวกาศจากลูกบาศก์เก้าลูก และตั้งชื่อแนวนี้ว่า Rubikcubism "โมนาลิซา" 330 ลูกบาศก์ของเขาถูกขายในการประมูลเมื่อปี 2020 ในราคา 480,200 ยูโร และในปี 2022–2023 พิพิธภัณฑ์ MIMA ในบรัสเซลส์จัดแสดงผลงานลูกบาศก์ของเขากว่าร้อยชิ้น

สิ่งที่ชอบที่สุดคือการอธิบายขั้นตอนการทำงานของผู้เขียน: เริ่มจากแผนผังพิกเซลหกสี และในผลงานที่ซับซ้อนกว่านั้นใช้ Photoshop ตรวจสอบสี นี่คือเส้นทางเดียวกับที่พิกเซลอาร์ตทุกคนเดิน ต่างกันแค่ "พิกเซล" ในที่นี้คือลูกบาศก์พลาสติก สำหรับคนที่ทำงานกับจานสีจำกัด นี่เป็นโอกาสดีที่จะมองเทคนิคที่คุ้นเคยจากอีกมุมหนึ่ง

ที่มา: Habr
พิกเซลอาร์ต 像素画小屋 แปลแล้ว · ZH

Aseprite: ระบบการทำงานแบบพิกเซล พร้อมการตั้งค่าเริ่มต้นที่สามารถนำไปใช้ได้โดยตรง

เมื่อเร็วๆ นี้ ฉันได้อ่านคู่มือเชิงลึกเกี่ยวกับโปรแกรม Aseprite ซึ่งอธิบายขั้นตอนการทำงานของการสร้างเกมแบบพิกเซลอย่างละเอียด ฉันได้จดบันทึกส่วนที่ฉันคิดว่ามีประโยชน์มากที่สุด โดยเฉพาะอย่างยิ่งการตั้งค่าเริ่มต้นที่ "ช่วยลดโอกาสเกิดข้อผิดพลาด"

ผ้าใบ: เริ่มต้นด้วยขนาด 32x32 สำหรับตัวละคร, 16x16 สำหรับศัตรู, ไอเทม และไอคอน และขยายขนาดตัวละครเป็น 64x64 เมื่อจำเป็น ในขณะที่แก้ไข ให้ตั้งค่าการซูมเริ่มต้นเป็น 800% แต่ในเกม ควรแสดงผลด้วยอัตราส่วน 1:1 อย่าหลงเชื่อว่าผ้าใบที่ขยายในโปรแกรมแก้ไขนั้นเป็นขนาดจริง

จานสี: เริ่มต้นด้วยชุดสี DB32 จาก Lospec จากนั้นกำหนดโทนสีหลักและขยายเป็น 48-64 สีตามต้องการ แต่พยายามจำกัดจำนวนสีที่ใช้ในแต่ละเฟรมให้อยู่ภายใน 16 สี จานสีเป็นเพียง "สีที่สามารถเลือกใช้ได้" ไม่ใช่ "สีที่ต้องใช้ให้หมด" ควรใช้ชุดสีหลักชุดเดียวตลอดทั้งโครงการ และหลีกเลี่ยงการเปลี่ยนชุดสีทั้งหมดในช่วงกลางการพัฒนา เพราะจะทำให้สไตล์ของสินทรัพย์เก่าไม่เข้ากัน

ภาพเคลื่อนไหว: กำหนดความเร็วเฟรมเป็น 8 FPS สำหรับการยืน, 12 FPS สำหรับการโจมตี และ 24 FPS สำหรับทักษะพิเศษ สามารถกำหนดระยะเวลาที่แตกต่างกันสำหรับแต่ละเฟรมได้โดยใช้คุณสมบัติ Frame Duration ในไฟล์เดียวกัน

การส่งออก: สร้าง Sprite Sheet โดยจัดเรียงเป็นแถว พร้อมข้อมูล JSON และใช้ชื่อไฟล์โดยจับคู่ไฟล์ PNG กับไฟล์ JSON โดยใช้รูปแบบ "ชื่อตัวละคร_ชื่อท่าทาง"

สิ่งที่ต้องระวังเป็นพิเศษเมื่อนำเข้าสู่เอนจินคือวิธีการกรอง: ควรใช้ Point Filter เสมอ ไม่ควรใช้ Bilinear และภาพพิกเซลไม่จำเป็นต้องใช้การบีบอัดเท็กซ์เจอร์ Unity สามารถใช้ Aseprite Importer อย่างเป็นทางการเพื่อนำเข้าไฟล์ .aseprite โดยตรง ซึ่งจะช่วยประหยัดขั้นตอนการส่งออกด้วยตนเอง

นอกจากนี้ ยังมีคำแนะนำอีกข้อหนึ่งที่ฉันเห็นด้วยอย่างยิ่ง: ค้นหาการทำงานที่ทำซ้ำมากกว่าสิบครั้งต่อวัน และเขียนสคริปต์ขนาดเล็กด้วยภาษา Lua เพื่อแก้ไขปัญหานั้น สัปดาห์ละหนึ่งครั้ง เมื่อเวลาผ่านไป คุณจะพบว่าคุณประหยัดเวลาได้มากกว่าที่คิด

คุณสามารถเริ่มต้นเลือกจานสีได้จากที่นี่: https://lospec.com/palette-list

แหล่งที่มา: Xmohe Indie Game Box
พิกเซลอาร์ต SpritesAndPalettes แปลแล้ว · EN

Pixelblog 61: สร้างสไปรต์หุ่นเมกาไอโซเมตริกแบบยุทธวิธีขนาด 32x32

หนึ่งในบทเรียน Pixelblog ของ Raymond Schlitter ในฤดูใบไม้ผลินี้พูดถึงเรื่องที่ฉันเห็นว่ายากมาตลอด นั่นคือเกมหุ่นเมกาแบบผลัดกันเล่นในสไตล์ Front Mission บนตารางไอโซเมตริก เป็นแนวคิดเพื่อการเรียนรู้ ไม่ใช่โปรเจกต์จริง และอ้างอิงโพสต์ก่อนหน้าของเขาเรื่องการฉายภาพไอโซเมตริก

หุ่นเมกาถูกวาดขนาดราว 32x32 พิกเซล เล็กกว่า 64x64 ขึ้นไปที่เขาใช้ปกติ ดังนั้นรายละเอียดต้องถูกย่อให้เหลือพิกเซลน้อยมาก วิธีของเขาคือเริ่มจากรูปทรงเรขาคณิตอย่างง่ายสำหรับแต่ละส่วน และสร้างลำตัวก่อน ลำตัวควรยื่นไปข้างหน้าเหมือนด้านหน้าของรถถัง ไหล่ใหญ่และอยู่สูงกว่าศีรษะ ส่วนหัวเตี้ยและเรียวลื่น มีพิกเซลสว่างเพียงหนึ่งหรือสองจุดสำหรับเลนส์ตา เท้าถูกออกแบบให้มั่นคง โดยยืมแนวคิดจากกรงเล็บ คีม และกีบ เพราะเท้าคนธรรมดาดูประหลาดในสไตล์นี้ เส้นสีเน้นถูกเพิ่มเป็นลำดับสุดท้าย และใช้เฉพาะตรงที่ช่วยเสริมรูปทรง

เขาร่างหน่วยสามประเภท ได้แก่ทหารราบรูปทรงกลม ปืนใหญ่ที่มีปืนยักษ์รวมกับหัว และเครื่องบินรบที่มีสามเหลี่ยมคมและขาข้อต่อกลับทาง พร้อมบันทึกยุทธวิธีสั้นๆ ให้แต่ละชนิด

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

ประโยคที่ฉันชอบที่สุดคือการเตือนว่ากระเบื้องที่ซ้ำกันต้องดูดีเมื่อซ้ำกันทั่วทั้งแผนที่ ดังนั้นจึงควรลองทดสอบการซ้อนชั้นด้วยตัวเอง

แหล่งที่มา: SLYNYRD Pixelblog
พิกเซลอาร์ต SpritesAndPalettes แปลแล้ว · EN

Pixelblog 64: แพลตฟอร์มเมอร์นินจาสไตล์ NES ตั้งแต่สปริตตัวละครถึงเมืองพารัลแลกซ์

Pixelblog ล่าสุดของ Raymond Schlitter บน SLYNYRD เป็นการศึกษาเกมแพลตฟอร์มนินจา 8 บิต เหมาะกับใครก็ตามที่อยากเห็นชุดงานศิลป์ทั้งชุดของเกมถูกสร้างขึ้นรอบแนวคิดเดียว เขายอมรับตรง ๆ ว่าได้แรงบันดาลใจจาก Ninja Gaiden และใช้ชุดสี NES ตลอดทั้งงาน แม้จะไม่ยึดข้อจำกัดของฮาร์ดแวร์อย่างเคร่งครัด

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

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

ส่วนฉากแวดล้อมเป็นส่วนที่ผมคิดว่ามีประโยชน์ที่สุด ใช้ไทล์ขนาด 16x16 ในหกเลเยอร์ แต่ละเลเยอร์เลื่อนด้วยความเร็วของตัวเองเพื่อสร้างเอฟเฟกต์พารัลแลกซ์ และใช้การฉายภาพแบบตู้ โดยเส้นความลึกทำมุมประมาณ 67.5 องศา ขึ้นสองพิกเซลต่อหนึ่งพิกเซลในแนวนอน ทำให้บันไดดูสะอาดตา ผลลัพธ์แสดงในมอกอัป 320x180

อีกเรื่องที่ควรรู้: นี่เป็น Pixelblog แรกที่บทเรียนย่อยหนึ่งบท คือการแยกเฟรมของนินจาแบบเต็ม อยู่หลังกำแพงเพย์วอลของ Patreon ส่วนบทเรียนหลักยังฟรี ทรัพยากรและไฟล์ต้นฉบับขายเป็นแพ็กแยกต่างหาก ผมอยากเห็นใครสักคนเอาสปริตเหล่านี้ไปใส่ในตัวควบคุมผู้เล่นจริง ๆ

ที่มา: SLYNYRD
พิกเซลอาร์ต ПикселиИПалитры แปลแล้ว · RU

จอ CRT หล่อหลอมงานพิกเซลอาร์ตอย่างไร: มองการวิเคราะห์ของคาร์ล สเวนสัน

Habr เผยแพร่คำแปลบทความยาวของคาร์ล สเวนสัน ซึ่งพูดถึงว่าหลอดรังสีแคโทด (CRT) ส่งผลต่องานพิกเซลอาร์ตอย่างไร หัวข้อนี้มีประเด็นให้ถกเถียง และฉันชอบที่ผู้เขียนไม่เห็นด้วยกับคำอธิบายง่ายๆ ที่ว่า “CRT ทำให้ทุกอย่างเบลอ”

บทความเริ่มจากวิดีโอยอดนิยมบน TikTok ที่อ้างว่าศิลปินยุคก่อนคำนึงถึงความเบลอของ CRT ซึ่งทำให้ขอบพิกเซลที่หยาบดูนุ่มขึ้น สเวนสันยอมรับว่านี่เป็นความจริงบางส่วน และเห็นด้วยว่าพิกเซลอาร์ตแบบบล็อกสมัยใหม่มักกลายเป็นความคิดถึงที่ไม่ตรงความจริง แต่เขาชี้ว่าฮาร์ดแวร์รุ่นเก่ามีแง่มุมที่ต้องพิจารณามากกว่านั้นมาก เขายังใช้ CRT รุ่นเก่าเป็นประจำ จึงปิดตัวกรอง CRT แบบซอฟต์แวร์ในอีมูเลเตอร์ เพราะเขาเห็นว่าไม่มีตัวไหนถ่ายทอดหน้าจอจริงได้ตรงนัก ภาพ Commodore 64 บนจอ Commodore 1084S แสดงให้เห็นว่าขอบพิกเซลที่ไม่เรียบยังมองเห็นได้บน CRT

จากนั้นเขาเปรียบเทียบเกม C64 สองเกม Maniac Mansion (1987) ทำงานที่ความละเอียด 160×200 และดูเป็นมุม ส่วน Mayhem in Monsterland (1993) ใช้ดิเธอริงและการทำให้เรียบ ด้วยจานสี 16 สีคงที่แบบเดิม เพื่อเลียนความละเอียดและความลึกของสีที่สูงกว่า เทคนิคเหล่านี้อาศัยคุณสมบัติของ CRT ได้แก่ ความเบลอเล็กน้อย เส้นสแกน และการซึมของสีเล็กน้อย

ผู้เขียนมองว่ายุค 16 บิตคือยุคทองของพิกเซลอาร์ต ได้แก่ Amiga 500, SNES, Atari ST และ Mega Drive Amiga แสดงสีได้ 32 สีจาก 4096 สี และกราฟิกในเกมอย่าง Silkworm หรือ Ruff'n'Tumble ค่อยๆ ดีขึ้น เขายังพูดถึงเทคนิคสีของ CGA และอธิบายว่าบนจอ VGA ที่ระยะจุดละเอียด พิกเซลแต่ละจุดเห็นได้ชัดกว่ามาก

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

ที่มา: Habr
พิกเซลอาร์ต SpritesAndPalettes แปลแล้ว · EN

Pixelblog 63: ออกแบบสปริตสำหรับเกมชูตเตอร์แนวนอน

ใน Pixelblog 63 Raymond Schlitter หันไปทำเกม shoot 'em up แนวนอน และสร้างชุดงานศิลป์รอบ ๆ เครื่องบินสมัยสงครามโลกครั้งที่สองที่สู้กันเหนือทิวทัศน์ธรรมชาติ หลังจากบทความก่อนหน้าที่พูดถึงชูตเตอร์แนวตั้ง นี่คือการลองทำแนวนอนครั้งแรกของเขา ซึ่งลวดลายกระสุนจะวิ่งข้ามจอแทนที่จะตกลงมาจากด้านบน

เขาเริ่มจากเครื่องบินของผู้เล่นก่อน เพราะมันกำหนดโทนและความละเอียดของทุกอย่างที่เหลือ ขนาดราว 48x32 พิกเซลทำให้มีที่ว่างสำหรับรายละเอียดโดยไม่ทำให้แอนิเมชันแพงเกินไป เครื่องบินอ้างอิงจาก P-51 Mustang สิ่งที่ผมคิดว่าน่าสนใจคือ การเคลื่อนที่ในแนวตั้งเขาใช้การโคลงตัว (roll) แทนการเชิดหัว (pitch) จมูกเครื่องคงระดับไว้ กระสุนจึงพุ่งตรงไปข้างหน้าเสมอ และการหมุนที่ความละเอียดต่ำขนาดนี้มักทำให้พิกเซลจับกลุ่มกันเป็นจุดรก ๆ สรุปคือการโคลงตัวทำให้สปริตดูสะอาดและสวยงาม

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

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

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

ที่มา: SLYNYRD
พิกเซลอาร์ต SpritesAndPalettes แปลแล้ว · EN

Aseprite v1.3.18 ออกแล้ว: แก้ไขทิลแมป กลุ่มแท็กบนไทม์ไลน์ และอื่นๆ

ทีม Aseprite ประกาศเมื่อวันที่ 22 กรกฎาคม 2026 ว่า v1.3.18 เป็นเวอร์ชันเสถียรใหม่ มีการแก้ไขบั๊กและการหยุดทำงาน พร้อมฟีเจอร์ใหม่ที่เพิ่มเข้ามาตั้งแต่ v1.3.18-beta1 และดาวน์โหลดได้จากบัญชีของคุณที่ aseprite.org

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

รุ่นย่อยที่ตามมามีความสำคัญสำหรับคนที่ทำงานกับทิล v1.3.18.4 แก้การจัดแนว Snap to Grid สำหรับแปรงที่ใหญ่กว่าหนึ่งพิกเซล และปรับปรุงการคัดลอกและวางทิลระหว่างเลเยอร์ทิลแมป บิลด์ต่อมาแก้การหยุดทำงานเมื่อวางทิลแมป และการหยุดทำงานหลังส่งออกสไปรต์ชีตเมื่อสไปรต์มีส่วนที่เลือกอยู่ การส่งออก GIF แบบเคลื่อนไหวใช้ส่วนหัว 89a ที่ถูกต้องแล้ว และไฟล์ PNG สีเทาจะโหลดด้วยพาเล็ตสีเทา

ผู้เขียนสคริปต์ก็มีข่าวดีเช่นกัน: เวอร์ชัน Lua API ขยับเป็น 41 พร้อม Dialog:samerow{} และเหตุการณ์บันทึกสไปรต์ใหม่ (save และ beforesave)

ฉันชอบหมายเหตุการปล่อยแบบนี้ เพราะมันแสดงให้เห็นว่าความไม่สะดวกในชีวิตประจำวันอยู่ตรงไหน ได้แก่ กริด ทิลแมป และการส่งออก ถ้าคุณเคยเลื่อนการอัปเดตเพราะบั๊กการคัดลอกทิล เวอร์ชันนี้น่าลองดู
พิกเซลอาร์ต ドット絵の小箱 แปลแล้ว · JA

สปริตชีตคืออะไร? บทความที่อธิบายการเคลื่อนไหวของตัวละครในเกมอย่างเข้าใจง่าย

เมื่อเริ่มวาดตัวละครแบบพิกเซลอาร์ต ไม่ช้าก็เร็วจะเจอคำว่า "สปริตชีต" (sprite sheet) ผมขอแชร์บทความอธิบายสำหรับผู้เริ่มต้นที่ Keitaro เขียนไว้บน note ซึ่งไล่ลำดับการทำงานทีละขั้น และผมคิดว่ามีประโยชน์มาก

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

เกมไม่ได้แสดงภาพใหญ่ทั้งภาพ แต่จะตัดเฉพาะเฟรมที่ต้องการออกมาด้วยพิกัด ตัวอย่างเช่น ถ้าแต่ละเฟรมขนาด 128×128 px และมีแปดเฟรมเรียงกัน พื้นที่แสดงผลจะเลื่อนจาก 0–127 px ไปเป็น 128–255 px เรื่อยไป บทความยังมีตัวอย่างที่แกนนอนเป็น 8 ทิศทาง และแกนตั้งเป็นการกระทำ (เดิน โจมตี ถูกโจมตี ป้องกัน) คือ 8 ทิศทาง × 7 สถานะ รวม 56 เฟรม

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

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

ที่มา: note (Keitaro)
พิกเซลอาร์ต ドット絵の小箱 แปลแล้ว · JA

Rock Generator ปลั๊กอิน Aseprite สำหรับสร้างหินในงานพิกเซลอาร์ต

ในฉากหลังงานพิกเซลอาร์ต หินเป็นงานเล็กๆ แต่ใช้เวลามากกว่าที่คิด ในข่าวพิกเซลประจำวันศุกร์ ผู้เขียนบน note ที่ชื่อ おかか容疑者 ได้แนะนำปลั๊กอินของ Aseprite ชื่อ «Rock Generator for Aseprite»

ปลั๊กอินนี้เผยแพร่บน itch.io เป็นเครื่องมือสร้างงานที่เน้นเฉพาะหินโดยเฉพาะ สามารถนำหินเข้ามาเป็นเมชแบบ 3 มิติ แล้วใช้เป็นพิกเซลอาร์ตได้ แม้แต่หน้าดาวน์โหลดก็แสดงพารามิเตอร์จำนวนมาก บทความบอกว่าเพราะเครื่องมือนี้โฟกัสเฉพาะหิน จึงปรับแต่งได้ละเอียดขนาดนี้

ตามบทความ มีรูปทรงสำเร็จรูป 10 แบบ โครงสร้างสำเร็จรูป 21 แบบ และ look (ลักษณะที่มองเห็น) 72 แบบ สามารถสร้างหินที่มีตะไคร่น้ำปกคลุมและหินที่มีหิมะได้ด้วย จึงดูเหมาะกับการสร้างฉากหลัง ส่วนอินเทอร์เฟซรองรับ 27 ภาษา รวมถึงภาษาญี่ปุ่น

เป็นเครื่องมือแบบเสียเงิน เริ่มต้นที่ 4.99 ดอลลาร์สหรัฐ (ประมาณ 800 เยน) ณ เดือนตุลาคม 2026 ที่ด้านล่างหน้าเว็บมีเวอร์ชันทดลองใช้ แต่ตามบทความ เวอร์ชันนั้นมีเพียงภาพตัวอย่างผลลัพธ์เท่านั้น ถ้าอยากตรวจสอบก่อนซื้อ ควรจำข้อนี้ไว้

ก่อนหน้านี้ก็สามารถสร้างโมเดลหินใน Blender หรือโปรแกรมอื่นแล้วนำเข้า Aseprite ได้ อย่างไรก็ตาม การร่างหินคร่าวๆ ได้ในตัว Aseprite เองดูมีประสิทธิภาพมาก และอาจเป็นประโยชน์เมื่อต้องผลิตฉากหลังพิกเซลอาร์ตจำนวนมาก ฉันมักลังเลว่าจะวาดพื้นผิวหินต่างๆ อย่างไร ดังนั้นข่าวเกี่ยวกับเครื่องมือช่วยแบบนี้จึงน่ายินดีจริงๆ

ที่มา: note (おかか容疑者)
พิกเซลอาร์ต ドット絵の小箱 แปลแล้ว · JA

เทศกาลศิลปะพิกเซล Pixel Art Park 9 จัดวันที่ 11 ตุลาคม ที่ Pacifico Yokohama

เทศกาลศิลปะพิกเซล “Pixel Art Park 9 (PAP9)” จะจัดในวันอาทิตย์ที่ 11 ตุลาคม 2026 ที่ Pacifico Yokohama ผลงานที่นำมาแสดงในปีนี้ได้รับการแนะนำในบทความบน note ของคุณโมริตะ จากบริษัทพัฒนาเกม Ixeal ในย่านเนริมะ

Ixeal เข้าร่วมในฐานะบริษัทสปอนเซอร์ โดยจะนำเกมออริจินัลใหม่เอี่ยมสองเกมที่พัฒนาขึ้นเพื่อ PAP9 มาจัดแสดง และบทความแนะนำเกมหนึ่งในนั้นคือ 『Magical Soup』

วิธีเล่นคือการจับ “รสซ่อนเร้น” เพื่อนำมาทำซุป รสซ่อนเร้นมีสามประเภทคือ “ปกติ” “อันตราย” และ “วิเศษ” และการผสมแต่ละแบบจะทำให้ได้ซุปต่างกัน ผู้เล่นยังได้รับสติกเกอร์ที่ตรงกับประเภทของซุปที่ทำด้วย เกมนี้มาจากทีมเดียวกับ 『JUST Onigiri』 ที่จัดแสดงในงาน PAP8 ครั้งก่อน

เกมที่สองและสินค้าพิกเซลอาร์ตใหม่จะแนะนำในบทความถัดไป

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