رول این یک آزمایش کروم است که یک بازی کلاسیک پیاده‌روی روی تخته را تنها با استفاده از مرورگر تلفن و رایانه شما دوباره تصور می‌کند. مرورگر تلفن شما به شما امکان می دهد توپ را با تکان دادن مچ خود نشانه بگیرید و بچرخانید، در حالی که مرورگر رایانه شما تصاویر گرافیکی Roll It alley را با WebGL و Canvas در زمان واقعی ارائه می دهد. این دو دستگاه از طریق Websockets با هم ارتباط برقرار می کنند. بدون برنامه بدون دانلود. بدون توکن تنها چیزی که نیاز دارید یک مرورگر مدرن است.
با هدایت Google Creative Lab، Legwork تجربه کاربری، رابط‌ها و محیط بازی را توسعه داد، سپس با شریک توسعه Mode Set همکاری کرد تا Roll It را بسازد. در طول مدت پروژه تعدادی چالش منحصر به فرد وجود داشت. در این مقاله برخی از تکنیک‌هایی که استفاده کردیم، ترفندهایی که کشف کرده‌ایم و درس‌هایی که در حین به ثمر رساندن Roll It آموختیم، توضیح داده می‌شود.
گردش کار سه بعدی
یکی از مشکلات در ابتدا کشف بهترین راه برای آوردن مدل های سه بعدی از نرم افزار ما به فرمت فایل آماده وب بود. پس از ایجاد دارایی‌ها در Cinema 4D ، مدل‌ها ساده شده و به شبکه‌های چند ضلعی کم تبدیل شدند. به هر مش تگ های انتخاب چند ضلعی خاصی داده شد تا بین قسمت هایی از شی برای رنگ آمیزی و بافت بندی تفاوت قائل شود. سپس توانستیم به عنوان یک فایل Collada 1.5 (.dae) صادر کنیم و به Blender ، یک برنامه متن باز سه بعدی، وارد کنیم تا فایل های سازگار برای three.js بسازیم. هنگامی که مطمئن شدیم مدل‌هایمان به درستی وارد شده‌اند، مش را به‌عنوان فایل JSON صادر کردیم و نورپردازی با استفاده از کد اعمال شد. در اینجا نگاهی دقیق تر به مراحلی که انجام دادیم آورده شده است:
نوشتن کد
Roll با کتابخانه های منبع باز توسعه داده شد و به صورت بومی در مرورگرهای مدرن اجرا می شود. با فناوری‌هایی مانند WebGL و WebSockets، وب در حال نزدیک شدن به تجربه‌های چندرسانه‌ای و بازی با کیفیت کنسول است. سهولت و راحتی که در آن توسعه دهندگان می توانند این تجربیات را ایجاد کنند، با در دسترس قرار گرفتن ابزارهای مدرن تر برای توسعه HTML، جهشی به جلو داشته است.
محیط توسعه
بیشتر کد اصلی Roll It با CoffeeScript نوشته شده است - زبانی تمیز و مختصر که به جاوا اسکریپت خوش فرم و پرده تبدیل می شود. CoffeeScript با مدل ارثی عالی و مدیریت محدوده تمیزتر برای توسعه OOP می درخشد. CSS با چارچوب SASS نوشته شده است، که به توسعه دهنده تعدادی ابزار عالی برای بهبود و مدیریت شیوه نامه های پروژه می دهد. راه اندازی این سیستم ها به فرآیند ساخت کمی زمان می برد، اما نتیجه آن قطعا ارزشش را دارد، به خصوص برای پروژه بزرگتری مانند Roll It. ما یک سرور Ruby on Rails راه‌اندازی کردیم تا دارایی‌هایمان را در طول توسعه به صورت خودکار کامپایل کند، بنابراین همه این مراحل کامپایل شفاف شدند.
فراتر از ایجاد یک محیط کدنویسی ساده و راحت، ما به صورت دستی دارایی ها را بهینه سازی کردیم تا درخواست ها را به حداقل برسانیم تا سایت سریعتر بارگیری شود. ما هر تصویر را از طریق چند برنامه فشرده سازی اجرا کردیم - ImageOptim و ImageAlpha . هر برنامه تصاویر را به روش خود بهینه می‌کند—به ترتیب بدون ضرر و بدون ضرر. با ترکیب مناسب تنظیمات، آنها می توانند اندازه فایل تصویر را به میزان قابل توجهی کاهش دهند. این نه تنها باعث صرفه جویی در پهنای باند هنگام بارگیری تصاویر خارجی می شود، بلکه پس از بهینه سازی، تصاویر شما به رشته های کدگذاری شده با پایه 64 بسیار کوچکتر برای جاسازی درون خطی در HTML، CSS و جاوا اسکریپت تبدیل می شوند. در حالی که در مورد کدگذاری base64 بودیم، ما همچنین فایل‌های فونت Open Sans WOFF و SVG خود را مستقیماً با استفاده از این تکنیک در CSS جاسازی کردیم، که منجر به تعداد درخواست‌های کمتر شد.
صحنه سه بعدی با قابلیت فیزیک
THREE.js کتابخانه جاوا اسکریپت سه بعدی همه جا برای وب است. بهینه‌سازی‌های WebGL مبتنی بر سخت‌افزار و ریاضیات سه بعدی سطح پایین را جمع‌بندی می‌کند که انسان‌های ساده را قادر می‌سازد تا به راحتی صحنه‌های سه بعدی تعاملی با نور و زیبایی را بدون نیاز به نوشتن سایه‌زن‌های سفارشی یا انجام تبدیل‌های ماتریس دستی ایجاد کنند. Physijs یک پوشش مخصوص THREE.js برای یک کتابخانه فیزیک محبوب C++ است که به جاوا اسکریپت ترجمه شده است. ما از این کتابخانه برای شبیه سازی غلتاندن، پریدن و پریدن توپ به سمت مقصد به صورت سه بعدی استفاده کردیم.
از همان ابتدا، ما تصمیم گرفتیم که نه تنها تجربه فیزیکی چرخاندن توپ را واقعی کنیم، بلکه مطمئن شویم که اشیاء موجود در بازی واقعی هستند. این امر مستلزم تکرارهای زیادی برای تنظیم گرانش کلی صحنه Physijs، سرعت توپ هنگام غلتیدن از پرتاب بازیکن، شیب پرش خط، و خواص اصطکاک و بازگشت (جهش) توپ و مواد لاین بود. ترکیبی از جاذبه بیشتر و سرعت بیشتر منجر به تجربه بازی واقعی تری شد.
صاف کردن آن
بیشتر ترکیب‌های مرورگر مدرن و کارت‌های ویدیویی باید از آنتی‌الایاسینگ مبتنی بر سخت‌افزار بومی در محیط WebGL استفاده کنند، اما برخی از آنها خوب بازی نمی‌کنند. در صورتی که anti-aliasing به صورت بومی کار نکند، هر لبه سخت و متضاد در صحنه THREE.js ناهموار و زشت خواهد بود (حداقل برای چشمان فهیم ما).
خوشبختانه یک راه حل وجود دارد: از طریق یک قطعه کد، می‌توانیم تشخیص دهیم که آیا این پلتفرم به طور بومی از antialiasing پشتیبانی می‌کند یا خیر. اگر اینطور شد، پس ما خوب هستیم که برویم. اگر اینطور نیست، یک سری سایه زن پس از پردازش همراه با THREE.js وجود دارد که می تواند به ما کمک کند. یعنی فیلتر ضد آلیاسینگ FXAA. با ترسیم مجدد صحنه‌های رندر شده در هر فریم با این سایه‌زن، به طور کلی ظاهری نرم‌تر به خطوط و لبه‌هایمان می‌دهیم. دموی زیر را ببینید:
// 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;
کنترل های بازی مبتنی بر شتاب سنج
بخش اعظم جادوی Roll It's از حرکت چرخاندن توپ ناشی می شود که بازیکن با تلفن انجام می دهد. دستگاه‌های تلفن همراه مدتی است که به شتاب‌سنج درون مرورگر دسترسی دارند، اما به‌عنوان یک صنعت، ما به‌تازگی شروع به بررسی تشخیص حرکات مبتنی بر حرکت در وب کرده‌ایم. ما تا حدودی با داده‌هایی که شتاب‌سنج گوشی ارائه می‌کند محدود شده‌ایم، اما با کمی خلاقیت می‌توانیم به تجربیات جدید و عالی دست پیدا کنیم.
تشخیص رول ژست اصلی "غلتیدن" با ردیابی 10 به روز رسانی اخیر شتاب سنج که از رویداد deviceorientation پنجره می آید شروع می شود. با کم کردن مقدار شیب قبلی از مقدار شیب فعلی، زاویه دلتا را بین رویدادها ذخیره می کنیم. سپس، با جمع‌بندی مداوم ده زاویه دلتای آخر، می‌توانیم چرخش مداوم را در حین حرکت تلفن در فضا تشخیص دهیم. وقتی تلفن از آستانه تغییر زاویه فراگیر عبور می کند، یک رول را فعال می کنیم. سپس، با پیدا کردن بزرگترین دلتای شیب در آن جارو، می‌توانیم سرعت توپ را تخمین بزنیم. در Roll It، این سرعت با استفاده از مهرهای زمانی که به هر به‌روزرسانی شتاب‌سنج متصل می‌کنیم، عادی می‌شود. این به هموار کردن سرعت متغیری که در آن به‌روزرسانی‌های شتاب‌سنج در مرورگر در دستگاه‌های مختلف پخش می‌شود، کمک می‌کند.
ارتباطات WebSockets
هنگامی که بازیکن توپ را با تلفن خود می چرخاند، پیامی از تلفن به لپ تاپ ارسال می شود که به آن می گوید توپ را پرتاب کند. این پیام "roll" از طریق یک شی داده JSON از طریق اتصال WebSocket بین دو ماشین ارسال می شود. داده‌های JSON کوچک هستند و عمدتاً از نوع پیام، سرعت پرتاب و جهت هدف تشکیل شده‌اند.
{
"type": "device:ball-thrown",
"speed": 0.5,
"aim": 0.1
}
تمام ارتباطات بین لپ تاپ و تلفن از طریق پیام های کوچک JSON مانند این اتفاق می افتد. هر بار که بازی وضعیت خود را روی دسکتاپ به‌روزرسانی می‌کند، یا کاربر دکمه‌ای روی گوشی را کج می‌کند یا ضربه می‌زند، پیام WebSocket بین دستگاه‌ها مخابره می‌شود. به منظور ساده نگه داشتن این ارتباط و مدیریت آسان، پیام‌های WebSockets با استفاده از یک نقطه خروجی واحد از هر مرورگر پخش می‌شوند. برعکس، یک نقطه ورودی واحد در مرورگر دریافت کننده وجود دارد، با یک شی WebSocket که همه پیام های ورودی و خروجی را در هر دو طرف مدیریت می کند. هنگامی که یک پیام WebSocket دریافت می شود، داده های JSON در برنامه جاوا اسکریپت با استفاده از متد trigger() jQuery بازپخش می شود. در این مرحله، داده‌های دریافتی مانند هر رویداد 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 زمانی ایجاد می شوند که دو دستگاه با یک کد بازی همگام شوند. Backend برای Roll It بر روی پلت فرم Google Compute Engine و App Engine با استفاده از Go ساخته شده است.
کج شدن صفحه نمایش منو
فراتر از پیام‌های WebSocket مبتنی بر رویداد که در طول بازی استفاده می‌شوند، منوها در Roll It با چرخاندن تلفن و ضربه زدن روی یک دکمه برای تأیید انتخاب کنترل می‌شوند. این امر مستلزم یک جریان ثابت تر از انتقال داده های شیبدار از تلفن به لپ تاپ است. به منظور کاهش پهنای باند و جلوگیری از ارسال به روز رسانی های غیر ضروری، این پیام ها تنها در صورتی ارسال می شوند که شیب دستگاه بیش از یکی دو درجه تغییر کرده باشد. اگر تلفن صاف روی میز باشد، ارسال جریانی از داده های شیب فایده ای ندارد! سرعت انتقال نیز کاهش می یابد - در Roll It بیش از 15 پیام WebSockets در هر ثانیه ارسال نمی شود، حتی اگر دستگاه به طور فعال در حال چرخش باشد.
هنگامی که مقادیر شیب در رایانه دریافت می شوند، در طول زمان با استفاده از requestAnimationFrame درون یابی می شوند تا احساسی صاف داشته باشند. نتیجه نهایی یک منوی چرخشی و یک توپ است که برای کمک به نشان دادن انتخاب کاربر می چرخد. همانطور که تلفن داده های شیب را ارسال می کند، این عناصر DOM در زمان واقعی با محاسبه مجدد تبدیل CSS در داخل حلقه requestAnimationFrame به روز می شوند. ظرف منو به سادگی می چرخد، اما به نظر می رسد توپ در امتداد زمین می چرخد. برای دستیابی به این اثر، ما برخی از مثلثات اولیه را پیاده سازی می کنیم تا مختصات x توپ ها را با چرخش آن مرتبط کنیم. معادله ساده این است: چرخش = x / (قطر * π)
جمع کنید
رول نشانه روزگار است. بین پروژه‌های منبع باز که به توسعه آن کمک کرده‌اند، قدرت پردازش دستگاه‌های روی میز و جیب ما، و وضعیت وب به عنوان یک پلتفرم، زمان واقعاً هیجان‌انگیز و دگرگون‌کننده برای اتصال در وب باز است. همین چند سال پیش، بسیاری از این فناوری تنها در سیستم‌های اختصاصی وجود داشت و برای استفاده و توزیع آزادانه در دسترس نبود. امروزه، تجربیات پیچیده را می توان با کار کمتر و تخیل بیشتر در حالی که هر روز قطعات جدیدی از پازل را ایجاد می کنیم و به اشتراک می گذاریم، تحقق بخشید. بنابراین، منتظر چه چیزی هستید؟ چیزی عالی بسازید و آن را با دنیا به اشتراک بگذارید!
