कणों के साथ नरम किनारे वाले क्षेत्रों को कैसे लागू किया जाए


13

मेरा गेम फेजर का उपयोग करके बनाया गया है, लेकिन सवाल खुद इंजन-एग्नॉस्टिक है।

मेरे खेल में मेरे पास कई वातावरण हैं, अनिवार्य रूप से बहुभुज क्षेत्र जो कि खिलाड़ी के चरित्र में स्थानांतरित हो सकते हैं और प्रभावित हो सकते हैं। उदाहरण के लिए बर्फ, आग, जहर आदि। इन क्षेत्रों का ग्राफिक तत्व रंग से भरा बहुभुज क्षेत्र है, और उपयुक्त प्रकार के कण (इस उदाहरण में बर्फ की धारें)। यह मैं वर्तमान में इसे लागू कर रहा हूँ - एक बहुभुज मुखौटा के साथ कण पैटर्न के साथ एक टाइपराइट को कवर कर रहा है:

यहाँ छवि विवरण दर्ज करें

कठोर किनारा बुरा लगता है। मैं दो चीजें करके सुधार करना चाहता हूं: 1. बहुभुज को भरने के लिए एक नरम किनारा है, और पृष्ठभूमि में मिश्रण करें। 2. क्या कुछ शार्क बहुभुज क्षेत्र से बाहर जाती हैं, ताकि वे बीच में न कटें और क्षेत्र की सीधी रेखा न हो

उदाहरण के लिए (मॉकअप):

यहाँ छवि विवरण दर्ज करें

मुझे लगता है कि बहुभुज को धुंधला करने के साथ 1 प्राप्त किया जा सकता है, लेकिन मुझे यकीन नहीं है कि 2 के साथ कैसे जाना चाहिए।

आप इसे कैसे लागू करेंगे?


2
यह कमाल लग रहा है। क्या मुझे आपके गेम का लिंक मिल सकता है ? :)
ashes999

@GameAlchemist यहाँ टाइल की छवि i.imgur.com/y54CeQ9.png है
OpherV

@ ashes999 यह अभी भी प्रगति पर है। मैं एक बार यहाँ एक लिंक पोस्ट जरूर
करुँगा,

ध्यान दें कि यह सफेद वस्तुओं के साथ एक पारदर्शी पीएनजी है। यदि आप इसे एक सफेद पृष्ठभूमि पर देखते हैं (जैसा कि अक्सर किसी ब्राउज़र में तस्वीर खोलते समय होता है) तो आपको कुछ भी दिखाई नहीं देगा
OpherV

@ ऑफीवी जो बहुत अच्छा होगा। कृपया अपने प्रश्न को संपादित करें और एक लिंक पोस्ट करें - यह शायद इस साइट पर इसे बाजार में लाने का सबसे अधिक विषय है :)
ashes999

जवाबों:


2

1.अगर आप कुछ चाहते हैं जो आपके मॉकअप के करीब है तो मैं कणों का उपयोग करूंगा (यह पूरी तरह से उड़ाया गया कण प्रणाली नहीं है)।

एक RenderTexture पर बहुभुज के रूप में अपने कणों को रेंडर करें। कणों पर योगात्मक सम्मिश्रण का उपयोग करना सुनिश्चित करें। बहुभुज के अंदर के कण आसानी से एक दूसरे में मिलेंगे, जबकि बाहर के कण आपको मनचाहा किनारा देंगे। (प्रभाव का एक उदाहरण इस यूट्यूब वीडियो में देखा जा सकता है: एडिटिव पार्टिकल्स वीडियो अब आपकी मुख्य स्क्रीन पर रेंडरटेक्स्चर को प्रस्तुत करता है और आप कर रहे हैं। रेंडरटेक्स्चर आवश्यक है ताकि कण आपकी पृष्ठभूमि के साथ मिश्रण न करें।

आप सीधे कण बनावट पर त्रिकोण लगाने की कोशिश कर सकते हैं और देखें कि यह कैसे काम करता है। अन्यथा उन्हें अपने "कण सूप" के ऊपर एक अलग परत के रूप में प्रस्तुत करें।

एक अपडेटेड 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;

यह आपको एक "तरल पदार्थ" देना चाहिए, जहां प्रत्येक कण अपने मूल के चारों ओर घूमता है जब खिलाड़ी तरल पदार्थ को हिलाता है। स्प्रिंगकॉन्स्टैंट बदलता है कि एक कण अपने मूल से कितना दूर चला जाता है और डंपिंगफैक्टर कितना तेजी से कण को ​​आराम देता है। आपको कोड को ट्विस्ट करना पड़ सकता है क्योंकि इसके 1 डी सिमुलेशन का संशोधित संस्करण जो मैं अपने गेम में उपयोग करता हूं।

अब एक डेमो के साथ: डेमो जस्ट शीर्ष पर 3 स्थिरांक को मोड़ देता है जब तक कि द्रव ऐसा व्यवहार नहीं करता है जैसे आप इसे चाहते हैं।


यह # 1 हल करने के लिए एक बहुत ही दिलचस्प विचार है! मुझें यह पसंद है। आप त्रिभुज आंदोलन \ रिक्ति को कैसे लागू करने का सुझाव देंगे?
OpherV

1
मैंने प्रश्न # 2 का उत्तर देने के लिए मूल पोस्ट को संपादित किया।
ज़िल्लस

कण प्रभाव का एक छोटा सा डेमो जोड़ा। मुझे लगता है कि आप थोड़ा ट्विकिंग के साथ अपना वांछित प्रभाव प्राप्त कर सकते हैं।
३’१४ को .:०४ पर ज़िल्लस

मैंने आपके समाधान का उपयोग करके समाप्त किया, यह उस प्रभाव के सबसे करीब है जिसे मैं प्राप्त करना चाहता था। धन्यवाद! हालांकि एक सवाल है - मैं आपके उदाहरणों में वसंत ऋतु को कैसे जकड़ूंगा, ताकि वास्तव में मामूली आंदोलनों से कण इतनी बड़ी दूरी तक नहीं जा पाएंगे?
OpherV

आप भिगोना और स्प्रिंगकॉन्स्टेंट के साथ चारों ओर खेल सकते हैं। एक उच्च भिगोना कणों को आराम से तेजी से लाएगा। एक कम वसंत निरंतर कणों की गति को कम करता है। दुर्भाग्य से, दोनों मूल्य कण सूप को अधिक चिपचिपा महसूस करते हैं। इसलिए इसके बजाय, जब आपका खिलाड़ी कण को ​​छूता है, तो आप कण में जोड़े जाने वाले अधिकतम वेग को क्लैंप कर सकते हैं, जैसे कि कण। ) + particle.velocity.x) * (1 / दूरीटॉलेयर)); क्लैंप के लिए देखें: stackoverflow.com/a/11409944
16

4

इन दो बिंदुओं के बारे में मेरे विचार:

  1. आप shader कलंक का उपयोग कर सकते हैं, लेकिन यह बहुत महंगा होने वाला है। इसके बजाय मैं "धुंधला" का अनुकरण करने के लिए केंद्र में पारभासी से किनारों तक पारदर्शी होने के लिए त्रिकोणों की एक अतिरिक्त सीमा खींचता हूं। मैंने ऐसा खेल में किया है और यह बहुत अच्छा काम करता है। यहाँ मेरे खेल में इंद्रधनुष-इश बूस्टर के दो स्क्रीनशॉट हैं।

    यहाँ छवि विवरण दर्ज करें यहाँ छवि विवरण दर्ज करें

    बाहरी सीमा में एक ढाल है। मेरी स्थिति में, सीमा आंतरिक भाग के समान अस्पष्टता पर शुरू नहीं होती है, लेकिन यदि आप उन विकल्पों को समान रूप से सेट करते हैं, तो आपके पास एक अच्छा फीका होगा।

  2. मैं एक कण प्रणाली का कार्यक्रम बनाऊंगा और कण बहुभुज का अनुसरण करूंगा। ऐसा करने से, आपको इस बारे में चिंता करने की ज़रूरत नहीं है कि किनारों पर क्या होगा। आपके कण प्रणाली की गतिशीलता यह सुनिश्चित करेगी कि कण बहुभुज के अंदर हों और समान रूप से वितरित हों। आप निकटतम कणों को एक दूसरे से दूर धकेलने की कोशिश कर सकते हैं, लेकिन इसे बहुत सारे "द्रव्यमान" के साथ बनाते हैं ताकि आपके पास जड़ता हो और यह चिकना दिखे। इस बात को तेज करने के लिए, कुछ संभावनाएं हैं, लेकिन बड़ी समस्या एक दूसरे तंत्र को आगे बढ़ाने की समय की जटिलता है। यदि आप प्रत्येक कण को ​​प्रत्येक दूसरे कण को ​​धक्का देते हैं, तो आपके पास O (n ^ 2) होगा, जो कि अच्छा नहीं है, यदि आप उदाहरण के लिए आपके सिस्टम में 100 कण हैं। आप इसे कैसे अनुकूलित कर सकते हैं, इसके बारे में एक अच्छी किताब PixelJunk की यह प्रस्तुति है:http://fumufumu.q-games.com/gdc2010/shooterGDC.pdf

    कण प्रणाली का निर्माण करते समय प्रत्येक कण को ​​तीन या चार अन्य कणों से जोड़ना होगा। अब प्रत्येक कण को ​​केवल चार अन्य कणों को धक्का देना होगा, जिनसे वह जुड़ा हुआ है। हालांकि, यह दृष्टिकोण आपके कण प्रणाली में अशांति को असंभव बनाता है। लेकिन यह एक समस्या नहीं लगती है, क्योंकि आपकी वर्तमान स्थिति एक स्थैतिक बनावट का उपयोग करती है। यह दृष्टिकोण O (n) होगा जो महान है।


धन्यवाद! 1. मैं एक कठिन समय यह कल्पना कर रहा है। क्या आप कृपया यह बता सकते हैं कि यह आपके खेल में कैसा दिखता है? 2. दिलचस्प! उस पर पढ़ा जाएगा
OpherV

छवियों के लिए धन्यवाद। मैं देख सकता हूं कि यह ट्यूब या लाइन आधारित आकार में कैसे काम करेगा, लेकिन यह बहुभुज के साथ कैसे काम करेगा? प्रत्येक पक्ष से प्रक्षेपित त्रिकोणों के ग्रेडिएंट अच्छी तरह से पंक्तिबद्ध नहीं होंगे ...?
OpherV

उन्हें अच्छी तरह से फिट करें। वह विचार है। इसमें चौराहे आदि के कुछ गणित और कंप्यूटिंग बिंदु शामिल हैं। आप सीमा को भी तोड़ सकते हैं और इसे सुचारू कर सकते हैं। संभावनाओं का टन।
मार्टिज़न कोर्टको

3

आपके पोस्ट को पढ़ते समय मेरे पास जो विचार था वह यह था:
• अपने क्षेत्र के लिए उपयोग किए जाने वाले टाइल्स का एक सेट बनाएं।
• टाइल रिज़ॉल्यूशन पर एक छोटे से अस्थायी कैनवास पर क्षेत्र बहुभुज को प्रस्तुत करें (उदा: यदि टाइल 16X16 हैं, तो एक (16X, 16X) कम रिज़ॉल्यूशन पर प्रस्तुत करें)।
• टाइल को रेंडर करने के लिए या मुख्य कैनवास पर नहीं करने का निर्णय लेने के लिए अस्थायी कैनवास का उपयोग करें:
यदि कम-रेज कैनवास पर एक बिंदु सेट किया गया है, तो मुख्य कैनवास पर एक 'यादृच्छिक' टाइल आकर्षित करें। यदि कोई बिंदु एक निर्धारित बिंदु का पड़ोसी है, तो मुख्य कैनवास पर कम अपारदर्शिता (संक्रमण बनाने के लिए) पर 'यादृच्छिक' टाइल खींचें।

