মধ্য-পৃথিবীর সামনের প্রান্ত

মাল্টি-ডিভাইস উন্নয়নের একটি ওয়াকথ্রু

Daniel Isaksson

Einar Öberg

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

একই সাইটের তিনটি সংস্করণ

স্ক্রীন-আকার এবং ডিভাইস-ক্ষমতার দৃষ্টিকোণ থেকে ডেস্কটপ কম্পিউটার এবং মোবাইল ডিভাইস উভয়েই কাজ করার জন্য এই পরীক্ষাটিকে মানিয়ে নেওয়ার বিষয়ে একটু কথা বলা শুরু করা যাক।

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

আমরা ল্যান্ডিং পৃষ্ঠাটিকে উদাহরণ হিসাবে নিতে পারি যে আমরা বিভিন্ন আকারের জন্য ডিজাইনকে কীভাবে মানিয়ে নিই।

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

আমরা মোবাইল ডিভাইস সনাক্ত করতে ব্যবহারকারী-এজেন্ট ডেটা ব্যবহার করছি এবং ট্যাবলেটগুলিকে লক্ষ্য করার জন্য একটি ভিউপোর্ট-সাইজ পরীক্ষা ব্যবহার করছি (645px এবং উচ্চতর)৷ প্রতিটি ভিন্ন মোড প্রকৃতপক্ষে সমস্ত রেজোলিউশন রেন্ডার করতে পারে, কারণ লেআউটটি মিডিয়া প্রশ্ন বা জাভাস্ক্রিপ্টের সাথে আপেক্ষিক/শতাংশ অবস্থানের উপর ভিত্তি করে।

যেহেতু এই ক্ষেত্রে ডিজাইনগুলি গ্রিড বা নিয়মের উপর ভিত্তি করে নয় এবং বিভিন্ন বিভাগের মধ্যে বেশ অনন্য এটি আসলেই নির্দিষ্ট উপাদান এবং দৃশ্যের উপর নির্ভর করে কোন ব্রেকপয়েন্ট বা শৈলী ব্যবহার করতে হবে। এটি একাধিকবার ঘটেছে যে আমরা চমৎকার sass-mixins এবং মিডিয়া-কোয়েরিগুলির সাথে নিখুঁত বিন্যাস সেট আপ করেছি, এবং তারপরে আমাদের মাউসের অবস্থান বা গতিশীল বস্তুর উপর ভিত্তি করে একটি প্রভাব যুক্ত করতে হবে এবং জাভাস্ক্রিপ্টে সবকিছু পুনর্লিখন করতে হবে।

আমরা হেড ট্যাগে বর্তমান মোড সহ একটি ক্লাস যুক্ত করি যাতে আমরা সেই তথ্যটি আমাদের শৈলীতে ব্যবহার করতে পারি, যেমন এই উদাহরণে (SCSS এ):

.loc-hobbit-logo {

  // Default values here.

  .desktop & {
     // Applies only in desktop mode.
  }

 .tablet &, .mobile & {
   
   // Different asset for mobile and tablets perhaps.

   @media screen and (max-height: 760px), (max-width: 760px) {
     // Breakpoint-specific styles.
   }

   @media screen and (max-height: 570px), (max-width: 400px) {
     // Breakpoint-specific styles.
   }
 }
}

আমরা প্রায় 360x320 পর্যন্ত সমস্ত আকার সমর্থন করি, যা একটি নিমজ্জিত ওয়েব অভিজ্ঞতা তৈরি করার সময় বেশ চ্যালেঞ্জিং ছিল। ডেস্কটপে স্ক্রলবার দেখানোর আগে আমাদের একটি ন্যূনতম আকার আছে কারণ আমরা চাই যে আপনি যদি সম্ভব হয় তবে একটি বড় ভিউপোর্টে সাইটটি উপভোগ করুন। মোবাইল ডিভাইসে আমরা ইন্টারেক্টিভ অভিজ্ঞতা পর্যন্ত ল্যান্ডস্কেপ এবং পোর্ট্রেট মোড উভয়কেই অনুমতি দেওয়ার সিদ্ধান্ত নিয়েছি, যেখানে আমরা আপনাকে ডিভাইসটিকে ল্যান্ডস্কেপে পরিণত করতে বলি৷ এর বিরুদ্ধে যুক্তি ছিল যে এটি ল্যান্ডস্কেপের মতো প্রতিকৃতিতে নিমগ্ন নয়; কিন্তু সাইটটি বেশ ভালো স্কেল করা হয়েছে তাই আমরা এটি রেখেছি।

