ساخت منوی اصلی در Unreal Engine 5؛ آموزش گام به گام و کلیدی!

ساخت منوی اصلی در Unreal Engine 5؛ آموزش گام به گام و کلیدی!

یکی از بخش های اساسی هر بازی، یه منوی اصلی خوش ساخت هست که به عنوان دروازه ورود به دنیای مجازی و غرق کننده بازی شما عمل میکنه.

توی این آموزش، قراره مرحله به مرحله با هم پیش بریم و یاد بگیریم که چطور یک منوی اصلی در Unreal Engine بسازیم. این منو قراره نقطه شروع تجربه کاربر باشه و طراحی خوب اون تاثیر زیادی روی اولین برداشت کاربر از بازی شما داره.

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

توی این راهنما، قراره قدم به قدم با هم جلو بریم و یاد بگیریم چطور منویی طراحی کنیم که نه فقط ظاهر خوبی داره، بلکه تجربه کاربری بازی شما رو هم بهبود میده.

مراحل ایجاد منوی اصلی در Unreal Engine 5

منوی اصلی نقش کلیدی در هدایت بازیکن و تنظیمات بازی دارد. در ادامه میخوایم مراحل ایجاد این بخش اساسی و مهم بازی رو دقیق و کامل بهتون ت

راه اندازی پروژه

قبل از اینکه بریم سراغ ساخت منوی اصلی در Unreal Engine، خیلی مهمه که پروژه تون رو به درستی راه اندازی کنید. در ادامه یه راهنمای مرحله به مرحله براتون آماده کردیم تا راحت این بخش رو طی کنید:

۱. اجرای Epic Games Launcher

برنامه Epic Games Launcher رو باز کنید.

از پنل سمت چپ، روی تب Unreal Engine کلیک کنید.

توی این تب، روی دکمه Launch UE5 کلیک کنید تا وارد پنجره انتخاب پروژه (Project Browser) بشید.

۲. انتخاب دسته بندی Games

میتونید دسته بندی های دیگه توسعه رو هم بررسی کنید و هر کدوم که بیشتر با اهداف پروژه شما همخوانی دارن رو انتخاب کنید.

۳. انتخاب قالب پروژه (Template)

حالا یه پنجره ظاهر میشه که توش چند تا قالب مختلف برای پروژه وجود داره. از بین اون ها، قالب Third Person رو انتخاب کنید.

این قالب یه کاراکتر سوم شخص همراه با حرکات آماده در اختیارتون میذاره که برای شروع ساخت منو و گیم پلی مناسبه.

۴. نام گذاری و انتخاب مسیر ذخیره پروژه

توی قسمت Project Name، یه اسم منحصربه‌فرد برای پروژه تون وارد کنید. بعد هم یه مسیر مناسب برای ذخیره کردن پروژه انتخاب کنید تا همه فایل ها مرتب بمونن و دسترسی بهشون راحت باشه.

در نهایت، روی دکمه Create کلیک کنید تا فرایند ساخت پروژه آغاز بشه.

ساخت یک Widget Blueprint (Creating a Widget Blueprint)

حالا که پروژه تون آماده شده، میتونید برید سراغ ساخت منوی اصلی.

برای این کار باید یه Widget Blueprint بسازید که رابط کاربری منو داخل اون طراحی میشه.

۱. باز کردن Content Browser

توی محیط Unreal Engine Editor، پنل Content Browser رو پیدا و باز کنید (معمولا در سمت چپ صفحه قرار داره).

داخل Content Browser، یا کلیک راست کنید یا روی دکمه Add کلیک کنید تا منوی ایجاد فایل جدید باز بشه.

۲. در منوی Add New، یک منوی کشویی ظاهر میشه.

از این منوی کشویی، گزینه User Interface رو انتخاب کنید تا به گزینه های مربوط به رابط کاربری برای ساخت منوی اصلی دسترسی پیدا کنید.

۳. بعد از انتخاب User Interface، یه لیست از گزینه ها نمایش داده میشه.

