آموزش ویدئویی بازی‌سازی با Unity - جلسه هفت: Score & UI
1398/02/23 09:51 , میلاد صاحب نظر

آموزش ویدئویی بازی‌سازی با Unity - جلسه هفت: Score & UI

 تا الان به اندازه‌ای که بتوانیم یک مرحله کامل خلق کنیم توانستیم برنامه‌نویسی بیاموزیم و همچنین با محیط یونیتی هم به خوبی آشنا شدیم. در این قسمت قصد داریم روی واسط کاربری (UI) بازی کار کنیم و یک مکانیزم نمره‌دهی برای بازیکن ایجاد کنیم. با ما همراه باشید!

مقدمه: آشنایی با موتور بازی‌سازی Unity قسمت سوم: حرکات قسمت ششم: GAMEPLAY قسمت نهم: تغییر مراحل و انیمیشن
قسمت اول: اصول اولیه Unity قسمت چهارم: دوربین دنبال‌گر قسمت هفتم: امتیاز‌دهی (SCORE) و UI قسمت دهم: پایان بازی
قسمت دوم: برنامه‌نویسی در Unity قسمت پنجم: برخورد قسمت هشتم: Game Over  

در جلسه پیش نحوه طراحی مرحله و GAMEPLAY بازی را آموختید. امیدوارم با این علمی که تا همینجای کار دارید توانسته باشید یک مرحله طولانی، خلاقانه و سرشار از چالش‌های مختلف ساخته باشید. 

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

خیلی ساده است و این قسمت بیشتر تمرینی است برای کار کردن بر روی آموزه‌های قسمت‌های قبلی.

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

عملکرد سیستم فیزیکی یونیتی به این صورت است که، پس از گذر از هر مانع و رندر اتفاقاتی که در خصوص آن مانع می‌افتد، یونیتی باید دوباره قوانین را از اول برای مانع بعدی ایجاد کند.

وجود تعداد زیادی مانع و شیء در بازی باعث می‌شود که گاهی برنامه عقب بماند و بنابراین قوانین برای برخی از موانع اجرا نشوند. اما نگران نباشید!

این مشکل خیلی راحت قابل حل است. در قسمت قبلی تمام موانع را در یک material‌ قرار دادیم پس این کارها را فقط یک بار انجام می‌دهیم.

برای اینکه قوانین فیزیک برای اشیاء بازی دقیق‌تر اجرا شوند، ابتدا material مربوط به موانع را انتخاب کنید، در قسمت rigidbody در ویژگی Collition Detection گزینه continuous را انتخاب کنید، همین کار را برای بازیکن نیز انجام دهید. 

سپس به سربرگ edit بروید، بعد به قسمت Project Settings رفته و Time را انتخاب کنید. حالا مقدار ویژگی fixed timestep را کاهش دهید. این کارها بدان معنا است که حالا یونیتی خیلی بیشتر و سریع‌تر قوانین فیزیک بازی شما را به روز رسانی می‌کند.

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

نکته: وقتی این تغییرات را برای بازیکنتان هم اعمال می‌کنید، به احتمال زیاد برای اینکه GAMEPLAY بازی روان و خوب باقی بماند باید کمی مقادیر ویژگی‌های forward force و sideways force را تغییر دهید.

ایجاد UI در یونیتی

همانطور که قبلا هم گفتیم، این قسمت خیلی ساده است و حین اینکه با مباحث جدیدی آشنا می‌شوید، تمرینی هم روی آموزه‌های قبلی خود انجام می‌دهید. ایجاد UI در یونیتی همانند ایجاد یک شیء جدید است. 

پس به قسمت Hierarchy می‌رویم، کلیک راست می‌کنیم، به قسمت UI می‌روید و در این قسمت می‌توانید گزینه‌های مختلفی برای UI بازی خود انتخاب کنید. در این بازی به یک شیء که بتواند برای ما نمره ثبت کند نیاز داریم پس Text را انتخاب می‌کنیم.

