হ্যালো, (অদ্ভুত) পৃথিবী
গুগল হোমপেজে কোড করার জন্য একটি আকর্ষণীয় পরিবেশ। এটি অনেক চ্যালেঞ্জিং বিধিনিষেধের সাথে আসে: গতি এবং লেটেন্সির উপর বিশেষ ফোকাস, সব ধরণের ব্রাউজার এবং বিভিন্ন পরিস্থিতিতে কাজ করতে হয়, এবং… হ্যাঁ, অবাক এবং আনন্দ।
আমি Google ডুডল সম্পর্কে কথা বলছি, বিশেষ চিত্রগুলি যা মাঝে মাঝে আমাদের লোগো প্রতিস্থাপন করে৷ এবং যখন কলম এবং ব্রাশের সাথে আমার সম্পর্ক দীর্ঘকাল ধরে একটি নিরোধক আদেশের সেই স্বাতন্ত্র্যসূচক স্বাদ ছিল, আমি প্রায়শই ইন্টারেক্টিভগুলিতে অবদান রাখি।
প্রতিটি ইন্টারেক্টিভ ডুডল যা আমি কোড করেছি ( Pac-Man , Jules Verne , World's Fair ) – এবং অনেককে আমি সাহায্য করেছি – সমান অংশে ভবিষ্যতবাদী এবং নৈরাজ্যবাদী ছিল: অত্যাধুনিক ওয়েব বৈশিষ্ট্যগুলির পাই-ইন-দ্য-স্কাই অ্যাপ্লিকেশনের জন্য দুর্দান্ত সুযোগ… এবং ক্রস-ব্রাউজার সামঞ্জস্যের কঠোর বাস্তববাদ।
প্রতিটি ইন্টারেক্টিভ ডুডল থেকে আমরা অনেক কিছু শিখি, এবং সাম্প্রতিক স্ট্যানিস্লো লেম মিনি-গেমটিও এর ব্যতিক্রম ছিল না, এর জাভাস্ক্রিপ্ট কোডের 17,000 লাইন ডুডলের ইতিহাসে প্রথমবারের মতো অনেক কিছু চেষ্টা করে। আজ, আমি আপনার সাথে সেই কোডটি শেয়ার করতে চাই – সম্ভবত আপনি সেখানে আকর্ষণীয় কিছু খুঁজে পাবেন, বা আমার ভুলগুলি নির্দেশ করবেন – এবং এটি সম্পর্কে একটু কথা বলুন।
Stanisław Lem ডুডল কোড দেখুন »
মনে রাখার মতো একটি বিষয় হল যে Google এর হোমপেজ প্রযুক্তি ডেমোগুলির জন্য একটি জায়গা নয়। আমাদের ডুডলগুলির মাধ্যমে, আমরা নির্দিষ্ট ব্যক্তি এবং ইভেন্টগুলিকে উদযাপন করতে চাই, এবং আমরা তা করতে চাই সেরা শিল্প এবং সেরা প্রযুক্তিগুলি ব্যবহার করে যা আমরা ডেকে আনতে পারি – কিন্তু প্রযুক্তির স্বার্থে কখনই প্রযুক্তি উদযাপন করি না৷ এর অর্থ হল বিস্তৃতভাবে বোঝা যায় এমন HTML5-এর যে কোনও অংশ উপলব্ধ রয়েছে এবং এটি আমাদের ডুডল থেকে বিভ্রান্ত না হয়ে বা এটিকে ছাপিয়ে না দিয়ে আরও ভাল করতে সাহায্য করে কিনা তা মনোযোগ সহকারে দেখা।
সুতরাং, আসুন কিছু আধুনিক ওয়েব প্রযুক্তির মধ্য দিয়ে যাই যা তাদের স্থান খুঁজে পেয়েছে – এবং কিছু যা হয়নি – স্ট্যানিস্লো লেম ডুডলে।
DOM এবং ক্যানভাসের মাধ্যমে গ্রাফিক্স
ক্যানভাস শক্তিশালী এবং ঠিক সেই ধরনের জিনিসগুলির জন্য তৈরি করা হয়েছে যা আমরা এই ডুডলে করতে চেয়েছিলাম৷ যাইহোক, কিছু পুরানো ব্রাউজার যা আমরা যত্ন করেছিলাম তারা এটিকে সমর্থন করে না – এবং যদিও আমি আক্ষরিক অর্থে এমন ব্যক্তির সাথে একটি অফিস শেয়ার করছি যিনি অন্যথায় একটি চমৎকার এক্সকানভাস একসাথে রেখেছেন, আমি একটি ভিন্ন উপায় বেছে নেওয়ার সিদ্ধান্ত নিয়েছি।
আমি একটি গ্রাফিক ইঞ্জিন একসাথে রাখি যা "রেক্টস" নামক গ্রাফিক আদিম জিনিসগুলিকে বিমূর্ত করে এবং তারপর ক্যানভাস অনুপলব্ধ হলে DOM ব্যবহার করে সেগুলিকে রেন্ডার করি৷
এই পদ্ধতিটি কিছু আকর্ষণীয় চ্যালেঞ্জের সাথে আসে - উদাহরণস্বরূপ, DOM-এ একটি বস্তুকে সরানো বা পরিবর্তন করার তাত্ক্ষণিক ফলাফল রয়েছে, যেখানে ক্যানভাসের জন্য একটি নির্দিষ্ট মুহূর্ত রয়েছে যখন সবকিছু একই সময়ে আঁকা হয়। (আমি শুধু একটি ক্যানভাস রাখার সিদ্ধান্ত নিয়েছি, এবং এটিকে পরিষ্কার করে প্রতিটি ফ্রেমের সাথে স্ক্র্যাচ থেকে আঁকব। একদিকে অনেক বেশি, আক্ষরিক অর্থে, চলমান অংশ – এবং অন্যদিকে একাধিক ওভারল্যাপিং ক্যানভাসে বিভক্ত করা এবং বেছে বেছে তাদের আপডেট করার জন্য যথেষ্ট জটিলতা নেই। )
দুর্ভাগ্যবশত, ক্যানভাসে স্যুইচ করা drawImage() দিয়ে সিএসএস ব্যাকগ্রাউন্ডগুলিকে মিরর করার মতো সহজ নয় : DOM-এর মাধ্যমে জিনিসগুলিকে একত্র করার সময় আপনি অনেকগুলি জিনিস হারাবেন যা বিনামূল্যে পাওয়া যায় - সবচেয়ে গুরুত্বপূর্ণভাবে z-সূচীগুলির সাথে লেয়ারিং এবং মাউস ইভেন্ট৷
আমি ইতিমধ্যে "প্লেন" নামক একটি ধারণার সাথে z-সূচকটি বিমূর্ত করেছি। ডুডলটি অনেকগুলি সমতলকে সংজ্ঞায়িত করেছে - অনেক পিছনের আকাশ থেকে, সবকিছুর সামনে মাউস পয়েন্টার পর্যন্ত - এবং ডুডলের প্রতিটি অভিনেতাকে সিদ্ধান্ত নিতে হয়েছিল যে এটি কোনটির (একটি প্লেনের মধ্যে ছোট প্লাস/মাইনাস সংশোধনগুলি ব্যবহার করে সম্ভব ছিল) planeCorrection )।
DOM এর মাধ্যমে রেন্ডারিং, প্লেনগুলিকে সহজভাবে জেড-ইনডেক্সে অনুবাদ করা হয়। কিন্তু যদি আমরা ক্যানভাসের মাধ্যমে রেন্ডার করি, তাহলে তাদের আঁকার আগে আমাদের তাদের প্লেনের উপর ভিত্তি করে রেক্টগুলি সাজাতে হবে। যেহেতু প্রতিবার এটি করা ব্যয়বহুল, তাই যখন একজন অভিনেতা যোগ করা হয় বা যখন এটি অন্য প্লেনে চলে যায় তখনই অর্ডারটি পুনরায় গণনা করা হয়।
মাউস ইভেন্টের জন্য, আমি এটিকেও বিমূর্ত করেছি... সাজানোর। DOM এবং ক্যানভাস উভয়ের জন্য, আমি উচ্চ z-সূচক সহ অতিরিক্ত সম্পূর্ণ স্বচ্ছ ভাসমান DOM উপাদান ব্যবহার করেছি, যার কাজ শুধুমাত্র মাউস ওভার/আউট, ক্লিক এবং ট্যাপগুলিতে প্রতিক্রিয়া জানানো।
এই ডুডলটি দিয়ে আমরা যে জিনিসগুলি চেষ্টা করতে চেয়েছিলাম তার মধ্যে একটি হল চতুর্থ প্রাচীর ভাঙা৷ উপরের ইঞ্জিনটি আমাদের ক্যানভাস-ভিত্তিক অভিনেতাদের সাথে DOM-ভিত্তিক অভিনেতাদের একত্রিত করার অনুমতি দিয়েছে। উদাহরণস্বরূপ, সমাপ্তির বিস্ফোরণগুলি ইন-ইউনিভার্স অবজেক্টের জন্য ক্যানভাসে এবং Google হোমপেজের বাকি অংশের জন্য DOM-এ। পাখিটি, সাধারণত চারপাশে উড়ে বেড়ায় এবং অন্য অভিনেতার মতো আমাদের ঘাঁটিযুক্ত মুখোশ দ্বারা ক্লিপ করে, শুটিং স্তরের সময় সমস্যা থেকে দূরে থাকার সিদ্ধান্ত নেয় এবং আমি ভাগ্যবান বোধ করছি বোতামে বসে। এটি যেভাবে করা হয়েছে তা হল পাখিটি ক্যানভাস ছেড়ে একটি DOM উপাদানে পরিণত হয় (এবং পরবর্তীতে এর বিপরীতে), যা আমি আমাদের দর্শকদের কাছে সম্পূর্ণ স্বচ্ছ হতে আশা করেছিলাম।
ফ্রেমের হার
বর্তমান ফ্রেম রেট জানা, এবং এটি যখন খুব ধীর (এবং খুব দ্রুত!) তখন প্রতিক্রিয়া জানানো আমাদের ইঞ্জিনের একটি গুরুত্বপূর্ণ অংশ ছিল৷ যেহেতু ব্রাউজারগুলি ফ্রেম রেট ফেরত দেয় না, তাই আমাদের নিজেদেরকে গণনা করতে হবে।
আমি requestAnimationFrame ব্যবহার করে শুরু করেছিলাম, যদি আগেরটি উপলব্ধ না হয় তাহলে পুরানো ধাঁচের setTimeout ফিরে আসছি। requestAnimationFrame কিছু পরিস্থিতিতে বুদ্ধিমত্তার সাথে CPU সংরক্ষণ করে – যদিও আমরা নিজেরাই এর কিছু করছি, যেমনটি নীচে ব্যাখ্যা করা হবে – কিন্তু এছাড়াও setTimeout তুলনায় আমাদেরকে আরও বেশি ফ্রেম রেট পেতে অনুমতি দেয়।
বর্তমান ফ্রেম রেট গণনা করা সহজ, কিন্তু এটি কঠোর পরিবর্তনের সাপেক্ষে - উদাহরণস্বরূপ অন্য অ্যাপ্লিকেশন কিছুক্ষণের জন্য কম্পিউটারকে আটকে রাখলে এটি দ্রুত হ্রাস পেতে পারে। তাই, আমরা প্রতি 100টি ফিজিক্যাল টিক জুড়ে একটি "ঘূর্ণায়মান" (গড়) ফ্রেম রেট গণনা করি এবং তার উপর ভিত্তি করে সিদ্ধান্ত নিই।
কি ধরনের সিদ্ধান্ত?
ফ্রেম রেট 60fps-এর বেশি হলে, আমরা এটিকে থ্রোটল করি। বর্তমানে, ফায়ারফক্সের কিছু সংস্করণে
requestAnimationFrameফ্রেমের হারের উপর কোন উপরের ক্যাপ নেই, এবং CPU নষ্ট করার কোন মানে নেই। মনে রাখবেন যে আমরা আসলে 65fps-এ ক্যাপ করি, রাউন্ডিং ত্রুটির কারণে যা ফ্রেম রেটকে অন্যান্য ব্রাউজারে 60fps-এর থেকে একটু বেশি করে - আমরা ভুল করে এটি থ্রোটলিং শুরু করতে চাই না।যদি ফ্রেম রেট 10fps-এর চেয়ে কম হয়, তাহলে আমরা ফ্রেম না ফেলার পরিবর্তে ইঞ্জিনের গতি কমিয়ে দিই। এটি একটি হারানো-হারানোর প্রস্তাব, কিন্তু আমি অনুভব করেছি যে অতিরিক্তভাবে ফ্রেম এড়িয়ে যাওয়া কেবল একটি ধীরগতির (কিন্তু এখনও সুসংগত) খেলার চেয়ে বেশি বিভ্রান্তিকর হবে। এর আরেকটি চমৎকার পার্শ্বপ্রতিক্রিয়া আছে - যদি সিস্টেমটি সাময়িকভাবে ধীর হয়ে যায়, তাহলে ইঞ্জিনটি মরিয়া হয়ে উঠছে বলে ব্যবহারকারী একটি অদ্ভুত লাফ অনুভব করবেন না। (আমি প্যাক-ম্যানের জন্য এটি কিছুটা আলাদাভাবে করেছি, তবে ন্যূনতম ফ্রেম রেট একটি ভাল পদ্ধতি।)
অবশেষে, ফ্রেম রেট বিপজ্জনকভাবে কম হলে আমরা গ্রাফিক্সকে সরল করার কথা ভাবতে পারি। আমরা মাউস পয়েন্টার বাদ দিয়ে লেম ডুডলের জন্য এটি করছি না (নীচে আরও বেশি), তবে অনুমানগতভাবে আমরা কিছু বহিরাগত অ্যানিমেশন হারাতে পারি যাতে ডুডলটি এমনকি ধীর কম্পিউটারেও তরল অনুভব করে।
আমরা একটি শারীরিক টিক এবং একটি যৌক্তিক টিক একটি ধারণা আছে. আগেরটি requestAnimationFrame / setTimeout থেকে এসেছে। সাধারণ গেমপ্লেতে অনুপাত হল 1:1, কিন্তু দ্রুত-ফরওয়ার্ড করার জন্য, আমরা শুধুমাত্র একটি ফিজিক্যাল টিক প্রতি আরও লজিক্যাল টিক যোগ করি (1:5 পর্যন্ত)। এটি আমাদের প্রতিটি যৌক্তিক টিক-এর জন্য প্রয়োজনীয় সমস্ত গণনা করতে দেয়, তবে স্ক্রিনে আপডেট করা জিনিসগুলির জন্য শুধুমাত্র শেষটিকে মনোনীত করে।
বেঞ্চমার্কিং
একটি অনুমান করা যেতে পারে (এবং প্রকৃতপক্ষে, প্রথম দিকে, ছিল) যে ক্যানভাস যখনই উপলব্ধ হবে DOM এর চেয়ে দ্রুত হবে। যে সবসময় সত্য হয় না. পরীক্ষা করার সময়, আমরা খুঁজে পেয়েছি যে ম্যাকের অপেরা 10.0–10.1, এবং লিনাক্সে ফায়ারফক্স আসলে DOM উপাদানগুলি সরানোর সময় দ্রুততর হয়৷
নিখুঁত বিশ্বে, ডুডল নিঃশব্দে বিভিন্ন গ্রাফিক কৌশলকে বেঞ্চমার্ক করবে – DOM উপাদানগুলি style.left এবং style.top ব্যবহার করে সরানো হয়েছে, ক্যানভাসে অঙ্কন করা হয়েছে, এবং এমনকি DOM উপাদানগুলি CSS3 রূপান্তর ব্যবহার করে সরানো হয়েছে
- এবং তারপরে যেটি সর্বোচ্চ ফ্রেম রেট দিয়েছে তাতে স্যুইচ করুন। আমি এর জন্য কোড লিখতে শুরু করেছি, কিন্তু পেয়েছি যে অন্তত আমার বেঞ্চমার্কিং পদ্ধতিটি বেশ অবিশ্বস্ত এবং অনেক সময় প্রয়োজন। আমাদের হোমপেজে যে সময় নেই – আমরা গতির বিষয়ে অনেক যত্নশীল এবং আমরা চাই ডুডলটি অবিলম্বে প্রদর্শিত হোক এবং আপনি ক্লিক বা ট্যাপ করার সাথে সাথেই গেমপ্লে শুরু হোক৷
শেষ পর্যন্ত, ওয়েব ডেভেলপমেন্ট কখনও কখনও আপনাকে যা করতে হবে তা করতে হবে। আমি আমার কাঁধের পিছনে তাকালাম যাতে কেউ তাকায় না এবং তারপরে আমি ক্যানভাসের বাইরে অপেরা 10 এবং ফায়ারফক্সকে হার্ড-কোড করেছিলাম। পরের জীবনে, আমি ফিরে আসব <marquee> ট্যাগ হয়ে।
CPU সংরক্ষণ করা হচ্ছে
আপনি জানেন যে বন্ধুটি আপনার বাড়িতে আসে, ব্রেকিং ব্যাডের সিজন ফিনালে দেখে, আপনার জন্য এটি নষ্ট করে এবং তারপর এটি আপনার ডিভিআর থেকে মুছে দেয়? তুমি সেই লোক হতে চাও না, তাই না?
তাই, হ্যাঁ, সবচেয়ে খারাপ উপমা। কিন্তু আমরা চাই না যে আমাদের ডুডলটিও সেই লোকটি হোক – আসলে আমাদেরকে কারও ব্রাউজার ট্যাবে অনুমতি দেওয়া একটি বিশেষাধিকার, এবং CPU চক্র জমা করা বা ব্যবহারকারীকে বিভ্রান্ত করা আমাদের একটি অপ্রীতিকর অতিথি করে তুলবে৷ অতএব, যদি কেউ ডুডল নিয়ে খেলা না করে (কোনও ট্যাপ, মাউসের ক্লিক, মাউসের নড়াচড়া বা কী টিপতে না হয়), আমরা এটি শেষ পর্যন্ত ঘুমাতে চাই।
কখন?
- হোমপেজে 18 সেকেন্ড পরে (আর্কেড গেম একে আকর্ষণ মোড বলে)
- 180 সেকেন্ডের পর যদি ট্যাবে ফোকাস থাকে
- 30 সেকেন্ডের পরে যদি ট্যাবে ফোকাস না থাকে (যেমন ব্যবহারকারী অন্য উইন্ডোতে স্যুইচ করেছেন, কিন্তু সম্ভবত এখনও একটি নিষ্ক্রিয় ট্যাবে ডুডলটি দেখছেন)
- অবিলম্বে যদি ট্যাবটি অদৃশ্য হয়ে যায় (যেমন ব্যবহারকারী একই উইন্ডোতে অন্য ট্যাবে স্যুইচ করেছে - যদি আমাদের দেখা না যায় তবে চক্র নষ্ট করার কোন মানে নেই)
আমরা কিভাবে জানি ট্যাব বর্তমানে ফোকাস আছে? আমরা window.focus এবং window.blur এর সাথে নিজেদেরকে সংযুক্ত করি কিভাবে আমরা জানি যে ট্যাবটি দৃশ্যমান? আমরা নতুন পৃষ্ঠা দৃশ্যমানতা API ব্যবহার করছি এবং উপযুক্ত ইভেন্টে প্রতিক্রিয়া জানাচ্ছি।
উপরের সময়গুলি আমাদের জন্য স্বাভাবিকের চেয়ে বেশি ক্ষমাশীল। আমি তাদের এই বিশেষ ডুডলে মানিয়ে নিয়েছি, যাতে প্রচুর পরিবেষ্টিত অ্যানিমেশন রয়েছে (প্রধানত আকাশ এবং পাখি)। আদর্শভাবে, টাইম আউটগুলি ইন-গেম ইন্টারঅ্যাকশনে গেট করা হবে – যেমন অবতরণের ঠিক পরে, পাখিটি ডুডলে আবার রিপোর্ট করতে পারে যে এটি এখন ঘুমাতে পারে - কিন্তু আমি শেষ পর্যন্ত এটি বাস্তবায়ন করিনি।
যেহেতু আকাশ সর্বদা গতিশীল থাকে, যখন ঘুমিয়ে পড়ে এবং জেগে ওঠার সময় ডুডলটি শুধু থামে না বা শুরু করে না – এটি বিরতি দেওয়ার আগে ধীর হয়ে যায় এবং এর বিপরীতে প্রয়োজন অনুযায়ী একটি শারীরিক টিক প্রতি লজিক্যাল টিক সংখ্যা পুনরায় শুরু, বৃদ্ধি বা হ্রাস করার জন্য।
রূপান্তর, রূপান্তর, ঘটনা
এইচটিএমএল এর ক্ষমতাগুলির মধ্যে একটি সর্বদা সত্য যে আপনি এটিকে আরও ভাল করতে পারেন: HTML এবং CSS-এর নিয়মিত পোর্টফোলিওতে যদি কিছু যথেষ্ট ভাল না হয় তবে আপনি জাভাস্ক্রিপ্টের সাথে তা প্রসারিত করতে পারেন। দুর্ভাগ্যবশত, প্রায়ই এর অর্থ হল স্ক্র্যাচ থেকে শুরু করা। CSS3 ট্রানজিশনগুলি দুর্দান্ত, কিন্তু আপনি একটি নতুন ট্রানজিশন টাইপ যোগ করতে পারবেন না বা স্টাইলিং এলিমেন্ট ছাড়া অন্য কিছু করার জন্য ট্রানজিশন ব্যবহার করতে পারবেন না। আরেকটি উদাহরণ: CSS3 রূপান্তরগুলি DOM-এর জন্য দুর্দান্ত, কিন্তু আপনি যখন ক্যানভাসে চলে যান, তখন আপনি হঠাৎ নিজেই হয়ে যান।
এই সমস্যাগুলি এবং আরও অনেক কিছুর কারণেই লেম ডুডলের নিজস্ব ট্রানজিশন এবং ট্রান্সফর্ম ইঞ্জিন রয়েছে৷ হ্যাঁ, আমি জানি, 2000s বলা হয়, ইত্যাদি – আমি যে ক্ষমতা তৈরি করেছি তা CSS3 এর মতো শক্তিশালী কোথাও নেই, কিন্তু ইঞ্জিন যাই করুক না কেন, এটি ধারাবাহিকভাবে করে এবং আমাদের অনেক বেশি নিয়ন্ত্রণ দেয়।
আমি একটি সাধারণ অ্যাকশন (ইভেন্ট) সিস্টেম দিয়ে শুরু করেছি – একটি টাইমলাইন যা setTimeout ব্যবহার না করেই ভবিষ্যতে ইভেন্টগুলি চালায়, যেহেতু যে কোনও নির্দিষ্ট সময়ে ডুডল সময়টি শারীরিক সময় থেকে তালাক হতে পারে কারণ এটি দ্রুত (দ্রুত এগিয়ে), ধীর (কম ফ্রেম রেট) হয় বা সিপিইউ সংরক্ষণ করতে ঘুমিয়ে পড়া), বা সম্পূর্ণভাবে বন্ধ হয়ে যায় (ছবি লোডিং শেষ হওয়ার জন্য অপেক্ষা করা)।
ট্রানজিশন হল অন্য ধরনের ক্রিয়া। মৌলিক নড়াচড়া এবং ঘূর্ণন ছাড়াও, আমরা আপেক্ষিক আন্দোলনগুলিকেও সমর্থন করি (যেমন কিছু 10 পিক্সেল ডানদিকে সরান), কাঁপুনির মতো কাস্টম জিনিস এবং কীফ্রেম চিত্র অ্যানিমেশনগুলিও।
আমি ঘূর্ণন উল্লেখ করেছি, এবং সেগুলি ম্যানুয়ালিও করা হয়: আমাদের কাছে বিভিন্ন কোণের জন্য স্প্রাইট রয়েছে যেগুলিকে ঘোরানো দরকার। প্রধান কারণ হল যে CSS3 এবং ক্যানভাস ঘূর্ণন উভয়ই ভিজ্যুয়াল আর্টিফ্যাক্টগুলিকে প্রবর্তন করছিল যা আমরা অগ্রহণযোগ্য বলে মনে করেছি - এবং তার উপরে, সেই আর্টিফ্যাক্টগুলি প্রতি প্ল্যাটফর্মে বিভিন্ন রকম।
প্রদত্ত যে কিছু বস্তু যা ঘূর্ণায়মান হয় অন্য ঘূর্ণায়মান বস্তুর সাথে সংযুক্ত থাকে - একটি উদাহরণ হল একটি রোবটের হাত নীচের বাহুর সাথে সংযুক্ত, যেটি নিজেই একটি ঘূর্ণায়মান উপরের বাহুর সাথে সংযুক্ত - এর অর্থ হল আমাকে একটি দরিদ্র মানুষের রূপান্তর-অরিজিন আকারে তৈরি করতে হবে পিভট এর
এই সমস্তই একটি কঠিন পরিমান কাজ যা শেষ পর্যন্ত এইচটিএমএল 5 দ্বারা ইতিমধ্যেই যত্ন নেওয়া মাটিকে কভার করে – কিন্তু কখনও কখনও নেটিভ সমর্থন যথেষ্ট ভাল হয় না এবং এটি চাকা পুনঃউদ্ভাবনের সময়।
ইমেজ এবং sprites সঙ্গে লেনদেন
একটি ইঞ্জিন শুধুমাত্র ডুডল চালানোর জন্য নয় - এটি এটিতে কাজ করার জন্যও। আমি উপরে কিছু ডিবাগ প্যারামিটার শেয়ার করেছি: বাকিটা আপনি engine.readDebugParams এ খুঁজে পেতে পারেন।
স্প্রিটিং একটি সুপরিচিত কৌশল যা আমরাও ডুডলের জন্য ব্যবহার করি। এটি আমাদের বাইট সংরক্ষণ করতে এবং লোডের সময় হ্রাস করতে দেয়, এবং এটি প্রি-লোডিংকে আরও সহজ করে তোলে। যাইহোক, এটি উন্নয়নকে আরও কঠিন করে তোলে - চিত্রের প্রতিটি পরিবর্তনের জন্য পুনরায় স্প্রিটিং প্রয়োজন হবে (প্রচুরভাবে স্বয়ংক্রিয়, কিন্তু এখনও কষ্টকর)। তাই, ইঞ্জিনটি উন্নয়নের জন্য কাঁচা চিত্রের সাথে সাথে engine.useSprites মাধ্যমে উৎপাদনের জন্য স্প্রাইটগুলিকে সমর্থন করে – উভয়ই সোর্স কোডের সাথে অন্তর্ভুক্ত।
আমরা প্রি-লোডিং ইমেজগুলিকে সমর্থন করি যখন আমরা চলতে থাকি এবং ডুডল থামিয়ে দিই যদি ছবিগুলি সময়মতো লোড না হয় – একটি ভুল অগ্রগতি বার দিয়ে সম্পূর্ণ করুন! (ভুল কারণ, দুর্ভাগ্যবশত, এমনকি HTML5ও আমাদের বলতে পারে না যে একটি ইমেজ ফাইলের কত অংশ ইতিমধ্যে লোড হয়েছে৷)
কিছু দৃশ্যের জন্য, আমরা সমান্তরাল সংযোগ ব্যবহার করে লোডিংয়ের গতি বাড়ানোর জন্য একাধিক স্প্রাইট ব্যবহার করি না, কিন্তু iOS-এ ছবির জন্য 3/5 মিলিয়ন পিক্সেল সীমাবদ্ধতার কারণে।
কোথায় HTML5 এই সব মাপসই? উপরে এর বেশি কিছু নেই, কিন্তু স্প্রিটিং/ক্রপিংয়ের জন্য আমি যে টুলটি লিখেছি তা ছিল নতুন ওয়েব প্রযুক্তি: ক্যানভাস, ব্লবস , একটি[ডাউনলোড] । এইচটিএমএল সম্পর্কে একটি উত্তেজনাপূর্ণ বিষয় হল যে এটি ধীরে ধীরে এমন জিনিসগুলিকে সাবসুম করে যা আগে ব্রাউজারের বাইরে করতে হত; PNG ফাইলগুলিকে অপ্টিমাইজ করার জন্য আমাদের একমাত্র অংশটি করতে হবে।
খেলার মধ্যে রাজ্য সংরক্ষণ
Lem এর পৃথিবী সবসময় বড় এবং জীবন্ত এবং বাস্তবসম্মত মনে হয়েছে. তার গল্পগুলি সাধারণত ব্যাখ্যার পরিপ্রেক্ষিতে অনেক কিছু ছাড়াই শুরু হয়, প্রথম পৃষ্ঠাটি মিডিয়াস রেস থেকে শুরু হয়, পাঠককে তার বা তার পথ খুঁজে পেতে হয়।
সাইবেরিয়াডও এর ব্যতিক্রম ছিল না এবং আমরা ডুডলের জন্য সেই অনুভূতির প্রতিলিপি করতে চেয়েছিলাম। আমরা গল্পটি অতিরিক্ত ব্যাখ্যা না করার চেষ্টা করে শুরু করি। আরেকটি বড় অংশ হল এলোমেলোকরণ যা আমরা বইয়ের মহাবিশ্বের যান্ত্রিক প্রকৃতির জন্য উপযুক্ত বলে মনে করেছি; এলোমেলোতার সাথে ডিল করার জন্য আমাদের বেশ কয়েকটি সহায়ক ফাংশন রয়েছে যা আমরা অনেক, অনেক জায়গায় ব্যবহার করি।
আমরা অন্যান্য উপায়ে পুনরায় খেলার ক্ষমতা বাড়াতে চেয়েছিলাম। তার জন্য, ডুডল আগে কতবার শেষ হয়েছে তা আমাদের জানতে হবে। এর ঐতিহাসিকভাবে সঠিক প্রযুক্তিগত সমাধান হল একটি কুকি, কিন্তু এটি Google হোমপেজের জন্য কাজ করে না – প্রতিটি কুকি প্রতিটি পৃষ্ঠার পেলোড বাড়ায়, এবং আবার, আমরা গতি এবং লেটেন্সি সম্পর্কে যথেষ্ট যত্নশীল।
সৌভাগ্যবশত, HTML5 আমাদেরকে ওয়েব স্টোরেজ দেয়, ব্যবহারে তুচ্ছ, যা আমাদেরকে সাধারণ প্লে কাউন্ট এবং ব্যবহারকারীর দ্বারা চালানো শেষ দৃশ্যটি সংরক্ষণ এবং স্মরণ করার অনুমতি দেয় – কুকিজের চেয়ে অনেক বেশি অনুগ্রহের সাথে।
এই তথ্য দিয়ে আমরা কি করব?
- আমরা একটি ফাস্ট-ফরোয়ার্ড বোতাম দেখাই, যা ব্যবহারকারী ইতিমধ্যেই দেখেছেন এমন কাটসিনের মাধ্যমে জিপ করার অনুমতি দেয়
- আমরা ফাইনালের সময় বিভিন্ন এন আইটেম দেখাই
- আমরা শুটিং স্তরের অসুবিধা কিছুটা বাড়াই
- আমরা আপনার তৃতীয় এবং পরবর্তী নাটকে একটি ভিন্ন গল্প থেকে সামান্য ইস্টার ডিমের সম্ভাবনা ড্রাগন দেখাই
এটি নিয়ন্ত্রণ করার জন্য অনেকগুলি ডিবাগ প্যারামিটার রয়েছে:
-
?doodle-debug&doodle-first-run- ভান করুন এটি একটি প্রথম দৌড় -
?doodle-debug&doodle-second-run- ভান করুন এটি একটি দ্বিতীয় দৌড় -
?doodle-debug&doodle-old-run- ভান করুন এটি একটি পুরানো দৌড়৷
স্পর্শ ডিভাইস
আমরা টাচ ডিভাইসে ডুডলটিকে বাড়িতে ঠিক অনুভব করতে চেয়েছিলাম - সবচেয়ে আধুনিকগুলি যথেষ্ট শক্তিশালী যাতে ডুডলটি সত্যিই ভালভাবে চলে এবং ক্লিক করার চেয়ে ট্যাপ করার মাধ্যমে গেমটি উপভোগ করা অনেক বেশি মজাদার৷
ব্যবহারকারীর অভিজ্ঞতায় কিছু আগাম পরিবর্তন করা দরকার। মূলত, আমাদের মাউস পয়েন্টারই একমাত্র স্থান যা একটি কাটসিন/অ-ইন্টারেক্টিভ অংশ সংঘটিত হচ্ছে তা জানিয়েছিল। আমরা পরে নীচের-ডান কোণায় একটি সামান্য সূচক যুক্ত করেছি, তাই আমাদের একা মাউস পয়েন্টারের উপর নির্ভর করতে হবে না (প্রদত্ত যে সেগুলি স্পর্শ ডিভাইসে বিদ্যমান নেই)।
| স্বাভাবিক | ব্যস্ত | ক্লিকযোগ্য | ক্লিক করা হয়েছে | |
|---|---|---|---|---|
| কাজ চলছে |  |  |  |  |
| ফাইনাল |  v |  |  |  |
বেশিরভাগ জিনিসপত্র বাক্সের বাইরে কাজ করে। যাইহোক, আমাদের স্পর্শ অভিজ্ঞতার দ্রুত তাত্ক্ষণিক ব্যবহারযোগ্যতা পরীক্ষা দুটি সমস্যা দেখায়: কিছু লক্ষ্যগুলি চাপানো খুব কঠিন ছিল, এবং দ্রুত ট্যাপগুলি উপেক্ষা করা হয়েছিল যেহেতু আমরা মাউস ক্লিক ইভেন্টগুলিকে ওভাররোড করেছি৷
পৃথক ক্লিকযোগ্য স্বচ্ছ DOM উপাদানগুলি এখানে অনেক সাহায্য করেছে, কারণ আমি ভিজ্যুয়াল থেকে স্বাধীনভাবে তাদের আকার পরিবর্তন করতে পারি। আমি স্পর্শ ডিভাইসের জন্য অতিরিক্ত 15-পিক্সেল প্যাডিং প্রবর্তন করেছি এবং যখনই ক্লিকযোগ্য উপাদান তৈরি করা হয়েছিল তখনই এটি ব্যবহার করেছি। (আমি মাউসের পরিবেশের জন্যও 5-পিক্সেল প্যাডিং যোগ করেছি, শুধুমাত্র মিস্টার ফিটসকে খুশি করতে।)
অন্যান্য সমস্যা হিসাবে, আমি মাউস ক্লিকের উপর নির্ভর না করে সঠিক টাচ স্টার্ট এবং এন্ড হ্যান্ডলার সংযুক্ত এবং পরীক্ষা করার বিষয়টি নিশ্চিত করেছি।
ওয়েবকিট ব্রাউজারগুলি ডিফল্টরূপে যোগ করে এমন কিছু স্পর্শ বৈশিষ্ট্যগুলি সরাতে আমরা আরও আধুনিক শৈলী বৈশিষ্ট্যগুলি ব্যবহার করছি (হাইলাইট আলতো চাপুন, কলআউটে আলতো চাপুন)৷
এবং ডুডল চালানো একটি প্রদত্ত ডিভাইস স্পর্শ সমর্থন করে কিনা তা আমরা কীভাবে সনাক্ত করব? অলসভাবে। এটিকে একটি অগ্রাধিকার খুঁজে বের করার পরিবর্তে, আমরা আমাদের সম্মিলিত আইকিউ ব্যবহার করেছি যে ডিভাইসটি স্পর্শ সমর্থন করে... আমরা প্রথম স্পর্শ শুরু করার ইভেন্ট পাওয়ার পরে।
মাউস পয়েন্টার কাস্টমাইজ করা
তবে সবকিছু স্পর্শ-ভিত্তিক নয়। আমাদের পথপ্রদর্শক নীতিগুলির মধ্যে একটি হল ডুডলের মহাবিশ্বের মধ্যে যতটা সম্ভব জিনিস রাখা। ছোট সাইডবার UI (দ্রুত-ফরোয়ার্ড, প্রশ্ন চিহ্ন), টুলটিপ, এবং এমনকি, হ্যাঁ, মাউস পয়েন্টার।
কিভাবে একটি মাউস পয়েন্টার কাস্টমাইজ করবেন? কিছু ব্রাউজার একটি বেসপোক ইমেজ ফাইলের সাথে লিঙ্ক করে মাউস কার্সার পরিবর্তন করার অনুমতি দেয়। যাইহোক, এটি ভালভাবে সমর্থিত নয় এবং এটি কিছুটা সীমাবদ্ধও।
এই না হলে কি? আচ্ছা, ডুডলে শুধু একজন মাউস পয়েন্টার তৈরি করছেন না কেন? এটি কাজ করে, তবে বেশ কয়েকটি সতর্কতার সাথে আসে, প্রধানত:
- আপনাকে নেটিভ মাউস পয়েন্টার অপসারণ করতে সক্ষম হতে হবে
- আপনার মাউস পয়েন্টারকে "বাস্তব" এর সাথে সিঙ্কে রাখতে আপনাকে বেশ ভাল হতে হবে
প্রাক্তনটি চতুর। CSS3 cursor: none , তবে এটিও কিছু ব্রাউজারে সমর্থিত নয়। আমাদের কিছু জিমন্যাস্টিকস অবলম্বন করা দরকার: একটি ফলব্যাক হিসাবে খালি .cur ফাইল ব্যবহার করা, কিছু ব্রাউজারগুলির জন্য কংক্রিট আচরণ নির্দিষ্ট করা, এমনকি অন্যদেরকে হার্ড-কোডিং অভিজ্ঞতার বাইরে রাখা।
অন্যটি তার মুখে তুলনামূলকভাবে তুচ্ছ, কিন্তু মাউস পয়েন্টারটি ডুডলের মহাবিশ্বের আরেকটি অংশ হওয়ায় এটি তার সমস্ত সমস্যাও উত্তরাধিকার সূত্রে পাবে। সবচেয়ে বড়? যদি ডুডলের ফ্রেম রেট কম হয়, তাহলে মাউস পয়েন্টারের ফ্রেম রেটও কম হবে – এবং এর মারাত্মক পরিণতি রয়েছে যেহেতু মাউস পয়েন্টার, আপনার হাতের একটি প্রাকৃতিক সম্প্রসারণ, যাই হোক না কেন প্রতিক্রিয়াশীল বোধ করতে হবে। (যারা তাদের অতীতে কমোডোর অ্যামিগা ব্যবহার করেছিল তারা এখন জোরে জোরে মাথা নাড়ছে।)
সেই সমস্যার একটি কিছুটা জটিল সমাধান হল নিয়মিত আপডেট লুপ থেকে মাউস পয়েন্টারকে ডিকপল করা। আমরা ঠিক সেটাই করেছি - একটি বিকল্প মহাবিশ্বে যেখানে আমার ঘুমানোর দরকার নেই। এই এক জন্য একটি সহজ সমাধান? রোলিং ফ্রেম রেট 20fps-এর নিচে নেমে গেলে শুধু নেটিভ মাউস পয়েন্টারে ফিরে যাওয়া। (এখানেই ঘূর্ণায়মান ফ্রেম রেট কাজে আসে। আমরা যদি বর্তমান ফ্রেমের হারে প্রতিক্রিয়া দেখাই, এবং যদি এটি 20fps-এর কাছাকাছি দোদুল্যমান হয়ে যায়, তাহলে ব্যবহারকারী কাস্টম মাউস পয়েন্টারটিকে সর্বদা লুকিয়ে রাখা এবং দেখানো দেখতে পাবে।) এটি আমাদের নিয়ে আসে :
| ফ্রেম হার পরিসীমা | আচরণ |
|---|---|
| >10fps | খেলার গতি কমিয়ে দিন যাতে আরও ফ্রেম বাদ না যায়। |
| 10-20fps | কাস্টম একের পরিবর্তে নেটিভ মাউস পয়েন্টার ব্যবহার করুন। |
| 20-60fps | স্বাভাবিক অপারেশন. |
| >60fps | থ্রটল যাতে ফ্রেম রেট এই মান অতিক্রম না করে। |
ওহ, এবং আমাদের মাউস পয়েন্টার একটি Mac এ অন্ধকার, কিন্তু একটি পিসিতে সাদা। কেন? কারণ প্ল্যাটফর্ম যুদ্ধ এমনকি কাল্পনিক মহাবিশ্বেও জ্বালানী প্রয়োজন।
উপসংহার
এটি একটি নিখুঁত ইঞ্জিন নয়, তবে এটি এক হওয়ার চেষ্টা করে না। এটি লেম ডুডলের পাশাপাশি তৈরি করা হয়েছিল এবং এটির জন্য খুব নির্দিষ্ট। ঠিক আছে. "অকাল অপ্টিমাইজেশান হল সমস্ত মন্দের মূল," যেমন ডন নুথ বিখ্যাত বলেছেন, এবং আমি বিশ্বাস করি না যে প্রথমে বিচ্ছিন্নভাবে একটি ইঞ্জিন লেখা, এবং শুধুমাত্র এটি পরে প্রয়োগ করা অর্থপূর্ণ - অনুশীলনটি তত্ত্বকে ততটুকুই জানায় যেমন তত্ত্ব অনুশীলনকে জানায়। আমার ক্ষেত্রে, কোডটি ফেলে দেওয়া হয়েছিল, বেশ কয়েকটি অংশ বারবার লিখিত হয়েছে এবং অনেক সাধারণ টুকরা পোস্টটি লক্ষ্য করেছে, বরং পূর্ববর্তী তথ্যের চেয়ে। কিন্তু শেষ পর্যন্ত, আমরা এখানে যা চেয়েছিলাম তা করার অনুমতি দিয়েছি - স্ট্যানিস্লো লেমের কেরিয়ার এবং ড্যানিয়েল ম্রোজের আঁকাগুলিকে আমরা যেভাবে ভাবতে পারি সেই সেরা উপায়ে উদযাপন করুন৷
আমি আশা করি উপরের কিছু ডিজাইনের পছন্দ এবং ট্রেড-অফের উপর আলোকপাত করেছে যা আমাদের করতে হবে – এবং আমরা কীভাবে একটি নির্দিষ্ট, বাস্তব-জীবনের পরিস্থিতিতে HTML5 ব্যবহার করেছি। এখন, সোর্স কোডের সাথে খেলুন, এটিকে স্পিন করার জন্য নিন এবং আপনি কী ভাবছেন তা আমাদের জানান।
আমি নিজে এটি করেছি – এটি নীচের শেষ দিনগুলিতে লাইভ ছিল, রাশিয়ায় 23শে নভেম্বর 2011-এর প্রথম দিকে গণনা করা হয়েছিল, যেটি প্রথম সময় অঞ্চল ছিল যেটি লেম ডুডল দেখেছিল৷ একটি বোকা জিনিস, সম্ভবত, কিন্তু ঠিক ডুডলের মতো, যে জিনিসগুলি তুচ্ছ বলে মনে হয় সেগুলির মাঝে মাঝে গভীর অর্থ থাকে – এই কাউন্টারটি ইঞ্জিনের জন্য সত্যিই একটি চমৎকার "স্ট্রেস টেস্ট" ছিল।
এবং এটি একটি Google ডুডলের জীবনকে দেখার একটি উপায় - কয়েক মাস কাজ, কয়েক সপ্তাহ পরীক্ষা, 48 ঘন্টা এটি বেক করা, সমস্ত কিছুর জন্য যা লোকেরা পাঁচ মিনিটের জন্য খেলে। সেই হাজার হাজার জাভাস্ক্রিপ্ট লাইনের প্রত্যেকেই আশা করছে যে সেই 5 মিনিট সময় ভালোভাবে কাটবে। উপভোগ করুন।