মোবাইল সাফারির জন্য কীভাবে একজন এইচটিএমএল 5 ক্যানভাস এবং জাভাস্ক্রিপ্ট ওয়েব অ্যাপ্লিকেশনটিকে অনুকূল করতে পারে?


17

আমি একটি এইচটিএমএল 5 ক্যানভাস এবং জেএস গেম তৈরি করেছি যা ক্রোম (30fps) এর ডেস্কটপ বা ল্যাপটপে দুর্দান্ত চলে তবে মোবাইল সাফারিতে আমি কেবল 8 টি পিপিএস পাই। ফ্রেমরেট বাড়ানোর জন্য কোনও সহজ টিপস বা কৌশল আছে কি?

উত্তর:


14

দুর্ভাগ্যক্রমে, উত্তরটি কম আঁকতে হবে। আমি ক্যানভাস ভিত্তিক অ্যাপ্লিকেশনগুলির সাথে বাধা পেয়েছি (যে কোনও প্ল্যাটফর্মে, সত্যিই) পিক্সেল আঁকতে সময় লাগে।

চেষ্টা করার জন্য এখানে কিছু জিনিস রয়েছে:

  1. বেশ কয়েকটি ক্যানভাস স্তর ব্যবহার করুন। আপনার বস্তুকে অন্য স্তরে আঁকানোর সময় আপনার পটভূমিটি একটি স্তরে আঁকুন (পুরোপুরি পটভূমির স্তরের উপরে অবস্থিত)। (দ্রষ্টব্য: আমি মোবাইল সাফারিতে এটি চেষ্টা করি নি, তবে এটি অন্যান্য প্ল্যাটফর্মগুলিতে সহায়তা করতে পারে)

  2. কেবল পরিবর্তন করা স্প্রেটগুলিকে পুনরায় আঁকুন। এটি জটিল কিন্তু স্পষ্টভাবে কর্মক্ষমতা বৃদ্ধি করে। ধারণাটি হ'ল কোনও স্প্রিটকে পুনরায় চিত্রিত করা দরকার এবং কেবল পেছনের পটভূমির পাশাপাশি এটির প্রয়োজন এমন স্প্রাইটগুলি পুনরায় আঁকতে হবে কিনা তা সংরক্ষণ করা। (এটির জন্য স্প্রাইট ওভারল্যাপিং হতে পারে এমন অন্যান্য বস্তুগুলিতে ক্যাসকেড করা দরকার))

Chrome এ বিকাশের বিষয়টি হ'ল ক) এর জাভাস্ক্রিপ্ট ইঞ্জিন (ভি 8) নরকের মতো দ্রুত এবং খ) নতুন সংস্করণগুলি (7,8,9) ক্যানভাস রেন্ডারিংয়ের ক্ষেত্রে কিছুটা GPU ত্বরণ রয়েছে। এটি আপনার ডেস্কটপ / ল্যাপটপের মতো মোবাইল হার্ডওয়্যার ঠিক তত শক্তিশালী নয় এই সত্যটির সাথে মিলিত হওয়ার অর্থ এটি হল যে মোবাইল সাফারিতে একই পারফরম্যান্সের কাছাকাছি কোথাও পাওয়া সত্যিই কঠিন হবে।

আমি মনে করি, আপাতত সবচেয়ে ভাল উপায়টি হতে পারে আপনার সফটওয়্যারটি মোবাইল সাফারিতে গেইট ગો থেকে টার্গেট করে চেষ্টা করুন এবং এমন একটি গেম তৈরি করুন যা পুনরায় আঁকানো নিবিড় নয়।


+1 কম আঁকাই নিঃসন্দেহে এবং দুর্ভাগ্যক্রমে এখানে যাওয়ার উপায়, যদিও ব্যাকগ্রাউন্ড স্তরটির জন্য দ্বিতীয় ক্যানভাস এবং একটি নোংরা পতাকাযুক্ত পদ্ধতির সাহায্যে আপনি কিছু ক্ষেত্রে 50% পর্যন্ত বেশি পারফরম্যান্স অর্জন করতে পারেন।
আইভো ওয়েটজেল

4

এটি একটি দীর্ঘ শট একটি বিট, কিন্তু আপনার গেম পরিবর্তে সিএসএস রূপান্তর সঙ্গে ডিআইভি স্প্রিটে কাজ করতে পারে? আমি এটি বলছি কারণ আমি সিএসএস রূপান্তর এবং রূপান্তরগুলির সাথে আইওএস ডিভাইসগুলিতে জিনিসগুলি ঘুরিয়ে নিয়ে কিছু চমত্কার পারফরম্যান্স পাচ্ছি।

