วิธีการใช้พื้นที่ขอบนุ่มกับอนุภาค

เกมของฉันสร้างขึ้นโดยใช้ Phaser แต่คำถามตัวเองนั้นไม่เชื่อเรื่องพระเจ้า

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

ขอบแข็งดูไม่ดี ฉันต้องการปรับปรุงโดยการทำสองสิ่ง: 1. ทำให้พื้นที่เติมรูปหลายเหลี่ยมมีขอบที่อ่อนนุ่มและผสมผสานเป็นพื้นหลัง 2. ให้เศษบางส่วนออกจากพื้นที่รูปหลายเหลี่ยมเพื่อไม่ให้ถูกตัดตรงกลางและพื้นที่ไม่มีเส้นตรง

ตัวอย่าง (mockup):

ฉันคิดว่า 1 สามารถทำได้โดยการทำให้รูปหลายเหลี่ยมเบลอ แต่ฉันไม่แน่ใจว่าจะทำอย่างไรกับ 2

คุณจะดำเนินการเกี่ยวกับเรื่องนี้อย่างไร?

1. หากคุณต้องการบางสิ่งที่ใกล้เคียงกับแบบจำลองของคุณฉันจะใช้อนุภาค (มันไม่จำเป็นต้องเป็นระบบอนุภาคแบบเป่าเต็ม)

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

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

สร้าง mockup อย่างรวดเร็วใน jsfiddle ที่อัปเดตซึ่งมีลักษณะเช่นนี้ คุณสามารถค้นหาการสาธิตที่อัปเดตได้ที่นี่

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

สูตรในการคำนวณความเร็วของอนุภาคจะเป็นดังนี้:

//player.velocity and particle.velocity are vectors 
//k is a factor to enhance or weaken the influence of players velocity
var distanceToPlayer = (player.position - particle.position).length();
particle.velocity = particle.velocity + ((k * player.velocity) + particle.velocity) * (1/distanceToPlayer);

ในการคำนวณตำแหน่งของอนุภาคที่คุณใส่ไว้ในวิธีการอัพเดตของคุณ:

var speedY = -(springConstant * (particle.position.y - particle.origin.y)) - (dampingFactor * particle.velocity.y);
var speedX = -(springConstant * (particle.position.x - particle.origin.x)) - (dampingFactor * particle.velocity.x);

particle.position.y = particle.position.y + speedY;
particle.position.x = particle.position.x + speedX;

particle.velocity.x = particle.velocity.x + speedX;
particle.velocity.y = particle.velocity.y + speedY;

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

ขณะนี้มีการสาธิต: สาธิต เพียงแค่ปรับค่าคงที่ 3 ที่ด้านบนจนกว่าของเหลวจะทำงานเหมือนที่คุณต้องการ

ความคิดของฉันเกี่ยวกับสองประเด็นนี้:

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

   

   ขอบด้านนอกมีการไล่ระดับสี ในสถานการณ์ของฉันเส้นขอบไม่ได้เริ่มที่ความทึบเดียวกับส่วนด้านใน แต่ถ้าคุณตั้งค่าความทึบเหล่านั้นให้เท่ากันคุณก็จะค่อยๆจางลง

2. ฉันจะเขียนโปรแกรมระบบอนุภาคและทำให้อนุภาคเป็นไปตามรูปหลายเหลี่ยม คุณไม่ต้องกังวลกับสิ่งที่จะเกิดขึ้นที่ขอบ การเปลี่ยนแปลงของระบบอนุภาคของคุณจะทำให้แน่ใจว่าอนุภาคนั้นอยู่ภายในรูปหลายเหลี่ยมและกระจายอย่างสม่ำเสมอ คุณสามารถพยายามทำให้อนุภาคที่อยู่ใกล้ที่สุดผลักกันซึ่งอยู่ห่างออกไป แต่ทำให้มีมวลเป็นจำนวนมากดังนั้นคุณจึงมีความเฉื่อยและดูราบรื่น เพื่อทำให้สิ่งนี้เร็วขึ้นมีความเป็นไปได้บ้าง แต่ปัญหาใหญ่ก็คือความซับซ้อนของเวลาในการผลักดันกลไกซึ่งกันและกัน ถ้าคุณทำให้แต่ละอนุภาคผลักอนุภาคอื่น ๆ คุณจะมี O (n ^ 2) ซึ่งไม่ดีถ้าคุณมีตัวอย่าง 100 อนุภาคในระบบของคุณ อ่านดีเกี่ยวกับวิธีที่คุณสามารถเพิ่มประสิทธิภาพนี้เป็นงานนำเสนอของ PixelJunk:http://fumufumu.q-games.com/gdc2010/shooterGDC.pdf

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

แนวคิดที่ฉันมีเมื่ออ่านโพสต์ของคุณคือสิ่งนี้:
•สร้างชุดไพ่ที่คุณจะใช้สำหรับพื้นที่ของคุณ
•เรนเดอร์รูปหลายเหลี่ยมพื้นที่บนผืนผ้าใบชั่วคราวขนาดเล็กที่ความละเอียดไทล์ (เช่น: หากไทล์เป็น 16X16, เรนเดอร์ที่ความละเอียดต่ำกว่า (16X, 16X))
•ใช้ผืนผ้าใบชั่วคราวนั้นเพื่อตัดสินใจว่าจะแสดงผลกระเบื้องหรือไม่บนผืนผ้าใบหลัก:
หากจุดใดจุดหนึ่งตั้งอยู่บนผืนผ้าใบความละเอียดต่ำให้วาดไทล์ 'สุ่ม' บนผืนผ้าใบหลัก ถ้าจุดนั้นเป็นเพียงเพื่อนบ้านของจุดที่กำหนดให้วาดไทล์ 'สุ่ม' ที่ความทึบต่ำกว่า (เพื่อทำการเปลี่ยน) บนผืนผ้าใบหลัก

ฉันกลัวว่าความละเอียดที่ลดลงจะสร้างเอฟเฟกต์บล็อก แต่แม้จะใช้ไทล์ 20X20 ก็ตามมันก็ดูค่อนข้างดี:

ขั้นตอนนี้คือ: ใช้รูปหลายเหลี่ยมของคุณ:

วาดรูปหลายเหลี่ยมที่ความละเอียดไทล์ของคุณ: (!! ใช่มันคือสีแดงของห้างสรรพสินค้า)

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

ดังนั้นลองวาดแผ่นกระเบื้อง:

สำหรับรูปหลายเหลี่ยมฉันวาดรูปหลายเหลี่ยมหลายครั้งปรับขนาดลงและเพิ่มความทึบของแต่ละรูปวาด (หนึ่งอาจใช้ globalCompositeOperation

เมื่อคุณรวมทุกอย่างแล้วมันจะทำให้:

ซออยู่ที่นี่:

http://jsfiddle.net/gamealchemist/T7b4Y/

แจ้งให้เราทราบหากสิ่งนี้ช่วยได้

แค่ความคิด:

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

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

นี่เป็นระดับที่สูงมาก แต่ฉันคิดว่าฉันจะแบ่งปันกับคุณ มีรายละเอียดมากมายที่ต้องพิจารณาที่นี่

ภาพดิบที่แสดงให้เห็น:

หากรูปหลายเหลี่ยมสีดำด้านในเป็นต้นฉบับคุณจะลบรูปหลายเหลี่ยมทั้งหมดด้วยจุดสีแดง