دوره آموزش یونیتی مقدماتی (بخش پنجم)
فهرست مطالب
آخرین به روزرسانی در 21/10/2022
در بخش پنجم آموزش مقدماتی یونیتی قصد داریم وارد مباحث ui و طراحی بشویم.
در این فصل قصد داریم به بررسی و آنالیز المان های ui در یونیتی ، اسلایدرها ، متریال و پارتیکل ها بپردازیم.
(لازم به ذکر است این فصل ، بخش آخر از آموزش مقدماتی یونیتی می باشد.)
پیش نیاز این سری از دوره های آموزشی تسلط به زبان برنامه نویسی سی شارپ می باشد.
UI در یونیتی
در این بخش با فرآیند طراحی رابط کاربری (UI) در Unity آشنا می شویم.
این شامل تنظیمات پایه و همچنین مروری بر المان های رایجی است که با Unity ارسال می شوند.
گردش کار برای طراحی UI در یونیتی مسیر کمی متفاوت از مسیری را که تاکنون طی کرده ایم دنبال می کند.
برای شروع طراحی، المان های رابط کاربری GameObjects استاندارد نیستند و نمیتوان از آنها استفاده کرد.
المان های UI باید متفاوت طراحی بشوند.
به عنوان مثال یک دکمه منو که در وضوح 4:3 درست و بدون مشکل نمایش داده می شود؛ در وضوح 16:9 اگر به درستی تنظیم نشده باشد ، کشیده یا مخدوش به نظر می رسد.
المان های UI در Unity مستقیماً روی صحنه قرار نمی گیرند.
آنها همیشه به عنوان فرزندان یک GameObject ویژه به نام Canvas قرار می گیرند.
Canvas مانند یک “برگه ی طراحی” برای رابط کاربری در صحنه است، که در آن همه عناصر UI ارائه می شوند.
ایجاد یک المان UI از نوع منوی context بدون Canvas آماده، به طور خودکار یک المان ایجاد می کند.
اجازه دهید اکنون به Canvas GameObject نگاهی بیاندازیم تا در مورد کامپوننت های جدید اضافی بدانیم.
Rect Transform در بالا به نظر میرسد که تنظیمات جدید زیادی دارد که یک GameObject’s Transform استاندارد ندارد.
این به این دلیل است که در حالی که یک GameObject’s Transform معمولی یک نقطه خیالی در فضای سه بعدی را توصیف می کند،
یک RectTransform یک مستطیل خیالی را تعریف می کند.
این بدان معناست که ما به تنظیمات اضافی نیاز داریم تا دقیقاً مشخص کنیم که مستطیل کجاست، چقدر بزرگ است و چگونه جهت گیری می کند.
ما می توانیم برخی از تنظیمات استاندارد یک مستطیل مانند ارتفاع و عرض و همچنین دو ویژگی جدید به نام Anchors را ببینیم.
Anchors نقاطی هستند که entities دیگر میتوانند در Canvas روی آنها lock کنند.
این بدان معناست که اگر یک عنصر UI (مثلاً یک دکمه) به Canvas در سمت راست متصل شود، تغییر اندازه Canvas تضمین میکند که دکمه همیشه در سمت راست نسبی Canvas قرار دارد.
در حالت پیشفرض، نمیتوانید شکل ناحیه Canvas را تغییر دهید و یک مستطیل نسبتاً بزرگ در اطراف صحنه شما خواهد بود.
مرحله ی بعدی Canvas Component است.
این مؤلفه اصلی است که چند گزینه universal در مورد نحوه ترسیم رابط کاربری در خود دارد.
اولین گزینه ای که می بینیم حالت Render Mode است.
این آپشن متدی را که برای ترسیم Canvas بر روی نمای بازی استفاده می شود، مشخص می کند.
ما سه گزینه در لیست کشویی داریم. اجازه دهید در مورد گزینه ها در بخش های بعدی بگوییم.
Screen Space – Overlay
این حالت استانداردترین حالت برای منوها، HUD ها (ما در مقاله ای به صورت کامل در رابطه با hud ها در بازی سازی توضیح داده ایم.) و … است.
این مود UI شما را در بالای هر چیز دیگری در صحنه ، نمایش می دهد.
همچنین هنگامی که اندازه صفحه نمایش یا پنجره بازی تغییر می کند، رابط کاربری را به خوبی مقیاس می دهد.
این حالت رندر پیشفرض در Canvas است.
Screen Space – Camera
حالت Screen Space – Camera یک صفحه نمایش مجازی ایجاد می کند، یک فاصله تعیین شده از دوربین، و تمام رابط کاربری شما را روی آن تقسیم می کند.
این بدان معناست که ظاهر رابط کاربری در صحنه به شدت به تنظیمات استفاده شده توسط دوربین بستگی دارد.
این تنظیمات شامل پرسپکتیو، میدان دید، و .. است.
World Space
در حالت World Space، المان های UI طوری واکنش نشان می دهند که انگار یک GameObject معمولی هستند که در دنیای بازی قرار می گیرند.
با این حال، آنها شبیه به sprite ها هستند، بنابراین معمولاً به عنوان بخشی از دنیای بازی به جای استفاده از بازیکن، مانند نمایشگرها و نمایشگرهای درون بازی، استفاده می شوند.
به دلیل این ماهیت، می توانید مستقیماً مقادیر Canvas RectTransform را در این حالت تغییر دهید.
Canvas Scaler مجموعه ای از گزینه ها است که به شما امکان می دهد مقیاس و ظاهر المان های UI را به روشی مطمئن تر تنظیم کنید.
این آپشن به شما اجازه می دهد تا تعیین کنید که چگونه عناصر UI در هنگام تغییر اندازه صفحه نمایش واکنش گرا باشند.
به عنوان مثال، المان های UI می توانند بدون توجه به اندازه صفحه نمایش و همچنین نسبت به اندازه آن، به همان اندازه باقی بمانند، یا می توانند مطابق با وضوح صفحه مقیاس شوند.
Graphics Raycaster در درجه اول با raycasting (پیوند به Unity Documentation for Raycasting) المان های UI و اطمینان از عملکرد صحیح رویدادهای آغاز شده توسط کاربر مانند کلیک ها و کشیدن ها سروکار دارد.
وارد کردن المان های UI در صحنه
در این بخش، نحوه وارد کردن المان های UI در صحنه و ادامه کار با آنها را به دست خواهیم آورد.
اجازه دهید با یک دکمه شروع کنیم. برای درج یک دکمه، در Hierarchy صحنه کلیک راست کرده و به Create → UI → Button بروید.
اگر Canvas و EventSystem را موجود ندارید، Unity به طور خودکار یکی برای شما ایجاد می کند و دکمه را نیز در داخل Canvas قرار می دهد.
به یاد داشته باشید که در حالت رندر Overlay که حالت پیش فرض است، اندازه Canvas مستقل از اندازه دوربین است.
با کلیک بر روی تب Game می توانید آن را تست کنید.
اگر صحنه را تقسیم کنید، متوجه خواهید شد که دکمه قبلاً دارای برخی عملکردهای استاندارد است، مانند تشخیص زمانی که ماوس روی آن قرار دارد و با فشار دادن، رنگ خود را تغییر می دهد.
یک دکمه برای اینکه واقعاً در رابط کاربری مفید باشد به عملکردهایی نیاز دارد.
این قابلیت را می توان از طریق تنظیمات آن اضافه کرد.
اجازه دهید یک اسکریپت جدید ایجاد کنیم و آن را ButtonBehaviour بنامیم.
public class ButtonBehaviour : MonoBehaviour {
int n;
public void OnButtonPress(){
n++;
Debug.Log("Button clicked " + n + " times.");
}
}
ما یک متد ساده ایجاد کردیم که تعداد دفعات زده شده بر روی دکمه را ثبت می کند.
لازم به ذکر است که این روش باید عمومی باشد.
در غیر این صورت توسط توابع دکمه در نظر گرفته نمی شود.
اجازه دهید یک GameObject خالی بسازیم و این اسکریپت را به آن وصل کنیم.
ما این کار را انجام می دهیم زیرا یک دکمه به تنهایی کاری را انجام نمی دهد.
فقط متد مشخص شده را در اسکریپت خود فراخوانی می کند.
اکنون به خصوصیات Button رفته و خاصیت ()OnClick را پیدا کنید.
نماد + را در برگه پایین فشار دهید و یک ورودی جدید باید در لیست ظاهر شود.
این ورودی مشخص می کند که فشار دادن دکمه روی چه شیئی عمل می کند و چه تابعی از اسکریپت آن شی نامیده می شود.
به دلیل سیستم رویداد مورد استفاده در فشار دادن دکمه، میتوانید چندین عملکرد را به سادگی با افزودن آنها به لیست فعال کنید.
GameObject خالی را که حاوی اسکریپت ButtonManager است که ما ایجاد کردیم، بکشید و روی اسلات None (Object) رها کنید.
در لیست کشویی No Function حرکت کنید و به دنبال روش OnButtonPress ما بگردید.
(به یاد داشته باشید که می توان آن را هر چیزی که می خواهید نامگذاری کرد، OnButtonPress به سادگی یک قرارداد نامگذاری استاندارد است.)
باید آن را در بخش ButtonBehaviour پیدا کنید.
اگر اکنون بازی را play کنید، می توانید دکمه را تست کنید.
المان text
رابط کاربری متنی Unity یک نقطه شروع عالی برای ورود به طراحی UI است.
برای هدف ما، المان vanilla Text برای شروع کافی است.
متن یک المان UI مجزا برای خودش است. به عنوان مثال، چاپ امتیاز فعلی بازیکن بر روی صفحه، نیاز به تبدیل مقدار عددی امتیاز به رشته دارد، معمولاً از طریق متد toString()، قبل از نمایش آن .
برای درج یک عنصر Text UI، به Scene Heirarchy و سپس Create → UI → Text بروید.
یک المان متن جدید باید در منطقه Canvas شما نشان داده شود.
اگر نگاهی به تنظیمات آن بیندازیم، گزینه های بسیار مفیدی را مشاهده خواهیم کرد.
با این حال، آنچه از همه مهمتر است، قسمت Text است.
میتوانید آنچه را که میخواهید کادر متنی در آن قسمت نمایش دهد تایپ کنید، اما ما میخواهیم یک قدم فراتر از آن برویم.
برای تغییر فونت متن، ابتدا باید فایل فونت را از رایانه خود به عنوان Asset وارد Unity کنید.
نیازی نیست که فونت به طور فعال به چیزی در صحنه متصل شود و می توان مستقیماً از Assets به آن ارجاع داد.
عنصر Text از طریق اسکریپت نیز قابل دسترسی است. اینجاست که اهمیت رابط کاربری پویا مشخص می شود.
اجازه دهید در واقع آن را روی صفحه بازی چاپ کنیم.
برای انجام این کار، اسکریپت ButtonBehaviour را از بخش قبلی باز می کنیم و چند تغییر در آن ایجاد می کنیم.
using UnityEngine;
using UnityEngine.UI;
public class ButtonBehaviour : MonoBehaviour {
int n;
public Text myText;
public void OnButtonPress(){
n++;
myText.text = "Button clicked " + n + " times.";
}
}
اولین تغییری که انجام دادیم اضافه کردن یک رفرنس namespace جدید بود.
این رفرنس برای کار با مؤلفههای UI Unity استفاده میشود، بنابراین ما خط UnityEngine.UI را اضافه میکنیم.
سپس، یک متغیر Text پابلیک ایجاد می کنیم، جایی که می توانیم عنصر Text UI خود را روی آن بکشیم و رها کنیم.
در نهایت، با استفاده از myText.text به متن این المان UI دسترسی پیدا می کنیم.
اگر اسکریپت خود را ذخیره کنیم، اکنون یک اسلات جدید برای عنصر Text UI در ButtonManager خود خواهیم دید.
به سادگی GameObject حاوی المان Text را بکشید و روی اسلات رها کنید و دکمه Play را فشار دهید.
اسلایدر در یونیتی
در این بخش با آخرین المان رابط کاربری در این سری آشنا خواهیم شد.
اسلایدر معمولاً در مواردی استفاده می شود که یک مقدار مشخص بین مقدار حداقلی و حداکثری قرار گیرد.
(لازم به ذکر است که مفهوم اسلایدر در یونیتی با مفهوم اسلایدر در طراحی سایت یکسان نیست.)
در واقع اسلایدر را در یونیتی را می توان به یک نوار تنظیم مقدار شباهت داد که در ادامه بیشتر با آن آشنا خواهیم شد.
یکی از رایج ترین موارد مورد استفاده برای اسلایدرها حجم صدا یا روشنایی صفحه نمایش است.
برای ایجاد یک اسلایدر (نوار قابل تنظیم)، به مسیر Create → UI → Slider بروید.
یک المان اسلایدر جدید باید در صحنه شما ظاهر شود.
اگر به تنظیمات این اسلایدر بروید، لیستی از گزینه ها برای سفارشی سازی آن را مشاهده خواهید کرد.
ما قصد داریم یک اسلایدر صدا بسازیم.
برای این کار، اسکریپت ButtonBehaviour را باز کنید (می توانید نام ButtonManager GameObject را تغییر دهید)
و یک رفرنس به اسلایدر اضافه کنید.
ما همچنین کد موجود را دوباره کمی تغییر خواهیم داد.
public class ButtonBehaviour : MonoBehaviour {
int n;
public Text myText;
public Slider mySlider;
void Update() {
myText.text = "Current Volume: " + mySlider.value;
}
}
مشاهده کنید که چگونه از روش Update برای به روز رسانی مداوم مقدار myText.text استفاده می کنیم.
در تنظیمات اسلایدر، کادر « Whole Numbers » را علامت بزنید و حداکثر مقدار را 100 قرار دهید.
رنگ متن را از طریق تنظیمات آن به صورت دلخواه انتخاب کنید.
حال از همان روش کشیدن Slider GameObject روی اسلات استفاده می کنیم و روی play کلیک میکنیم.
(اکیداً توصیه میشود که سایر کنترلهای UI را نیز بررسی و آزمایش کنید تا ببینید کدام یک به چه روشی کار میکنند.
زیراکه در این دوره ی آموزشی ما به بررسی تمامی آنها نخواهیم پرداخت و چندین نمونه را به عنوان مثال شرح دادیم.)
Material و Shader ها
در این بخش به طور خلاصه با متریال و شیدرها آشنا می شویم.
برای درک بهتر این مبحث ، به جای پروژه دو بعدی فعلی، یک پروژه سه بعدی جدید ایجاد خواهیم کرد.
پروژه ی سه بعدی کمک می کند تا بتوانیم تنظیمات بیشتری را به شما نمایش بدهیم.
هنگامی که پروژه جدید را ایجاد کردید، به Hierarchy رفته و کلیک راست کنید و به 3D Object → Cube بروید.
اینکار یک مکعب جدید در وسط صحنه ایجاد می کند.
می توانید با نگه داشتن کلیک راست و کشیدن ماوس در View صحنه به اطراف مکعب نگاه کنید.
همچنین می توانید با استفاده از scroll wheel بزرگنمایی و کوچکنمایی کنید.
حالا روی مکعب کلیک کنید و به تنظیمات آن نگاهی بیندازید.
به نظر می رسد تنظیمات پیشفرض دارای یک متریال پیش فرض و یک سایه زن استاندارد باشد.
متریال چیست ؟
ما قبلا در مقاله ی متریال و تکسچر توضیحاتی را در رابطه با مفهوم متریال ها و تکسچر در فیلد انیمیشن سازی داده ایم.
این توضیحات تا حدودی برای فیلد بازی سازی و یونیتی نیز کفایت می کند ؛ اما اجازه دهید وارد جزئیات بیشتری برای فیلد بازی سازی بشویم.
در قسمت Assets کلیک راست کنید، به Create → Material بروید و نامی مانند “My Material” برای آن انتخاب کنید.
این تنظیمات مانند چیزی نیست که ما تاکنون مطالعه کرده ایم.
دلیلش این است که اینها تنظیماتی هستند که درشیدر برنامهریزی میشوند، نه متریال.
متریال ها همان چیزی هستند که ماهیت اشیاء شما را در وهله اول قابل مشاهده می کنند.
در واقع حتی در بازی سازی دو بعدی نیز از متریال خاصی استفاده می کنیم که نیازی به نورپردازی نیز ندارد.
البته یونیتی آن را برای ما در تمامی آبجکت ها به طور خودکار تولید و اعمال می کند، بنابراین ما حتی متوجه وجود آن نمی شویم.
شیدر چیست ؟
شیدر برنامه ای است که نحوه ترسیم هر پیکسل روی صفحه را مشخص می کند.
شیدرها به هیچ وجه در سی شارپ یا حتی به زبان OOPS برنامه ریزی نشده اند.
آنها به زبانی شبیه به C به نام GLSL برنامه ریزی شده اند که می تواند دستورالعمل های مستقیمی را برای پردازش سریع به GPU بدهد.
Particle System
سیستم های ذرات عبارتند از ذراتی که به شکل های مختلفی منتشر و پخش می شوند.
ذره هر بافت، نمونه ماده یا موجودی است که توسط سیستم ذرات تولید می شود.
سیستم های ذرات می تواند شامل متریال های مختلف و شکل های پخش متفاوتی باشند.
مثالی که می توان برای سیستم ذرات زد را می توان به باران ، برف یا جرقه های آتش اشاره کرد.
این سیستم ها تحت یک فرآیند رندر جداگانه قرار می گیرند.
این رندر می تواند ذرات را حتی زمانی که صدها یا هزاران آبجکت وجود دارد، نمونهسازی کنند.
یک GameObject یک پارتیکل را با کامپوننت پارتیکل سیستم متصل شده به خود مدیریت می کند.
سیستم های ذرات برای راه اندازی به هیچ گونه Assets نیاز ندارند، اگرچه ممکن است بسته به اثری که می خواهید به متریال مختلفی نیاز داشته باشند.
برای ایجاد یک پارتیکل سیستم ، یا از طریق تنظیمات Add Component، کامپوننت Particle System را اضافه کنید، یا به Hierarchy بروید و
Create → Effects → Particle System را انتخاب کنید.
این یک GameObject جدید با سیستم ذرات متصل به خود ایجاد می کند.
اگر به تنظیمات پارتیکل سیستم نگاه کنید، خواهید دید که ماژول های زیادی را شامل می شود.
به طور پیش فرض، تنها سه ماژول فعال هستند، که عبارتند از :
Emission ، Shape و Renderer .
سایر ماژول ها را می توان با کلیک بر روی دایره کوچک کنار نام آنها فعال کرد.
در سمت راست برخی از مقادیر، ممکن است متوجه یک فلش کوچک سیاه رنگ شوید.
این به شما امکان می دهد تا کنترل بیشتری بر مقادیر هر ذره به دست آورید.
برای مثال، میتوانید اندازه شروع را به صورت تصادفی بین دو Constants تنظیم کنید تا به سیستم ذرات بگویید ذرات با اندازههای مختلف و تصادفی منتشر شوند.
Asset Store در یونیتی
Asset Store یکی از بزرگترین نقاط قوت یونیتی در بازار موتورهای بازی سازی نسبت به سایر موتورهای بازی سازی است.
این شامل تعداد زیادی از asset ها، ابزارها، اسکریپت ها و حتی کل پروژه های آماده برای دانلود شما می باشد.
برای استفاده از Asset Store، در ابتدا باید یک Unity ID معتبر داشته باشید.
اگر ندارید، می توانید در وب سایت Unity ایجاد کنید.
پس از ایجاد Unity ID، روی تب Asset Store در همان ردیف Scene View کلیک کنید.
پس از ورود، باید بتوانید نام کاربری خود را در بالا سمت راست ببینید.
در این مثال، ما پروژه آموزشی Survival Shooter را وارد خواهیم کرد.
برای انجام این کار، آن را در تب جستجو می کنیم و روی asset منتشر شده توسط Unity کلیک می کنیم.
حال پس از انتخاب asset باید آنرا دانلود کنیم.
پس از اتمام، دکمه دانلود به دکمه ی Import تغییر خواهد کرد.
دوباره روی آن کلیک کنید تا asset جدید خود را به پروژه باز فعلی وارد کنید.
پس از ایمپورت کردن ، پنجره جدیدی باز می شود که تمام محتویات asset جدیدی را که به تازگی وارد کرده اید را فهرست می کند.
بسته به آنچه دانلود کردهاید، این میتواند یک فایل واحد یا دستهای از فایلها یا کل درخت با سلسله مراتب پوشهها و فایلها باشد.
به طور پیشفرض، یونیتی همه کامپوننت های asset را با کلیک بر روی گزینه ی Import وارد میکند، این همان چیزی است که دقیقا ما میخواهیم.
اکنون، اجازه دهید بر روی Import for Unity کلیک کنیم تا کار خود را انجام دهد.
تلاش برای دانلود asset ها بدون پرداخت هزینه غیرقانونی است و همیشه احتمال ویروس، باگ یا عدم به روز رسانی را همراه با خود دارد.
مهرشاد شادان مهر
مدرس سئو ، طراح سایت ، انیماتور
قهرمان زندگی شما در چند سال آینده ی شما می باشد