ฉันจะออกแบบกระเบื้องแบบต่อเนื่องที่ดีได้อย่างไร


33

ฉันมีปัญหาในการออกแบบกระเบื้องเพื่อให้เมื่อประกอบเข้าด้วยกันแล้วจะไม่ดูเหมือนกระเบื้อง แต่ดูเหมือนเป็นเนื้อเดียวกัน ตัวอย่างเช่นดูภาพด้านล่าง:

ป้อนคำอธิบายรูปภาพที่นี่

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

ป้อนคำอธิบายรูปภาพที่นี่ (ฉันนำสิ่งนี้มาจากคำถาม GDSE อีกข้อขอโทษไม่สำคัญกับเกม แต่มันพิสูจน์จุดของฉันและจริง ๆ แล้วมีการออกแบบไทล์ที่ดีกว่าที่ฉันจัดการอยู่ดี)

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

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


น่าสังเกต: ในภาพหน้าจอที่คุณเชื่อมโยงอาจมีแผ่นหญ้า 2 แผ่นขึ้นไปปรากฏในรูปแบบกระดานหมากรุก Chrono ทริกเกอร์มีความหลากหลายของกระเบื้องหญ้า
doppelgreener

1
ฉันยังขอแนะนำให้ทำค้นหาอย่างรวดเร็วสำหรับRPG tilesets พวกเขาไม่ได้อยู่ในอันดับต้น ๆ ของกระเบื้อง แต่คุณสามารถเห็นตัวอย่างของการเปลี่ยนแผ่น
Mike Cluck

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

2
มีอีกบทความที่ดีเกี่ยวกับเรื่องนี้ที่นี่: gas13.ru/v3/tutorials/sywtbapa_obliterating_grid.php
Tesserex

1
ขอบคุณโดยเฉพาะอย่างยิ่งสำหรับการกวดวิชาที่ผ่านมานี้มันตอบคำถามอื่น ๆ อีกมากมายที่ฉันมี: p
Cristol.GdM

คำตอบ:


20

คำเตือน: ฉันไม่ใช่ศิลปินดังนั้นนี่เป็นเพียงความรู้ด้านศิลปะของโปรแกรมเมอร์

คุณมีเอฟเฟกต์กริดในตัวอย่างของคุณส่วนใหญ่เป็นเพราะหญ้าที่มีน้ำหนักเบาบนขอบด้านล่างของกระเบื้อง:

ป้อนคำอธิบายรูปภาพที่นี่

รายละเอียดเช่นที่สามารถจดจำได้ง่ายให้คุณรู้ทันทีว่าคุณกำลังเล่นแผ่นเดียวกันซ้ำ

ตรวจสอบบทความนี้ซึ่งมีเคล็ดลับที่มีประโยชน์มากมายเกี่ยวกับเรื่องนี้ โดยเฉพาะอย่างยิ่งการใช้ Photoshop:

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

นอกจากนี้ในภาพที่คุณเชื่อมโยงดูเหมือนว่าจะมีปัญหาการใช้งานเช่นกันเพราะเมื่อซูมเข้ามาในภาพคุณจะเห็นช่องว่างระหว่างไทล์:

ป้อนคำอธิบายรูปภาพที่นี่


3
+1 ที่ซ้ำกันและกระจกดูเหมือนว่าจะทำงานได้ดีสำหรับฉันนอกจากนี้ยังมีเครื่องมือที่ช่วยในเรื่องนี้: นี่เป็นหนึ่งในบทเรียนมากมาย - photoshoptextures.com/texture-tutorials/se Seamless-textures.htm - คำหลักนั้นโดยทั่วไปแล้ว
Oskar Duveborn

ตกลงฉันลอง (ทั้งคำตอบแบบฝึกหัดและความคิดเห็นแบบฝึกหัด) และผลลัพธ์ก็ดีขึ้นเยอะและการรู้คำว่า "พื้นผิวที่ไร้รอยต่อ" จะช่วยได้ในอนาคตดังนั้นขอบคุณ!
Cristol.GdM

@OskarDuveborn Nice link ภาพสุดท้ายแสดงให้เห็นอย่างชัดเจนถึงความแตกต่างที่เกิดขึ้น!
David Gouveia

15

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

