ब्राउज़र-आधारित गेम बनाते समय, कैनवास पर या कैनवास पर नहीं?

Question

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

प्रश्न: यह मुझे प्रतीत होता है कि एक मौलिक विकल्प जो मुझे बनाने की आवश्यकता है, वह यह है कि मुझे किसी <canvas>तत्व पर प्रस्तुत करना चाहिए या नहीं।

एक कैनवास के साथ, मेरे पास बिंदुओं, रेखाओं और उस के शीर्ष पर अधिक जटिल चीजों को प्रस्तुत करने के लिए बुनियादी उपकरण हैं। संभवतः इसके साथ मदद करने के लिए विभिन्न ढांचे भी हैं या होंगे।

कैनवास के बिना, मैं अपनी वस्तुओं को डोम-ट्री में रख सकता हूं, एक नियमित वेबपेज की तरह, केवल काफी जटिल, कई अतिव्यापी तत्वों के साथ।

क्या एक दृष्टिकोण दूसरे की तुलना में बेहतर है? क्या वे परस्पर अनन्य हैं? मुझे कैसे पता चलेगा कि किसे चुनना है?

Answer 1

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

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

Comments

एक दिन की नौकरी के रूप में पिछले साल के लिए HTML5 खेलों पर ईमानदारी से काम करने के लिए, मैं कहूंगा कि जो ब्राउज़र कैनवस का समर्थन नहीं करता है, वह किसी भी सभ्य गेम के लिए पर्याप्त तेज़ नहीं है, लेकिन फिर, एंड्रॉइड फोन पर WebKit की तुलना में धीमी गति से। ... :(

— इवो ​​वेटलज

धन्यवाद :) मुझे "ब्राउजर सपोर्ट" की ज्यादा परवाह नहीं है, जब तक मैं उस मामले के लिए पर्याप्त सीख चुका हूं, मैं उम्मीद करता हूं कि समस्या खुद हल हो जाएगी। यह मुख्य रूप से मनोरंजन और सीखने के लिए है।

— २०:१० पर २०

मैं यह भी कर रहा हूं: जीयूआई में शीर्ष पर आंशिक रूप से पारदर्शी डोम तत्व होते हैं, जबकि खेल खुद को कैनवास पर खींचा जाता है।

— फिलिप

@IvoWetzel मुझे भी ऐसा ही लगता है ... हम मोबाइल प्लेटफॉर्म पर भी गेम खेलते हैं, और एंड्रॉइड भी बहुत

— असेबल है

Answer 2

DOM के बारे में DOM
, पुराने स्कूल 2D के लिए बहुत अच्छी तरह से काम करता है, इसका मतलब है कि बिना इमेज रोटेशन या स्केलिंग के। इन दोनों नौकरियों के लिए वास्तव में उपकरण हैं, लेकिन आप उन पर अच्छा प्रदर्शन नहीं कर सकते हैं।

एक गेम के लिए आपको ब्राउज़र लेआउट इंजन पर जितना संभव हो उतना कम भरोसा करना चाहिए, इसका मतलब है कि position:absoluteऑब्जेक्ट को जगह देना। जहाँ तक संभव हो कोशिश करें कि आप डोम ऑब्जेक्ट्स को हर समय न बनाएं और नष्ट न करें, अगर आपको अत्यधिक वेरिएबल संख्या की आवश्यकता है तो आप निष्क्रिय डोम तत्वों का एक पूल चाहते हैं display:none, जिसे जरूरत पड़ने पर पुनर्जीवित करने के लिए तैयार किया जा सके।

डोम बनाम कैनवस
IE8- सिकुड़ते कैनवास के बाजार में हिस्सेदारी के साथ अधिक से अधिक आकर्षक विकल्प बनता जा रहा है, अधिकांश खेलों के लिए यह संभवतः एक अच्छा विकल्प है। लेकिन कुछ नौकरियों के लिए DOM उपयोग करने का सबसे आसान उपकरण है, आप कुछ दस्तावेज़ प्रवाह का उपयोग कर सकते हैं यदि आवश्यक हो, तो आप सीधे दिए गए ऑब्जेक्ट द्वारा क्लिक पकड़ सकते हैं, स्क्रॉल बार को एकीकृत करना आसान है।

प्रदर्शन अंतर को कवर करना कठिन है, यह काम पर निर्भर करता है और ब्राउज़र से ब्राउज़र में बेतहाशा भिन्न होगा।

Comments

मैंने उल्लेख position:absoluteकरना उचित नहीं समझा , यह अच्छी बात है।

— झॉकिंग २:59

क्या कैनवास जीपीयू कुछ स्तर पर त्वरित नहीं है जहां डोम नहीं है?

— थॉमस

@ थोमस एकमात्र स्थान है जहाँ आप यह सुनिश्चित कर सकते हैं कि GPU त्वरण webGL है। (तकनीकी रूप से इसे बिना लागू किया जा सकता है, लेकिन ऐसा होने की संभावना नहीं है)। पहले कैनवास 2 डी कार्यान्वयन सख्ती से सीपीयू थे, कुछ ब्राउज़रों में कार्यक्षमता में से कुछ को जीपीयू में स्थानांतरित कर दिया गया है, सभी मामलों में महत्वपूर्ण प्रदर्शन लाभ के साथ नहीं। DOM GPU त्वरण के लिए, वे इस पर काम कर रहे हैं, और मुझे ऐसा कोई विशेष कारण नहीं दिख रहा है कि ऐसा नहीं होना चाहिए। किसी भी मामले में, आखिरकार कोई बात नहीं है कि ब्राउज़र इसे कैसे करता है, लेकिन अगर यह आपकी ज़रूरत के लिए पर्याप्त प्रदर्शन करता है, तो GPU का मतलब हमेशा तेज नहीं होता है।

— आआआआआआआआआआ आआआआआ

GPU isnt का क्या मतलब है हमेशा तेज? एक पीसी पर यह सच हो सकता है, लेकिन मोबाइल प्लेटफ़ॉर्म पर, मेरे पास GPU अधिक होना चाहिए, इसलिए CPU में गेम लॉजिक जैसे AI आदि निष्पादित करने पर खर्च करने के लिए अधिक 'चक्र' होते हैं। इस तरह से खेल अधिक जटिल हो सकता है ।

— थॉमस

@ थोमस यह प्लेटफॉर्म, नौकरी और बहुत सारी अन्य चीजों पर निर्भर करता है। ओल्ड-स्कूल 2 डी मुख्य रूप से मेमोरी ऑपरेशन है, मुख्य मेमोरी में संसाधनों को रखना और उन ऑपरेशनों के लिए सीपीयू का उपयोग करना बहुत अच्छा काम करेगा, मोबाइल फोन पर भी, लेकिन दूसरे प्रोसेसर की मेमोरी में स्थित डेटा पर ऑपरेशन करने की कोशिश करना एक प्रदर्शन हत्यारा है, इसलिए यदि आप उन ऑपरेशनों को मिलाते हैं जो GPU द्वारा GPU संचालन के साथ नहीं किए जा सकते हैं, तो आप ऑपरेशन के आधार पर बफर को आगे और पीछे भेजना शुरू कर देंगे या प्रोसेसर में से एक को अन्य प्रोसेसर मेमोरी में लिख सकते हैं।

— आआआआआआआआआ आआआआआआआआना

Answer 3

पूरी तरह से खेल के प्रकार पर निर्भर करता है, हालांकि कैनवास उनमें से "सबसे" फिट बैठता है।

DOM प्रबंधन एक निश्चित बिंदु पर भयानक हो जाता है, जितने अधिक तत्व आपको धीमे पड़ते हैं, उतने अधिक तत्व आप EXTREMELI SLOWER के चारों ओर घूमते हैं ।

IMG तत्वों के साथ परिसंपत्ति लोडिंग ऑर्डर को प्रबंधित करना है ... गैर-ट्रीटिंग (छवि टैगों पर जानबूझकर टूटे प्रोटोकॉल पर अवरोधन त्रुटियां: डी)।

हालाँकि, ज्यादातर स्टैटिक इमेजरी और कम इफ़ेक्ट काउंट वाले गेम के लिए मैं अभी भी DOM के साथ जाऊँगा। बाकी सब कुछ, कैनवास पहली पसंद (प्वाइंट और क्लिकिंग स्टफ है, हालांकि हिटमैप एक अलग कहानी है)।

इन दिनों कैनवस इतना तेज है (आईफोन पर भी), इसका उपयोग न करने का शायद ही कोई कारण हो।

Comments

