ব্রাউজার-ভিত্তিক গেমস তৈরি করার সময় ক্যানভাসে, না ক্যানভাসে?

Question

পটভূমি: আমার বিস্তৃত বিকাশ পটভূমি রয়েছে, তবে শেষবারের মতো যখন আমি কোনও কোড কোড করেছিলাম তখন বহু বছর আগে। আমার জাভাস্ক্রিপ্ট দক্ষতাগুলি বেশ সীমাবদ্ধ এবং আমি একটি সহজ গেম - টেট্রিস, প্যাক ম্যান বা সেই জটিলতার স্তরের কিছু তৈরি করে তাদের উন্নতি করতে চাই inte

প্রশ্ন: এটি আমার কাছে মনে হচ্ছে যে আমার একটি মৌলিক পছন্দ করা দরকার তা হল আমার কোনও <canvas>উপাদানকে রেন্ডার করা উচিত কি না।

একটি ক্যানভাসের সাহায্যে পয়েন্ট, লাইন এবং এর উপরে আরও জটিল জিনিস উপস্থাপনের জন্য আমার কাছে প্রাথমিক সরঞ্জাম রয়েছে have সম্ভবত এটির জন্য বিভিন্ন কাঠামো রয়েছে বা থাকবে।

ক্যানভাস ছাড়া আমি আমার ওবামগুলিকে অনেকগুলি ওভারল্যাপিং উপাদান সহ একটি নিয়মিত ওয়েবপৃষ্ঠার মতো একটি ডম-ট্রিতে রাখতে পারি।

একটি পদ্ধতির অপর চেয়ে ভাল? তারা পারস্পরিক একচেটিয়া হয়? আমি কীভাবে বাছাই করব?

Answer 1

ক্যানভাস এবং ডোম পারস্পরিক একচেটিয়া নয়, যদিও তারা মোটামুটি পৃথক। ক্যানভাস ব্যবহার করে মূল গেমের ক্ষেত্রটি (যেমন: টেট্রিসে পড়ে যাওয়া টুকরোগুলি) রেন্ডার করা এবং ক্যানভাস উপাদানটি ওভারল্যাপিং করে এমন ডিওএম উপাদানগুলির সাথে সমস্ত ইউআই (যেমন স্কোর প্রদর্শন) করা উচিত One

এটি বলেছিল, টেট্রিসের মতো আদিম খেলাগুলির জন্য এই জাতীয় দৃষ্টিভঙ্গি সত্যিই প্রয়োজনীয় নয়। ক্যানভাস আরও উন্নত গ্রাফিকাল এফেক্টের জন্য দরকারী, তবে সেগুলি যদি প্রয়োজন হয় না তবে ডমকে আটকে দেওয়া আপনাকে আরও বিস্তৃত সামঞ্জস্যতা দেবে; সমস্ত ব্রাউজার HTML5 ক্যানভাস সমর্থন করে না।

Comments

এক দিনের চাকরির হিসাবে গত বছর HTML5 গেমসে সৎভাবে কাজ করার জন্য, আমি বলব যে ক্যানভাসকে সমর্থন করে না এমন ব্রাউজার কোনও শালীন গেমের পক্ষে যথেষ্ট দ্রুত নয়, তবে আবার, অ্যান্ড্রয়েড ফোনে ওয়েবকিটের চেয়ে ধীর গতিতে নয় ... :(

— আইভো ওয়েটজেল

ধন্যবাদ :) আমি "ব্রাউজার সমর্থন" এর জন্য খুব বেশি যত্ন নিই না, যতক্ষণ না আমি যথেষ্ট বিষয় শিখেছি ততক্ষণে আমি সমস্যাটি নিজেই সমাধান হয়ে গেছে আশা করি। এটি মূলত মজা এবং শেখার জন্য।

— লেটারিয়ান

আমি এটিও করছি: গিউটি নিজেই ক্যানভাসে টানা যখন জিইআইআই শীর্ষে আংশিক স্বচ্ছ ডোম উপাদান নিয়ে থাকে।

— ফিলিপ

@ আইভোওয়েজেল আমিও একইরকম অনুভব করি ... আমরা মোবাইল প্ল্যাটফর্মগুলিতে গেমগুলিতেও কাজ করি এবং অ্যান্ড্রয়েডও অনেক বেশি

— খেলতে

Answer 2

ডোম সম্পর্কে ডোম
পুরানো স্কুল 2 ডি এর জন্য বেশ ভাল কাজ করে, এর অর্থ কোনও চিত্রের ঘূর্ণন বা স্কেলিং ব্যবহার করা হয়নি। এই দুটি কাজের জন্য আসলে সরঞ্জাম রয়েছে, তবে আপনি তাদের ভাল পারফরম্যান্সের উপর নির্ভর করতে পারবেন না।

একটি গেমের জন্য আপনার যতটা সম্ভব ব্রাউজার লেআউট ইঞ্জিনের উপর নির্ভর করা উচিত, এর অর্থ ব্যবহার position:absolute অবজেক্ট স্থাপনের জন্য । যতদূর সম্ভব চেষ্টা করুন DOM অবজেক্টগুলি সর্বদা তৈরি এবং ধ্বংস না করার জন্য, যদি আপনার খুব চলক সংখ্যক অবজেক্টের প্রয়োজন হয় তবে আপনাকে প্রয়োজন হতে পারে display:noneপুনরায় জীবিত হওয়ার জন্য প্রস্তুত অলস ডোম উপাদানগুলির একটি পুল স্থাপন করতে পারেন ।

ডোম বনাম ক্যানভাস
আইওএম আইএম 8-এর বাজার ভাগের সাথে ক্যানভাস সঙ্কুচিত হওয়া আরও বেশি আকর্ষণীয় বিকল্প হয়ে উঠছে, বেশিরভাগ গেমের জন্য এটি সম্ভবত খুব ভাল পছন্দ। তবে কিছু কাজের জন্য ডিওএম হ'ল ব্যবহার করা সহজ সরঞ্জাম, প্রয়োজনে আপনি কিছু নথির প্রবাহ ব্যবহার করতে পারেন, আপনি রেন্ডার অবজেক্টের মাধ্যমে সরাসরি ক্লিকগুলি ধরতে পারবেন, স্ক্রোল বারগুলি একীভূত করা সহজ।

পারফরম্যান্স পার্থক্যটি আচ্ছাদন করা শক্ত, এটি কাজের উপর নির্ভর করে এবং ব্রাউজার থেকে ব্রাউজারে বুনোভাবে পরিবর্তিত হবে।

Comments

আমি উল্লেখ করার জন্য ভাবি নি position:absolute, এটি একটি ভাল পয়েন্ট।

— 59

যেখানে ডিওএম নেই এমন কোনও স্তরে ক্যানভাস জিপিইউ ত্বরান্বিত হয় না?

— থমাস

@ থমাস একমাত্র স্পট যেখানে আপনি নিশ্চিত করতে পারেন যে জিপিইউ ত্বরণ রয়েছে তা ওয়েবজিএল। (প্রযুক্তিগতভাবে এটি প্রয়োগ করা যেতে পারে, তবে এটি হওয়ার সম্ভাবনা নেই)। প্রথম ক্যানভাস 2 ডি বাস্তবায়নগুলি কঠোরভাবে সিপিইউ ছিল, কিছু কার্যকারিতা কিছু ব্রাউজারে জিপিইউতে স্থানান্তরিত হয়েছে, উল্লেখযোগ্য পারফরম্যান্স লাভের সাথে সব ক্ষেত্রে নয়। ডোম জিপিইউ ত্বরণের জন্য, তারা এটিতে কাজ করছে, এবং এমনটি হওয়া উচিত নয় এমন কোনও বিশেষ কারণ আমি দেখছি না। যাই হোক না কেন, শেষ পর্যন্ত বিষয়টি ব্রাউজার কীভাবে তা করে তা নয়, তবে এটি যদি আপনার প্রয়োজনের জন্য যথেষ্ট ভাল সম্পাদন করে তবে জিপিইউ সবসময় দ্রুত বোঝায় না।

— আআআআআআআআআআআআআআআআআআআআআআআআআচ 28'13

আপনি সবসময় দ্রুত জিপিইউ বলতে চাইছেন না? একটি পিসিতে এটি সত্য হতে পারে তবে মোবাইল প্ল্যাটফর্মে আমি জিপিইউকে আরও বেশি রেন্ডারিং করতে চাই তাই সিপিইউতে এআই ইত্যাদির মতো গেম যুক্তি কার্যকর করতে ব্যয় করতে আরও বেশি 'চক্র' রয়েছে যাতে এইভাবে গেমটি আরও জটিল হতে পারে could ।

— টমাস

@ থমাস এটি প্ল্যাটফর্ম, কাজ এবং অন্যান্য অনেক কিছুর উপর নির্ভর করে। ওল্ড-স্কুল 2 ডি মূলত মেমোরি অপারেশন, মূল স্মৃতিতে সংস্থান রাখা এবং সেই ক্রিয়াকলাপগুলির জন্য সিপিইউ ব্যবহার করা একটি মোবাইল ফোনেও বেশ ভালভাবে কাজ করবে, তবে অন্য প্রসেসরের স্মৃতিতে থাকা ডেটাতে অপারেশন করার চেষ্টা করা একটি পারফরম্যান্স কিলার, সুতরাং আপনি যদি জিপিইউ অপারেশনের সাথে জিপিইউ দ্বারা সম্পন্ন করা যায় না এমন অপারেশনগুলি মিশ্রিত করেন তবে আপনি অপারেশনের উপর নির্ভর করে বাফারকে পিছনে পিছনে পাঠিয়ে শেষ করবেন বা প্রসেসরের একজন অন্য প্রসেসরের মেমোরিতে লিখবেন।

— আআআআআআআআআআআআআআআআআআআআআ

Answer 3

পুরোপুরি গেমের ধরণের উপর নির্ভর করে, যদিও ক্যানভাস তাদের মধ্যে "বেশিরভাগ" ফিট করে।

ডোম পরিচালনা একটি নির্দিষ্ট সময়ে ভয়ঙ্কর হয়ে ওঠে, তত বেশি উপাদান আপনি ধীরে ধীরে পেয়ে যাবেন, তত বেশি উপাদান আপনি খুব স্ল্যাওয়ারের আশেপাশে চলে যান ।

আইএমজি উপাদানগুলির সাথে সম্পদ লোডিং অর্ডার পরিচালনা করা হচ্ছে ... অ-ট্রিভাল (চিত্রের ট্যাগগুলিতে উদ্দেশ্যমূলকভাবে ভাঙা প্রোটোকলগুলিতে বিরতি ত্রুটি: ডি)।

যদিও, বেশিরভাগ স্থিতিশীল চিত্র এবং লো-এফেক্ট কাউন্ট সহ গেমের জন্য আমি এখনও ডিওএম-এর সাথে যেতে পারি। সমস্ত কিছু, ক্যানভাস প্রথম পছন্দ (পয়েন্ট এবং ক্লিক স্টাফ, যদিও হিটম্যাপগুলি আলাদা গল্প।

ক্যানভাস আজকাল এত দ্রুত (এমনকি আইফোনেও), এটি ব্যবহার না করার পক্ষে খুব কমই কোনও কারণ নেই।

Comments

অ্যাভেড ইঞ্জিনের একটি ভিডিও উপস্থাপনার ভিত্তিতে গতি সম্পর্কে , যখন আপনার কয়েক হাজার উপাদান ছিল, ক্যানভাসের চেয়ে ডিওএম হ্যান্ডেল করতে আসলে দ্রুত ছিল actually আপনি একমত না? এই কি পরিবর্তন হয়েছে? আমি আশা করি আমি আবার সেই ভিডিওটি খুঁজে

— পেতাম

: ডিভি জেঙ্গার সাথে কাজ করে, আভিস তৈরির লোকটির সাথে। জিনিসগুলি গত বছর পরিবর্তিত হয়েছে, আমার উপর বিশ্বাস করুন :)

— আইভো ওয়েটজেল