এটি লক্ষ করা গুরুত্বপূর্ণ যে বিন্যাসটি বৈশিষ্ট্য সনাক্তকরণের সাথে মিশ্রিত করা উচিত নয় যেমন ইনপুট টাইপ, ডিভাইস ওরিয়েন্টেশন, সেন্সর ইত্যাদি। এই বৈশিষ্ট্যগুলি এই সমস্ত মোডে থাকতে পারে এবং সমস্ত জুড়ে থাকা উচিত। একই সময়ে মাউস এবং স্পর্শ সমর্থন একটি উদাহরণ. মানের জন্য রেটিনা ক্ষতিপূরণ কিন্তু সব কর্মক্ষমতা অন্য, কখনও কখনও কম মানের ভাল. উদাহরণ হিসেবে রেটিনা ডিসপ্লেতে WebGL অভিজ্ঞতার অর্ধেক রেজোলিউশন ক্যানভাস, যা অন্যথায় পিক্সেল সংখ্যার চারগুণ রেন্ডার করতে হবে

ডেভেলপমেন্টের সময় আমরা প্রায়শই DevTools-এ এমুলেটর টুল ব্যবহার করি, বিশেষ করে Chrome Canary-এ যাতে নতুন উন্নত বৈশিষ্ট্য এবং প্রচুর প্রিসেট রয়েছে। এটি দ্রুত নকশা যাচাই করার একটি ভাল উপায়। আমাদের এখনও নিয়মিত বাস্তব ডিভাইসে পরীক্ষা করা দরকার। একটি কারণ ছিল কারণ সাইটটি পূর্ণস্ক্রীনে মানিয়ে নিচ্ছে। উল্লম্ব স্ক্রোল সহ পৃষ্ঠাগুলি বেশিরভাগ ক্ষেত্রে স্ক্রোল করার সময় ব্রাউজার UI লুকিয়ে রাখে (বর্তমানে iOS7-এ Safari-এ এটির সাথে সমস্যা রয়েছে) তবে আমাদের এর থেকে স্বাধীন সবকিছু ফিট করতে হয়েছিল। আমরা এমুলেটরে একটি প্রিসেট ব্যবহার করেছি এবং উপলব্ধ স্থান হারানোর অনুকরণ করতে স্ক্রীনের আকারের সেটিং পরিবর্তন করেছি। মেমরি-ব্যবহার এবং কর্মক্ষমতা নিরীক্ষণের জন্য বাস্তব ডিভাইসে পরীক্ষা করাও গুরুত্বপূর্ণ

রাষ্ট্র পরিচালনা

ল্যান্ডিং পৃষ্ঠার পরে আমরা মধ্য-পৃথিবীর মানচিত্রে অবতরণ করি। আপনি URL পরিবর্তন লক্ষ্য করেছেন? সাইটটি একটি একক পৃষ্ঠার অ্যাপ্লিকেশন যা রাউটিং পরিচালনা করতে ইতিহাস API ব্যবহার করে।

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

যেহেতু ব্যবহারকারী ব্রাউজারের পিছনের বোতামটি আঘাত করতে পারে বা যেকোন সময় মেনুতে নেভিগেট করতে পারে, তাই যা কিছু তৈরি করা হয়েছে তা কিছু সময়ে নিষ্পত্তি করা প্রয়োজন। টাইমআউট এবং অ্যানিমেশনগুলিকে থামাতে হবে এবং বাতিল করতে হবে বা সেগুলি অবাঞ্ছিত আচরণ, ত্রুটি এবং মেমরি ফাঁসের কারণ হবে৷ এটি সর্বদা একটি সহজ কাজ নয়, বিশেষ করে যখন সময়সীমা ঘনিয়ে আসছে এবং আপনাকে যত দ্রুত সম্ভব সেখানে সবকিছু পেতে হবে।

