ฉันจะสร้างสปอตไลต์ 2D หลาย ๆ ตัวได้อย่างไร


12

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

Spotlight เดียว - งาน

สปอตไลท์เอฟเฟกต์พร้อมสปอตไลต์เดียว

ปัญหาที่ฉันพบคือเทคนิคนี้ไม่ขยายไปถึงหลายเอนทิตี หากฉันซ้อนทับภาพสปอตไลท์อื่นฉันพบปัญหาหลายอย่าง นี่เป็นภาพหน้าจอจำลอง:

สปอตไลหลายตัว = ปัญหา

สปอตไลท์เอฟเฟกต์พร้อมไฟสปอร์ตไลท์สองชุด

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

ความคิดใด ๆ


ความพยายามอย่างต่อเนื่อง

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

แนวทางความโปร่งใส

ดังที่ได้อธิบายไว้ข้างต้นปัญหาคืออัลฟ่าผสมภาพนี้กับภาพอื่นจะไม่สร้างเอฟเฟกต์ที่ต้องการ แต่มันจะผลิตสิ่งนี้:

ซ้อนทับวงกลมสองวงโปร่งใส

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

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

หน้ากากโปร่งใส

ดูเหมือนว่าโซลูชันจะใช้หน้ากากโปร่งใสที่ใช้ประโยชน์จากความโปร่งใส บางสิ่งเช่นนี้: (สีเขียว = โปร่งใส)

หน้ากากโปร่งใสด้วยความโปร่งใส

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

หน้ากากโปร่งใสสองหน้าพร้อมความโปร่งใส

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


เมื่อคิดดูแล้วฉันควรจะย้ายมาสก์ที่มีความโปร่งใสไปรอบ ๆ และนำไปใช้กับพื้นผิวสีดำขนาดใหญ่ ไม่มีความคิดว่าจะทำอย่างไร
Cameron Fredman

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

ฉันใช้ AndEngine เป็นเฟรมเวิร์กและการผสมส่วนใหญ่เกิดขึ้นเบื้องหลังแม้ว่าจะมี"setBlendFunction ()"ให้ใช้งาน
Cameron Fredman

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

แม้ว่าเธรดนั้นดูเหมือนจะแก้ไขปัญหาของคุณตั้งแต่แรกคุณมีเวอร์ชันที่มีการเปลี่ยนแปลงนั้นหรือไม่
dennmat

คำตอบ:


3

โดยแนวคิดแล้วการแก้ปัญหาสำหรับสปอตไลต์หลายครั้งประกอบด้วย

  1. เริ่มต้นด้วยอาร์เรย์สีดำสนิทเพื่อเก็บค่าแสงสำหรับแต่ละพิกเซลในฉาก
    • ซีโร่จะแสดงพื้นที่ของภาพโดยไม่มีแสงใด ๆ
    • 100% จะแสดงพื้นที่ซึ่งอิ่มตัวด้วยแสงธรรมชาติอย่างสมบูรณ์
    • หากคุณต้องการจินตนาการคุณสามารถมีค่าสูงกว่า 100% (เช่น 200%) แทนพื้นที่ของภาพที่มีขนาดใหญ่เกินไปและทำให้ทุกอย่างกลายเป็นพิกเซลสีขาวที่เบลอ กังวลในภายหลังและเพียงกำหนดค่าระหว่าง 0-100% ในขณะนั้น
  2. สำหรับแต่ละแหล่งกำเนิดแสงไม่ว่าจะอยู่ภายในหน้าจอหรือใกล้กับขอบที่รัศมีของมันจะเพิ่มให้กับแสงเพิ่มค่าแสงจากแหล่งกำเนิดแสงนั้นไปยังอาร์เรย์ของค่าแสงสำหรับพิกเซลของฉาก
  3. ใช้ light-value-array ที่เกิดขึ้นเพื่อแก้ไขพิกเซลสำหรับฉากของคุณเช่น:
    • พิกเซลที่สว่างด้วยแสง 0% เป็นสีดำ
    • พิกเซลที่สว่างด้วยแสง 100% เป็นสีปกติ
    • พิกเซลอื่น ๆ เป็นส่วนสีระหว่างทาง
    • คุณดูเหมือนจะรู้ขั้นตอนนี้แล้วโดยตัดสินจากภาพหน้าจอของคุณ

เคล็ดลับคือการเข้าใจว่าการผสมอัลฟ่าสามารถทำหนึ่งในขั้นตอนเหล่านี้ได้ การผสมอัลฟ่านั้นหมายถึงการใช้แผนที่ / ภาพอัลฟ่าเพื่อปรับเปลี่ยนพิกเซลของภาพหรือพื้นผิวด้วยวิธีง่าย ๆ มันมักจะหมายถึงว่ามันจะเป็นชุดของฟังก์ชั่นที่รวดเร็วหรือใช้งานกับคำสั่งฮาร์ดแวร์พิเศษเพื่อทำให้มันรวดเร็ว คุณสามารถทำได้ด้วยอาร์เรย์ปกติและคำสั่งภาษาปกติ แต่การใช้ฟังก์ชันไลบรารี alpha / blending พิเศษน่าจะดีกว่า ... และจะไม่มีข้อบกพร่อง บางครั้งนี่หมายถึงการทำให้พิกเซลโปร่งใสบางส่วน แต่ในกรณีของคุณสิ่งนี้จะหมายถึง:

  • การเพิ่มค่าอัลฟาให้กับแต่ละพิกเซลเพื่อสร้างอาร์เรย์ของแสงจาก # 1
  • ใช้ light-value-array จาก # 1 เพื่อแก้ไขสีสุดท้ายสำหรับพิกเซลจากขั้นตอนที่ 3

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


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