آموزش ایجاد transition نوع fade

آموزش ایجاد transition نوع fade

transition نوع fade

(سطح پیشرفته:)در مطلب حاضر، با آموزش ایجاد transition نوع fade در خدمت شما هستیم. حتما می دانید که منظور از transition ، افکتی است که در موقع خارج شدن از روم فعلی و وارد شدن به روم جدید پخش می شود و انتقال به محیط جدید را جذاب تر می کند. در حالی که اگر از transition استفاده نشود تغییر فضا و ورود به صحنه جدید، خشک و ناگهانی به نظر می رسد. Transition ها انواع بسیار مختلفی دارند و هیچ محدودیتی برای خلق یک نوع جدید وجود ندارد. اما یکی از پرکاربردترین آنها، fade یا “محو” نام دارد. به این صورت که در زمان انتقال از صحنه قبل به صحنه بعد، به تدریج میزان alpha یا opacity صحنه قدیمی، کم شده و در مقابل میزان آن برای صحنه جدید افزایش می یابد تا این احساس را ایجاد کند که رفته رفته، فضای قبلی در فضای جدید محو شده است.

برای ایجاد اکثر transition ها به مفهوم surface و چگونگی کاربرد آن در گیم میکر نیازمندیم. درنتیجه اگر با این مفهوم آشنایی ندارید بهتر است، قبل از استفاده از این آموزش، کار با surface ها را بیاموزید. علاوه بر آن، معمولا transition ها را درلایه GUI ترسیم می کنند. بنابراین، آشنایی با استفاده از لایه GUI نیز لازم است.(آموزش کار با لایه GUI)

برای ایجاد transition از نوع fade حداکثر به دو آبجکت نیاز داریم: اولا: آبجکت دکمه تغییر روم و دیگری: آبجکت اجرای transition؛ این دو آبجکت را ایجاد کنید.

آبجکت دکمه:

نام آبجکت دکمه تغییر روم را مثلا obj_button بگذارید و یک اسپرایت مناسب برای آن ایجاد کنید. سپس در رخداد Create آن ابتدا ابعاد لایه GUI بازی تان را مشخص کنید. فرض کنید در پروژه نمونه ما ابعاد روم یا view بازی برابر با مقدار پیش فرض 1024 * 768 است:

display_set_gui_size(1024,768);

پس از آن یک رخداد Left Released به آن اضافه کنید و به وسیله کد زیر، یک نمونه از آبجکت اجرای transition با نام دلخواه obj_transition را در جایی از صحنه ایجاد کنید. البته حتما باید یک شرط قبل از کد ایجاد آن قرار داشته باشد تا چک کند قبل از آن هیچ نمونه ای از این آبجکت در صحنه نبوده است. فایده این کار آن است که باعث می شود که در هنگام اجرای transition و در حالی که هنوز این افکت به طور کامل پخش نشده است، بازیکن نمی تواند دوباره دکمه را بزند و یک نمونه جدید از obj_transition در صحنه ایجاد کند. زیرا این موضوع باعث اختلال در اجرای آن می شود:

if !instance_exists(obj_transition)

instance_create(0,0,obj_transition);

آبجکت اجرای transition

پس از آن به سراغ آبجکت اصلی یعنی obj_transition می رویم.توجه داشته باشید که این آبجکت نیازی به اسپرایت ندارد و باید حتما از نوع Persistent باشد تا با تغییر روم، از بین نرود.

رخداد Create

در رخداد Create آن  می نویسیم:

max_frame = 2 * room_speed;

current_frame = 0;

a_oldroom = 1;

a_newroom = 0;

sur_oldroom = surface_create(room_width,room_height);

surface_copy(sur_oldroom,0,0,application_surface);

sur_newroom = -1;

if room == room1

room_goto(room2);

else

room_goto(room1);

تفسیر:

متغیر max_frame در خط اول نشان دهنده طول مدت اجرای transition است و قرار است بعدا در رخداد Draw GUI از آن استفاده شود. همان طور که می بیند مقدار آن را به صورت پیش فرض برابر با 2 ثانیه قرار داده ایم. شما می توانید هر مدت زمان دلخواه دیگری را وارد کنید.

در خط دوم، متغیر current_frame به معنای لحظه شروع پخش transition است که در آغاز برابر با صفر قرار دارد. این متغیر بعدا در رخداد step در هر لحظه از بازی، به روز رسانی شده و یک واحد به آن افزوده می شود تا به مقدار نهایی آن یعنی max_frame برسد.

در خط سوم و چهارم منظور از a_oldroom و a_newroom مقدار آلفا یا opacity برای روم قبلی و روم بعدی است. از این متغیرها برای نمایش میزان محو شدگی روم ها در رخداد Draw GUI استفاده می شود. همان طور که می بینید آلفای روم فعلی را 1 در نظر می گیریم که نشان دهنده نمایش کامل آن بدون محو شدگی در ابتدای بازی است. در حالی که این مقدار را برای روم بعد 0 در نظر گرفته ایم تا در ابتدا کاملا شفاف باشد. زیرا قرار است در رخداد Draw GUI ،روم قبلی به تدریج آلفای خود را از دست بدهد و در مقابل آلفای روم بعدی به تدریج افزایش یابد تا افکت مورد نظر ما برای این transition حاصل شود.

درخط پنجم، یک surface با نام sur_oldroom ایجاد می شود که ابعاد آن به اندازه ابعاد روم بوده و در ابتدا خالی است. سپس در خط ششم یک تصویر یا اسکرین شات از محیط روم فعلی در این surface کپی می شود. حالا sur_oldroom دربردانده تصویری از روم فعلی می باشد که می توانیم از آن برای ایجاد افکت transition استفاده کنیم.

در خط هفتم surface مربوط به روم جدید با نام sur_newroom معرفی می شود.  چون هنوز وارد روم بعد نشده ایم، بنابراین مقدار آن را برابر با منفی 1 قرار می دهیم که به معنای خالی بودن این surface می باشد.

در خطوط هشتم تا آخر نیز کد انتقال از روم فعلی به روم بعدی را نوشته ایم که نیاز به توضیح چندانی ندارد. دقت کنید که همه این اتفاقات در رخداد Create افتاده است؛ در نتیجه به محض کلیک بر دکمه obj_button یک نمونه از آبجکت obj_transition در روم ایجاد شده و بلافاصله وارد روم بعدی می شویم.

 

رخداد step

current_frame += 1;

if current_frame == 2

{

    sur_newroom = surface_create(room_width , room_height);

    surface_copy(sur_newroom,0,0,application_surface);

}

if current_frame > max_frame

instance_destroy();

 

تفسیر کد:

همانطور که می بینید در خط اول،  مقدار current_frame را در هر لحظه از بازی یک واحد اضافه می کنیم. سپس در خط دوم بررسی می کنیم که این مقدار به 2 رسیده است (یعنی اگر فرآیند transition شروع شده است) در خط چهارم و پنجم مشابه آنچه برای روم قبل انجام دادیم، تصویری از روم جدید را  در sur_newroom کپی می کنیم. حالا ما یک تصویر از روم قبلی و یک تصویر از روم بعدی را در اختیار داریم و می توانیم به راحتی در رخداد Draw GUI این دو تصویر را با آلفای مناسب آن به نمایش بگذاریم تا حس محو شدن این دو روم در یکدیگر را ایجاد نماییم.

در خط هفتم و هشتم زمان به پایان رسیدن اجرای transition را مشخص کرده ایم. به این صورت که، زمانی که current_frame به مقدار حداکثر آن یعنی max_frame برسد، آبجکت ما نابود می شود. زیرا transition مورد نظر ما پخش شده و دیگرنیازی به آن نداریم.

رخداد Destroy

در رخداد Destroy بنویسید:

surface_free(sur_oldroom);

surface_free(sur_newroom);

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

رخداد Draw GUI

if surface_exists(sur_oldroom)

{

a_oldroom -= 1/max_frame;

draw_set_alpha(a_oldroom);

draw_surface(sur_oldroom , 0,0);

draw_set_alpha(1);

}

if surface_exists(sur_newroom)

{

a_newroom += 1/max_frame;

draw_set_alpha(a_newroom);

draw_surface(sur_newroom , 0,0);

draw_set_alpha(1);

}

حالا وقت آن رسیده که به مرحله اصلی ایجاد transition ،یعنی مرحله نمایش همه اتفاقات گفته شده بپردازیم. قرار است در این رخداد هر دو surface ایجاد شده در مراحل قبل را با آلفای مناسب آنها به نمایش بگذاریم. برای این کار  همانطور که در خطوط 1 و 8 می بینید، همیشه ابتدا شرط surface_exists را قرار می دهیم. زیرا همانطورکه گفته شد گیم میکر، surface ها را در حافظه جانبی یا cache سیستم قرار می دهد و این مساله موجب می شود که surface ها فرّار باشند و در صورتی که از این شرط قبل از نمایش آن استفاده نکنید ممکن است بازی شما را crash  کنند. پس از آن  و در صورتی که شرط گفته شده وجود داشته باشد، ابتدا آلفا را برای روم قبلی تنظیم می کنیم. همانطور که درخط 3 میبینید مقدار آلفا را به طول زمان اجرای transition وابسته کرده ایم؛ به طوری که دقیقا متناسب با طول این مدت، مقدار آلفای روم قبلی کاسته می شود تا با رسیدن به انتهای مدت زمان اجرای transition مقدار آلفا نیز به 0 رسیده باشد. سپس با استفاده از تابع draw_surface ، تصویر مربوط به آن را نمایش می دهیم و پس از آن مقدار آلفا را مجددا به مقدار پیش فرض آن برمی گردانیم. در ادامه و در خطوط  8 تا 14 همه این مراحل را برای تصویر روم جدید تکرار می کنیم. با این تفاوت که درهر لحظه، میزان آلفا افزایش می یابد.

به این ترتیب و همانطور که دیدیم با ایجاد آبجکت obj_transition ، یک تصویر از روم اول و دیگری از روم دوم تهیه می کنیم و سپس با مقدار آلفاهای متفاوت آنها را به نمایش می گذاریم. کار نمایش transition به همین سادگی است.

دانلود پروژه نمونه:

برای دانلود پروژه نمونه transition از نوع fade از صفحه محصولات، اینجا کلیک کنید.

 

 

 

 

 

.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *