একটি ব্রাউজারে, একটি বিশাল স্প্রিটশিট বা অনেকগুলি (10000) বিভিন্ন পিএনজি ব্যবহার করা ভাল?

Question

আমি jQuery এ একটি গেম তৈরি করছি, যেখানে আমি প্রায় 10000 32x32 টাইল ব্যবহার করি। এখন অবধি, আমি সেগুলি পৃথকভাবে ব্যবহার করছি (কোনও স্প্রিট শিট নেই)। একটি গড় মানচিত্রে প্রায় 2000 টাইলস ব্যবহার করা হয় (কখনও কখনও পিএনজি-র পুনরায় ব্যবহৃত তবে সমস্ত পৃথক ডিভ) এবং পারফরম্যান্স স্থিতিশীল (ক্রোম) থেকে কিছুটা ল্যাগি (ফায়ারফক্স) পর্যন্ত হয় ges এই ডিভগুলির প্রত্যেকটি সিএসএস ব্যবহার করে একেবারে অবস্থিত। একটি নতুন মানচিত্র লোড হওয়ার পরে তাদের প্রতিটি টিক আপডেট করার দরকার নেই।

গেমকিউরির মতো সিএসএস ব্যাকগ্রাউন্ড-পজিশনিং ব্যবহার করে ডিভগুলির জন্য স্প্রিটশিট পদ্ধতি ব্যবহার করা পারফরম্যান্সের পক্ষে কি আরও ভাল হবে?

তুমাকে অগ্রিম ধন্যবাদ!

Comments

কোথায় মানচিত্রের জন্য আপনার প্রয়োজন 10,000 টাইলস? আমি পরামর্শ দিচ্ছি যে আপনি ব্যবহারকারীর পক্ষে সমস্ত মানচিত্র আপলোড / আঁকবেন না। কেবল একটি অংশ দেখান, এটি দৃশ্যমান। ব্যবহারকারী সরানো হলে, পরবর্তী বিভাগটি লোড করুন। প্রতিটি 3 ডি গ্রাফিক্স যেভাবে কাজ করে।

— Deele

একটি গড় মানচিত্র 2000 টি বিভিন্ন টাইল ব্যবহার করে, বা কেবল 2000 মোট টাইলস? আপনি যে মানচিত্রগুলি তৈরি করছেন তা কত বড়?

— নিক লারসন

আপনি কি পটভূমি হিসাবে এক বা কয়েকটি বৃহত্তর চিত্র ব্যবহার এবং সীমানার জন্য বহুভুজ সংঘর্ষ সনাক্তকরণের কথা বিবেচনা করেছেন?

— SAHornickel

Answer 1

আমার পরামর্শ

অনেকগুলি ছোট পিএনজি প্রচুর নেটওয়ার্ক ওভারহেড যুক্ত করবে (এইচটিটিপি অনুরোধের আকারের কারণে, তবে পিএনজি শিরোনাম এবং সম্ভবত আরও গুরুত্বপূর্ণভাবে, দক্ষতার সাথে সংকোচনের অক্ষমতা)। অন্যদিকে, একটি খুব বড় পিএনজির ত্রুটি রয়েছে যা লোড হতে কিছুটা সময় নেয় এবং স্মৃতিতে অবিচ্ছিন্ন অংশে স্থায়ীভাবে মেমোরিতে (10,000 টাইলের জন্য 40 মেগাবাইট) থাকা প্রয়োজন।

আমি মাঝের জমিটি সুপারিশ করছি : বেশ কয়েকটি যুক্তিসঙ্গত আকারের পিএনজি, উদাহরণস্বরূপ 32 × 32 আকারের 1024 টাইল । হতে পারে থিম অনুসারে গ্রুপ করা (উদাহরণস্বরূপ, বন টাইলস সহ একটি পিএনজি, একটি পর্বত টাইলস সহ, অন্য একটি শহরের টাইলস - আমি আপনার গেমটির থিম জানি না, তবে আপনি ধারণাটি পেয়েছেন)।

ক্যাশে দক্ষতা সম্পর্কে নোট

মেমোরি অ্যাক্সেস দক্ষতার কারণে আপনার স্প্রিটশিটগুলি কখনও প্রশস্ত করা উচিত নয় । একটি 128 × 8192 চিত্র থেকে ব্লিটিং টাইলস 8192 × 128 চিত্র থেকে ব্লিটিংয়ের চেয়ে সবসময় দ্রুত হবে।

কল্পনা করুন আপনি একটি 8192 × 128 চিত্রের মধ্যে প্রথম টাইলটি ব্লিট করতে চান। সরলতার জন্য, ধরে নিন 1 পিক্সেল 1 বাইট পিক্সেলের প্রথম দুটি লাইন এইভাবে ছড়িয়ে দেওয়া হয়েছে (সেলগুলি মেমরিতে তাদের বাইট নম্বর ধারণ করে):