লোকেশন দেখাচ্ছি

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

টাইমলাইন

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

মডিউল এবং আচরণ উপাদান

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

প্যারালাক্স দৃশ্য মডিউলটির একটি অস্বচ্ছ পটভূমি রয়েছে যার একটি কাস্টম সংখ্যক স্তর রয়েছে যা সঠিক অবস্থানের জন্য ভিউপোর্টের অগ্রগতি শোনে।

ফোকাস-শিফ্ট দৃশ্যটি প্যারালাক্স বাকেটের একটি বৈকল্পিক, এই সংযোজন যে আমরা প্রতিটি স্তরের জন্য দুটি চিত্র ব্যবহার করি যা ফোকাস পরিবর্তনের অনুকরণ করতে বিবর্ণ হয়ে যায়। আমরা ব্লার ফিল্টার ব্যবহার করার চেষ্টা করেছি, কিন্তু এটি এখনও অনেক ব্যয়বহুল, তাই আমরা এর জন্য CSS শেডারের জন্য অপেক্ষা করব।

টেক্সট মডিউলের বিষয়বস্তু TweenMax প্লাগইন ড্র্যাগেবল দিয়ে টেনে-সক্ষম করা হয়েছে। আপনি উল্লম্বভাবে স্ক্রোল করতে স্ক্রোলহুইল বা দুই-আঙ্গুলের সোয়াইপ ব্যবহার করতে পারেন। থ্রো-প্রপস-প্লাগইনটি নোট করুন যা আপনি সোয়াইপ করে ছেড়ে দেওয়ার সময় ফ্লিং-স্টাইলের পদার্থবিদ্যা যোগ করে।

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

এটির সাথে আমরা শুধুমাত্র একটি কনফিগারেশন ফাইলের সাহায্যে বিভিন্ন অবস্থান তৈরি করতে পারি যা বিভিন্ন ধরণের মডিউল এবং উপাদানগুলি লোড এবং সেটআপ করতে হবে তা নির্ধারণ করে।

চিত্র ক্রম

পারফরম্যান্স এবং ডাউনলোড-আকারের দিক থেকে মডিউলগুলির মধ্যে সবচেয়ে চ্যালেঞ্জিং হল চিত্রের ক্রম। এই বিষয় সম্পর্কে পড়ার জন্য একটি গুচ্ছ আছে. মোবাইল এবং ট্যাবলেটে আমরা এটিকে একটি স্থির চিত্র দিয়ে প্রতিস্থাপন করি। আমরা যদি মোবাইলে শালীন মানের চাই তবে এটি ডিকোড এবং মেমরিতে সংরক্ষণ করার জন্য অনেক বেশি ডেটা। আমরা একাধিক বিকল্প সমাধান চেষ্টা করেছি; প্রথমে একটি ব্যাকগ্রাউন্ড ইমেজ এবং একটি স্প্রাইটশীট ব্যবহার করে, কিন্তু এটি মেমরির সমস্যা এবং পিছিয়ে দেয় যখন GPU-কে স্প্রিটশীটগুলির মধ্যে অদলবদল করতে হয়। তারপর আমরা img উপাদান অদলবদল করার চেষ্টা করেছি, কিন্তু এটি খুব ধীর ছিল। একটি স্প্রাইটশীট থেকে একটি ক্যানভাসে একটি ফ্রেম আঁকা ছিল সবচেয়ে কার্যকরী, তাই আমরা এটিকে অপ্টিমাইজ করা শুরু করেছি৷ প্রতিটি ফ্রেমে গণনার সময় বাঁচাতে, ক্যানভাসে লেখার জন্য চিত্রের ডেটা একটি অস্থায়ী ক্যানভাসের মাধ্যমে প্রাক-প্রসেস করা হয় এবং একটি অ্যারেতে putImageData() দিয়ে সংরক্ষণ করা হয়, ডিকোড করা হয় এবং ব্যবহারের জন্য প্রস্তুত। আসল স্প্রিটশিটটি তখন আবর্জনা সংগ্রহ করা যেতে পারে এবং আমরা মেমরিতে প্রয়োজনীয় ন্যূনতম পরিমাণ ডেটা সংরক্ষণ করি। হয়ত আনডিকোড করা ইমেজ স্টোর করা কম, কিন্তু এইভাবে সিকোয়েন্স স্ক্রাব করার সময় আমরা আরও ভালো পারফরম্যান্স পাই। ফ্রেমগুলি বেশ ছোট, মাত্র 640x400, তবে সেগুলি স্ক্রাবিংয়ের সময় দৃশ্যমান হবে। আপনি থামলে, একটি উচ্চ-রেজোলিউশন ছবি লোড হয় এবং দ্রুত বিবর্ণ হয়ে যায়।

