بخش چهارم آموزش یونیتی متوسطه (آموزش رابط کاربری)
فهرست مطالب
- 1 ایجاد یک منوی کشویی
- 2 اضافه کردن دکمه
- 2.1 اضافه کردن پنل ماسک
- 2.2 اضافه کردن پنل محتوا
- 2.3 اضافه کردن دکمه ها
- 2.4 اسکرول کردن پنل به بالا و پایین
- 2.5 اضافه کردن کد به Toggle Menu
- 2.6 افزودن آیکون چرخ دنده
- 2.7 متحرک کردن چرخ دنده
- 2.8 فعال کردن انیمیشن چرخ دنده از طریق کد
- 2.9 افزودن برچسب امتیاز
- 2.10 افزودن آیکون امتیاز
- 2.11 به روزرسانی برچسب امتیاز
- 2.12 افزودن بخش راه اندازی مجدد
- 2.13 نمایش بخش راه اندازی مجدد
آخرین به روزرسانی در 16/03/2022
در بخش چهارم از آموزش یونیتی متوسطه قصد داریم به آموزش رابط کاربری یونیتی بپردازیم.
ما در بخش قبلی به آموزش اسکریپت نویسی یونیتی پرداختیم و عمیق تر از قبل وارد مبحث اسکریپت نویسی یونیتی شدیم.
لازم به ذکر است مانند بخش قبلی این بخش نیز در دوره ی آموزشی مقدماتی یونیتی ، معرفی کوتاهی شده است اما در این قسمت قصد ارائه ی مفاهیم تخصصی تر و عمیق تری را در بحث گرافیکی و رابط کاربری یونیتی داریم ؛ پس تا پایان با ما همراه باشید.
توجه : آموزش های دوره ی متوسطه مستقل از یکدیگر هستند و این آموزش به غیر از آشنایی به مباحث اولیه ی یونیتی پیش نیاز دیگری را ندارد.
پیش نیاز این دوره ی آموزشی تسلط و درک مفاهیم اولیه ی زبان برنامه نویسی C# می باشد.
شروع کار
ما برای کار بیشتر با رابط کاربری یونیتی در این بخش قصد داریم که یک منوی تخصصی برای بازی طراحی کنیم.
همچنین میخواهیم درک خود را از رابط کاربری Unity کامل کنیم و این تنها به ساخت یک منوی فانتزی خلاصه نمی شود.
برای شروع آموزش ابتدا پروژه زیر را برای شروع دانلود کرده و در یونیتی import کنید :
ایجاد یک منوی کشویی
در بسیاری از موارد، شما میخواهید دسترسی آسان به برخی از گزینهها یا آپشن های بازی را برای کاربران خود فراهم کنید، اما نمیخواهید فضای رو صفحه را درگیر کنید و بخشی از آنرا بابت نمایش آپشن ها اشغال کنید در اینجا منوی کشویی راه حل شما می باشد.
ممکن است قبلا در بازی هایی این منوها را دیده باشید آنها معمولا کنترلی هستند که شامل یک دکمه کوچک و ساده است که همیشه قابل مشاهده است و منویی که برای نمایش گزینهها به بیرون میچرخد.
اولین قدم شما اضافه کردن آن دکمه است.
اضافه کردن دکمه
برای اضافه کردن دکمه مراحل زیر در را طی کنید :
GameObject \ UI \ Button را در منو انتخاب کنید.
دکمه جدید اضافه شده را به Btn_Slide تغییر نام دهید و آبجکت nested Text (متن تودرتو) را حذف کنید، زیرا دکمه نیازی به برچسب ندارد.
Btn_Slide را در Hierarchy انتخاب کنید و پوشه Menu را در پنجره Project باز کنید.
تصویر btn_9slice_normal را به قسمت Source Image در Inspector بکشید.
اکنون موقعیت و اندازه دکمه را به صورت زیر تنظیم کنید :
Anchors را در پایین سمت چپ (bottom-left) قرار دهید.
هر دو Pos X و Pos Y را روی 80 قرار دهید.
عرض و ارتفاع (Width و Height) را روی 64 تنظیم کنید.
اضافه کردن پنل ماسک
برای ایجاد این کنترل، به دو پنل نیاز دارید.
یکی ماسک را تعریف می کند و دیگری در داخل ماسک حرکت می کند.
برای ایجاد ماسک مراحل زیر را طی کنید :
GameObject \ UI \ Panel را انتخاب کنید تا اولین پنلی که ماسک است ایجاد شود.
این یک پنل به Hierarchy اضافه می کند. آن را انتخاب کنید و این مراحل را دنبال کنید :
نام آن را به Pnl_Mask تغییر دهید.
آن را روی Btn_Slide بکشید تا به عنوان یک آبجکت فرزند اضافه شود.
Anchors را روی top-center تنظیم کنید.
Pivot را روی (0.5، 0) تنظیم کنید
هر دو Pos X و Pos Y را روی 0 قرار دهید.
Width را روی 64 و Height را روی 192 تنظیم کنید.
کامپوننت ماسک را با کلیک کردن روی دکمه Add Component و انتخاب UI \ Mask اضافه کنید.
تیک Show Mask Graphic را در کادر گفتگوی مولفه mask بردارید.
اضافه کردن پنل محتوا
با انتخاب GameObject \ UI \ Panel و دنبال کردن این مراحل یک پنل دیگر اضافه کنید :
نام آن را به Pnl_Content تغییر دهید
آن را به عنوان فرزند Pnl_Mask اضافه کنید
Anchors را روی حالت stretch-stretch قرار دهید.
left ، top ، right و bottom را روی 0 قرار دهید.
Pivot را روی (0.5، 1) تنظیم کنید
اکنون زمان تغییر تصویر پسزمینه پنل محتوا است.
پوشه Menu را در پنجره Project باز کنید و تصویر slide_menu_panel_9slice را انتخاب کنید.
Sprite Editor را در Inspector باز کنید و تمام مقادیر Border را روی 8 تنظیم کنید. روی Apply کلیک کنید.
پس از آن، Pnl_Content را در Hierarchy انتخاب کنید و سپس slide_menu_panel_9slice را از پنجره Project به قسمت Source Image در Inspector بکشید.
در GIF زیر، میتوانید هم نحوه ظاهر پنل محتوا و هم نحوه عملکرد مؤلفه ماسک را ببینید.
توجه : همانطور که می بینید، یک ماسک مانند یک پنجره در دیوار عمل می کند.
اگر کسی در امتداد دیوار راه می رود، فقط زمانی می توانید او را ببینید که از کنار پنجره رد می شود.
راه دیگری برای در نظر گرفتن آن به عنوان یک cloaking device است که به تنها بخشی از تصویر اجازه نمایش میدهد.
اضافه کردن دکمه ها
شما در حال اضافه کردن سه دکمه به منوی کشویی هستید.
برای ایجاد اولین دکمه، GameObject \ UI \ Button را انتخاب کنید.
نام آن را به Btn_About تغییر دهید و text child (فرزند متن) را حذف کنید.
دکمه Btn_About را روی Pnl_Content در Hierarchy بکشید تا به عنوان فرزند اضافه شود.
پوشه Menu را در پنجره Project باز کنید و slide_menu_btn_about را به تصویر Source در Inspector بکشید.
روی Set Native Size کلیک کنید.
Anchors را روی top-center و Pivot را روی (0.5، 1) قرار دهید.
پس از آن، هر دو Pos X را روی 0 و Pos Y را روی 0 قرار دهید.
اکنون نوبت شماست که دو دکمه باقیمانده را خودتان اضافه کنید.
آنها را Btn_Achievements و Btn_Leaderboards نامگذاری کنید و به ترتیب از تصاویر slide_menu_btn_achievements و slide_menu_btn_leaderboards استفاده کنید.
اسکرول کردن پنل به بالا و پایین
برای اینکه پانل را به سمت بالا و پایین بکشید، از همان تکنیکی که قبلاً برای دکمهها و کادر settings dialogاستفاده کردهاید، استفاده میکنید.
طبق مراحل زیر پیش بروید :
Pnl_Content را در Hierarchy انتخاب کنید و Animation view را باز کنید.
با کلیک بر روی دکمه Create یک کلیپ جدید ایجاد کنید.
نام انیمیشن را sliding_menu_down بگذارید و آن را در پوشه Animations ذخیره کنید.
روی علامت 1:00 در timeline کلیک کنید.
همچنین باید recording در نمای انیمیشن را فعال کند.
با فشار دادن دکمه دایره قرمز آن را روشن کنید و سپس به دنبال کنترل های پخش بگردید تا قرمز شوند.
Top را در Inspector روی 192 قرار دهید و سپس recording را متوقف کنید.
پوشه Animations را در پنجره Project باز کنید و sliding_menu_down را انتخاب کنید.
علامت Loop Time در Inspector را بردارید.
Pnl_Content را در Hierarchy انتخاب کنید و نمای Animator را باز کنید.
حالت sliding_menu_down را کپی و جایگذاری کنید تا یک نسخه duplicate ایجاد شود.
نام duplicate را به sliding_menu_up تغییر دهید و سرعت آن را در Inspector روی 1- قرار دهید.
دو transitions ایجاد کنید: از sliding_menu_up به sliding_menu_down و از sliding_menu_down به sliding_menu_up.
یک پارامتر Bool جدید به نام isHidden اضافه کنید و مقدار پیش فرض آن را true قرار دهید.
transition از sliding_menu_up به sliding_menu_down را انتخاب کنید و در لیست conditions isHidden را روی true تنظیم کنید.
transition از sliding_menu_down به sliding_menu_up را انتخاب کنید و این بار conditions isHidden را برابر با false قرار دهید.
سپس در Animator کلیک راست کرده و Create State و سپس Empty را انتخاب کنید.
در Inspector، نام state idle را بگذارید.
سپس روی state کلیک راست کرده و Set as Layer Default State را انتخاب کنید.
یک transition بین idle به sliding_menu_up ایجاد کنید.
Condition را به صورت isHidden قرار دهید برابر false است.
Pnl_Content را در Hierarchy انتخاب کنید و نمای animation را باز کنید.
یک animation clip جدید ایجاد کنید و آن را idle نامگذاری کنید.
در اولین keyframe ، Top را روی 192 تنظیم کنید. سپس recording را متوقف کنید.
کار شما برای این بخش به اتمام رسید ؛ Save Scenes را انتخاب کنید تا کارتان تا کنون ذخیره شود.
اما زمانی که بازی را اجرا می کنید هنوز اتفاقی نمی افتد زیراکه باید در ادامه ی کار به اسکریپ نویسی بپردازیم.
اضافه کردن کد به Toggle Menu
اکنون زمان آن است که نتیجه ی تمامی پروسه هایی که تا به اینجا انجام داده ایم را به صورت عینی ببینیم.
این کار را با اسکریپت نویسی خواهید داد.
UImanagerScript را در یک code editor باز کنید و متغیر نمونه زیر را اضافه کنید:
public Animator contentPanel;
پس از آن، متد زیر را اضافه کنید:
public void ToggleMenu()
{
bool isHidden = contentPanel.GetBool("isHidden");
contentPanel.SetBool("isHidden", !isHidden);
}
هنگامی که منوی کشویی را باز می کنید، کامپوننت animator را فعال می کند و مقدار پارامتر صحیح isHidden را تنظیم می کند.
اسکریپت را ذخیره کرده و به Unity برگردید.
در Unity، UImanager را در Hierarchy انتخاب کنید و Pnl_Content را از Hierarchy به قسمت Content Panel در Inspector بکشید.
اکنون، Btn_Slide را در Hierarchy انتخاب کنید.
در Inspector، فهرستی از event handlers را پیدا کنید و با کلیک بر روی دکمه + یک مورد جدید اضافه کنید.
پس از آن، UImanager را از Hierarchy به آن دسته جدید بکشید.
سپس، در منوی انتخاب تابع، () UImanagerScript \ ToggleMenu را انتخاب کنید.
حال نتیجه ی کار خود را پلی کنید و از منوی کشویی بالا به پایین خود لذت ببرید.
افزودن آیکون چرخ دنده
نماد چرخ دنده نمادی است که برای باز شدن منوی به آن نیاز داریم و در واقع آیکون منو می باشد.
در مرحله ی اول باید تصویری برای چرخ دنده اضافه کنیم که مراحل آن به عبارتند از :
اولین قدم شما این است که یک تصویر را به عنوان یک آبجکت فرزند btn_slide اضافه کنید و آن را در طول باز و بسته شدن انیمیشنهای منو متحرک کنید.
برای ایجاد یک تصویر جدید GameObject \ UI \ Image را انتخاب کنید.
آن را روی Btn_Slide در Hierarchy بکشید تا به عنوان یک ابجکت فرزند اضافه شود.
پس از آن مراحل زیر را دنبال کنید :
نام تصویر را به Img_Gear تغییر دهید
Anchors را در مرکز وسط قرار دهید
هر دو Pos X و Pos Y را روی 0 قرار دهید.
پوشه Menu را در پنجره Project باز کنید و تصویر slide_menu_gear را به قسمت Source Image در Inspector بکشید.
روی Set Native Size کلیک کنید.
متحرک کردن چرخ دنده
حال شما باید بتوانید یک چرخ دنده در جهت چپ بسازید و انیمیشن را معکوس کنید تا به تنهایی یک چرخ دنده چرخش به راست بسازید.
در اینجا جزئیات کار عبارتند از :
مدت زمان انیمیشن باید با انیمیشن پانل کشویی یکسان باشد، و این کار سختی نیست زیرا تمام انیمیشن های این آموزش دقیقا 1 ثانیه طول دارند.
چرخ دنده باید 360 درجه حول محور Z بچرخد (Rotation Z)
از همان نام isHidden برای نام پارامتر استفاده کنید و مقدار پیش فرض آن را true قرار دهید.
فراموش نکنید که حلقه زدن و مولفه Animator را غیرفعال کنید.
فعال کردن انیمیشن چرخ دنده از طریق کد
برای تکمیل کنترل منوی کشویی، باید انیمیشن چرخ دنده را از روی کد فعال کنید، اما فقط باید چند خط بنویسید.
UImanagerScript را در یک code editor باز کنید و متغیر نمونه زیر را اضافه کنید:
public Animator gearImage;
حال به پایین اسکرول کنید و متد ToggleMenu را پیدا کنید.
موارد زیر را به قسمت پایین متد body اضافه کنید:
public void ToggleMenu()
{
//..skipped..
gearImage.SetBool("isHidden", !isHidden);
}
این مولفه Animator را فعال میکند و پارامتر isHidden آن را روی همان مقدار پارامتر Animator isHidden پانل محتوا تنظیم میکند.
فایل اسکریپت را ذخیره کرده و به Unity برگردید.
در Unity، UImanager را در Hierarchy انتخاب کنید. Img_Gear
را به قسمت Gear Image در Inspector بکشید.
کار خود را ذخیره کنید و صحنه را پلی کنید ، نتیجه ی آن به شرح زیر می باشد :
افزودن برچسب امتیاز
به صحنه RocketMouse بروید و پوشه Scenes را در پنجره Project باز کنید.
روی صحنه RocketMouse دوبار کلیک کنید تا باز شود.
GameObject \ UI \ Text را برای ایجاد یک المان Text UI جدید انتخاب کنید.
همچنین تا زمانی که در اینجا هستید، با Canvas و EventSystem کار خواهید کرد.
Text را در Hierarchy انتخاب کنید و تغییرات زیر را در Inspector اعمال کنید:
نام آن را به Txt_Points تغییر دهید.
Anchors را روی سمت top-left تنظیم کنید.
Pivot را روی (0، 0.5) تنظیم کنید.
Pos X را روی 50 و Pos Y را روی 30- تنظیم کنید.
Text را به 0 تغییر دهید، زیرا بازیکن با امتیاز صفر شروع می کند.
پوشه Fonts را در پنجره Project باز کنید و TitanOne-Regular را به قسمت Font در Inspector بکشید.
Font Size را روی 24 تنظیم کنید.
Horizontal Overflow را روی Overflow تنظیم کنید تا مطمئن شوید که برچسب می تواند حتی بد ترین امتیازها را نمایش دهد.
افزودن آیکون امتیاز
نمایش متن به تنهایی نمی تواند در یک بازی پویا جذاب باشد.
به همین خاطر پیشنهاد می شود در کنار متن از یک آیکون نیز استفاده شود و تاثیر بصری و گرافیکی زیباتری را در بازی داشته باشد.
برای ایجاد یک تصویر جدید GameObject \ UI \ Image را انتخاب کنید.
آن را در Hierarchy انتخاب کنید و مراحل زیر را دنبال کنید:
نام آن را به Img_Points تغییر دهید
آن را روی Txt_Points بکشید تا به عنوان فرزند اضافه شود، به طوری که وقتی برچسب را جابهجا میکنید، آیکون نیز حرکت کند.
Anchors را روی middle-left قرار دهید.
Pivot را روی (1، 0.5) تنظیم کنید.
Width و Height را روی 32 تنظیم کنید.
Pos X را روی 5- و Pos Y را روی 0 تنظیم کنید.
پوشه Sprites را در پنجره Project باز کنید و تصویر سکه را به قسمت Source Image در Inspector بکشید.
به روزرسانی برچسب امتیاز
بیشتر کدهای بازی در اسکریپت MouseController.cs قرار دارند، بنابراین شما این اسکریپت را برای به روز رسانی برچسب امتیاز ویرایش خواهید کرد.
در واقع تا پایان این آموزش شما فقط با این اسکریپت کار خواهید کرد.
پوشه Scripts را در پنجره Project باز کنید و روی اسکریپت MouseController دوبار کلیک کنید تا در یک code editor باز شود.
هنگامی که اسکریپت بارگیری می شود، متد های زیر را که از سیستم رابط کاربری گرافیکی قدیمی استفاده می کنند، پیدا کرده و حذف کنید:
- onGUI
- DisplayCoins Count
- DisplayRestartButton
دستورالعمل زیر را اضافه کنید:
using UnityEngine.UI;
پس از آن، متغیر نمونه زیر را اضافه کنید تا حاوی یک رفرنس به برچسب باشد :
public Text coinsLabel;
در نهایت خط زیر را در انتهای () CollectCoin اضافه کنید که هر بار که ماوس یک سکه جمع می کند فراخوانی می شود.
coinsLabel.text = coins.ToString();
فایل اسکریپت را ذخیره کرده و به Unity برگردید.
در Unity، ماوس را در Hierarchy انتخاب کنید و Txt_Points را به قسمت Coins Label در Inspector بکشید.
صحنه را پلی کنید و نتیجه کار را ببینید :
همه چیز خوب به نظر می رسد، اما ممکن است متوجه یک مشکل شده باشید.
وقتی متد قدیمی onGUI را حذف کردید، دکمهای را که هنگام مرگ ماوس نمایش داده میشد را نیز حذف کردید و باعث میشود بازیکن قادر به راهاندازی مجدد بازی نباشد.
برای حل این مشکل نیز در ادامه با ما همراه باشید.
نمایش بخش راه اندازی مجدد
قرار نیست ظاهر dialog را متحرک کنید.
در عوض، شما فقط دیالوگ را در ابتدا پنهان میکنید و زمانی که بازیکن بازی را میبازد، آن را نشان میدهید.
اسکریپت MouseController را در یک code editor باز کنید و متغیر نمونه زیر را اضافه کنید:
public GameObject restartDialog;
سپس خط کد زیر را به ()Start اضافه کنید تا dialog در ابتدا مخفی شود:
restartDialog.SetActive(false);
به پایین اسکرول کنید و خط زیر را به انتهای () HitByLaser اضافه کنید :
restartDialog.SetActive(true);
همانطور که احتمالا حدس زده اید، () HitByLaser زمانی فراخوانی می شود که ماوس محو می شود.
از این رو، این مکان عالی برای نمایش یک بخش راه اندازی مجدد است.
دو متد زیر را برای راه اندازی مجدد و خروج از بازی اضافه کنید:
public void RestartGame()
{
Application.LoadLevel (Application.loadedLevelName);
}
public void ExitToMenu()
{
Application.LoadLevel ("MenuScene");
در یک لحظه آنها را به دکمه های مربوطه پیوند خواهید داد.
فایل اسکریپت را ذخیره کرده و به Unity برگردید.
در Unity، Mouse را در Hierarchy انتخاب کنید و Dlg_Restart را به قسمت Restart Dialog در Inspector بکشید.
سپس Btn_Restart را در Hierarchy انتخاب کنید و به لیست On Click (Button) بروید.
برای افزودن یک مورد جدید روی + کلیک کنید.
پس از آن، ماوس را از Hierarchy به آیتم جدید بکشید.
در منوی انتخاب تابع، () MouseController \ RestartGame را انتخاب کنید.
اکنون، Btn_Exit را انتخاب کنید، و فرآیند را تکرار کنید، اما این بار تابع () MouseController \ ExitToMenu را انتخاب کنید.
صحنه را ذخیره کنید تا کارتان ذخیره شود، سپس صحنه را پلی کنید و موس خود را به laser’s line هدایت کنید.
شما باید ببینید که یک دیالوگ بلافاصله پس از مرگ او ظاهر می شود.
اگر Restart را فشار دهید، بازی را دوباره راه اندازی می کنید.
اگر Exit را فشار دهید به منوی اصلی باز می گردید.
به همین سادگی این بخش از آموزش ساخت منوی ما نیز به پایان رسید.
مهرشاد شادان مهر
مدرس سئو ، طراح سایت ، انیماتور
قهرمان زندگی شما در چند سال آینده ی شما می باشد