آموزش Unity : هنر بازی سازی سه بعدی با Flat Shaded

آموزش Unity : هنر بازی سازی سه بعدی با Flat Shaded

توی این آموزش، نحوه طراحی گرافیک های سه بعدی Flat Shaded رو برای بازی سازی با Unity بهتون نشون میدم  و بهتون میگم که چرا اول باید این مهارت رو کسب کنین.

امروزه تعداد زیادی از ابزارها و موتورها وجود دارن که بهمون اجازه درست کردن بازی های سه بعدی رو میدن. با این وجود، چالش هایی هم سر راه هنر سه بعدی سازی وجود داره و اغلب این کار زمان بر هست و به تلاش، تجربه و مهارت زیادی نیاز داره. مدل های Low-Polygon همراه با Flat Shading، منجر به گرافیک دهه نود میشه که هر کسی می تونه اون رو به راحتی یاد بگیره. علاوه بر نوستالژی بودن، Flat Shading رو میشه با تکنیک های مدرن ترکیب کرد و بازی هایی با ظاهر فوق العاده درست کرد.

دانلود پروژه تمرینی Unity

توی این آموزش فرض شده که شما با مدل سازی سه بعدی آشنایی دارید یا اینکه می تونین مدل های سه بعدی رایگان رو از اینترنت تهیه کنین.

با ” آموزش Unity : هنر بازی سازی سه بعدی با  Flat Shaded” با ما همراه باشید…

دلیل استفاده از Flat Shading

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

چی می شد اگه مدل تون رو طراحی می کردین اما با چند تا مرحله کوچیک برای رنگ آمیزی و سایه زدن، خود بازی آماده می شد؟ مثلا یه همچین چیزی:

یا مثلا این:

درسته که به نظر خیلی قدیمی و پیش پا افتاده میاد. اما نکته همین جاست! چه بخواین بازی هایی به سبک بازی های دهه 90 درست کنین چه بازی های مدرن، در هر دو صورت Flat Shading بهترین گزینه برای مبتدی ها و حرفه ای هاست.

اگه کار بازی سازی رو به تازگی شروع کردید، سادگی محیط کار می تونه بهتون کمک کنه روی بخش های مقدماتی تمرکز کنین: مثل یادگیری نحوه مدل سازی سه بعدی یا شکل و ظاهر مناسب و رنگ آمیزی با مجموعه کمی از رنگ ها. تمرکز روی این موضوعات، مهارت های مقدماتی رو بهتون آموزش میده.

طرز عملکرد Flat Shading

همه مدل های سه بعدی ترکیبی از رئوسی هستن که شکل مدل رو تشکیل میده. برای هر راس، وکتور یا برداری به اسم normal  وجود داره که میشه اون رو به عنوان سنجاقی در نظر گرفت که به راس می چسبه.

موتور رندرینگ از وکتورهای normal هر راس استفاده می کنه و مسیر اون رو با مسیر منبع یا منابع نور و محل قرارگیری دوربین مقایسه می کنه تا میزان نور دریافتی هر راس رو تخمین بزنه. برای اینکه مدل سه بعدی ظاهر مناسبی پیدا کنه، موتور رندرینگ نور رو به تدریج محو می کنه.

با Flat Shading، کل Polygon مقدار یکنواختی از نور رو دریافت می کنه که این مقدار از مرکز به سمت بیرون، محاسبه میشه.

اپلیکیشن های مدل سازی مدرن، از Hard Edge یا Smoothing Groups برای تعدیل رئوس نرمال مدل استفاده می کنن طوری که با Polygon های مجاور مدل همخوانی داشته باشه و از این رو، ظاهری یکنواخت به اون می بخشن. یک هنرمند حرفه ای، برای اینکه بخش های مسطح مدل، مسطح به نظر بیاد و لبه های تیز، تیز به نظر بیاد، از این تکنیک ها استفاده می کنه. Unity، این کار رو به بسیار ساده کرده.

تکنیک های مقدماتی

اگه به اندازه کافی با ابزارهای مدل سازی آشنایی دارین، با تنظیم همه لبه ها یا Edge ها روی Hard، می تونین ظاهری Flat Shade به مدل تون ببخشین. اما با انتخاب Let Unity Create Hard Edges Automatically به یونیتی این اجازه رو میدین که این کار رو به صورت خودکار براتون انجام بده.

گام اول