var canvas = document.createElement('canvas');
canvas.width = imageWidth;
canvas.height = imageHeight;

var ctx = canvas.getContext('2d');
ctx.drawImage(sheet, 0, 0);

var tilesX = imageWidth / tileWidth;
var tilesY = imageHeight / tileHeight;

var canvasPaste = canvas.cloneNode(false);
canvasPaste.width = tileWidth;
canvasPaste.height = tileHeight;

var i, j, canvasPasteTemp, imgData, 
var currentIndex = 0;
var startIndex = index * 16;
for (i = 0; i < tilesY; i++) {
  for (j = 0; j < tilesX; j++) {
    // Store the image data of each tile in the array.
    canvasPasteTemp = canvasPaste.cloneNode(false);
    imgData = ctx.getImageData(j * tileWidth, i * tileHeight, tileWidth, tileHeight);
    canvasPasteTemp.getContext('2d').putImageData(imgData, 0, 0);

    list[ startIndex + currentIndex ] = imgData;

    currentIndex++;
  }
}

স্প্রাইট-শীট ইমেজম্যাজিক দিয়ে তৈরি করা হয়। এখানে গিটহাবের একটি সাধারণ উদাহরণ যা দেখায় যে কীভাবে একটি ফোল্ডারের ভিতরে সমস্ত চিত্রের একটি স্প্রিটশিট তৈরি করা যায়।

মডিউল অ্যানিমেটিং

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

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

পৃষ্ঠা কর্মক্ষমতা

একটি কার্যকরী প্রোটোটাইপ থেকে জ্যাঙ্ক-মুক্ত রিলিজ সংস্করণে যাওয়ার মানে হল অনুমান করা থেকে ব্রাউজারে কী ঘটছে তা জানা। এখানেই Chrome DevTools হল আপনার সেরা বন্ধু৷

আমরা সাইটটি অপ্টিমাইজ করার জন্য বেশ অনেক সময় ব্যয় করেছি। হার্ডওয়্যার-ত্বরণ জোর করে মসৃণ অ্যানিমেশন পেতে অবশ্যই সবচেয়ে গুরুত্বপূর্ণ সরঞ্জামগুলির মধ্যে একটি। কিন্তু Chrome DevTools-এ রঙিন কলাম এবং লাল আয়তক্ষেত্রও শিকার করা। বিষয়গুলি সম্পর্কে অনেক ভাল নিবন্ধ রয়েছে এবং আপনার সেগুলি সব পড়া উচিত। এড়িয়ে যাওয়া ফ্রেমগুলি সরানোর জন্য পুরষ্কার তাত্ক্ষণিক, কিন্তু যখন তারা আবার ফিরে আসে তখন হতাশাও হয়৷ এবং তারা করবে. এটি একটি চলমান প্রক্রিয়া যার পুনরাবৃত্তি প্রয়োজন।

আমি প্রোপার্টি, ট্রান্সফর্ম এবং সিএসএস টুইনিং করার জন্য গ্রীনসক থেকে TweenMax ব্যবহার করতে চাই। পাত্রে চিন্তা করুন, আপনি নতুন স্তর যুক্ত করার সাথে সাথে আপনার কাঠামোটি কল্পনা করুন। মনে রাখবেন যে বিদ্যমান রূপান্তরগুলি নতুন রূপান্তর দ্বারা ওভাররাইট করা যেতে পারে। translateZ(0) যেটি আপনার CSS ক্লাসে হার্ডওয়্যার ত্বরণকে জোর করে একটি 2D ম্যাট্রিক্স দ্বারা প্রতিস্থাপিত হয় যদি আপনি শুধুমাত্র 2D মানগুলির মধ্যে থাকেন। এই ক্ষেত্রে স্তরটিকে ত্বরণ মোডে রাখতে, 2D ম্যাট্রিক্সের পরিবর্তে একটি 3D ম্যাট্রিক্স তৈরি করতে টুইনে "force3D:true" বৈশিষ্ট্যটি ব্যবহার করুন। আপনি যখন শৈলী সেট করতে CSS এবং JavaScript tweens একত্রিত করেন তখন এটি ভুলে যাওয়া সহজ।

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

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