┌────┬────┬───┬────┬──────────┬─────┐
│  0 │  1 │...│ 31 │   ....   │ 8191│ 1st line of pixels: bytes 0 to 8191
├────┼────┼───┼────┼──────────┼─────┤
│8192│8193│...│8223│   ....   │16383│ 2nd line of pixels: bytes 8192 to 16383
├────┼────┼───┼────┼──────────┼─────┤
│ .. │ .. │...│ .. │   ....   │ ... │

তাই যাতে blit করার জন্য প্রথম লাইন প্রথম শিরোনাম, ব্রাউজার ইঞ্জিন উদ্ধার করবে বাইট 0থেকে31 । Blit করার দ্বিতীয় লাইন , এটা পুনরুদ্ধার করবে বাইট 8192থেকে8223 , ইত্যাদি 32nd লাইন যেখানে বাইট পর্যন্ত 253952করতে253983 পুনরুদ্ধার করা হয়েছে।

প্রক্রিয়াজাত বাইটগুলির মোট সংখ্যা 32 × 32 হবে। তবে মোট মেমরির পরিধি 253984 বাইটের বেশি। একটি আধুনিক সিপিইউতে, এর অর্থ 32 বা 33 ক্যাশে স্টল । বিপরীতে, চিত্রটি যদি 128 × 8192 হয়, মেমরির পরিধিটি কেবল 4000 বাইট হতে হবে, যার অর্থ দুটি ক্যাশে স্টলের বেশি নয়।

কারণ আজকের সিপিইউগুলি খুব দ্রুত, ক্যাশে স্টলগুলি খুব ব্যয়বহুল এবং হ্যাং কম্পিউটেশন। সুতরাং কোনও 8192 × 128 চিত্রের পরিবর্তে 128 × 8192 চিত্র ব্যবহার করা কমপক্ষে তত্ত্বের ক্ষেত্রে কমপক্ষে 8 গুণ দ্রুত গতিযুক্ত। অনুশীলনে এটি নির্ভর করবে যে ব্লিটিং কীভাবে বাস্তবায়িত হয়: সমস্যাটি হ্রাস করার জন্য অন্তর্নিহিত ইঞ্জিন নিজেই চিত্রগুলিকে টাইলগুলিতে বিভক্ত করে তোলে।

এটি সঠিকভাবে ব্যাখ্যা করা সহজ নয় এবং আমি খুব বেশি বিস্তৃত হওয়ার আশা করিনি। আমি এটা জ্ঞান করে তোলে আশা করি!

Comments

"এটিকেও স্মরণ রাখবেন যে মেমোরি অ্যাক্সেস দক্ষতার কারণে আপনার স্প্রিটশিটগুলি কখনই খুব বেশি প্রশস্ত করা উচিত নয় 12 - খুব কৌতূহল, আপনি কি দয়া করে বিস্তারিত বর্ণনা করবেন? :)

— গ্রিমশা

@ ডেভিলউইথিন: আমি সমস্যাটি ব্যাখ্যা করার চেষ্টা করেছি; আমি যথেষ্ট পরিষ্কার করছি যদি আমাকে জানতে দিন!

— সাম হোচেভার

ক্যাশে দক্ষতার স্টাফ আকর্ষণীয়। ফ্রেমরেট সম্পর্কিত এই পার্থক্যের আপনার কি কোনও সংখ্যা আছে?

— গ্রেগরি অ্যাভেরি-ওয়েয়ার

সমস্যাটি হোক না কেন, বাস্তবায়ন সুনির্দিষ্ট মনে হচ্ছে তবে ওপেনজিএল এর মতো এপিআই যদি সেইভাবে টেক্সচারে কাজ করে তবে অবশ্যই এটি বিবেচনায় নেওয়া গুরুত্বপূর্ণ, ধন্যবাদ :)

— গ্রিমশা

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

— সাম হোচেভার

Answer 2

একটি বিশাল স্প্রিটশিট হ'ল (সম্ভবত) আপনাকে আরও ভাল পারফরম্যান্স দিচ্ছে, কারণ পিছিয়ে যাওয়ার সবচেয়ে বড় কারণ হ'ল ব্রাউজারের অনুরোধ থেকে সার্ভারে ব্রাউজারে গোল ভ্রমণ। 10,000 এইচটিটিপি কলগুলি খুব বেশি গ্রহণ করতে চলেছে, 1 টি এইচটিটিপি কলের চেয়ে অনেক বেশি দীর্ঘ যা একটি ফাইলকে 10,000 বেশি বড় দেয় returns

গেমের কাঠামো এবং আপনি যে HTML তৈরি করছেন তার উপর নির্ভর করে ল্যাগ কমাতে আপনি অন্যান্য জিনিস ব্যবহার করতে পারেন।