دنبال گزینه Widget Blueprint بگردید و روش کلیک کنید تا یک Widget Blueprint ساخته بشه.

۴. توی پنجره ساخت Widget Blueprint، دو گزینه مشاهده میشه: User Widget و All Classes.

روی گزینه User Widget کلیک کنید.

۵. یه پنجره دیالوگ ظاهر میشه که ازتون میخواد برای Widget Blueprint جدیدتون یه نام وارد کنید.

یه اسم توصیفی برای ویجت منوی اصلی وارد کنید تا بتونید راحت اون رو داخل پروژه تون شناسایی کنید.

۶. داخل Content Browser، Widget Blueprint ای که تازه ساختید رو پیدا کنید و روش دابل کلیک کنید.

با این کار، ویجت در Blueprint Editor باز میشه و میتونید طراحی و عملکرد منوی اصلی تون رو توی اون تعریف کنید.

داخل Blueprint Editor میتونید طراحی منوی اصلی تون رو با استفاده از ویجت هایی که داخل Palette قرار دارن شروع کنید. Palette شامل عناصر مختلف رابط کاربری مثل دکمه ها، جعبه های متنی، تصاویر و موارد دیگه هست.

علاوه بر این، میتونید با استفاده از سیستم اسکریپت نویسی بصری Blueprint، تعاملات رو تعریف کنید، منطق عملکردی اضافه کنید و ظاهر هر ویجت رو به دلخواه شخصی سازی کنید.

در ادامه، توضیحاتی درباره پنل های مختلف داریم:

Palette

بخشی از رابط گرافیکی هست که به طراح اجازه میده به راحتی کامپوننت های رابط کاربری از پیش تعریف شده مثل دکمه ها، جعبه های متنی، تصاویر و… رو انتخاب و به صفحه طراحی اضافه کنه. این بخش پایه اصلی طراحی بصری UI به حساب میاد.

MainWidget

نقش کانتینر اصلی یا پایه برای ساخت رابط کاربری در بازی یا اپلیکیشن رو داره. مثل یه ویجت مادر عمل میکنه که بقیه ویجت ها مثل دکمه ها، تصاویر، جعبه های متنی و داخل اون قرار میگیرن و مدیریت میشن.

Visual Designer

یه بوم بصری هست که توی اون میتونید ظاهر و چینش ویجت هاتون رو طراحی و ویرایش کنید. عناصر رابط کاربری رو میتونید با درگ و دراپ کردن روی بوم قرار بدید و هرطور که میخواید بچینیدشون.

Details Panel

اطلاعات و ویژگی های نود انتخاب شده رو نشون میده. از این پنل میتونید تنظیمات مختلف نود انتخاب شده مثل موقعیت، اندازه، ظاهر و رفتار اون رو تغییر بدید.

طراحی منوی اصلی

طراحی منوی اصلی در Unreal Engine یکی از بخش های مهم در ساخت بازی هست.

برای اینکه منوی شما زیبا و کاربردی باشه، به نکات زیر توجه کنید:

1. یه تصویر پس زمینه یا ویدیوی جذاب انتخاب کنید که با فضای بازیتون هماهنگ باشه
2. این تصویر میتونه از همون ابتدا توجه کاربر رو جلب کنه و حس و حال بازی رو منتقل کنه
3. از زمینه های داینامیک یا عناصر تعاملی هم میتونید استفاده کنید تا تجربه کاربر جذاب تر بشه

اضافه کردن تصویر به Widget Blueprint

برای اینکه بتونید یه تصویر رو داخل ویجت اضافه کنید، این مراحل ساده رو دنبال کنید:

1. مطمئن بشید که Widget Blueprint شما باز هست. داخل محیط ویرایش ویجت، برید به پنل Palette که سمت چپ صفحه قرار داره و بعد در داخل Palette، ویجت Canvas Panel رو پیدا کنید و اون رو روی MainWidget درگ و دراپ کنید

