Pixel Editor

สไปรต์และ tilemap ทีละพิกเซล: เฟรม, onion skinning, พาเลท, การชนกันต่อไทล์, normal map, 9-slice และการส่งออก GIF หรือ Aseprite

สรุปในประโยคเดียว#

ตัวแก้ไขสไปรต์และ tilemap ที่สร้างมาให้ทำงานได้สบายทั้งที่ขนาด 32×32 และที่ 1024×1024 พร้อมเฟรมแอนิเมชันและเครื่องมือด้านสีที่เข้าใจพาเลท

การจัดวางหน้าจอ#

Pixel Editor: คอลัมน์เครื่องมือ, แคนวาส, เลเยอร์, ไทม์ไลน์เฟรม และแถบพาเลท

แถบเมนูFile · Edit · View · Plugins
แท็บโหมดSprite และ Tilemap
แถบเครื่องมือNew, เลิกทำ/ทำซ้ำ, ขนาดแคนวาส, crop, layer flatten, พลิกแนวนอนและแนวตั้ง, กริด, นำเข้า, ส่งออก, Save
แถวตัวเลือกขนาดแปรง, รูปทรงแปรง, ความทึบ, split view, และพรีเซ็ต
คอลัมน์ซ้ายpencil, shapes, fill, gradient, text, selection, eyedropper, colour pair, palette
กลางแคนวาส พร้อมค่าอ่านเล็ก ๆ ของเครื่องมือและสีปัจจุบัน และ Preview ที่ 1:1
ขวาLayers แล้วตามด้วย Effects, Normal map, Reference และ Modes
ล่างไทม์ไลน์เฟรม แล้วตามด้วยแถบพาเลท
แถบสถานะขนาดแคนวาส, เลเยอร์ที่ใช้งานอยู่, ซูม

สิ่งที่คุณทำที่นี่#

การวาด#

แคนวาสพิกเซลที่ระดับซูมทำงาน พร้อมกริด

Space + ลากเพื่อ pan, ลูกกลิ้งเมาส์เพื่อซูม, 0 รีเซ็ตมุมมอง แปรงมีขนาดและ รูปทรง (สี่เหลี่ยมเป็นค่าเริ่มต้น) และความทึบ แผง preview แสดงสไปรต์ที่ 1:1 ขณะที่คุณทำงานแบบซูมเข้า ซึ่งเป็นมุมมองเดียวที่ซื่อสัตย์ต่อสไปรต์พิกเซลจริง ๆ

เลเยอร์#

มีชื่อ จัดลำดับใหม่ได้ พร้อม blend mode และความทึบของตัวเอง บวกกับแท็กสีและ ช่องกรองเมื่อมีจำนวนมาก Effects ใช้งานแบบไม่ทำลายข้อมูล

แอนิเมชัน#

ไทม์ไลน์ ที่ด้านล่างคือแถบของเฟรม เพิ่ม ทำซ้ำ ลบ จัดลำดับใหม่ ตั้ง duration เป็นมิลลิวินาที ต่อเฟรม เล่นเดินหน้า ถอยหลัง หรือ ping-pong ค่าอ่าน จะบอกว่ารวมแล้วได้เท่าไหร่ เช่น 1 frame • 100 ms • ~10 fps

Onion แสดงเฟรมข้างเคียงแบบจาง ๆ ใต้เฟรมปัจจุบัน นี่คือวิธีป้องกันไม่ให้ walk cycle เพี้ยนไปเรื่อย ๆ

สี#

แถบเครื่องมือของ Pixel: เครื่องมือวาดและสีปัจจุบัน

แถบพาเลท: พาเลทที่ใช้งานอยู่, ล่าสุด, เฉด, harmony และ ramp

แถบพาเลทเป็นส่วนที่คุ้มค่าแก่การเรียนรู้:

Paletteชุดที่ใช้งานอยู่ พร้อมตัวนับและ + Add
Recentสิ่งที่คุณเพิ่งเลือกไป
Shadesเฉดจากอ่อนไปเข้มที่สร้างจากสีปัจจุบัน
Harmonyคำแนะนำแบบ complementary, triadic และ analogous
Rampเฉดสีที่คุณสร้างและเก็บไว้เอง

สีปัจจุบันแก้ไขได้เป็นค่า hex

Tilemap#

แท็บ Tilemap เปลี่ยนจากการวาดสไปรต์ไปเป็นการจัดวางเป็นไทล์ ผลลัพธ์จะไปที่ Engine ซึ่งมี tilemap editor ของตัวเองสำหรับตัวด่านจริง ๆ

Normal map#

ส่วน Normal map สร้าง normal map จากสไปรต์ ทำให้สไปรต์ 2D ถูกจัดแสงได้ใน Engine แทนที่จะแบนราบตลอดไป

Reference#

วางภาพลงในส่วน Reference แล้วมันจะอยู่หลังแคนวาสขณะที่คุณวาดทับ

แผงต่าง ๆ#

เก้าแผง และสี่แผงสุดท้ายคือสิ่งที่เปลี่ยนสไปรต์ให้กลายเป็น asset ของเกม:

Tool Paletteเครื่องมือต่าง ๆ
Layersสแตกเลเยอร์
Timelineเฟรมแอนิเมชัน
Referenceภาพหลังแคนวาส
Effectsเอฟเฟกต์แบบไม่ทำลายข้อมูลบนเลเยอร์
Tilesetสร้าง tileset จากแคนวาส ที่ขนาดไทล์ที่เลือกไว้
Tilemapจัดวางไทล์เหล่านั้นเป็นแผนที่
Collisionsรูปทรงการชนกันต่อไทล์
Normal Mapสร้างและแก้ไข normal map

Tileset และ tilemap#

แผง Tileset ตัดแคนวาสออกเป็นไทล์ (16 พิกเซลเป็นค่าเริ่มต้น) ส่วนแผง Tilemap จัดวางไทล์เหล่านั้นเป็นแผนที่พร้อมเลเยอร์ และปรับขนาดมันได้

Tilemap บันทึกเป็น .tilemap และส่งออกได้สองแบบ: as one file หรือ separately: แผนที่เป็น JSON และแต่ละ tileset เป็นภาพของตัวเอง ซึ่งเป็นสิ่งที่ เอนจินภายนอกมักต้องการ

Collisions#

แต่ละไทล์มีรูปทรงการชนกัน วาดทับบน tileset แทนที่จะประกาศไว้ในโค้ด:

Fullทั้งไทล์ชนกัน
Noneผ่านทะลุได้
Top / Bottom / Left / Right halfการชนกันแบบครึ่งเดียว
Slope up / Slope downการชนกันแบบเอียง

Show Collisions แสดงทับให้เห็น และชุดทั้งหมดส่งออกเป็น JSON ทำสิ่งนี้ตรงนี้ หมายความว่า Engine จะได้รับ tilemap ที่รู้อยู่แล้วว่า ผู้เล่นเดินตรงไหนได้บ้าง

Normal map#

Generate Normal Map สร้าง normal map จากสไปรต์ พร้อม strength จากนั้น Normal Map Editor ให้คุณวาดทิศทางของ normal ด้วยมือ (P) ซึ่งเป็นทางเดียว ที่จะแก้จุดที่การสร้างอัตโนมัติทำผิดพลาด

9-slice และ pivot#

9-Slice guides ทำเครื่องหมายพื้นที่ที่ยืดได้ของสไปรต์ UI และ Pivot / Origin กำหนดจุดที่สไปรต์หมุนและยึดรอบ ทั้งสองอย่างจะติดไปกับสไปรต์ เข้าสู่ Engine ด้วย

สมมาตร#

Mirror X และ Mirror Y วาดทั้งสองด้านพร้อมกัน: แนวนอน, แนวตั้ง, ทั้งคู่, หรือแบบรัศมี

Colour ramp และพาเลท#

โมดัล Color Ramp สร้างเฉดสีอย่างเป็นระบบแทนที่จะกะด้วยสายตา และพาเลทนำเข้า จาก .gpl (ฟอร์แมตพาเลทของ GIMP ที่พาเลทพิกเซลอาร์ตส่วนใหญ่มาในรูปแบบนี้)

การส่งออก#

ฟอร์แมตสำหรับ
PNGเฟรมเดียว
GIFแอนิเมชัน ใช้ได้ทุกที่
APNGแอนิเมชัน พร้อมอัลฟาจริง
Asepriteกลับเข้า Aseprite เลเยอร์ยังครบ
Atlas / sprite sheetสำหรับเกมเอนจิน
.tilemapแผนที่ ทั้งไฟล์เดียวหรือแยกเป็น JSON + ภาพ

ไฟล์ที่อ่านและเขียนได้#

รูปแบบเนทีฟ.editor
นำเข้า.png, .jpg, .aseprite, .tilemap, .gpl (พาเลท)
ส่งออก.png, .gif, APNG, .aseprite, sprite atlas, .tilemap (รวมหรือแยก), collision JSON

การส่งงานไปยังสตูดิโออื่น#

สร้าง pixel art รับ pixel art และภาพ

pixel art ถูกรับโดย Inkwell, Composer, Animator, Matter และ Engine: sprite sheet หนึ่งชุดไปเข้าเกมได้เลยโดยไม่ต้องผ่านไฟล์อ้อมไปอ้อมมา

การทำงานร่วมกับผู้อื่น#

Pixel Editor ซิงค์ ทีละการกระทำ: ข้อมูลฉาก, asset, แอนิเมชัน และสคริปต์

ข้อจำกัดและปัญหาที่พบบ่อย#

  • ซูมไม่ใช่ความละเอียด แถบสถานะแสดงขนาดแคนวาสจริง ส่วน Preview แสดงมันที่ 1:1
  • แปรงนุ่มไม่ใช่แปรงพิกเซล ความทึบต่ำกว่า 100% จะทำให้ขอบมี anti-alias ซึ่ง มักไม่ใช่สิ่งที่คุณต้องการบนสไปรต์
  • duration ของเฟรมเป็นค่าต่อเฟรม ไม่ใช่ต่อแอนิเมชันทั้งชุด walk cycle 12 เฟรมที่ 100 ms ต่อเฟรมจะวิ่งที่ ~10 fps ไม่ว่าเฟรมอื่นจะเป็นอย่างไร