pixelfx คือคลังเอฟเฟกต์ภาพสไตล์ pixel art ถึง 244 แบบ ที่ช่วยแก้ปัญหาคลาสสิกของคนทำเกมพิกเซล นั่นคือกดฟันศัตรูแล้วรู้สึก "ไม่เข้าเนื้อ" ฟันโดนแต่ไม่มีประกายไฟ ศัตรูก็ยืนนิ่ง ทั้งเกมเลยดูแบนและขาดน้ำหนัก

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

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

นอกจากนี้ ในโปรเจกต์ยังมีสกิลสำหรับ Claude Code ผู้ช่วยเขียนโค้ด AI บนเทอร์มินัลติดมาด้วย สกิลนี้เป็นชุดคำแนะนำที่สอนให้ AI ทำงานเหมือนศิลปิน pixel art ตัวจริง คือลองร่างหลายๆ แบบ เรนเดอร์ออกมาตรวจดูด้วยตา แล้วค่อยๆ แก้จุดบกพร่องจนเนียนตา แทนที่จะสั่งพรอมต์รอบเดียวแล้วหวังว่าจะได้งานสมบูรณ์แบบทันที

21 หมวดใน pixelfx มีตั้งแต่กองไฟไปจนถึงค้างคาว

เอฟเฟกต์แต่ละแบบแยกเป็นไฟล์เดี่ยวๆ เก็บไว้ที่ src/fx/<category>/<name>.js แบ่งเป็น 21 หมวด หมวดละประมาณ 10 ถึง 13 แบบ ส่วนชื่อในวงเล็บคือชื่อหมวดภาษาอังกฤษที่ใช้ใน README ซึ่งเป็นเอกสารแนะนำโปรเจกต์

ส่วนอีก 7 หมวดที่เหลือ ได้แก่ น้ำ ไซไฟ การปะทะ การเกิดและการตาย พลังศักดิ์สิทธิ์ ธรรมชาติ และหมวดท่าโจมตีเต็มชุด (moves) ที่นำเอฟเฟกต์หลายชิ้นมาร้อยเรียงเข้าด้วยกัน รายชื่อเอฟเฟกต์ทั้งหมดดูได้ที่ catalog ของ pixelfx

เอฟเฟกต์อย่างเดียวก็เหมือนสติกเกอร์แปะ: ตัวละครต้องขยับรับด้วย

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

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

ในตัวอย่างท่าฟันของ README ดาบจะฟันโดนเป้าหมายที่ 0.06 วินาทีหลังเริ่มเอฟเฟกต์ จากนั้นทุกอย่างบนหน้าจอจะหยุดค้างไป 0.14 วินาที คนทำเกมเรียกจังหวะหยุดภาพสั้นๆ นี้ว่า hit-stop เมื่อรวมท่าง้าง จังหวะหยุดค้าง และการเซของเป้าหมายเข้าด้วยกัน ก็จะได้ความรู้สึกสะใจและมีน้ำหนักเวลาเล่นจริง ที่เรียกกันว่า Game Feel

ท่าทางของตัวละครขยับที่ 12 เฟรมต่อวินาที เพื่อให้ได้อารมณ์เหมือนแอนิเมชันวาดมือทีละเฟรม ส่วนสะเก็ดไฟ เศษหิน และควัน จะเคลื่อนไหวลื่นไหลเต็มสปีด หุ่นตัวอย่างที่ใช้ทดสอบเป็นหุ่นสีเทาขนาด 24×38 พิกเซล ที่จงใจใช้สีกลางๆ เพื่อให้สายตาผู้เล่นจับจ้องไปที่ท่าทางและสีสันของเอฟเฟกต์ได้เต็มที่

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

เปลี่ยนไฟเป็นสีน้ำเงิน แสงฮีลเป็นสีชมพู โดยไม่ต้องแก้โค้ดสักบรรทัด

ข้อดีที่ชัดเจนที่สุดของการวาดเอฟเฟกต์ด้วยโค้ดแทนไฟล์ภาพ คือปรับสีได้อิสระ ทุกเอฟเฟกต์ใน pixelfx รองรับการกำหนดชุดสีหรือ palette ที่ไล่ระดับจากมืดไปสว่าง ทำให้เราเปลี่ยนกองไฟเดิมให้ลุกโชนเป็นสีน้ำเงิน หรือเปลี่ยนแสงฮีลให้เปล่งประกายสีชมพูได้ทันที โดยไม่ต้องแก้โค้ดของเอฟเฟกต์เลยแม้แต่บรรทัดเดียว ในโปรเจกต์มีชุดสีสำเร็จรูปตั้งชื่อไว้ให้เรียกใช้ง่ายๆ เช่น fire, ice, poison, holy, neon ถ้าอยากได้ไฟสีน้ำเงิน ก็แค่ส่งพาเลตต์ PAL.ice เข้าไป

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

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

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