۲. بعد از اون، ویجت Image رو پیدا کنید و اون رو روی Canvas Panel درگ و دراپ کنید.

۳. وقتی ویجت Image رو روی Canvas قرار دادید، میتونید اون رو با انتخاب کردنش شخصی سازی کنید.

توی پنل Details که در سمت راست ویرایشگر قرار داره، بخش Image رو پیدا کنید.

اینجا میتونید تصویر دلخواهتون رو برای نمایش تنظیم کنید. برای این کار، روی تصویر بندانگشتی (thumbnail) کلیک کنید و از Content Browser پروژه، تصویر مورد نظرتون رو انتخاب کنید.

۴. اضافه کردن یه دکمه به رابط کاربری در Unreal Engine یه فرآیند ساده هست.

داخل Palette، ویجت Button رو پیدا کنید و اون رو روی Canvas درگ و دراپ کنید.

۵. برای تغییر نام یک دکمه، روی ویجت دکمه راست کلیک کنید و از منوی باز شده گزینه Rename رو انتخاب کنید.

اسم جدید مورد نظرتون رو وارد کنید و برای تأیید تغییر، دکمه Enter رو بزنید.

۶. وقتی دکمه روی Canvas قرار گرفت، میتونید اون رو طبق ظاهر و عملکرد دلخواهتون شخصی سازی کنید.

توی پنل Details که در سمت راست ویرایشگر قرار داره، میتونید ویژگی های مختلف رو تغییر بدید. مثلا میتونید متن دکمه رو از طریق خاصیت Button Text ویرایش کنید. همچنین میتونید اندازه، رنگ، فونت و تراز متن رو با گزینه های موجود تنظیم کنید.

۷. میتونید یک متن داخل ویجت Button اضافه کنید تا متن مورد نظر روی دکمه نمایش داده بشه.

برای این کار، ویجت Text رو درگ و دراپ کنید روی ویجت Button داخل Canvas. این کار باعث میشه ویجت Text داخل ویجت Button قرار بگیره.

۸. به همین صورت، میتونید دکمه های دیگه ای هم روی Canvas Panel اضافه کنید.

۹. با دنبال کردن این مراحل، میتونید به راحتی یک دکمه رو داخل Widget Blueprint در Unreal Engine اضافه کنید و به کاربر یک عنصر بصری قابل تعامل ارائه بدید که میتونه برای انجام کارهای مختلف داخل اپلیکیشن یا بازی استفاده بشه.

۱۰. اضافه کردن متن به ویجت در Unreal Engine برای نمایش اطلاعات، دستورالعمل ها، برچسب ها یا هر نوع محتوای متنی هست که تجربه کاربر رو بهبود میده و زمینه لازم رو درون اپلیکیشن یا بازی فراهم میکنه.

۱۱. اضافه کردن متن به رابط کاربری در Unreal Engine یه فرآیند ساده هست. توی ویرایشگر Widget Blueprint، به پنل Palette در سمت چپ صفحه برید.

ویجت Text رو پیدا کنید و اون رو یا درگ و دراپ کنید روی Canvas یا روش کلیک کنید تا به صورت دستی اضافه بشه.

۱۲. وقتی ویجت Text رو روی Canvas قرار دادید، میتونید اون رو طوری شخصی سازی کنید که متن مورد نظرتون رو نمایش بده.

توی پنل Details که در سمت راست ویرایشگر قرار داره، ویژگی های مختلفی برای ویرایش وجود داره.

بخش Text رو پیدا کنید و محتوای متنی دلخواه رو مستقیما وارد کنید، یا اون رو به یه متغیر Bind کنید تا متن به صورت داینامیک در زمان اجرا (Runtime) بروزرسانی بشه.

اضافه کردن عملکرد به منوی اصلی (Functionality to Your Main Menu)

بعد از اینکه طراحی منوی اصلی تموم شد، خیلی مهمه که قابلیت استفاده (Usability) اون رو افزایش بدید.