حالا در hierarchy قسمتی به نام Canvas ایجاد می‌شود. Canvas محلی است که UIهای مختلف بازی در آنجا قرار می‌گیرند. در حال حاضر فقط عنصر یا شیء Text قرار دارد.

برای اینکه بتوانید این Canvas را در صفحه بازی مشاهده کنید و راحت‌تر روی آن کار کنید، دید صفحه بازی را به حالت دو بعدی تغییر دهید. سپس F را بزنید تا روی Canvas زوم شود و صفحه را تنظیم کنید تا کامل آن را مشاهده کنید.

Canvas اساسا صفحه‌ای است که می‌توانید روی آن چیزهای خاصی ترسیم کنید. حالا قسمت مخصوص به Text در Canvas را بگیرید و آن را Drag کنید و در موقعیت مناسب قرار دهید. این چهارچوبی است که قرار است شمارنده فاصله ما در آن قرار بگیرد.

در قسمت سمت راست صفحه گزینه‌های مختلفی برای تنظیمات این بخش مشاهده می‌کنید که درک آن‌ها خیلی ساده است.

نکته: اگر از فونت‌های موجود در یونیتی راضی نیستید، می‌توانید خودتان به برنامه فونت اضافه کنید. برای این منظور کافی است فونت‌هایی که دانلود کرده‌اید را بگیرید و به داخل محیط یونیتی drag کنید. به همین سادگی.

بسیار خب، پس الان می‌توانید ظاهر Text را هر طور که دوست دارید تغییر دهید. اما برویم به سراغ بخش اصلی کارمان. یعنی کاری کنیم که این Text بتواند به عنوان فاصله سنج عمل کند.

برای این منظور به یک اسکریپت جدید نیاز داریم، پس روی Add Component کلیک می‌کنیم، یک اسم مثلا Score برای اسکریپتمان انتخاب می‌کنیم و روی Create and Add کلیک می‌کنیم. 

حالا روی آن دبل کلیک کنید تا وارد ویژوال استودیو شوید. مثل همیشه دو تگ Using بالا را حذف کنید. به متد Start هم نیاز ندارید پس آن را هم حذف کنید. 

برای اینکه بتوانید فاصله‌ای که بازیکن در بازی طی می‌کند را بسنجید، به یک رفرنس به سمت بازیکن نیاز دارید. پس باید یک متغیر ایجاد کنید. چون بازیکن شما یک ویژگی موقعیت دارد که از آن برای سنجش فاصله‌ای که طی کرده است می‌‌توانید استفاده کنید.

پس همانطور که در قسمت‌های قبلی به وفور انجام دادید، یک متغیر مانند متغیر زیر ایجاد کنید: 

Public Transform Player;

دقت کنید که پس از Public در قسمت انتخاب نوع متغیر نوشتیم Transform چون همانطور که گفتیم موقعیت بازیکن مد نظر ما است و موقعیت بازیکن در Transform Component قرار دارد.

حالا در متد Update می‌توانید با استفاده از اسم متغیر (Player) به Transform و ویژگی‌های درون آن دسترسی داشته باشید. برای اطمینان از اینکه این ارتباط وجود دارد درون متد Update کد زیر را می‌نویسیم: 

Debug.Log(Player.Position.Z);

حالا کدتان را Save کنید و به یونیتی بازگردید. مشاهده می‌کنید که در سمت راست یک اسکریپت Score و درون آن یک فضای خالی با نام Player دارید. همانطور که می‌دانید برای ایجاد رفرنس باید شیء مورد نظر را به درون این فضای خالی Drag کنید.

پس Text را انتخاب و سپس آن را به درون قسمت Player در اسکریپت Score بکشید. حالا بازی را کPlay کنید و باید تعداد زیادی پیام در قسمت کنسول مشاهده کنید که در واقع موقعیت بازیکن شما را به روز رسانی می‌کنند.

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

همانطور که از اسکریپت Score به یک رفرنس به سمت بازیکن نیاز داشتیم (برای به دست آوردن موقعیت بازیکن)، به یک رفرنس هم به سمت Text نیاز داریم (برای نمایش موقعیت بازیکن در آن). 

