سازگاری با اندازه‌های مختلف صفحه‌ی نمایش‌ها

بسم الله الرّحمن الرّحیم

سلام. این آموزش به مناسبت میلاد امام حسن مجتبی (ع) ساخته شده است.

تقریباً همه‌ی بازی‌ها باید در صفحه‌ی نمایش‌هایی با اندازه‌های مختلف کار کنند. چون اندازه‌ی صفحه‌ی نمایش موبایل‌های مختلف با هم فرق می‌کند یا حتّی نسخه‌های مختلف یک دستگاه هم در بعضی مواقع صفحه‌های نمایشی با اندازه‌ی متفاوت دارند، مثلاً اندازه‌ی صفحه‌ی نمایش iPhone 4S با iPhone 5 فرق می‌کند. یا بازیکن ممکن است وقتی دارد بازی شما را در مرورگرش بازی می‌کند اندازه‌ی پنجره‌ی مرورگرش را تغییر دهد، درضمن رزولوشن مانیتور افراد هم با هم تفاوت دارند. حتّی یک بازی در حال اجرا که اندازه‌ی صفحه‌اش ثابت است می‌تواند به حالت تمام صفحه (fullscreen) برود، که یعنی باز هم باید اندازه‌های مختلف صفحه را پشتیبانی کند.
تمام این هایی که گفتیم یعنی تقریباً هر بازی باید راهی داشته باشد تا بتواند از اندازه‌های مختلف صفحه‌ی نمایش پشتیبانی کند، چه برای کامپیوتر در نظر گرفته شده باشد چه برای موبایل. این آموزش اساس سازگاری با اندازه‌های مختلف صفحه‌ی نمایش را پوشش می‌دهد.

برای دانلود این آموزش از لینک زیر استفاده کنید و برای مطالعه‌ی آن به صورت آنلاین به ادامه‌ی مطلب مراجعه کنید.

شرح کوتاه: فقط یک رزولوشن را هدف قرار ندهید

رزولوشن‌های زیادی هستند که مورد استفاده قرار می‌گیرند. خوب نیست بازی‌تان را فقط برای یکی از آن‌ها بسازید. اگر فقط از یک نسبت ابعاد استفاده کنید، سپس مقیاس بازی‌تان را با آن متناسب کنید، باز تا حدودی بهتر است. مثلاً به جای استفاده از رزولوشن 720×1280، نسبت ابعاد را 16:9 قرار دهید. (فقط کافی است که برای اندازه‌ی پنجره (Window sizes) در نوار ویژگی‌ها نسبت طول به عرض 16 به 9 باشد.). بعد در ویژگی‌های پروژه در نوار ویژگی‌ها Fullscreen in browser را روی Letterbox scale قرار دهید، حالا باید بازی‌تان در هر صفحه‌ی نمایشی که نسبت ابعادش 16:9 است به خوبی اجرا شود. اگر نسبت ابعاد صفحه‌ی نمایش 16:9 نباشد نوارهای سیاهی در اطراف پنجره‌ی بازی ظاهر می‌شوند (یا فقط در دو طرف راست و چپ و یا فقط در دو طرف بالا و پایین این نوارها دیده می‌شوند و هیچوقت در هر 4 جهت ظاهر نمی‌شوند.) که این نوارها از پیش آمدن مشکلاتی ناخواسته از قبیل دیده شدن بیش از حد مرحله‌ی بازی یا صفحه‌ی منو جلوگیری می‌کنند.
در این آموزش با تمام ابزارهایی که برای سازگار کردن بازی‌تان با اندازه‌های مختلف صفحه‌ی نمایش‌ها وجود دارد آشنا می‌شویم. حتّی اگر از راه حلّ کوتاهی که الآن گفتیم استفاده کنید باز هم خواندن این آموزش برایتان مهم است. اگر می‌خواهید بازی‌تان را با دقّت بیشتری طرّاحی کنید می‌توانید آن را با نسبت ابعادهای مختلف نیز سازگار کنید.

استفاده از حالت تمام صفحه

در نوار ویژگی‌ها یکی از حالت‌های Fullscreen in browser را انتخاب کنید.
اگر این ویژگی را روی off قرار دهید، اندازه‌ی پنجره‌ی بازی ثابت باقی می‌ماند و دقیقاً برابر همان اندازه‌ای است که در Window size در نوار ویژگی‌ها وارد کردید، پس این حالت با اندازه‌های مختلف سازگار نیست و اگر بخواهید از اکشن Requst fullscreen شیء Browser استفاده کنید، مجبور خواهید بود بازی‌تان را با اندازه‌های مختلف سازگار کنید.

حالت Crop

در حالت Crop مقیاس قسمتی از بازی که کاربر می‌تواند ببیند تغییر نمی‌کند، تصویر زیر پنجره‌ی کوچکی را در حالت Crop نشان می‌دهد. پلیر در اندازه‌ی اصلی‌اش دیده می‌شود ولی قسمت کوچکی از لیوت قابل مشاهده است.

حالا اگر پنجره کمی بزرگتر شود قسمت بیشتری از لیوت قابل مشاهده خواهد بود. به تصویر زیر توجّه کنید. ببینید که چگونه با بزرگتر شدن اندازه‌ی پنجره پلیر ما می‌تواند هیولاهای بیشتری را کشف کند.

این حالت به شما اجازه می‌دهد که فقط خودتان که سازنده‌ی بازی هستید مقیاس را تغییر دهید، یا ساده‌تر بگویم در این حالت مقیاس تغییر نخواهد کرد. چون در حالت Crop تغییر مقیاسی صورت نمی‌گیرد، بازی‌تان در دستگاه‌هایی با رزولوشن بالا به طور عجیبی کوچک به نظر خواهد رسید. بنابراین این حالت معمولاً برای بازی‌ها خوب نیست.

حالت Letterbox scale

حالت Letterbox scale مقیاس بازی را تغییر می‌دهد تا با صفحه‌ی نمایش متناسب شود. اگر نسبت ابعاد بازی با صفحه‌ی نمایش یکی نبود، نوارهای سیاهی در اطراف پنجره ظاهر می‌شوند. این هم دو نمونه از این حالت:


ظاهر شدن نوارهای سیاه از به وجود آمدن مشکلات ناخواسته‌ای از قبیل نمایش قسمت‌هایی که در موقع ساخت بازی آن‌ها را خارج از محدوده‌ی پنجره‌ی بازی در نظر گرفتید جلوگیری می‌کند. امّا مشکل این حالت این است که کاربران مقداری از ناحیه‌ی صفحه‌ی نمایش خود را به خاطر وجود نوارهای سیاه از دست می‌دهند. البته حالت Letterbox scale تقریباً می‌تواند به تمام بازی‌ها اعمال شود و عملکرد بازی را پایین نیاورد. پس روشی ساده است برای این‌که بازی‌مان با اندازه‌های مختلف سازگار شود، بدون این‌که بخواهیم نسبت ابعاد را تغییر دهیم.

Letterbox integer scale

حالت Letterbox integer scale مثل حالت Letterbox scale نسبت ابعاد را تغییر نمی‌دهد، امّا مقیاس را فقط به نسبت یک عدد صحیح تغییر می‌هد. مثلاً مقیاس بازی را یک برابر، دو برابر، سه برابر، چهار برابر و… می‌کند و هیچ‌وقت مثلاً مقیاس بازی را 5/2 برابر نمی‌کند. این حالت بیشتر به درد بازی‌هایی می‌خورد که از Point sampling استفاده می‌کنند (بیشتر بازی‌هایی در سبک retro) تا در هنگام تغییر مقیاس، درستی پیکسل‌ها را کاملاً حفظ کند. در ضمن در این حالت نوارهای سیاه می‌توانند در همه طرف پنجره دیده شوند، برعکس حالت Letterbox scale که در آن فقط در سمت چپ و راست یا فقط در سمت بالا و پایین دیده می‌شوند.