این یعنی اضافه کردن ویژگی های تعاملی و اکشن هایی که به کاربر اجازه میدن درون منو جابجا بشن، با عناصر تعامل داشته باشن و کارهای مختلف انجام بدن.

۱. اضافه کردن عملکرد به دکمه Play

دکمه Play رو که داخل Canvas در Widget Blueprint قرار دادید انتخاب کنید

توی Details Panel، بخش On Clicked رو پیدا کنید

روی آیکن + کنار On Clicked کلیک کنید تا یه نود جدید برای این رویداد اضافه بشه

۲. با این کار، Blueprint Graph باز میشه، جایی که میتونید به صورت بصری عملکرد دکمه رو بسازید.

داخل Blueprint Graph، یه نود (Node) میبینید که رویداد On Clicked برای دکمه Play رو نمایش میده. این نود نقطه شروع برای اضافه کردن عملکرد به دکمه هست.

برای اضافه کردن عملکرد:

• روی فضای خالی داخل گراف راست کلیک کنید تا منوی context باز بشه
• توی این منو میتونید دستور یا فانکشن خاصی که میخواید به دکمه اختصاص بدید رو جستجو و انتخاب کنید

نکته:

اگه از Unreal Engine نسخه 5.1 یا بالاتر استفاده میکنید، باید از “Open Level by Object Reference” به جای “Open Level by Name” استفاده کنید. در غیر این صورت، عملکرد باز کردن مرحله (Level) درست کار نمیکنه.

۳. همین مراحل رو برای دکمه های Resume و Quit هم تکرار کنید و به رویداد On Clicked مربوط به هر کدوم داخل Blueprint Graph عملکرد مورد نظرشون رو اضافه کنید.

برای دکمه Options هم میتونید نودها و منطق لازم رو برای مدیریت کلیک روی اون دکمه بسازید. مثلا میتونید از نود Create Widget استفاده کنید تا یه ویجت جدید که نمایانگر منوی تنظیمات (Options Menu) هست رو بسازید و نمایش بدید.

۴. برای دکمه Quit، عملکردی اضافه کنید که بازی رو به صورت ایمن و کامل ببنده.

این عملکرد میتونه شامل موارد زیر باشه:

• ذخیره کردن هر اطلاعات یا تنظیمات ضروری قبل از بستن بازی
• استفاده از نود Quit Game داخل Blueprint Graph برای خروج از بازی

با این کار، کاربر میتونه به شکل مناسب از بازی خارج بشه بدون اینکه اطلاعاتش از بین بره یا با خطایی مواجه بشه.

۵. برای اینکه زمان فعلی رو به صورت داینامیک در منوی اصلی نمایش بدید، میتونید عنصر متنی (Text) رو به یه متغیر که زمان رو بروزرسانی میکنه Bind کنید.

برای این کار:

• توی Details Panel، بخش Text رو پیدا کنید
• روی دکمه Bind کوچکی که کنار این ویژگی هست کلیک کنید
• بعدش روی گزینه Create Binding کلیک کنید

با این کار، یه تابع جدید ساخته میشه که داخلش میتونید کدی بنویسید (به صورت Blueprint یا ++C) تا زمان فعلی رو بگیره و به متن ویجت اختصاص بده.

۶. این کار Blueprint Graph رو باز میکنه، جایی که میتونید متن رو به زمان سیستم Bind کنید.

تست کردن منوی اصلی

بعد از اینکه عملکرد مورد نظرتون رو برای منوی اصلی با موفقیت پیاده سازی کردید، خیلی مهمه که عملکرد و کارایی اون رو به خوبی تست کنید. برای شروع فرآیند تست، باید ویجت منوی اصلی رو به صفحه View اضافه کنید.

۱. گراف Level Blueprint رو توی یه لول جدید (غیر از ThirdPersonMap) باز کنید.

۲. روی یه قسمت خالی از گراف راست کلیک کنید و توی نوار جستجو عبارت Create Widget رو تایپ کنید.