লিক খুঁজে বের করার জন্য এটি ছিল DevTools-এ বেশ সোজা ফরওয়ার্ড ওয়ার্কফ্লো, টাইমলাইন রেকর্ড করা এবং হিপ স্ন্যাপশট ক্যাপচার করা। যদি নির্দিষ্ট বস্তু থাকে, যেমন 3D জ্যামিতি বা একটি নির্দিষ্ট লাইব্রেরি, যা আপনি ফিল্টার করতে পারেন। উপরের উদাহরণে দেখা গেল যে 3D দৃশ্যটি এখনও চারপাশে ছিল এবং একটি অ্যারে যা সঞ্চিত জ্যামিতি সাফ করা হয়নি। বস্তুটি কোথায় থাকে তা সনাক্ত করা যদি আপনার কাছে কঠিন মনে হয় তবে একটি চমৎকার বৈশিষ্ট্য রয়েছে যা আপনাকে এটিকে ধরে রাখার পাথ বলে দেখতে দেয়। আপনি হিপ স্ন্যাপশটে যে বস্তুটি পরিদর্শন করতে চান সেটিতে ক্লিক করুন এবং আপনি নীচের একটি প্যানেলে তথ্য পাবেন। আপনার রেফারেন্সগুলি সনাক্ত করার সময় ছোট বস্তুর সাথে একটি ভাল কাঠামো ব্যবহার করা সাহায্য করে।

সাধারণভাবে, আপনি DOM ম্যানিপুলেট করার আগে দুবার চিন্তা করা স্বাস্থ্যকর। যখন আপনি করবেন, দক্ষতা সম্পর্কে চিন্তা করুন। আপনি যদি সাহায্য করতে পারেন তবে গেম লুপের ভিতরে DOM কে ম্যানিপুলেট করবেন না। পুনঃব্যবহারের জন্য ভেরিয়েবলে রেফারেন্স সংরক্ষণ করুন। আপনার যদি একটি উপাদান অনুসন্ধান করার প্রয়োজন হয়, কৌশলগত পাত্রে রেফারেন্স সংরক্ষণ করে এবং নিকটতম পূর্বপুরুষ উপাদানের ভিতরে অনুসন্ধান করে সংক্ষিপ্ততম রুটটি ব্যবহার করুন৷

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

ফুলস্ক্রিন

উপলব্ধ হলে, আপনার কাছে ফুলস্ক্রিন API এর মাধ্যমে মেনুতে সাইটটিকে ফুলস্ক্রিন-মোডে রাখার বিকল্প রয়েছে। কিন্তু ডিভাইসগুলিতে এটিকে ফুলস্ক্রিনে রাখার জন্য ব্রাউজারদের সিদ্ধান্তও রয়েছে। আইওএস-এ Safari এর আগে আপনাকে এটি নিয়ন্ত্রণ করতে দেওয়ার জন্য একটি হ্যাক ছিল, কিন্তু এটি আর উপলব্ধ নেই তাই একটি নন-স্ক্রলিং পৃষ্ঠা তৈরি করার সময় আপনাকে এটি ছাড়া কাজ করার জন্য আপনার নকশা প্রস্তুত করতে হবে। আমরা সম্ভবত ভবিষ্যতের আপডেটগুলিতে এটির আপডেটগুলি আশা করতে পারি, যেহেতু এটি অনেকগুলি ওয়েব-অ্যাপগুলিকে ভেঙে দিয়েছে৷

সম্পদ