حالت Scale outer

حالت Scale outer مقیاس بازی را تغییر می‌دهد تا با اندازه‌ی صفحه‌ی نمایش متناسب شود، درست مثل Letterbox scale. امّا به جای نمایش نوارهای سیاه از تمام ناحیه‌ی صفحه‌ی نمایش استفاده کرده و بخش بیشتری از لیوت را نشان می‌دهد. خیلی وقت‌ها بخش بیشتری از لیوت دیده خواهد شد، بیشتر از آن چیزی که برای اندازه‌ی پنجره در نظر گرفتید. و این یعنی فضای خالی یا اشیائی که خارج از محدوده‌ی پنجره در نظر گرفتید می‌توانند دیده شوند. پس اگر می‌خواهید از این حالت استفاده کنید بازی‌تان را باید بر این اساس بسازید.
به تصویر زیر توجّه کنید. می‌بینید که چگونه مقیاس بازی به خاطر کوچک بودن اندازه‌ی پنجره‌ی مرورگر کوچک شده است بدون این‌که نوار سیاهی نمایش دهد:

امّا اگر اندازه‌ی پنجره‌ی مرورگر به طور غیر طبیعی تغییر داده شود، بازی اشتباه به نمایش در خواهد آمد.

در تصویر بالا مقیاس بازی به تناسب تغییر کرده است ولی از بس نسبت طول به عرض تصویر زیاد است از سمت راست، محدوده‌ی خارج از لیوت هم قابل مشاهده شده است. نه تنها پلیر هیولاهایی را که قبلاً نمی‌توانست ببیند حالا می‌تواند ببیند، بلکه تقلّب نیز می‌تواند محسوب شود. در حالت‌های Letterbox نوارهای سیاه این مشکل را برطرف کرده بودند، بنابراین معمولاً بازی‌سازها حالت‌های Letterbox را ترجیح می‌دهند. با این حال اگر بازی‌تان را برای دستگاه‌های خاصی می‌سازید که نمی‌توانند اندازه‌ی صفحه‌ی نمایش خود را هر جور خواستند تغییر دهند می‌توانید برای اینکه بازی‌تان را با اندازه‌های مختلف سازگار کنید از این حالت استفاده کنید. امّا مشکل بالا هنوز سر جایش است؛ شما باید کارهایی را انجام دهید تا مطمئن شوید در صفحه‌ی نمایش‌هایی با اندازه‌ی ثابت فضای خالی دیده نمی‌شود، مثلاً پس‌زمینه را بیشتر از محدوده‌ی پنجره رسم کنید. و باید بازی را به طور کامل تست کنید تا مطمئن شوید به طور اتّفاقی چیزهایی که نمی‌خواهید دیده شوند دیده نمی‌شوند.
برای اطّلاعات بیشتر به بخش “مارپیچ رایج – نسبت ابعاد” در ادامه‌ی همین آموزش مراجعه کنید.

حالت Scale inner

مثل Scale outer، این حالت مقیاس بازی را تغییر می‌دهد و از تمام صفحه‌ی نمایش استفاده می‌کند، ولی نحوه‌ی کارش با Scale outer متفاوت است: اگر نسبت ابعاد پنجره‌ی بازی با صفحه‌ی نمایش متفاوت باشد، Scale outer قسمت بیشتری از لیوت را نمایش می‌دهد، scale inner قسمت کمتری را نمایش می‌دهد. چون در این حالت قسمتی از پنجره‌ی بازی بریده می‌شود‌، هیچ وقت تصادفاً چیزهایی را که بیرون از پنجره‌ی بازی در نظر گرفته‌اید نشان نمی‌دهد… اما حالا شما با مشکلی دقیقاً برعکس مشکلی که با scale outer داشتید مواجه هستید. ممکن است بعضی از چیزهایی که می‌خواهید در صفحه دیده شوند، دیده نشوند!
این هم یک نمونه از این حالت که در آن بازی درست کار می‌کند:

اگر ما از اندازه‌ای غیر عادی مثل قبل استفاده کنیم، همان طور که در تصویر زیر می‌بینید قسمتی از پنجره حذف می‌شود و زیادی از حد نشان نمی‌دهد:

این حالت نتیجه‌ی بهتری نسبت به scale outer دارد. یک تکنینک مفید برای بازی‌ها این است که در نسبت ابعاد 16:9 ساخته شوند ولی این طور در نظر بگیرید که قرار است نسبت ابعاد 4:3 باشد و در دو طرف راست و چپ چیز مهمّی که بازیکن حتماً باید آن را ببیند قرار ندهید. بعضی از فیلم‌های سینمایی هم از این تکنیک استفاده می‌کنند.

مارپیچ رایج – نسبت ابعاد

حالت‌های Letterbox روش‌هایی ساده هستند تا بازی‌تان با طیف وسیعی از اندازه‌های مختلف صفحه‌ی نمایش‌ها سازگار شود، بدون اینکه زیاد به خودتان زحمت دهید. اما نقص این حالت‌ها ظاهر شدن نوار‌های سیاه است. آن‌ها می‌توانند برای افرادی که از موبایل‌هایی با صفحه‌ی نمایش کوچک استفاده می‌کنند و نمی‌خواهند اندازه‌ی صفحه‌ی نمایششان از چیزی که هست کوچک‌تر شود آزار دهنده باشند. علاوه بر این مردم از یک حرفه‌ای انتظار ندارند که نسبت ابعاد بازی‌ای که می‌سازد فقط کمی با نسبت ابعاد دستگاهشان متفاوت باشد – در این حالت نوارهای سیاه ضخیم ظاهر می‌شوند که ظاهراً غیر ضروری هستند – کاربر شاید با خود بگوید :‌«چرا صفحه‌ی بازی را بزرگ‌تر نساخته‌اند تا بتوانم از تمام صفحه‌ی نمایشم استفاده کنم؟»

برای حلّ این مشکل باید از حالت scale outer یا scale inner به جای یکی از حالت‌های letterbox استفاده کنید. با این کار شما از چندین نسبت ابعاد پشتیبانی می‌کنید. تولیدکننده‌های برنامه‌های تلویزیونی هم مشکلاتی مشابه این‌ها دارند. تلویزیون‌های مختلف دارای نسبت ابعادهای مختلف 4:3 ، 16:9 و 16:10 هستند. اگر تولیدکننده‌ی فیلم تلویزیونی فیلم‌هایش را فقط در نسبت ابعاد 4:3 نمایش دهد (همین کاری که الآن تلویزون ما داره می‌کنه) در تلویزونی با نسبت ابعاد 16:9 یا با فضای خالی در سمت چپ و راست صفحه مواجه خواهیم شد یا افراد پشت صحنه ناخواسته دیده می‌شوند (باید اضافه کنم ما توی ایران این نوع مشکل رو نداریم به جای این مشکلات فیلم کش میاره تا کلّ صفحه پوشیده بشه) اگر پس‌زمینه را دقیقاً متناسب با صفحه‌ی نمایشی خاص رسم کنید، بعد بازی را در صفحه‌ی نمایشی دیگر با نسبت ابعاد کمی متفاوت و در حالت scale outer اجرا کنید، فضاهای خالی در اطراف پنجره‌ی بازی ظاهر می‌شوند و یا چیزهایی که بیرون لیوت قرار دارند نمایان می شوند. این مشکل حتّی اگر از ناحیه‌ای از صفحه که توسّط نوار وضعیت دستگاه‌هایی مثل آیفون اشغال می‌شود چشم پوشی کنید هم به وجود خواهد آمد.
دو روش برای حل این مشکل وجود دارد :
1. از حالت scale outer استفاده کنید و پس زمینه خود را نسبت به پنجره‌ی بازی وسیع‌تر رسم کنید.
2. از حالت scale inner استفاده کنید و مطمئن شوید چیز مهمّی در کناره‌ها وجود نداشته باشد.