วิธีนำ pixelfx ไปใช้งาน: เลือกได้ 2 แนวทางตามเอนจินเกม

แนวทางไหนเหมาะที่สุด ขึ้นอยู่กับว่าเกมของคุณพัฒนาด้วยอะไร:

1. เกมบนเว็บ: เรียกใช้โค้ดตรงๆ ได้ทันที

ถ้าเกมของคุณรันบนเบราว์เซอร์ด้วย JavaScript ทั้งแบบวาดลง Canvas เปล่าๆ และแบบใช้เอนจินเกมอย่าง Phaser, PixiJS, Kaplay หรือ Three.js ก็นำโค้ดของ pixelfx ไปรันได้ตรงๆ โดยไม่ต้องลงไลบรารีอื่นเพิ่ม ติดตั้งได้ง่ายๆ ด้วยคำสั่ง npm i github:patch-gg/pixelfx หรือจะคัดลอกโฟลเดอร์ src/core พร้อมไฟล์เอฟเฟกต์ที่ต้องการไปวางในโปรเจกต์เองก็ได้

import { createFrame, clearFrame, createFx, composite } from "pixelfx";
import * as frostNova from "pixelfx/fx/ice/frost-nova";

const frame = createFrame(320, 180); // your game's pixel resolution
const img = new ImageData(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 }); // also: flip, angle, seed, palette, light...

function tick(dt) {
  fx.update(dt);
  clearFrame(frame);
  fx.draw(frame, "back"); // behind characters
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor); // color, then light added on top
  ctx.putImageData(img, 0, 0); // scale up with image-rendering: pixelated
}

จากตัวอย่างโค้ดด้านบน:

• createFx สร้างเอฟเฟกต์ (ในที่นี้คือ frost nova) ที่พิกัด x, y และรับค่าอย่าง flip, palette, seed ไปพร้อมกันได้ในคำสั่งเดียว
• ภายในลูปการทำงานของเกมหรือเกมลูป คำสั่ง fx.update(dt) จะคอยเดินเวลาของเอฟเฟกต์ไปข้างหน้า
• เรียก fx.draw 2 ครั้ง รอบแรกส่ง "back" เพื่อวาดส่วนที่อยู่หลังตัวละคร จากนั้นเรียกฟังก์ชันวาดตัวละครของเกมเราอย่าง drawCharacters() แล้วจึงเรียก fx.draw อีกรอบด้วย "front" เพื่อวาดส่วนที่อยู่หน้าตัวละคร
• ปิดท้ายด้วย composite เพื่อรวมเลเยอร์สีและเลเยอร์แสงเข้าเป็นภาพเดียว แล้วส่งให้ ctx.putImageData วาดลงแคนวาส ส่วนการขยายภาพให้ใหญ่ขึ้นโดยพิกเซลยังคมกริบ ทำได้ด้วย CSS image-rendering: pixelated

2. Godot, Unity และเอนจินอื่นๆ: เรนเดอร์เป็น Sprite Sheet

ถ้าคุณพัฒนาเกมด้วยเอนจินอย่าง Godot, Unity, GameMaker, Defold, LÖVE หรือ Bevy ให้เรนเดอร์เอฟเฟกต์ออกมาเป็น Sprite Sheet ซึ่งเป็นภาพเดียวที่เรียงทุกเฟรมของแอนิเมชันไว้เป็นตาราง ขั้นตอนนี้ขอแค่มีโปรแกรมรันโค้ดอย่าง Node.js เวอร์ชัน 18 ขึ้นไปในเครื่อง พอโคลนโปรเจกต์ลงมาแล้วก็สั่งรันในโฟลเดอร์ได้ทันทีโดยไม่ต้องติดตั้งอะไรเพิ่ม:

git clone https://github.com/patch-gg/pixelfx
cd pixelfx
node tools/render.mjs ice/frost-nova --sheet

เมื่อรันคำสั่งเสร็จ คุณจะได้ไฟล์ 2 ชิ้นในโฟลเดอร์ records/ice/frost-nova/:

1. frost-nova.png: ไฟล์ภาพพื้นหลังโปร่งใสที่เรียงทุกเฟรมของแอนิเมชันไว้เป็นตาราง
2. frost-nova.json: ไฟล์ข้อมูลที่บอกพิกัดกรอบ ระยะเวลาของแต่ละเฟรม ค่า fps การวนซ้ำ และจุดยึดหรือ pivot ของเอฟเฟกต์

ไฟล์ JSON ที่ได้ใช้ฟอร์แมตเดียวกับโปรแกรมวาดภาพพิกเซลอย่าง Aseprite ระบบนำเข้าไฟล์ของทั้ง Godot และ Unity จึงอ่านได้ทันที และระบบโหลดภาพ atlas ของ Phaser ก็รองรับไฟล์นี้เช่นกัน

ถ้าอยากเรนเดอร์ทั้งหมวดในทีเดียว ให้ใส่ชื่อหมวดแทนชื่อเอฟเฟกต์ เช่น node tools/render.mjs fire --sheet ส่วนถ้าจะส่งออกทุกเอฟเฟกต์ในคลังพร้อมกัน ก็รันคำสั่ง node tools/sheets.mjs แล้วไฟล์ทั้งหมดจะไปอยู่ในโฟลเดอร์ sheets/

ถ้าอยากลองเฉดสีใหม่ก่อนเรนเดอร์ ก็กำหนด palette ผ่านออปชัน --opts ได้ทันที เช่น คำสั่งด้านล่างจะเรนเดอร์คบไฟธรรมดาให้เป็นไฟโทนสีน้ำเงินในไฟล์ GIF ไว้เปิดพรีวิว ทั้งนี้เครื่องของคุณต้องติดตั้งโปรแกรมจัดการวิดีโออย่าง ffmpeg ไว้ด้วย:

node tools/render.mjs fire/torch --gif --opts '{"palette": ["#102","#215","#43a","#8cf","#cff","#fff"]}'

ข้อแนะนำเวลา Import เข้าเอนจินเกม:

• ตั้งจุดยึดหรือค่า Pivot ตามค่า meta.pixelfx.pivot ที่ระบุไว้ใน JSON เช่น ตำแหน่งเท้า
• เลือกโหมดการกรองภาพหรือ Texture Filter เป็นแบบ Nearest-Neighbor เพื่อรักษาขอบพิกเซลให้คมชัด ไม่เบลอ
• ปิดการบีบอัดไฟล์ภาพโดยเลือกเป็น No Compression
• ตั้งความเร็วในการเล่นแอนิเมชันตามค่า meta.pixelfx.fps

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

สกิล pixelfx: สอน Claude Code ให้ค้นหาของเดิมก่อนเขียนใหม่

ติดตั้งสกิลเสริมนี้ลงใน Claude Code ได้ง่ายๆ ด้วย 2 คำสั่งนี้:

/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfx

หรือจะคัดลอกโฟลเดอร์ skills/pixelfx ไปวางไว้ที่ ~/.claude/skills/ เองก็ได้ จากนั้นก็สั่งงานด้วยภาษาพูดธรรมดาได้ทันที ตัวอย่างคำสั่งจาก README มีดังนี้:

• "ใส่เอฟเฟกต์ frost nova ให้กับท่าไม้ตายของตัวละครนักเวทในเกมเรา"
• "ทำเอฟเฟกต์ประกายตอนเก็บเหรียญมา 5 แบบ แล้วคัด 2 แบบที่ดีที่สุดมาให้ดูหน่อย"
• "export เอฟเฟกต์หมวดไฟและระเบิดเป็น sprite sheet สำหรับใช้ใน Godot"
• "เอฟเฟกต์ตอนโดนฟันตัวนี้ดูลอยๆ ช่วยปรับให้ดูหนักแน่นขึ้นที"

เมื่อได้รับคำสั่ง สกิลจะค้นหาเอฟเฟกต์ที่มีอยู่แล้วในคลังด้วยคำสั่ง node tools/list.mjs <words> ก่อนลงมือเขียนโค้ดใหม่ทุกครั้ง เพราะ SKILL.md ระบุไว้ชัดเจนว่าคำขอส่วนใหญ่มักมีเอฟเฟกต์พื้นฐานรองรับอยู่แล้ว แค่ปรับออปชันเพิ่มก็ใช้ได้ เช่น ถ้าขอไฟสีน้ำเงิน ระบบก็จะนำเอฟเฟกต์ไฟเดิมมาจับคู่กับพาเลตต์ PAL.ice ได้เลยโดยไม่ต้องเขียนไฟล์โค้ดใหม่

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