एवीएस इंजन की एक वीडियो प्रस्तुति के आधार पर गति के बारे में , जब आपके पास हजारों तत्व थे, तो डोम से वास्तव में कैनवास की तुलना में तेजी से संभालना था। क्या आप असहमत हैं? क्या यह बदल गया है? काश मैं उस वीडियो को फिर से

— पाता

: DI काम करता है Zynga, उस आदमी के साथ जिसने Aves बनाया। पिछले वर्ष में चीजें बदल गई हैं, मुझ पर भरोसा करें :)

— इवो ​​वेटलज

-1, I have tried having ~100000 dom elements for a non-game application, that pretty much did not work. But a few thousand elements isn't problematic. It's not like canvas is going to be fast either if you draw many thousand images to it at every update.

— aaaaaaaaaaaa

@eBusiness Then go ahead and introduce complex Z ordering and 3D transforms. Good luck with that :)

— Ivo Wetzel

@IvoWetzel If you want to do 3D, canvas is the choice. But that is not what your answer says, so what is your point?

— aaaaaaaaaaaa

Answer 4

If you are making an HTML5 game, the canvas is by far better. Here's why:

1. गति - एक छवि के रूप में कैनवास के बारे में सोचो। आप छवि को आकर्षित करते हैं, और फिर यह भूल जाते हैं कि आपने क्या आकर्षित किया। DOM या SVG की तुलना में यह नाटकीय रूप से प्रदर्शन बढ़ाता है। DOM और SVG एप्लिकेशन क्या करते हैं, वे आपके द्वारा स्क्रीन पर रखी गई प्रत्येक वस्तु का ट्रैक रखते हैं। इसका मतलब है कि यदि आपके पास स्क्रीन पर कई वस्तुओं के साथ एक बड़ा स्तर है, विशेष रूप से ऑफस्क्रीन या छिपा हुआ है, तो वे वैसे भी खींचे और रखे गए हैं।
2. ड्राइंग सुविधाएँ - जबकि DOM तत्वों में शक्तिशाली CSS3 परिवर्तन हैं, यह कैनवास की विशेषताओं की तुलना में कुछ भी नहीं है। कैनवास किसी भी वस्तु को खींच सकता है, शक्तिशाली ढाल समर्थन, 3 डी में वस्तुओं को प्रदर्शित करने के लिए प्लगइन्स, फिल्टर आदि।
3. समर्थन - DOM का उपयोग करते समय, जब आप परिवर्तन या एनिमेशन जैसी प्रयोगात्मक सुविधाओं का उपयोग करना चाहते हैं, तो आपको CSS में -moz-, -webkit-, -o-, और -ms- उपसर्गों का उपयोग करना होगा। कैनवास में, आपको इसके बारे में चिंता करने की आवश्यकता नहीं है। बस एक फ़ंक्शन के साथ ड्रा करें, और आप कर रहे हैं। कैनवास का एक अन्य समर्थन संबंधित लाभ यह है कि आपका आवेदन कैसे प्रदर्शित करता है। एक वेबसाइट डेवलपर के रूप में, ब्राउज़रों के बीच DOM मानकीकरण की कमी मुझे पागल कर देती है। विस्तृत W3C विनिर्देशों के बावजूद, पृष्ठभूमि, ग्रेडिएंट, ट्रांसफ़ॉर्मेशन आदि ब्राउज़रों के बीच अलग-अलग प्रदर्शित होते हैं। कैनवास में, मैं केवल एक ही चीज़ को चलाता हूं जो अलग हो सकती है - पृष्ठभूमि। टाइल वाली पृष्ठभूमि प्रदर्शित करते समय, कुछ ब्राउज़र x अक्ष पर टाइल को 0px पर केंद्र के रूप में "टाइल-एक्स" लेंगे, और अन्य इसे टाइल को नीचे टाइल के रूप में लेते हैं।
4. लाइब्रेरी और डॉक्यूमेंटेशन - कैनवस के साथ गेम बनाने के लिए डॉक्यूमेंटेशन पर बेहतरीन लाइब्रेरी के टोंस हैं। कुछ पुस्तकालयों: CreateJS, paper.js, fabric.js, KineticJS, libCanvas, Processing.js, PlotKit, Rekapi, PhiloGL, InfoViz Toolkit, Frame-Engine, CAKE, Raphaeljs, Tweenjs, आदि मैं एक टन की सूची और अधिक कर सकता हूं, लेकिन। कोई मतलब नहीं है।

नीचे की ओर - एनीमेशन - जबकि एनीमेशन के लिए कई महान पुस्तकालय हैं, मुझे CSS3 के एनिमेशन पसंद हैं। उनका निर्माण करना, हेरफेर करना और ट्रिगर करना इतना आसान है। CSS3 एनिमेशन को कैनवास के साथ काम करने के लिए विभिन्न हैक हैं, लेकिन मुझे संदेह है कि ज्यादातर लोग उस पद्धति का उपयोग नहीं करना पसंद करते हैं।

अपने खेल के साथ गुड लक, और मुझे आशा है कि आप क्या देखते हैं!

Answer 5

If you consider targeting mobile browsers, in particular Android, and the game contains any moving graphics, avoid DOM animation. The stock browser in Android is useless, even though it's webkit. Check out this Android issue thread before you start: "Terrible rendering of CSS3 and Javascript animations in Browser and WebView".

Canvas in itself might not be any faster, but there are frameworks to invoke hardware acceleration for canvas animations, for example CocoonJS. There is a link to a video on the site, showing the performance gains you can achieve by using the framework (but I'm not allowed to post more than two links, for some reason).

Answer 6

Simple answer: WebGL with canvas fallback.

संतुलित उत्तर: यदि आपके खेल में बहुत अधिक पाठ हैं, तो HTML पाठ परत को ओवरले करें। Pixi.js कुछ उपयोगी एक्स्ट्रा के साथ एक युद्ध-कठोर प्रदर्शन ढांचा है जो इसके लिए अच्छी तरह से काम करता है।

Answer 7

याद रखें कि DOM का उद्देश्य डॉक्यूमेंट ऑब्जेक्ट मॉडल है। आप इसे केवल बहुत ही दुर्लभ परिस्थितियों में गेम बनाने के लिए उपयोग करना चाहेंगे और अधिकांश मामलों में कैनवास को पसंद करेंगे।

यहां तक ​​कि अगर आपके खेल की छोटी ग्राफिक आवश्यकताएं हैं, तो इसे DOM में करने से खराब प्रदर्शन होगा; टेट्रिस से ज्यादा कुछ भी शायद खराब चलेगा।

मेरे पास एक वास्तविक दुनिया उदाहरण है: जब मैंने कॉनवे के गेम ऑफ़ लाइफ को लागू किया, तो मैंने 500x500 तालिका के साथ शुरुआत की, कोशिकाओं की पृष्ठभूमि का रंग बदल दिया। इस संस्करण में, एक ग्लाइडर 30 से अधिक एफपीएस पर नहीं चल रहा था, बड़े पैटर्न का परिणाम मुश्किल से 1 से अधिक था। मेरे इस खेल के कैनवास संस्करण में, अब बहुत बड़ा पेटेंट (1000 और अधिक की आबादी) को आसानी से चलाना संभव है। ~ 30 एफपीएस।

इसके अलावा, यह एसवीजी (स्केलेबल वेक्टर ग्राफिक्स) के लिए भी होना चाहिए , हालांकि मैंने कभी भी अभ्यास में कोशिश नहीं की।

Edit: I have to admit that my example is not very good (because tables = bad). But the main point is still true: DOM manipulation is for documents. The browser has to lookup CSS and allocate more memory when you work on elements. It does not really make sense to be faster than canvas.

Comments

Since when does DOM have poor performance. It's just not hardware accelerated, that's the only difference. And a 500x500 table in background colours on cell is not an efficient DOM implementation

— Raynos

@Raynos I noticed that it's not an effecient DOM implementation. There are none if you want to manipulate pixels.

— copy

-1, big tables is a performance killer. Canvas is definitely the better tool if you want to manipulate individual pixels, though setting it up against such a poor DOM implementation really makes your example pointless. Off the hip, my best shot at a DOM implementation of that would be 50000 5x1 divs with 32 different background images swapped as needed.

— aaaaaaaaaaaa

@eBusiness yeah, people told me already. Too bad I did not figure it out by myself back then :-/

— copy

@Raynos, DOM was never fast. In fact, one top reason for canvas is because the DOM is slow. Related: stackoverflow.com/q/6817093/632951

— Pacerier