-1, আমি নন-গেম অ্যাপ্লিকেশনটির জন্য 000 100000 ডোম উপাদান থাকার চেষ্টা করেছি, এটি বেশ কার্যকর হয়নি। তবে কয়েক হাজার উপাদান সমস্যাযুক্ত নয়। এটি এমন নয় যে ক্যানভাসটি দ্রুত হতে চলেছে যদি আপনি প্রতিটি আপডেটে এটির হাজার হাজার চিত্র আঁকেন।

— আআআআআআআআআআআআআআআআআআআআআ

@eBusiness তারপরে এগিয়ে যান এবং জটিল জেড অর্ডারিং এবং 3 ডি রূপান্তর প্রবর্তন করুন। এর সাথে শুভ কামনা

— রইল

@ আইভোওয়েজেল আপনি যদি 3 ডি করতে চান তবে ক্যানভাসটি পছন্দ। কিন্তু এটি আপনার উত্তরটি বলে না তাই আপনার বক্তব্য কী?

— আআআআআআআআআআআআআআআআআআআআআআআচই

Answer 4

আপনি যদি এইচটিএমএল 5 গেম তৈরি করেন তবে ক্যানভাসটি আরও ভাল। কারণটা এখানে:

1. গতি - ক্যানভাসটিকে একটি চিত্র হিসাবে ভাবুন। আপনি ছবিটিতে আঁকুন, এবং তারপরে এটি আপনি কী আঁকেন তা ভুলে যায়। এটি নাটকীয়ভাবে ডিওএম বা এসভিজির তুলনায় কর্মক্ষমতা বৃদ্ধি করে increases ডোম এবং এসভিজি অ্যাপ্লিকেশনগুলি যা করে তা হ'ল তারা আপনার পর্দার প্রতিটি বস্তুর সন্ধান করে। এর অর্থ যদি আপনার যদি স্ক্রিনে অনেকগুলি অবজেক্টস, বিশেষত অফস্ক্রিন বা লুকানো থাকে তবে তার সাথে একটি বৃহত্তর স্তর থাকে তবে সেগুলি টানা থাকে এবং যাইহোক ট্র্যাক রাখা হয়।
2. অঙ্কন বৈশিষ্ট্য - যদিও ডিওএম উপাদানগুলির শক্তিশালী CSS3 রূপান্তর রয়েছে, এটি ক্যানভাসের বৈশিষ্ট্যগুলির সাথে তুলনা করে কিছুই নয়। ক্যানভাস যে কোনও অবজেক্ট আঁকতে পারে, শক্তিশালী গ্রেডিয়েন্ট সমর্থন থাকতে পারে, 3 ডি, ফিল্টার ইত্যাদিতে বস্তু প্রদর্শনের জন্য প্লাগইন থাকতে পারে have
3. সমর্থন - ডিওএম ব্যবহার করার সময়, আপনি যখন ট্রান্সফর্মেশন বা অ্যানিমেশনগুলির মতো পরীক্ষামূলক বৈশিষ্ট্যগুলি ব্যবহার করতে চান, আপনাকে সিএসএসে -moz-, -webkit-, -o-, এবং -ms- উপসর্গ ব্যবহার করতে হবে। ক্যানভাসে, আপনার এটি নিয়ে চিন্তা করার দরকার নেই। কেবল একটি ফাংশন দিয়ে আঁকুন, এবং আপনি সম্পন্ন করেছেন। ক্যানভাসের আরও একটি সমর্থন সম্পর্কিত সুবিধা হ'ল আপনার অ্যাপ্লিকেশনটি কীভাবে প্রদর্শিত হয়। একটি ওয়েবসাইট বিকাশকারী হিসাবে, ব্রাউজারগুলির মধ্যে ডোম মানকতার অভাব আমাকে বাদামকে চালিত করে। ব্যাকগ্রাউন্ড, গ্রেডিয়েন্টস, ট্রান্সফর্মেশন ইত্যাদি বিস্তারিত ডাব্লু 3 সি নির্দিষ্টকরণ সত্ত্বেও ব্রাউজারগুলির মধ্যে আলাদাভাবে প্রদর্শন করে। ক্যানভাসে, আমি কেবল একটি জিনিস জুড়ে দিয়েছি যা পৃথক হতে পারে - ব্যাকগ্রাউন্ড। একটি টাইল্ড ব্যাকগ্রাউন্ড প্রদর্শন করার সময়, কিছু ব্রাউজারগুলি x অক্ষের 0px এ টাইলকে কেন্দ্র করে "টাইল-এক্স" নেবে এবং অন্যরা কেবল টালিটি টালি হিসাবে নামিয়ে নেয়।
4. গ্রন্থাগারগুলি এবং ডকুমেন্টেশন - ক্যানভাসের সাহায্যে গেমস তৈরির জন্য ডকুমেন্টেশনে প্রচুর গ্রন্থাগার রয়েছে। কিছু লাইব্রেরি: ক্রিয়েটজেএস, পেপার.জেএস, ফ্যাব্রিক.জেএস, কিনেটিকজেএস, লাইবক্যানভাস, প্রসেসিং.জেএস, প্লটকিট, রেকাপি, ফিলোজিএল, ইনফোভিজ টুলকিট, ফ্রেম-ইঞ্জিন, কেকে, রাফেলজস, টিউনজস ইত্যাদি আমি আরও একটি টন তালিকা করতে পারি, তবে কোন লাভ নেই।