از پنجره Project، روی مدل کلیک می کنیم تا Import Settings از پنل Inspector ظاهر بشه.

گام دوم

میریم سراغ بخش Normals & Tangent و Calculate رو از منوی Normals انتخاب می کنیم.

گام سوم

Smoothing Angle رو روی 0 میزاریم و روی Apply کلیک می کنیم.

به این ترتیب، Unity تمام لبه هایی که زاویه تیزی دارن رو به Hard Edge تبدیل می کنه. می خوایم این کار روی تمام لبه ها انجام بشه بنابراین اون رو روی  تنظیم می کنیم.

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

گام چهارم

حالا که مدل رو Flat Shade کردیم، باید اون رو رنگ آمیزی کنیم. راه های زیادی برای این کار وجود داره اما بعضی از این راه ها، بهتر از بقیه ان:

– بخشی از مدل رو انتخاب می کنیم و برای هر رنگ، یک متریال رو در نظر می گیریم.

– اختصاص دادن رنگ راس در برنامه مدل سازی.

– درست کردن پالتی که تمام رنگ ها و بافت های مورد نیاز مدل رو در خودش داشته باشه.

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

اولین مرحله رنگ آمیزی، درست کردن بافت هست. برای مثال، فرض کنین می خوایم از چهار رنگ استفاده کنیم:

مدل سه بعدی و بعد بافت مورد نظر رو بارگذاری می کنیم. تمام سطوحی از مدل رو که می خوایم رنگ آمیزی کنیم، انتخاب می کنیم و بعد اون ها رو UV Unwrap می کنیم. در نتیجه، تعدادی Polygon در هم دیده میشه.

همون طور که گفتم، این کار خیلی هم اهمیت نداره. تمام Polygon ها رو روی همدیگه قرار میدیم و به اندازه ای در میاریم که روی یکی از مربع های پالت قرار بگیره. بعد اون عل رو روی رنگ های مورد نظر، درگ می کنیم.

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

ایناهاش. حالا یک مدل Flat Shaded رنگ آمیزی شده دارین که می تونین اون رو وارد بازی کنین.

سایر روش ها

اگه می خواید بدونین، باید بگم که دلایلی برای استفاده نکردن از دو روش دیگه وجود داره:

متریال های چندگانه

توی این روش، متریال های زیادی ایجاد میشه. چرا که یونیتی به صورت پویا مدل ها رو دسته بندی نمی کنه و از Draw Call برای هر متریال استفاده می کنه.

بنابراین، اگه از این روش زیاد استفاده کنین، نتیجه کارتون وحشتناک میشه.

رنگ های راس

این روش در واقع عملکرد نسبتا خوبی داره و شاید بخواین بسته به مدلی که روش کار می کنین، ازش استفاده کنین. اما خیلی زود متوجه یک نکته میشید. موقعی که مدل رو وارد و Diffuse Shader رو انتخاب می کنین، رنگ های راس ظاهر نمیشن.

به این خاطر که Shader اجازه نمیده. برای استفاده از این روش باید از Shader خاصی استفاده کنین. این Shader رو میشه به راحتی پیدا کرد اما خروجی گرفتن افکت از سایر Shader ها کار پیچیده ای هست. بنابراین باید خود Shader رو هم ادیت کنین.

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

بهینه سازی

حالا که یک پالت بافت داریم و با تکنیک های مقدماتی آشنا شدیم، می تونیم بریم سراغ بقیه مدل های بازی. همون طور که تا الان متوجه شدین، فقط می تونیم رنگ هایی رو به پالت اضافه کنیم و از همون بافت توی کل بازی استفاده کنیم.

این ویژگی ها، مزایای عملکردی زیادی داره: موقعی که توی کل بازی از یک متریال استفاده می کنیم، یونیتی تمام اشکال رو به صورت کارآمدتری رسم می کنه. همون طور که قبلا هم گفتم، Draw Calls از مهم ترین چالش های گرافیک کامپیوتری هستن که بهتره اون ها رو به حداقل برسونیم.

اگه از یک متریال استفاده کنیم، Unity به صورت خودکار سعی می کنه  با کمترین Draw Calls، منظره رو رسم کنه و بنابراین تعداد رئوس مدل به کمتر از 300 میرسه. این اطلاعات رو می تونین از پنجره Stats کسب کنین:

تغییر رنگ ها در حال اجرا

