রোল এটি একটি ক্রোম এক্সপেরিমেন্ট যা আপনার ফোন এবং কম্পিউটারে শুধুমাত্র ব্রাউজার ব্যবহার করে একটি ক্লাসিক বোর্ডওয়াক গেমকে পুনরায় কল্পনা করে৷ আপনার ফোনের ব্রাউজার আপনাকে আপনার কব্জির ঝাঁকুনি দিয়ে বলটিকে লক্ষ্য করতে এবং রোল করতে দেয়, যখন আপনার কম্পিউটারের ব্রাউজারটি WebGL এবং ক্যানভাসের সাথে রোল ইট অ্যালির রিয়েল টাইম গ্রাফিক্স রেন্ডার করে। দুটি ডিভাইস ওয়েবসকেটের মাধ্যমে যোগাযোগ করে। কোনো অ্যাপ নেই। কোন ডাউনলোড নেই. কোনো টোকেন নেই। আপনার যা দরকার তা হল একটি আধুনিক ব্রাউজার।
Google ক্রিয়েটিভ ল্যাবের নির্দেশনায়, লেগওয়ার্ক ব্যবহারকারীর অভিজ্ঞতা, ইন্টারফেস এবং গেমের পরিবেশ তৈরি করেছে, তারপরে রোল ইট তৈরির জন্য ডেভেলপমেন্ট পার্টনার, মোড সেট -এর সাথে যৌথভাবে কাজ করেছে। প্রকল্পের সময়কালে বেশ কয়েকটি অনন্য চ্যালেঞ্জ ছিল। এই নিবন্ধটি আমরা যে কৌশলগুলি ব্যবহার করেছি, কৌশলগুলি আবিষ্কার করেছি এবং রোল ইটকে ফলপ্রসূ করার সময় আমরা যে পাঠগুলি শিখেছি তার মধ্যে দিয়ে চলে।
3D কর্মপ্রবাহ
আমাদের সফ্টওয়্যার থেকে একটি ওয়েব রেডি ফাইল ফরম্যাটে 3D মডেল আনার সর্বোত্তম উপায় খুঁজে বের করা ছিল শুরুতে সংগ্রামগুলির মধ্যে একটি। Cinema 4D-এর ভিতরে সম্পদ তৈরি করার পর, মডেলগুলিকে সরলীকৃত করা হয়েছিল এবং নিম্ন-বহুভুজ মেশে রূপান্তরিত করা হয়েছিল। রঙ এবং টেক্সচারিংয়ের জন্য বস্তুর অংশগুলির মধ্যে পার্থক্য করার জন্য প্রতিটি জালকে নির্দিষ্ট বহুভুজ নির্বাচন ট্যাগ দেওয়া হয়েছিল। আমরা তখন একটি Collada 1.5 (.dae) ফাইল হিসাবে রপ্তানি করতে এবং ব্লেন্ডারে আমদানি করতে সক্ষম হয়েছিলাম, একটি ওপেন সোর্স 3D প্রোগ্রাম, যাতে three.js এর জন্য সামঞ্জস্যপূর্ণ ফাইল তৈরি করা যায়। একবার আমরা নিশ্চিত হয়েছি যে আমাদের মডেলগুলি সঠিকভাবে আমদানি করা হয়েছে, আমরা জালটিকে একটি JSON ফাইল হিসাবে রপ্তানি করেছি এবং কোড ব্যবহার করে আলো প্রয়োগ করা হয়েছিল৷ আমরা যে পদক্ষেপগুলি নিয়েছি তার আরও বিশদ বিবরণ এখানে রয়েছে:
কোড লেখা
রোল এটি ওপেন সোর্স লাইব্রেরিগুলির সাথে তৈরি করা হয়েছিল এবং আধুনিক ব্রাউজারগুলিতে স্থানীয়ভাবে চলে। WebGL এবং WebSockets এর মত প্রযুক্তির সাথে, ওয়েব কনসোল-গুণমানের গেমিং এবং মাল্টিমিডিয়া অভিজ্ঞতার উপর বন্ধ হয়ে যাচ্ছে। এইচটিএমএল ডেভেলপমেন্টের জন্য আরও আধুনিক টুল উপলব্ধ হওয়ায় বিকাশকারীরা এই অভিজ্ঞতাগুলি তৈরি করতে পারে এমন সহজ এবং আরাম।
উন্নয়নের পরিবেশ
Roll It-এর বেশিরভাগ মূল কোড CoffeeScript দিয়ে লেখা হয়েছিল—একটি পরিষ্কার এবং সংক্ষিপ্ত ভাষা যা সুগঠিত এবং লিন্টেড জাভাস্ক্রিপ্টে ট্রান্সকম্পাইল করে। CoffeeScript এর দুর্দান্ত উত্তরাধিকার মডেল এবং ক্লিনার স্কোপ হ্যান্ডলিং সহ OOP বিকাশের জন্য উজ্জ্বল। CSS SASS ফ্রেমওয়ার্ক দিয়ে লেখা হয়েছিল, যা ডেভেলপারকে একটি প্রজেক্টের স্টাইলশীট উন্নত এবং পরিচালনা করার জন্য অনেকগুলি দুর্দান্ত সরঞ্জাম দেয়। এই সিস্টেমগুলিকে বিল্ড প্রক্রিয়াতে যুক্ত করা সেট আপ করতে কিছুটা সময় নেয়, তবে অর্থপ্রদান অবশ্যই মূল্যবান, বিশেষ করে রোল ইট এর মতো একটি বড় প্রকল্পের জন্য। আমরা বিকাশের সময় আমাদের সম্পদগুলিকে স্বয়ংক্রিয়ভাবে কম্পাইল করার জন্য রেল সার্ভারে একটি রুবি সেট আপ করেছি, তাই এই সমস্ত সংকলন পদক্ষেপগুলি স্বচ্ছ হয়ে উঠেছে।
একটি সুবিন্যস্ত এবং আরামদায়ক কোডিং পরিবেশ তৈরির বাইরে, সাইটটি দ্রুত লোড করার জন্য অনুরোধগুলি কমানোর জন্য আমরা ম্যানুয়ালি সম্পদগুলিকে অপ্টিমাইজ করেছি৷ আমরা প্রতিটি ছবিকে কয়েকটি কম্প্রেশন প্রোগ্রামের মাধ্যমে চালাই— ImageOptim এবং ImageAlpha । প্রতিটি প্রোগ্রাম তাদের নিজস্ব উপায়ে ইমেজ অপ্টিমাইজ করে - যথাক্রমে ক্ষতিহীন এবং ক্ষতিকর। সেটিংসের সঠিক সংমিশ্রণে, তারা একটি চিত্রের ফাইলের আকার উল্লেখযোগ্যভাবে হ্রাস করতে পারে। এটি শুধুমাত্র বহিরাগত ছবি লোড করার সময় ব্যান্ডউইথ সংরক্ষণ করে না, কিন্তু একবার অপ্টিমাইজ করা হলে, আপনার ছবিগুলি HTML, CSS এবং JavaScript-এ ইনলাইন এম্বেডিংয়ের জন্য একটি অনেক ছোট বেস64 এনকোডেড স্ট্রিং-এ অনুবাদ করবে। বেস 64 এনকোডিংয়ের বিষয়ে, আমরা এই কৌশলটি ব্যবহার করে আমাদের ওপেন সানস ডাব্লুওএফএফ এবং এসভিজি ফন্ট ফাইলগুলিকে সরাসরি সিএসএস-এ এম্বেড করেছি, যার ফলে মোট অনুরোধগুলি আরও কম হয়েছে।
পদার্থবিদ্যা-সক্ষম 3D দৃশ্য
THREE.js হল ওয়েবের জন্য সর্বব্যাপী 3D জাভাস্ক্রিপ্ট লাইব্রেরি। এটি নিম্ন-স্তরের 3D গণিত এবং হার্ডওয়্যার-ভিত্তিক WebGL অপ্টিমাইজেশানগুলিকে গুটিয়ে রাখে যা কাস্টম শেডারগুলি লিখতে বা ম্যানুয়াল ম্যাট্রিক্স রূপান্তরগুলি সম্পাদন না করেই সহজে ভাল-আলো এবং সুন্দর ইন্টারেক্টিভ 3D দৃশ্য তৈরি করতে নিছক মানুষদের সক্ষম করে৷ Physijs হল একটি জনপ্রিয় C++ পদার্থবিদ্যা লাইব্রেরির জন্য একটি THREE.js-নির্দিষ্ট মোড়ক যা জাভাস্ক্রিপ্টে অনুবাদ করা হয়েছে। আমরা 3D তে বল রোলিং, জাম্পিং এবং বাউন্সিং এর গন্তব্যের দিকে অনুকরণ করতে এই লাইব্রেরির সুবিধা নিয়েছি।
শুরু থেকেই, আমরা বল রোল করার শারীরিক অভিজ্ঞতাকে বাস্তবসম্মত মনে করার জন্যই নয়, সেই সাথে খেলার বস্তুগুলিকে বাস্তব মনে করে তা নিশ্চিত করার জন্যও প্রস্তুত হয়েছিলাম। এটির জন্য ফিজিজ দৃশ্যের সামগ্রিক মাধ্যাকর্ষণ, খেলোয়াড়ের নিক্ষেপ থেকে বলের গতি, লেনের লাফের ঢাল এবং বল এবং লেনের উপকরণগুলির ঘর্ষণ এবং পুনরুদ্ধার (বাউন্সিনেস) বৈশিষ্ট্যগুলি সামঞ্জস্য করার জন্য অনেকগুলি পুনরাবৃত্তির প্রয়োজন হয়েছিল। আরও মাধ্যাকর্ষণ এবং আরও গতির সমন্বয়ের ফলে আরও বাস্তবসম্মত গেমিং অভিজ্ঞতা হয়েছে।
এটা মসৃণ আউট
বেশিরভাগ আধুনিক ব্রাউজার এবং ভিডিও কার্ড সংমিশ্রণগুলিকে WebGL পরিবেশে নেটিভ হার্ডওয়্যার-ভিত্তিক অ্যান্টি-আলিয়াসিংয়ের সুবিধা নেওয়া উচিত, তবে কিছু ভাল খেলবে না। যে ক্ষেত্রে অ্যান্টি-অ্যালিয়াসিং নেটিভভাবে কাজ করে না, THREE.js দৃশ্যের যেকোনো শক্ত এবং বিপরীত প্রান্তগুলি জ্যাগড এবং কুৎসিত হবে (আমাদের বিচক্ষণ দৃষ্টিতে, অন্তত)।
ভাগ্যক্রমে একটি সমাধান আছে: কোডের একটি স্নিপেটের মাধ্যমে, আমরা সনাক্ত করতে পারি যে প্ল্যাটফর্মটি স্থানীয়ভাবে অ্যান্টিলিয়াসিং সমর্থন করবে কিনা। যদি এটা করে, তাহলে আমরা যেতে ভালো. যদি তা না হয়, THREE.js এর সাথে আসা পোস্ট-প্রসেসিং শেডারগুলির একটি সিরিজ রয়েছে যা আমাদের সাহায্য করতে পারে৷ যথা, এফএক্সএএ অ্যান্টি-আলিয়াসিং ফিল্টার। এই শেডারের সাথে প্রতিটি ফ্রেমে রেন্ডার করা দৃশ্যটি পুনরায় অঙ্কন করে, আমরা সাধারণত আমাদের লাইন এবং প্রান্তগুলিতে আরও মসৃণ চেহারা দিয়ে থাকি। নীচের ডেমো দেখুন:
// Check for native platform antialias support via the THREE renderer
// from: http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/#antialiasing
var nativeAntialiasSupport = (renderer.context.getParameter(renderer.context.SAMPLES) == 0) ? false : true;
অ্যাক্সিলোমিটার-ভিত্তিক গেম নিয়ন্ত্রণ
বেশিরভাগ রোল ইটস ম্যাজিক বল-ঘূর্ণায়মান অঙ্গভঙ্গি থেকে আসে যা প্লেয়ার একটি ফোন দিয়ে সম্পাদন করে। মোবাইল ডিভাইসগুলি কিছু সময়ের জন্য ব্রাউজারের মধ্যে অ্যাক্সিলোমিটারে অ্যাক্সেস পেয়েছে, কিন্তু একটি শিল্প হিসাবে আমরা ওয়েবে গতি-ভিত্তিক অঙ্গভঙ্গি স্বীকৃতি অন্বেষণ করতে শুরু করছি৷ ফোনের অ্যাক্সিলোমিটার যে ডেটা সরবরাহ করে তা দ্বারা আমরা কিছুটা সীমাবদ্ধ, তবে একটু সৃজনশীলতার সাথে আমরা কিছু দুর্দান্ত নতুন অভিজ্ঞতা নিয়ে আসতে পারি।
রোল সনাক্ত করা এটির প্রধান "রোল" অঙ্গভঙ্গিটি উইন্ডোর deviceorientation ইভেন্ট থেকে আসা 10টি সাম্প্রতিক অ্যাক্সিলোমিটার আপডেটগুলি ট্র্যাক করার মাধ্যমে শুরু হয়৷ বর্তমান টিল্ট মান থেকে পূর্ববর্তী টিল্ট মান বিয়োগ করে, আমরা ইভেন্টগুলির মধ্যে কোণ ডেল্টা সংরক্ষণ করি। তারপরে, ক্রমাগত শেষ দশটি কোণ ডেল্টাগুলিকে সংক্ষিপ্ত করে, ফোনটি স্থানের মধ্য দিয়ে যাওয়ার সাথে সাথে আমরা ক্রমাগত ঘূর্ণন সনাক্ত করতে পারি। যখন ফোনটি সুইপিং এঙ্গেল পরিবর্তনের থ্রেশহোল্ড অতিক্রম করে, তখন আমরা একটি রোল ট্রিগার করি। তারপর, সেই সুইপে সবচেয়ে বড় একক কাত ডেল্টা খুঁজে বের করে, আমরা বলের গতি অনুমান করতে পারি। রোল ইট-এ, টাইমস্ট্যাম্প ব্যবহার করে এই গতি স্বাভাবিক করা হয় যা আমরা প্রতিটি অ্যাক্সিলোমিটার আপডেটের সাথে সংযুক্ত করি। এটি পরিবর্তনশীল গতিকে মসৃণ করতে সাহায্য করে যেখানে অ্যাক্সিলোমিটার আপডেটগুলি বিভিন্ন ডিভাইসে ব্রাউজারে প্রবাহিত হয়।
WebSockets যোগাযোগ
একবার প্লেয়ার তাদের ফোন দিয়ে বল রোল করলে, ফোন থেকে ল্যাপটপে একটি বার্তা পাঠানো হয় যাতে বল চালু করতে বলা হয়। এই "রোল" বার্তাটি দুটি মেশিনের মধ্যে একটি ওয়েবসকেট সংযোগের মাধ্যমে একটি JSON ডেটা অবজেক্টের মাধ্যমে পাঠানো হয়। JSON ডেটা ছোট, যার মধ্যে প্রধানত একটি বার্তার ধরন, নিক্ষেপের গতি এবং লক্ষ্যের দিক রয়েছে।
{
"type": "device:ball-thrown",
"speed": 0.5,
"aim": 0.1
}
ল্যাপটপ এবং ফোনের মধ্যে সমস্ত যোগাযোগ এইরকম ছোট JSON বার্তাগুলির মাধ্যমে ঘটে৷ প্রতিবার গেমটি ডেস্কটপে তার অবস্থা আপডেট করে, বা ব্যবহারকারী ফোনের একটি বোতাম টিল্ট বা ট্যাপ করে, মেশিনগুলির মধ্যে একটি WebSocket বার্তা প্রেরণ করা হয়। এই যোগাযোগ সহজ এবং পরিচালনা করা সহজ রাখার জন্য, WebSockets বার্তাগুলি উভয় ব্রাউজার থেকে একটি একক প্রস্থান পয়েন্ট ব্যবহার করে সম্প্রচার করা হয়। বিপরীতভাবে, গ্রহনকারী ব্রাউজারে একটি একক এন্ট্রি পয়েন্ট রয়েছে, একটি ওয়েবসকেট বস্তু উভয় প্রান্তে সমস্ত আগত এবং বহির্গামী বার্তা পরিচালনা করে। যখন একটি WebSocket বার্তা প্রাপ্ত হয়, JSON ডেটা jQuery-এর trigger() পদ্ধতি ব্যবহার করে জাভাস্ক্রিপ্ট অ্যাপের মধ্যে পুনঃপ্রচার করা হয়। এই মুহুর্তে, ইনকামিং ডেটা অন্য যেকোনো কাস্টম DOM ইভেন্টের মতোই আচরণ করে এবং অ্যাপ্লিকেশনে থাকা অন্য কোনো বস্তুর দ্বারা বাছাই এবং প্রক্রিয়া করা যেতে পারে।
var websocket = new WebSocket(serverIPAddress);
// rebroadcast incoming WebSocket messages with a global event via jQuery
websocket.onmessage = function(e) {
if (e.data) {
var obj = JSON.parse(e.data);
$(document).trigger(data.type, obj);
}
};
// broadcast outgoing WebSocket messages by passing in a native .js object
var broadcast = function(obj) {
websocket.send(JSON.stringify(obj));
};
Roll It's WebSocket সার্ভারগুলি যখন একটি গেম কোডের সাথে দুটি ডিভাইস সিঙ্ক করা হয় তখন উড়তে থাকা অবস্থায় তৈরি হয়৷ Roll It-এর ব্যাকএন্ড Go ব্যবহার করে Google Compute Engine এবং App Engine প্ল্যাটফর্মে তৈরি করা হয়েছিল।
মেনু পর্দা কাত করা
গেমপ্লে চলাকালীন ব্যবহৃত ইভেন্ট-চালিত ওয়েবসকেট বার্তাগুলির বাইরে, রোল ইট-এর মেনুগুলি ফোনটি কাত করে এবং একটি নির্বাচন নিশ্চিত করতে একটি বোতামে ট্যাপ করে নিয়ন্ত্রিত হয়। এর জন্য ফোন থেকে ল্যাপটপে ট্রান্সমিট করার জন্য টিল্ট ডেটার আরও ধারাবাহিক স্ট্রিম প্রয়োজন। ব্যান্ডউইথ কমাতে এবং অপ্রয়োজনীয় আপডেট পাঠানো এড়াতে, এই বার্তাগুলি শুধুমাত্র তখনই পাঠানো হয় যদি ডিভাইসের কাত কয়েক ডিগ্রির বেশি পরিবর্তিত হয়। ফোনটি যদি টেবিলের উপর ফ্ল্যাট পড়ে থাকে তবে টিল্ট ডেটার স্ট্রিম পাঠানোর কোন মানে নেই! ট্রান্সমিশনের হারও থ্রোটল করা হয় - রোল ইট-এ প্রতি সেকেন্ডে 15টির বেশি ওয়েবসকেট বার্তা পাঠানো হয় না, এমনকি ডিভাইসটি সক্রিয়ভাবে কাত হয়ে থাকলেও।
একবার টিল্টের মানগুলি কম্পিউটারে তোলা হয়ে গেলে, একটি মসৃণ অনুভূতি রাখতে requestAnimationFrame ব্যবহার করে সময়ের সাথে সাথে সেগুলি প্রসারিত হয়৷ শেষ ফলাফল হল একটি ঘূর্ণায়মান মেনু এবং একটি বল যা ব্যবহারকারীর নির্বাচন নির্দেশ করতে সাহায্য করে। ফোন টিল্ট ডেটা পাঠায়, requestAnimationFrame লুপের ভিতরে একটি CSS ট্রান্সফর্ম পুনঃগণনা করে এই DOM উপাদানগুলি রিয়েল টাইমে আপডেট করা হয়। মেনুর ধারকটি কেবল ঘোরে, তবে বলটি মেঝে বরাবর গড়িয়ে যাচ্ছে বলে মনে হচ্ছে। এই প্রভাবটি অর্জনের জন্য, আমরা কিছু মৌলিক ত্রিকোণমিতি প্রয়োগ করি যাতে বলগুলিকে এর ঘূর্ণনের সাথে x-সমন্বয় যুক্ত করা যায়। সরল সমীকরণ হল: ঘূর্ণন = x / (ব্যাস * π)
গুটিয়ে নিন
রোল এটা সময়ের একটি চিহ্ন. ওপেন সোর্স প্রকল্পগুলির মধ্যে যা এর বিকাশকে চালিত করে, আমাদের ডেস্কে এবং আমাদের পকেটে থাকা ডিভাইসগুলির প্রক্রিয়াকরণের ক্ষমতা এবং একটি প্ল্যাটফর্ম হিসাবে ওয়েবের অবস্থা, এটি একটি সত্যই উত্তেজনাপূর্ণ এবং রূপান্তরকারী সময় ওপেন ওয়েবে সংযুক্ত হওয়া। মাত্র কয়েক বছর আগে, এই প্রযুক্তির বেশিরভাগই শুধুমাত্র মালিকানাধীন সিস্টেমে বিদ্যমান ছিল, অবাধে ব্যবহার এবং বিতরণের জন্য অনুপলব্ধ। আজ, জটিল অভিজ্ঞতাগুলি কম পরিশ্রম এবং বেশি কল্পনার সাথে উপলব্ধি করা যেতে পারে কারণ আমরা প্রতিদিন ধাঁধাটির নতুন অংশ তৈরি করি এবং ভাগ করি। তাই, আপনি কি জন্য অপেক্ষা করছেন? দুর্দান্ত কিছু তৈরি করুন এবং বিশ্বের সাথে ভাগ করুন!