ডাউন সাইড - অ্যানিমেশন - অ্যানিমেশনের জন্য অনেক দুর্দান্ত লাইব্রেরি থাকলেও আমি CSS3 অ্যানিমেশন পছন্দ করি। এগুলি তৈরি করা, চালনা করা এবং ট্রিগার করা এত সহজ। ক্যানভাসের সাহায্যে সিএসএস 3 অ্যানিমেশনগুলি কাজ করার জন্য বিভিন্ন হ্যাক রয়েছে তবে আমার সন্দেহ হয় যে বেশিরভাগ লোকেরা এই পদ্ধতিটি ব্যবহার না করা পছন্দ করেন।

আপনার খেলাটির জন্য শুভকামনা, এবং আপনি কী বানাবেন তা আমি আশা করি!

Answer 5

আপনি যদি মোবাইল ব্রাউজারগুলিকে লক্ষ্য করে বিশেষত অ্যান্ড্রয়েড এবং গেমটিতে কোনও চলমান গ্রাফিক উপস্থিত থাকে তবে DOM অ্যানিমেশন এড়িয়ে চলুন। অ্যান্ড্রয়েডের স্টক ব্রাউজারটি ওয়েবকিট সত্ত্বেও অকেজো। আপনি শুরু করার আগে এই অ্যান্ড্রয়েড ইস্যু থ্রেডটি পরীক্ষা করে দেখুন: "ব্রাউজার এবং ওয়েবভিউতে CSS3 এবং জাভাস্ক্রিপ্ট অ্যানিমেশনগুলির ভয়ঙ্কর উপস্থাপনা" ।

ক্যানভাস নিজেই কোনও দ্রুত নাও হতে পারে তবে ক্যানভাস অ্যানিমেশনগুলির জন্য হার্ডওয়্যার ত্বরণের জন্য অনুরোধ করার জন্য ফ্রেমওয়ার্ক রয়েছে, উদাহরণস্বরূপ কোকুনজেএস । সাইটে একটি ভিডিওতে একটি লিঙ্ক রয়েছে, ফ্রেমওয়ার্কটি ব্যবহার করে আপনি যে পারফরম্যান্স লাভ অর্জন করতে পারেন তা দেখিয়েছেন (তবে কোনও কারণে আমাকে দুটি লিঙ্কের বেশি পোস্ট করার অনুমতি নেই)।

Answer 6

সহজ উত্তর: ক্যানভাস ফ্যালব্যাক সহ ওয়েবজিএল।

উত্সাহিত উত্তর: আপনার গেমটিতে প্রচুর পাঠ্য থাকলে একটি HTML পাঠ্য স্তরকে ওভারলে করে। পিক্সি.জেএস হ'ল একটি যুদ্ধ- দৃened় প্রদর্শন কাঠামো যা কিছু দরকারী অতিরিক্ত যা এটির জন্য ভাল কাজ করে।

Answer 7