นอกจากนี้ SKILL.md ยังมีตารางจับคู่อาการกับวิธีแก้ที่เป็นรูปธรรมไว้รองรับคำขอกว้างๆ เชิงความรู้สึกอย่าง "เอฟเฟกต์ดูลอยๆ" ตัวอย่างเช่น:

• เอฟเฟกต์ดูลอย ไร้แรงกระแทก: แก้ด้วยการปรับจังหวะให้พุ่งเข้าเร็วแล้วค่อยๆ ผ่อนช้าลงตอนท้าย (Fast In, Slow Out) แทรกเฟรมสีขาวสว่างวาบ 1 ถึง 2 เฟรม และตัดความยาวของทั้งเอฟเฟกต์ให้สั้นกระชับขึ้น
• ท่าฟันดูไม่มีน้ำหนัก: แก้ด้วยการเพิ่มท่าง้างไปในทิศตรงข้ามกับทิศที่จะฟาด ยืดจังหวะหยุดค้างภาพหรือ Hit-stop ให้นานขึ้นได้สูงสุด 0.2 วินาที และเพิ่มเอฟเฟกต์เขย่าหน้าจอ

พรอมต์รอบเดียวจบ ได้แค่งานระดับกลางๆ: เบื้องหลังวิธีคิดแบบ 'ร่าง ดู แล้วแก้'

กระบวนการ "ร่าง ดู แล้วแก้" ของ pixelfx มีที่มาชัดเจน โดย README บอกไว้ตรงๆ ว่าต่อยอดมาจากบทความ How to make (good) pixel art effects with Claude ของ Hugo Duprez นักพัฒนาเกมที่เปิดโค้ดเอฟเฟกต์ pixel art ของตัวเองให้ทุกคนนำไปใช้

บทความดังกล่าวเผยแพร่เมื่อวันที่ 28 ตุลาคม และเปิดเรื่องแบบไม่อ้อมค้อมว่า ทุกวันนี้หลายคนมักชวนให้เชื่อว่าการทำเกมด้วย AI แค่มีไฟล์ skill.md หรือก๊อปปี้พรอมต์สำเร็จรูปมาวางครั้งเดียว ก็จะได้ผลงานชั้นเยี่ยมออกมาทันที เขาสวนกลับสั้นๆ ว่า "ไม่จริงเลย" โดยเฉพาะกับงาน pixel art ถ้าอยากได้งานที่ยอดเยี่ยมจริงๆ ยังไงก็ต้องลงแรงขัดเกลา

ฟังดูอาจจะย้อนแย้งเล็กน้อย เพราะตัว pixelfx เองก็มีสกิลแนบมาให้ใช้งาน แต่สิ่งที่อยู่ใน SKILL.md คือ "กระบวนการทำงาน" ที่พา AI ไปสู่ผลลัพธ์ที่ดี ไม่ใช่พรอมต์วิเศษสำเร็จรูป ประโยคหนึ่งในไฟล์สรุปไว้ชัดเจนว่า "พรอมต์รอบเดียวได้เอฟเฟกต์ระดับกลางๆ ส่วนการร่าง เรนเดอร์ออกมาเปิดดู แล้วแก้ จะได้เอฟเฟกต์ที่ดี"

หลักคิดสำคัญในบทความสรุปได้เป็น 3 ข้อ:

1. Code is clay (ปั้นโค้ดเหมือนปั้นดินน้ำมัน): อธิบายไอเดียและทิศทางภาพที่ต้องการแบบกว้างๆ แล้วสั่งให้ผู้ช่วย AI อย่าง AI Agent ร่างออกมาสัก 5 ถึง 10 แบบ โดยเรนเดอร์เป็นคลิปสั้นเก็บไว้ในโฟลเดอร์ /records จากนั้นเปิดดูทีละคลิป เจอแบบที่รู้สึกว่า "มาถูกทางแล้ว" เมื่อไหร่ ค่อยหยิบแบบนั้นมาลงรายละเอียดต่อ ทำวนซ้ำไปเรื่อยๆ จนได้ภาพตรงกับที่คิดไว้ในหัว

