एचटीएमएल 5 कैनवास

Question

में पिक्सेल परफेक्ट टकराव का पता लगाना मैं एचटीएमएल 5 कैनवास में दो स्प्राइट्स के बीच टकराव की जांच करना चाहता हूं। इसलिए चर्चा के लिए, मान लें कि दोनों sprites आईएमजी ऑब्जेक्ट्स हैं और टकराव का मतलब है कि अल्फा चैनल 0 नहीं है। अब इन दोनों sprites ऑब्जेक्ट के केंद्र के चारों ओर घूर्णन हो सकता है लेकिन इस मामले में कोई अन्य परिवर्तन नहीं करता है कोई आसान

अब स्पष्ट समाधान मैं आया था यह होगा के साथ:

• दोनों
• आंकड़ा बाहर ऐसा क्षेत्र है जहां कोड (परीक्षण करना चाहिए दोनों की भरपाई की तरह का एक मोटा आकलन के लिए परिवर्तन मैट्रिक्स की गणना + घूर्णन के लिए अतिरिक्त स्थान की गणना की गई)
• छेड़छाड़ आयत में सभी पिक्सेल के लिए, समन्वय को परिवर्तित करें और अल्फा चैनल के लिए गणना की गई स्थिति (निकटतम पड़ोसी के लिए गोलाकार) पर छवि का परीक्षण करें। फिर पहली हिट पर निरस्त करें।

समस्या जो मैं देखता हूं वह यह है कि ए) जावास्क्रिप्ट में कोई मैट्रिक्स कक्षाएं नहीं हैं जिसका मतलब है कि मुझे जावास्क्रिप्ट में ऐसा करना है जो काफी धीमा हो सकता है, मुझे प्रत्येक फ्रेम को टकराव के लिए परीक्षण करना होगा जो इस सुंदर बनाता है महंगा। इसके अलावा मुझे ड्राइंग पर पहले से कुछ करना है (या मेरे लिए कैनवास क्या करता है, मैट्रिक्स सेट अप करना) को दोहराना है।

मुझे आश्चर्य है कि अगर मुझे यहां कुछ याद आ रहा है और यदि टकराव का पता लगाने के लिए कोई आसान समाधान है।

Answer 1

मैं जावास्क्रिप्ट कोडर नहीं हूं लेकिन मुझे लगता है कि वही ऑप्टिमाइज़ेशन चालें जावास्क्रिप्ट के लिए भी काम करती हैं जैसे कि वे सी ++ के लिए करते हैं।

बस प्रत्येक पिक्सेल के बजाय स्प्राइट के कोनों को घुमाएं। प्रभावी रूप से आप सॉफ्टवेयर बनावट मैपिंग की तरह कुछ कर रहे होंगे। आप विभिन्न ढाल जानकारी का उपयोग कर दिए गए पिक्सेल की एक्स, वाई स्थिति को काम कर सकते हैं। अधिक जानकारी के लिए सॉफ्टवेयर बनावट मानचित्रण देखें।

यदि आप "हिट" और "गैर-हिट" क्षेत्रों में स्प्राइट को विघटित करते हैं तो आप प्रभावी रूप से यह देखने के लिए जांच सकते हैं कि कोई दिए गए क्वाड पेड़ अपघटन सभी "गैर-हिट", "सभी हिट" या "संभव हिट" "(यानी हिट और गैर-हिट पिक्सेल शामिल हैं। पहला 2 गुजरने के लिए तुच्छ है। आखिरी मामले में आप अगले अपघटन स्तर पर जाते हैं और परीक्षण दोहराते हैं। इस तरह आप केवल उन पिक्सल को चेक करते हैं जिन्हें आपको चाहिए "गैर हिट" और "हिट" के बड़े क्षेत्रों आप thats विचारों का सिर्फ एक जोड़े को वैसे भी चेक की इस तरह के एक जटिल सेट करने के लिए नहीं है।

।

Answer 2

मैं कुछ दोहराने के लिए है मैं पहले से ड्राइंग

खैर पर क्या करना है, आप एक नया प्रतिपादन संदर्भ बना सकता है, साजिश एक यह करने के लिए सफेद पृष्ठभूमि मुखौटा घुमाया, lighter के संयोजन आपरेशन की स्थापना की और पर ऑफसेट दिए गए शीर्ष पर अन्य घुमाया मुखौटा साजिश।

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

मुझे प्रत्येक फ्रेम को टक्कर के लिए परीक्षण करना है जो यह बहुत महंगा बनाता है।

हाँ, मुझे लगता है कि वास्तव में आप सटीक टक्कर तालिकाओं का उपयोग करने जा रहे हैं। यदि आपके पास इसके लिए जगह है, तो आप स्प्राइट ए, स्प्राइट बी, सापेक्ष रोटेशन, सापेक्ष-एक्स-सामान्यीकृत-टू-रोटेशन और सापेक्ष-वाई-सामान्यीकृत-टू-रोटेशन के प्रत्येक संयोजन के लिए एक हिट/नो हिट बिट स्टोर कर सकते हैं। । आपके पास कितने sprites और घूर्णन या आंदोलन के कितने कदम के आधार पर, यह बड़ा हो सकता है के आधार पर।

एक समझौता एक जावास्क्रिप्ट सरणी में प्रत्येक स्प्राइट के प्री-रोटेटेड मास्क को स्टोर करना होगा (संख्या का, आपको 32 बिट्स/पिक्सेल आसानी से && -able डेटा, या एक सिंग में एक चरित्र के रूप में, आपको 16 बिट्स) और && एक साथ स्प्राइट मास्क को अलग करने की प्रत्येक पंक्ति।

या, पिक्सल पर छोड़ दें और उदाहरण को देखना शुरू करें। पथ।

Answer 3

वही समस्या, एक वैकल्पिक समाधान। सबसे पहले मैं sprite के चारों ओर एक बहुभुज खोजने के लिए getImageData डेटा का उपयोग करें। यहां पर सावधान रहें क्योंकि कार्यान्वयन पारदर्शी पृष्ठभूमि वाली छवियों के साथ काम करता है जिसमें एक ठोस वस्तु होती है। एक जहाज की तरह बहुभुज में शीर्षकों की संख्या को कम करने के लिए अगला चरण Ramer Douglas Peucker Algorithm है। अंततः मुझे घुमाए जाने के लिए बहुत कम और सस्ते के बहुभुज प्राप्त होते हैं और प्रत्येक स्प्राइट के लिए अन्य बहुभुजों के साथ टकराव की जांच करते हैं।

http://jsfiddle.net/rnrlabs/9dxSg/

var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 
var img = document.getElementById("img"); 

context.drawImage(img, 0,0); 
var dat = context.getImageData(0,0,img.width, img.height); 
// see jsfiddle 
var startPixel = findStartPixel(dat, 0); 
var path = followPath(startPixel, dat, 0); 
// 4 is RDP epsilon 
map1 = properRDP(path.map, 4, path.startpixel.x, path.startpixel.y); 

// draw 

context.beginPath(); 
context.moveTo(path.startpixel.x, path.startpixel.x); 
for(var i = 0; i < map.length; i++) { 
    var p = map[i]; 
    context.lineTo(p.x, p.y); 
} 
context.strokeStyle = 'red'; 
context.closePath(); 
context.stroke();