فرض کنین مجموعه ای از مدل ها رو تهیه و رنگ آمیزی کردیم. حالا اگه بخوایم رنگ مدل ها در حین بازی تغییر کنه باید چی کار کنیم؟

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

اگه تعداد این موارد کم باشه، مشکلی پیش نمیاد. اما اگه تو یک بازی، مثل بازی معروف Sandbox، تعداد زیادی کاشی و مکعب به کار رفته باشه، این کار می تونه دشوار باشه. این یعنی تعداد زیادی Draw Calls.

روش رنگ آمیزی مدل رو به یاد دارین؟ Unity بهمون اجازه میده با استفاده از اسکریپ، رئوس مدل رو در حین اجرا تغییر بدیم.

یک اسکریپت C# به نام PaletteColorizer درست می کنیم و اون رو در یونیتی Paste می کنیم.

using UnityEngine;
using System.Collections;

public class PaletteColorizer : MonoBehaviour
{
	public int colorsPerRow = 4;
	public int colorIndex = 0;
	public bool overrideUVs = false;

	void Awake ()
	{
		if(!enabled)
		{
			return;
		}

		SetUVsToColor(colorIndex);
	}

	void Update()
	{
	}

	public void SetUVsToColor(int colorIndex)
	{
		if(overrideUVs)
		{
			SetUVs(gameObject, GetColorOffset(colorIndex));
		}
		else
		{
			TranslateUVs(gameObject, GetColorOffset(colorIndex));
		}
	}

	Vector2 GetColorOffset(int colorIndex)
	{
		Vector2 offset = new Vector2();
		float row = Mathf.Floor(colorIndex / colorsPerRow);
		float step = 1.0f / colorsPerRow;

		offset.x = (colorIndex - (row * colorsPerRow)) * step;
		offset.y = (1.0f - (row / colorsPerRow));

		return offset;
	}

	static public void TranslateUVs(GameObject obj, Vector2 offset)
	{
		var meshFilter = obj.GetComponent();
		Mesh mesh = meshFilter.mesh;

		var newUVs = new Vector2[mesh.uv.Length];

		for(int i=0; i < mesh.uv.Length; i++)
		{
			newUVs[i] = new Vector2(mesh.uv[i].x + offset.x, mesh.uv[i].y + offset.y);
		}

		mesh.uv = newUVs;
	}

	static public void SetUVs(GameObject obj, Vector2 offset)
	{
		var meshFilter = obj.GetComponent();
		Mesh mesh = meshFilter.mesh;

		var newUVs = new Vector2[mesh.uv.Length];

		for(int i=0; i < mesh.uv.Length; i++)
		{
			newUVs[i] = new Vector2(offset.x + 0.01f, offset.y - 0.01f);
		}

		mesh.uv = newUVs;
	}
}

برای استفاده از این اسکریپ، اون رو با استفاده از پالت بافت و به همراه یک متریال به بازی اضافه می کنیم، تعداد رنگ های هر ردیف و شاخص رنگ (از گوشه بالای سمت چپ با صفر شروع میشه و به سمت گوشه پایین سمت راست شمرده میشه) رو مشخص می کنیم.

نکته ای که در مورد این روش باید به یاد داشته باشین اینه که موقع ادیت Mesh، یونیتی یک Mesh کاملا جدید در Memory درست می کنه. اگه تعداد زیادی از Mesh ها رو ادیت می کنین، ممکنه با مشکل در Memory مواجه بشین. اما اگه تعداد مدل های Low Poly کم باشه، نیازی نیست نگران چیزی باشین.

Baked Ambient Occlusion

لزوما نیازی نیست Flat Shading همیشه با یک رنگ جفت بشه. برای اینکه ظاهری واقعی همراه با جزئیات دقیق به یک شکل بدیم، یک روش این هست که Ambient Occulasion رو بهش اضافه کنیم. تولید کننده های Unity Pro، امکان Ambient Occulasion رو به عنوان یک فیلترح Post-Processing اضافه کردن اما من می خوام روش انجام این کار رو بدون نیاز به ورژن Pro و اضافه کردن Shader خاص، بهتون نشون بدم.

تنها کاری که باید انجام بدین اینه که مدل رو Unwrap کنیم و افکت Ambient Occulasion رو به صورت یک بافت، Bake کنیم. Unwrap کردم مدل یک مقدار زمان بر هست و به تلاش زیادی نیاز داره اما بعد از انجام این مرحله، با چند تا کلیک ساده می تونیم ظاهری واقعی به مدل مون بدیم.