मुझे डर था कि कम रिज़ॉल्यूशन एक ब्लॉक प्रभाव पैदा करेगा, लेकिन 20X20 टाइलों के साथ भी, यह काफी अच्छा लगता है:

यहाँ छवि विवरण दर्ज करें

इसके लिए चरण हैं: अपना बहुभुज लें:
यहाँ छवि विवरण दर्ज करें

अपने टाइल रिज़ॉल्यूशन पर बहुभुज बनाएं: यहाँ छवि विवरण दर्ज करें(!! हाँ यह मॉल लाल चीज़ है)।

फिर एक टाइल या नोट को आकर्षित करने के लिए तार तय करने के लिए कम-रिज़ॉल्यूशन कैनवास की इमेजडाटा का उपयोग करें।
यदि कोई पिक्सेल लो-रेस कैनवास पर सेट किया गया है, तो इसका मतलब है कि हमें टाइल खींचना चाहिए: किस टाइल को आकर्षित करने के लिए चुनने के लिए एक 'यादृच्छिक' टाइल सूचकांक चुनें। वह यादृच्छिक सूचकांक हमेशा किसी दिए गए क्षेत्र / टाइल के लिए समान होना चाहिए।
यदि एक बिंदु खाली है, लेकिन भरे हुए बिंदु के बगल में है, तो एक टाइल भी खींचें, लेकिन आधा अपारदर्शिता के साथ।

यहाँ छवि विवरण दर्ज करें

तो चलो टाइलें खींचते हैं:

यहाँ छवि विवरण दर्ज करें

बहुभुज के लिए मैं कई बार बहुभुज को खींचता हूं, इसे नीचे खींचता हूं, और प्रत्येक ड्रॉ पर अपारदर्शिता बढ़ जाती है (एक ग्लोबल कॉमपोजिटऑपरेशन 'लाइटर', का भी उपयोग कर सकता है)।

यहाँ छवि विवरण दर्ज करें

एक बार जब आप सब कुछ जोड़ देते हैं, तो यह देता है:

यहाँ छवि विवरण दर्ज करें

फिडेल यहां है:

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

मुझे बताएं क्या इससे मदद मिलती है।


आपके समाधान पर विस्तार से बताने और कोड प्रदान करने के लिए धन्यवाद! आपका क्या मतलब है "फिर एक टाइल या नोट को आकर्षित करने के लिए तार तय करने के लिए कम-रिज़ॉल्यूशन कैनवास की छवि डेटा का उपयोग करें"। छोटी छवि डेटा का उपयोग कैसे करें यह तय करने के लिए कि बड़ी छवि कहां से खींची जाए? और इस पद्धति का उपयोग करके मैं त्रिभुजों के ओवरलैप से कैसे बच सकता हूं ताकि मेरे मॉकअप के समान रिक्ति प्राप्त हो सके?
OpherV