এগুলি ঠিকঠাকভাবে হার্ডওয়্যার ত্বরান্বিত বলে মনে হচ্ছে, ত্বরণটি কিক করার জন্য আপনার অবশ্যই রূপান্তরগুলির জন্য 3D ফর্মটি ব্যবহার করতে হবে (অর্থাত্ অনুবাদ 3 ডি পরিবর্তে অনুবাদ করতে হবে) এটি সত্যই সত্যই কসাইটি মসৃণ এবং আইওএস ব্রাউজার বাস্তবায়ন সমর্থন করে ফর্ম যেখানে আপনি কেবলমাত্র একটি 16 উপাদান সরাসরি ফ্ল্যাট ম্যাট্রিক্স সেট করেছেন যা আমার পক্ষে খুব সুবিধাজনক।

এটি কতটা মসৃণ হয় তা দিয়ে আমি এতটাই মুগ্ধ হয়েছি যে এইভাবে লেখা একটি সাধারণ গেম প্রজেক্ট চেষ্টা করার অর্থ আমি পেয়েছি।


খুব আকর্ষণীয় ধারণা। আশা করা যায় তারা শেষ পর্যন্ত 2 ডি ক্যানভাস ত্বরণকেও সক্ষম করে some
ড্যানিয়েল এক্স মুর


3

@ গোসুব সবকিছু বলেছেন প্লাস:

আপনি যে গণিত করছেন তা দেখুন, আরও কার্যকর অ্যালগরিদম ব্যবহার করার উপায় আছে কিনা তা দেখুন।

ছোট ছবি ব্যবহার করুন। 2 এর চিত্রশক্তির মাত্রা তৈরি করার চেষ্টা করুন

দেখুন আপনি ক্যানভাসে আলফা মিশ্রণ থেকে মুক্তি পেতে পারেন বা সিএসএস অস্বচ্ছতা সম্পত্তি ব্যবহার করতে পারবেন না।

আপনার ফলাফল ফিরে পোস্ট করুন। জিনিসগুলি সবচেয়ে বেশি কী সাহায্য করেছে তা জানতে আকর্ষণীয় হবে।


3

আমি কোনও পুরানো থ্রেডের উত্তর যুক্ত করতে ঘৃণা করব - তবে আমি অবাক হয়েছি যে কেউ এটি উল্লেখ করেনি।

আপনি যখন আপনার প্রথম গেমগুলি লিখছেন, কেবল তাদের লিখুন যে আপনি কীভাবে তাদের পারফরম্যান্সের ভিত্তিতে কাজ করতে পারবেন। উপরের কৌশলগুলি পারফরম্যান্স উচ্চ রাখার জন্য ভাল সূচনা পয়েন্টগুলি - তবে আসল কৌশলটি প্রোফাইলার। আপনি যদি ক্রোম বা ফায়ারফক্সে আপনার অ্যাপ্লিকেশনটি প্রোফাইল করেন (ইঙ্গিত: প্রচুর পদ্ধতি ব্যবহার করুন যাতে আপনি সঠিক বাধাগুলি দেখতে পারেন; যাতে আপনাকে পরে জিনিসগুলি সরিয়ে নিতে হবে না - তবে এটি আপনার করা উচিত should), আপনি দেখার অতিরিক্ত সুবিধা পাবেন সঠিক সময়সীমা ফলাফল। আমার ক্ষেত্রে, আমি দেখতে পেলাম যে ব্রাউজারটির নিয়মিত পটভূমিটি ৮০% সময় নেয়। আমি এটিকে সরানোর পরে, আমি অন্যান্য কলগুলি যথাক্রমে 40% এবং আরও বেশি গ্রহণ করতে দেখেছি। এক-দু'ঘণ্টা পর আমি যথেষ্ট এফপিএস লাভ দেখতে পেলাম।


1

আমি আপনার ফলাফল থেকে শুনতে চাই। আমি একই জিনিস করার চেষ্টা করা হয়েছে। আমি দেখতে পেয়েছি যে প্রচুর গণিত করা ঠিক আছে তবে আপনি সেখানে একটি ক্যানভাস রাখার সাথে সাথে এটি মানসিক এবং ফ্রেমের হার হ্রাস পাবে।

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

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

আপনার পুরো সাইটটি এইচটিএমএল 5 এ আছে তাই আমি ব্যাকগ্রাউন্ড কর্মীর সাথে খেলতে চেষ্টা করব।

আশা করি আমি সহায়তা করেছি এবং দয়া করে আপনার ফলাফলগুলি ভাগ করুন।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.