সাইট জুড়ে আমাদের বিভিন্ন ধরনের সম্পদ রয়েছে, আমরা ছবি (PNG এবং JPEG), SVG (ইনলাইন এবং ব্যাকগ্রাউন্ড), স্প্রাইটশিট (PNG), কাস্টম আইকন ফন্ট এবং Adobe Edge অ্যানিমেশন ব্যবহার করি। আমরা সম্পদ এবং অ্যানিমেশনের (স্প্রাইটশিট) জন্য PNG ব্যবহার করি যেখানে উপাদানটি ভেক্টর ভিত্তিক হতে পারে না, অন্যথায় আমরা যতটা সম্ভব SVG ব্যবহার করার চেষ্টা করি।

ভেক্টর বিন্যাস মানে মানের কোন ক্ষতি হয় না, এমনকি যদি আমরা এটি স্কেল করি। সমস্ত ডিভাইসের জন্য 1 ফাইল।

• ছোট ফাইলের আকার।
• আমরা প্রতিটি অংশ আলাদাভাবে অ্যানিমেট করতে পারি (উন্নত অ্যানিমেশনের জন্য উপযুক্ত)। একটি উদাহরণ হিসাবে আমরা হবিট লোগোর "সাবটাইটেল" লুকিয়ে রাখি (Smaug এর ধ্বংস) যখন এটি ছোট করা হয়।
• এটি একটি এসভিজি এইচটিএমএল ট্যাগ হিসাবে এম্বেড করা যেতে পারে বা কোনও অতিরিক্ত লোডিং ছাড়াই একটি ব্যাকগ্রাউন্ড-ইমেজ হিসাবে ব্যবহার করা যেতে পারে (এটি এইচটিএমএল পৃষ্ঠার মতো একই সময়ে লোড হয়)।

আইকন টাইপফেসগুলির SVG এর মতো একই সুবিধা রয়েছে যখন এটি স্কেলেবিলিটির ক্ষেত্রে আসে এবং SVG এর পরিবর্তে আইকনের মতো ছোট উপাদানগুলির জন্য ব্যবহার করা হয় যার উপর আমাদের শুধুমাত্র রঙ পরিবর্তন করতে সক্ষম হতে হবে (হোভার, সক্রিয়, ইত্যাদি)৷ আইকনগুলি পুনঃব্যবহার করাও খুব সহজ, আপনাকে কেবল একটি উপাদানের CSS "সামগ্রী" বৈশিষ্ট্য সেট করতে হবে।

অ্যানিমেশন

কিছু ক্ষেত্রে কোড সহ SVG উপাদানগুলিকে অ্যানিমেট করা খুব সময়সাপেক্ষ হতে পারে, বিশেষ করে যখন ডিজাইন প্রক্রিয়া চলাকালীন অ্যানিমেশনটিকে অনেক পরিবর্তন করতে হবে৷ ডিজাইনার এবং ডেভেলপারদের মধ্যে কর্মপ্রবাহ উন্নত করতে আমরা কিছু অ্যানিমেশনের জন্য Adobe Edge ব্যবহার করি (গেমের আগে নির্দেশাবলী)। অ্যানিমেশন ওয়ার্কফ্লো সত্যিই ফ্ল্যাশের কাছাকাছি এবং এটি টিমকে সাহায্য করেছে কিন্তু কিছু ত্রুটি রয়েছে, বিশেষত আমাদের সম্পদ লোডিং প্রক্রিয়ায় এজ অ্যানিমেশনগুলিকে একীভূত করার সাথে যেহেতু এটি নিজস্ব লোডার এবং বাস্তবায়ন যুক্তির সাথে আসে৷

আমি এখনও অনুভব করি যে ওয়েবে সম্পদ এবং হস্তনির্মিত অ্যানিমেশনগুলি পরিচালনা করার জন্য আমাদের একটি নিখুঁত ওয়ার্কফ্লো পাওয়ার আগে আমাদের যেতে হবে দীর্ঘ পথ। আমরা এজ এর মত টুল কিভাবে বিকশিত হবে তা দেখার জন্য উন্মুখ। মন্তব্যে অন্যান্য অ্যানিমেশন সরঞ্জাম এবং কর্মপ্রবাহ সম্পর্কে পরামর্শ যোগ করতে নির্দ্বিধায়।

উপসংহার

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