گام اول

اول از همه، یک صحنه خالی در Blender درست می کنیم. برای انتخاب تمام شکل ها، A رو فشار میدیم و بعد هم Delete و D رو فشار میدیم. به هیچ Lamp یا Camera نیازی نداریم چون که بعدا اون ها رو به یونیتی اضافه می کنیم.

گام دوم

حالا مدل رو از مسیر File > Import > Wavefront(.obj) وارد می کنیم. برای این مثال، از تخته سنگ شروع می کنیم.

گام سوم

UV Editor رو باز می کنیم و یک بافت رو که با جزئیات تخته سنگ همخوانی داشته باشه، انتخاب می کنیم. من ابعاد 256 در 256 پیکسل رو برای شکل هایی که به اندازه بازیکن هستن مثل درخت و سنگ، در نظر گرفتم. اما برای شکل های بزرگتر مثل کوه، ابعاد بیشتری رو در نظر می گیرم.

گام چهارم

حالا مدل رو Unwrap می کنیم. اونقدر راه های زیادی برای این کار وجود داره که نمی تونم همه اونها رو بگم. بنابراین برای یادگیری این روش ها می تونین به سایر آموزش ها مراجعه کنین.

گام پنجم

حالا که مدل رو Unwrap کردیم، برای Bake کردن Ambiant Occlusion در بافت آماده ایم. Blender بر اساس مدلی که Unwrap کردیم، از Ambient Occlusion رندر می گیره. حالا این مراحل رو دنبال می کنیم:

– روی دکمه Render (آیکن دوربین) پنل Properties که سمت راست صفحه قرار داره، کلیک می کنیم.

– میریم سراغ Bake (انتهای صفحه) و اون رو باز می کنیم.

– Bake Mode رو از Full Render به Ambient Occlusion تغییر میدیم.

– روی دکمه Bake کلیک می کنیم.

گام ششم

حالا یک بافت AO که Bake شده و یک مدل با UV درست برای استفاده داریم. بافت رو روی فایل تصویر ذخیره می کنیم و اون رو در Blender با فرمتی که Unity بتونه بخونه (مثل .fbx)، خروجی می گیریم.

گام هفتم

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

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

گام هشتم

بافت Baked AO رو با یک برنامه Paint به دلخواه بازمی کنیم (یا هر برنامه ای که لایه ها رو پوشش میده مثل GIMP). یک لایه جدید درست می کنیم و اون رو بالای لایه AO قرار میدیم. از لایه AO به عنوان راهنمای رنگ لایه جدید استفاده می کنیم.

ابزار Lasso یا ابزار دیگه ای رو برای انتخاب بر می داریم و بخش هایی از بافت رو که می خوایم رنگ آمیزی کنیم، انتخاب می کنیم و بهش رنگ میدیم.

گام نهم

حالا که رنگ رو مشخص کردیم، نوبت آخرین مرحله رسیده. لایه AO رو بالای لایه رنگ قرار میدیم و Blend Mode رو روی Multiply میزاریم.

Opacity لایه رو به مقدار دلخواه تغییر میدیم. یادتون باشه که درصد Opacity رو به خاطر داشته باشید و بقیه لایه ها رو هم به همین مقدار در بیارید تا افکت یکنواختی داشته باشین.

این بافت رو ذخیره می کنیم و اون رو وارد یونیتی می کنیم. مثل روشی که برای تخته سنگ پیش گرفتیم و با استفاده از این بافت، یک متریال هم برای درخت درست می کنیم.

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

همون طور که می بینین، متریال ها از Diffuse Shader ساده استفاده می کنن. یکی از نکات جالب اینه که می تونین این بافت رو به همراه Shader های دیگه هم استفاده کنین و بنابراین نیازی به یک AO خاص نیست.

نتیجه

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

امیدواریم ” آموزش Unity : هنر بازی سازی سه بعدی با Flat Shaded ” برای شما مفید بوده باشد…

توصیه می کنم دوره های جامع فارسی مرتبط با این موضوع آریاگستر رو مشاهده کنید:

– صفر تا صد آموزش یونیتی سه بعدی – پک 1

– صفر تا صد آموزش یونیتی سه بعدی – پک 2

– صفر تا صد آموزش یونیتی دو بعدی

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

دوره های آموزشی مرتبط