मेरा मतलब है कि यह एक पूर्ण बूलियन परीक्षण है: क्या मुझे इस टाइल को भरने की आवश्यकता है? , सही या गलत, इमेजडाटा [(x + y * चौड़ाई * * 4]! = 0 पर कम-रेस टेस्ट के परीक्षण द्वारा दिया जाता है, अर्थात == 'क्या मैंने निम्न रेस कैनवास पर कुछ आकर्षित किया है? कि टाइल जगह? ' फिर यदि हाँ, तो मैं (x, y) से 'यादृच्छिक' टाइल सूचकांक में जाने के लिए कुछ विस्तृत प्राइम-नंबर-भरा हुआ फॉर्मूला (getRandomNumber) का उपयोग करता हूं जो किसी दिए गए क्षेत्र + (x, y) के लिए हमेशा एक ही नंबर प्रदान करेगा। मैं नहीं देखता कि अगर आप अपने बहुभुज को ठीक से परिभाषित करते हैं तो चीजें कैसे ओवरलैप हो सकती हैं, इसलिए मुझे आपका दूसरा सवाल नहीं आता।
GameAlchemist

1

एक विचार है:

आपकी टाइल में, "टुकड़े" लगभग 80px चौड़े हैं। मैं सुझाव दूंगा, 2 क्षेत्र बना रहा हूं। आप अपने मूल बहुभुज को आकर्षित करते हैं, और आप प्रत्येक किनारे से लगभग 80 पिक्सेल का एक नकली बनाते हैं। फिर आप अपनी टाइलें बड़े बहुभुज में खींचते हैं।

फिर, सभी "टुकड़े" जिनके अंदर आंतरिक बहुभुज के बाहर एक पिक्सेल है, और आंतरिक बहुभुज के साथ कोई चौराहा नहीं है जो आप बाढ़ कर सकते हैं उन्हें पारदर्शिता से भर सकते हैं।

यह बहुत उच्च स्तर है, लेकिन मुझे लगा कि मैं इसे आपके साथ साझा करूंगा। यहाँ पर बहुत अधिक विवरण निर्धारित किया जाना है।

प्रदर्शित करने के लिए एक कच्ची छवि:

यहाँ छवि विवरण दर्ज करें

यदि आंतरिक काले बहुभुज मूल थे, तो आप सभी बहुभुजों को लाल बिंदु के साथ मिटा देंगे।


हालांकि आप आंतरिक बहुभुज के साथ टाइल की छवि में एम्बेडेड टुकड़ों के लिए चौराहे की जांच कैसे करेंगे?
OpherV

@ ओवेर्वी उम्म, आप निर्धारित कर सकते हैं कि बिंदु X बहुभुज में है? आप बाहरी बहुभुज में सभी पिक्सेल के माध्यम से लूप कर सकते हैं, और प्रत्येक सफेद पिक्सेल के लिए, सभी पिक्सेल को बाढ़ कर सकते हैं, और देख सकते हैं कि क्या आंतरिक / आउटर्स में कोई झूठ है। हालांकि यह विशेष रूप से कुशल नहीं लगता है, लेकिन एक बार आपके पास कुछ ऐसा होगा जो आप अनुकूलन के तरीकों के बारे में सोच सकते हैं?
user46560

यह CPU पर पोस्ट-प्रोसेसिंग है। खुद पर शायद ही अनुकूलन हो। यदि आपके आंतरिक बहुभुज और बाहरी एक त्रिकोण पट्टी द्वारा जुड़े हुए हैं, तो आपका विचार अच्छी तरह से काम कर सकता है। ओपी में वर्टेक्स विशेषता जानकारी जोड़ सकते हैं और प्रत्येक वर्टेक्स को अंदर या बाहर टैग कर सकते हैं। फिर, शीर्ष छाया में, अस्पष्टता / अल्फा को कम पारदर्शी मूल्य से पूर्ण अपारदर्शी तक रैखिक रूप से प्रक्षेपित किया जा सकता है।
तेयोद्रोन

@teodron यह वह बिंदु है जिसे मैंने उत्तर में बनाने की कोशिश की। यह एक उच्च स्तरीय विचार है, और मैं वास्तव में गेम डेवलपर नहीं हूं। मुझे सिर्फ अंदाजा था।
user46560

@ user46560 हाँ, लेकिन इस तरह से आपको यह गणना करने की आवश्यकता नहीं है कि उस अंतर-बहुभुज बैंड में कौन से पिक्सेल हैं .. न तो GPU पर, न ही CPU पर। चूंकि आप खेल के विकास के तरीकों के आदी नहीं हैं, जैसा कि आप कहते हैं, आप अपने विचार के लिए +1 के लायक हैं :)।
तियोड्रोन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.