۳. از لیست نودهای موجود، Create Widget رو انتخاب و روی گراف درگ کنید.

۴. پین خروجی اجرای نود Create Widget رو به نود Add to Viewport وصل کنید. این نود مسئول اضافه کردن ویجت به صفحه بازی (Viewport) هست.

۵. از داخل نود Create Widget، کلاس ویجتی که میخواید ساخته بشه رو انتخاب کنید. برای این کار روی منوی کشویی کلیک کنید و ویجت مورد نظر رو از لیست انتخاب کنید.

۶. دوباره روی گراف راست کلیک کنید و نود Get Player Controller رو پیدا کنید.

خروجی این نود رو درگ کنید و نود Set Show Mouse Cursor رو پیدا و اضافه کنید و تیک اون رو فعال کنید تا نشانگر موس هنگام ظاهر شدن منو قابل دیدن باشه.

دوباره از خروجی Get Player Controller استفاده کنید و نود Set Input Mode UI Only رو پیدا کنید. این کار باعث میشه که موس روی صفحه باقی بمونه و فقط روی رابط کاربری تمرکز داشته باشه.

۷. بعد از اینکه همه نودها رو به هم وصل کردید، Blueprint رو Compile و Save کنید.

۸. حالا برید به اون لولی که قراره بازیکن بعد از کلیک روی دکمه Play در منوی اصلی واردش بشه و نودهای زیر رو به Level Blueprint اون لول اضافه کنید.

۹. این کار باعث میشه که وقتی بازیکن بازی رو شروع میکنه، نشانگر موس دیده نشه و کنترل کامل روی کاراکتر بازی داشته باشه.

۱۰. برگردید به لولی که توش منوی اصلی رو راه اندازی کردید و مراحل زیر رو انجام بدید:

1. به منوی Window برید
2. از اونجا گزینه World Settings رو انتخاب کنید
3. این کار یه تب جدید برای تنظیمات لول (World Settings) باز میکنه
4. توی تب World Settings، قسمت Default Pawn Class رو پیدا کنید
5. اون رو به Default Pawn تغییر بدید

به صورت پیش فرض، این گزینه بر اساس Game Mode انتخاب شده تنظیم میشه ولی با تغییرش به Default Pawn مطمئن میشیم که کاراکتر اضافی داخل منوی اصلی ظاهر نشه. مثلا اگه داخل قالب Third Person باشید و این گزینه رو تغییر ندید، وقتی لول منوی اصلی رو باز کنید، یه کاراکتر سوم شخص همزمان با منو ظاهر میشه که نمیخوایم این اتفاق بیفته.

۱۱. حالا در نهایت، بازی رو داخل Unreal Editor با کلیک روی دکمه Play اجرا کنید تا منوی اصلی و عملکرد اون رو تست کنید.

۱۲. با دکمه ها تعامل داشته باشید. مطمئن بشید که عملکرد مورد انتظار به درستی کار میکنه.

اگه نیاز بود، تغییرات لازم رو اعمال کنید یا طراحی تون رو تکرار کنید تا تجربه کاربر بهبود پیدا کنه.

خلاصه

ساخت یک منوی اصلی جذاب، یکی از بخش های حیاتی در توسعه بازی هست و Unreal Engine ابزارهای قدرتمندی در اختیار شما قرار میده تا به این هدف برسید.

با دنبال کردن مراحل گفته شده در این آموزش، میتونید یه منوی اصلی حرفه ای و جذاب برای بازی خودتون در Unreal Engine طراحی و پیاده سازی کنید.

یادتون باشه که حتما چند بار منو رو تست و اصلاح کنید تا تجربه ای روان و لذت بخش برای بازیکن ها فراهم بشه.

ممنونیم که تا انتها همراه ما بودین. امیدواریم این آموزش براتون مفید و کاربردی بوده باشه؛ همچنین خوشحال میشیم که نظرات و تجربیاتتون رو با ما به اشتراک بگذارین.