মনে রাখবেন DOM হ'ল ডকুমেন্ট অবজেক্ট মডেল। আপনি এটি কেবল খুব বিরল পরিস্থিতিতে গেমস তৈরির জন্য ব্যবহার করতে এবং বেশিরভাগ ক্ষেত্রে ক্যানভাসকে পছন্দ করতে চাইবেন।

আপনার গেমের যদি ছোট গ্রাফিক প্রয়োজনীয়তা থাকে তবে এটি ডিওমে করা একটি খারাপ পারফরম্যান্স পাবে; টেট্রিসের চেয়ে বেশি কিছু সম্ভবত খারাপভাবে চলবে।

আমার একটি বাস্তব বিশ্বের উদাহরণ রয়েছে: যখন আমি কনওয়ের গেম অফ লাইফের একটি বাস্তবায়ন তৈরি করেছি, আমি কোষগুলির পটভূমির রঙ পরিবর্তন করে 500x500 টেবিল দিয়ে শুরু করেছি। এই সংস্করণে, একটি গ্লাইডার 30 fps এর বেশি চলছিল না, বড় নিদর্শনগুলির ফলস্বরূপ 1 টিরও বেশি কষ্ট হয়েছে this এই গেমটির আমার ক্যানভাস সংস্করণে, এখন সহজেই অনেক বড় প্যাটারগুলি (1000 এবং আরও বেশি লোকের সংখ্যা) চালানো সম্ভব at F 30 fps।

এছাড়াও, এটি এসভিজি (স্কেলেবল ভেক্টর গ্রাফিক্স) এর ক্ষেত্রেও হওয়া উচিত , যদিও আমি বাস্তবে কখনও এটি চেষ্টা করি নি।

সম্পাদন করা : আমাকে স্বীকার করতে হবে যে আমার উদাহরণটি খুব ভাল নয় (কারণ টেবিল = খারাপ)। তবে মূল বিষয়টি এখনও সত্য: ডিওএম ম্যানিপুলেশন ডকুমেন্টগুলির জন্য। আপনি যখন উপাদানগুলিতে কাজ করেন তখন ব্রাউজারটি সিএসএস দেখতে এবং আরও মেমরি বরাদ্দ করতে হয়। এটি আসলে ক্যানভাসের চেয়ে দ্রুত হওয়ার কোনও અર્થ নেই।

Comments

যেহেতু কখন ডমের খারাপ অভিনয় নেই। এটি কেবল হার্ডওয়্যারকে ত্বরান্বিত করা হয়নি, এটি কেবলমাত্র পার্থক্য। এবং কক্ষের পটভূমিতে রঙের 500x500 টেবিলটি কোনও কার্যকর

— ডিওএম

@ রায়নোস আমি লক্ষ্য করেছি যে এটি কোনও কার্যকর ডিওএম বাস্তবায়ন নয়। আপনি যদি পিক্সেলগুলি পরিচালনা করতে চান তবে কিছুই নেই।

— অনুলিপি

-1, বড় টেবিলগুলি পারফরম্যান্স কিলার। আপনি স্বতন্ত্র পিক্সেলগুলি ম্যানিপুলেট করতে চান তবে ক্যানভাস অবশ্যই উন্নত হাতিয়ার, যদিও এটি একটি দুর্বল ডোম প্রয়োগের বিরুদ্ধে সেটআপ করা সত্যই আপনার উদাহরণকে অর্থহীন করে তুলেছে। হিপ বন্ধ, এটির একটি ডিওএম বাস্তবায়নে আমার সেরা শটটি হবে 50000 5x1 ডিভস সহ 32 বিভিন্ন ব্যাকগ্রাউন্ড চিত্রের প্রয়োজন অনুসারে অদলবদল।

— আআআআআআআআআআআআআআআআআআআউ

@ ই ব্যবসায়, হ্যাঁ, লোকেরা আমাকে ইতিমধ্যে জানিয়েছে। খুব খারাপ আমি তখনই নিজের দ্বারা এটি বের করতে পারি নি: - /

— অনুলিপি

@ রায়নস, ডোম কখনও দ্রুত ছিল না। আসলে, ক্যানভাসের একটি শীর্ষ কারণ হ'ল ডিওএম ধীর। সংশ্লিষ্ট: stackoverflow.com/q/6817093/632951

— Pacerier