สังเกตเห็นในภาพจาก Chrono Trigger ที่กึ่งกลางด้านล่างว่ามันมีสีน้ำตาลครึ่ง (ดิน), สีเขียวครึ่ง (หญ้า), กับแผ่นหญ้าสีเข้มกว่า นอกจากนี้ยังใช้หญ้าและหินที่มีน้ำหนักเบาเพื่อเพิ่มความแปรปรวนตามธรรมชาติ (กระเบื้องโปร่งใสที่มีหินหรือหญ้าแสงที่ด้านบนของแผ่นกระเบื้องหญ้าอาจ?)


5
+1 ช่วงการเปลี่ยนภาพมีความสำคัญ! กฎทอง: ทำการเปลี่ยนไทล์บนพื้นฐานที่จำเป็นต้องมี คุณใส่หิมะข้างหญ้าหรือยัง? ไม่มี? จากนั้นคุณไม่ควรมีการเปลี่ยนหญ้าเป็นหิมะ คุณเพิ่งใส่ลาวาข้างดินเป็นครั้งแรกหรือไม่? ยอดเยี่ยมเวลาในการสร้างชุดของการเปลี่ยนไทล์สำหรับสิ่งนั้น
doppelgreener

11

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

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

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

ไทล์ย่อยทำเครื่องหมายด้วยสีแดง



6

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

ตอนนี้ไทล์จะมีลักษณะดังนี้:

1 2
3 4

ใส่ชิ้นที่ 2 ทางด้านซ้ายของชิ้นที่ 1 ทำเช่นเดียวกันกับ 3 และ 4 ตอนนี้กระเบื้องจะมีลักษณะดังนี้:

2 1
4 3

ตอนนี้ย้ายชิ้นล่างทั้งสองขึ้นด้านบนชิ้นด้านบน คุณเหลืออยู่กับสิ่งนี้:

4 3
2 1

สมมติว่ากระเบื้องของคุณคือ 32x32 แต่ละชิ้นจะเป็น 16x16 ตอนนี้คุณลบตรงกลางสมมติว่า 22x22 พิกเซล (ขึ้นอยู่กับคุณ) โดยทิ้งเฟรมของไทล์ไว้ เฟรมนี้จะเรียงต่อกันอย่างสมบูรณ์แบบด้วยตัวคุณเองและคุณถูกทิ้งให้เติมช่องว่างตรงกลางด้วยเอกลักษณ์เช่นกรวดหินก้อนหญ้าที่สูงขึ้นหรืออะไรก็ตาม

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


0

วิธีที่ฉันออกแบบกระเบื้องของฉันเป็นเช่นนี้:

  1. ทำแผ่นกระเบื้องร่างของคุณ
  2. คัดลอกไทล์ของคุณลงในรูปภาพที่ใหญ่กว่า 3X ในทิศทาง X an Y
  3. คัดลอกไทล์ของคุณเพื่อให้มี 9 ภาพในไทล์
  4. คุณควรจะสามารถดูได้ว่าไทล์แต่ละอันเริ่มต้นและสิ้นสุดสิ่งที่คุณต้องทำคือใช้เครื่องมือเบลอ (ฉันใช้ GIMP สำหรับเรื่องนี้) และเบลอขอบเพื่อให้ดูเหมือนว่าไทล์ใหญ่แผ่นเดียว
  5. จากนั้นคัดลอกไทล์ตรงกลางออกจากภาพแล้วคุณมีไทล์สุดท้ายของคุณ

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


1
-1 ในขั้นตอนที่ 4 การเบลอภาพไม่ได้ใช้กับทั้งสองด้าน (เช่นการเบลอที่ด้านล่างของไทล์กลางไม่ตรงกับการเบลอที่ด้านล่างของไทล์ด้านบน) ดังนั้นผลลัพธ์ของคุณจึงไม่ราบรื่น ออฟเซ็ตเป็นเครื่องมือที่ดีกว่ามากในการรับรองความราบรื่น
doppelgreener

ถ้าคุณทำอย่างถูกต้องมันจะดูไร้รอยต่อถ้าคุณทำมันอย่างสม่ำเสมอบนตะเข็บทั้งหมดมันก็จะออกมาดีถ้าคุณลดแรงกดบนเครื่องมือเบลอคุณสามารถปรับแต่งขอบได้อย่างละเอียดเพื่อให้ดูเหมือนกับทุกด้าน
John
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.