2. Trust your eyes (เชื่อสายตาของตัวเอง): งานจะออกมาพอใช้หรือยอดเยี่ยม ขึ้นอยู่กับว่าสายตาเราตั้งมาตรฐานไว้สูงแค่ไหน เขายกตัวอย่างเครื่องยิงจรวดแบบแยกหัวรบอย่าง MIRV ในเกม Destroy Any Website ของเขาเอง เวอร์ชันแรกเสร็จไวมากและใช้งานได้เลย แต่เขาเลือกนั่งปรับแก้ต่ออีกหลายชั่วโมงจนได้ภาพที่สมบูรณ์แบบตามที่จินตนาการไว้ SKILL.md นำหลักนี้มาใช้ตรงๆ โดยกำหนดให้เทียบผลงานกับ เอฟเฟกต์ต้นแบบบน Sprite Fusion เสมอ ถ้างานต้นแบบมีรายละเอียด แสงเงา หรือความมีชีวิตชีวามากกว่าที่ขนาดภาพเท่ากัน นั่นแปลว่างานของเรายังไม่เสร็จ

3. What are your references? (มีภาพอ้างอิงที่ดี): เขาแนะนำให้ปิดหน้าจอคอมพิวเตอร์ แล้วออกไปหาแรงบันดาลใจจากงานออกแบบ ภาพยนตร์ ภาพถ่าย และศิลปะแขนงต่างๆ รวมถึงเล่นเกมในฐานะคนที่ตั้งใจเข้าไปศึกษา ไม่ใช่แค่เล่นเพื่อความสนุกอย่างเดียว ตัวอย่างเช่น เขาใช้เวลาศึกษาเอฟเฟกต์ในเกม Path of Exile 2 เพื่อดูจังหวะความสวยงาม และแกะวิธีทำเอฟเฟกต์แตกกระจายกับเปลวไฟจาก Arc Raiders ขณะเดียวกัน SKILL.md ก็วางกฎเหล็กไว้ชัดเจนว่า ลวดลายทั่วไปใช้ได้ แต่ห้ามสร้างสไปรต์ ตัวละคร หรือโลโก้ของเกมใดเกมหนึ่งขึ้นมาใหม่เด็ดขาด

จุดที่อาจชวนสับสนเล็กน้อยคือจำนวนงานร่าง เพราะบทความแนะนำให้ร่าง 5 ถึง 10 แบบเป็นคลิปสั้น ขณะที่ SKILL.md แนะนำให้ร่าง 3 ถึง 5 แบบที่แตกต่างกันอย่างสิ้นเชิง เรนเดอร์เป็น Contact Sheet แล้วแก้อย่างน้อย 3 รอบ แม้ตัวเลขจะไม่ตรงกัน แต่ทั้งคู่ใช้หลักการเดียวกัน คือต้องร่างทางเลือกที่หลากหลายออกมาก่อน แล้วค่อยเลือกแบบที่ดีที่สุดไปขัดเกลาต่อ

ถ้าจะสร้างเอฟเฟกต์ใหม่เอง วงจร "ร่าง ดู แล้วแก้" จะเหลือแค่ 3 คำสั่งในเทอร์มินัล:

node tools/new.mjs arcane/my-spell
node tools/render.mjs arcane/my-spell
node tools/check.mjs arcane/my-spell

• new.mjs: สร้างไฟล์เอฟเฟกต์เริ่มต้นที่พร้อมรัน
• render.mjs: เรนเดอร์ Contact Sheet ไปไว้ที่ records/arcane/my-spell/contact.png เพื่อให้เราเปิดดูภาพตัวอย่างด้วยตา
• check.mjs: ตรวจสอบว่าพิกเซลวาดล้นกรอบหรือไม่ การวนลูปมีรอยสะดุดไหม มีการสุ่มค่าที่ไม่ได้ผูกกับ seed หรือไม่ และมีเฟรมไหนที่เรนเดอร์ช้าผิดปกติหรือเปล่า

หลังตรวจเสร็จ ก็แค่วนกลับไปดูภาพ แก้จุดที่แย่ที่สุด แล้วเรนเดอร์ใหม่จนกว่าจะได้ผลที่พอใจ

สำหรับท่าโจมตีที่มีตัวละครร่วมแสดง ดูแค่ภาพนิ่งอาจยังไม่พอ เพราะข้อผิดพลาดหรือจังหวะการเคลื่อนไหวที่ผิดธรรมชาติมักมองไม่เห็นในภาพนิ่งที่ตัดมาเป็นช่วงๆ คำสั่ง node tools/act.mjs arcane/my-spell จะแสดงพรีวิวการเคลื่อนไหวต่อเนื่องที่ 12 เฟรมต่อวินาทีให้ดูได้ทันที

ข้อควรรู้ก่อนนำไปใช้ในเกมที่จะวางขาย

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

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

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

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

ที่มา:

• โปรเจกต์ pixelfx บน GitHub
• เอกสารทางการของ pixelfx skill
• บทความ How to make (good) pixel art effects with Claude จาก Hugo Duprez