پس به ویژوال استودیو بازمی‌گردیم. نکته جدیدی که باید بیاموزید این است که وقتی قصد دارید برای UI در یونیتی کد بزنید پس به توابع خاص UI نیاز دارید. برای دسترسی به این توابع در کدها در قسمت تگ‌ها در بالا تگ زیر را بنویسید:

using UnityEngine.UI;

حالا می‌توانید برای واسط کاربری یونیتی کد بنویسید. بسیار خب، برای ایجاد رفرنس به یک متغیر نیاز داریم پس کد زیر را در بالای متد update می‌نویسیم:

Public Text ScoreText;

سوالی که الان باید به ذهنتان برسد این است که چرا در قسمت نوع متغیر نوشتیم Text؟ نوع متغیر رفرنس ما باید نوعی باشد که بتواند کاری که ما می‌خواهیم را انجام دهد. الان ما می‌خواهیم موقعیت بازیکن در Text که در Canvas ما قرار دارد نمایش داده شود.

نام Component مسئول تمام ویژگی‌های مرتبط با این کار، Text هست. پس در قسمت نوع نام آن Component را به عنوان نوع می‌نویسیم (همانند متغیر قبلی که نام Transform را برای نوع نوشتیم).

حالا به متد update بروید و کد قبلی را حذف می‌کنیم. حالا می‌توانیم در این قسمت موقعیت بازیکنمان را در Text قرار دهیم. برای این منظور کد زیر را می‌نویسیم: 

ScoreText.text = Player.Position.Z;

این کد موقعیت بازیکن ما در راستای محور Z (یعنی رو به جلو) را در ScoreText که همان Text ما در یونیتی است می‌ریزد. البته این کد یک اشکال بزرگ دارد. Player.Position.Z یک مقدار Float است و نمی‌توان یک float را در یک رشته (یعنی ScoreText) ریخت. 

برای حل این مشکل کد را به شکل زیر اصلاح کنید: 

ScoreText.text = Player.Position.Z.ToString();

کد ToString عدد float شما را در قالب یک رشته درون ScoreText می‌ریزد. 

کد را Save کنید و به یونیتی برگردید. طبق معمول برای تکمیل فرآیند ساخت رفرنس باید Text Component را به درون ScoreText که در اسکریپت Score ایجاد شده است drag کنید.

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

برای این منظور، باید متن خود را فرمت کنید. کد ToString این امکان را به شما می‌دهد.پس به ویژوال استودیو برگردید و کد قبلی را به این شکل اصلاح کنید: 

ScoreText.text = Player.Position.Z.ToString("0");

صفر درون علامت‌های دبل کوتیشن به برنامه می‌گوید که فقط اعداد صحیح نمایش داده شوند، نه اعداد اعشاری.

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

نکته: اگر حس کردید فاصله‌سنج شما کمی بد کار می‌کند یا کمی مشکل دارد، این مشکل خیلی راحت قابل حل است. کافی است Canvas را در قسمت Hierarchy انتخاب کنید و در سمت راست گزینه Pixel Perfect را فعال کنید. این گزینه گاهی باعث می‌شود UI خیلی بهتر رندر شود.

این هم از این قسمت، ممنون که با ما همراه هستید. فقط سه قسمت تا ساخت کامل اولین بازی در یونیتی فاصله داریم. در قسمت بعدی در مورد ایجاد وضعیت GAME OVER بازی صحبت خواهیم کرد.

با MUG همراه باشید!

منبع: Brackeys

 مطالب مرتبط

 مقدمه ای بر زبان برنامه نویسی #C و پلتفرم NET Framework.
 آموزش گام به گام #C
 طبقه بندی زبان های برنامه نویسی
۷ زبان توسعه بازی Unity برای آموختن: کدام بهترین است؟
۸ بازی ساخته شده با unity توسط تیم‌های کوچک یا تک‌نفره
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات