آموزش کار با ادیتور در 1.1.0 Quick2D و ساخت یک پروژه کوچک
این آموزش برای نسخه 1.1.0 هست و با نسخه های قدیمی تر کار نمیکند.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
ابتدا دکمه New Project را بزنید و یک پروژه با نام Ghost ایجاد کنید.
در پایین Object List روی علامت + کلیک کنید تا یک آبجکت جدید اضافه کنیم.
نام آبجکت را Player قرار دهید.
تصویر زیر را در پوشه Sprites قرار دهید.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
وارد آبجکت Player شده و روی Snippet های onCreate و onLoop کلیک کنید.
یک آرایه با نام player_id تعریف کنید:
کد:
var player_id=new Array();
به دلیل اینکه میخواهیم برای کاراکتر انیمیشن ایجاد کنیم از آرایه استفاده می کنیم.
در رویداد Start یک حلقه بصورت زیر تعریف کنید:
کد:
for (var i=0;i<8;i+=1)
{
player_id[i]=load_texture("ghost_floating_strip8.png",i*32,0,32,32);
set_origin(player_id[i],-8,-8);
}
همانطور که میبینید ساختار تابع load_texture کمی متفاوت از نسخه های قبلی است.
در اینجا شما علاوه بر نام تصویر، مکان شروع و پایان و اندازه برش را نیز مشخص می کنید.
در اینجا ما 8 فریم 32 پیکسلی داریم که با استفاده از این حلقه، هر فریم را در یک خانه آرایه قرار می دهیم. ضمنا با استفاده از تابع set_origin می توانید مرکز ثقل آبجکت را تنظیم کنید.
یک متغیر سراسری با نام player_frame تعریف کنید.
در رویداد Main برای نمایش کاراکتر بنویسید :
کد:
draw_sprite(player_id[player_frame],400-get_width(player_id[player_frame]),300-get_height(player_id[player_frame]),255);
در اینجا با استفاده از پارامتر های get_width و get_height کاراکتر را دقیقاً در وسط صفحه قرار می دهیم.
در رویداد Start به متغیر player_frame مقدار اولیه 0 بدهید.
یک متغیر سراسری دیگر با نام player_timer تعریف کنید و در رویداد Start به آن مقدار 0 دهید.
حالا در انتهای اسکریپت یک تابع با نام Animate اضافه کنید.
کد:
function Animate ()
{
if (player_timer<5)
{
player_timer+=1;
}else{
if (player_frame<8)
{
player_frame+=1;
}else{
player_frame=0;
}
player_timer=0;
}
}
ساختار بالا یک شمارنده زمان دار است که در بازی ها بسیار پر کاربرد است. پس سعی کنید آن را به خاطر بسپارید.
در این تابع مشخص می کنیم که با گذشت مدت زمان دلخواه ما، به player_frame اضافه شود و در عین حال، حالت loop داشته باشد.
دقت کنید که به هیچ وجه از حلقه های تکرار برای این کار استفاده نکنید.
حالا در رویداد Main و قبل از return این تابع را صدا بزنید:
بسیار خب، حالا اسکریپت خود را با استفاده از دکمه دیسکت ذخیره کنید و دکمه Run را بزنید.
همانطور که می بینید تصویر پلیر انیمیت شده است. برای تغییر سرعت انیمیشن می توانید مقدار player_timer<5 را تغییر دهید.
شاید دوست داشته باشید که بجای یک تصویر سیاه، یک پس زمینه واقعی داشته باشید. کافیه تصویر مورد نظر خود را در پوشه Sprites قرار بدید و یک آبجکت با نام Background بسازید.
من از تصویر زیر استفاده می کنم.
(بهتر است همیشه از تصاویر png استفاده کنید)
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
حالا در آبجکت Background روی Snippet های on Create و on Loop کلیک کنید.
سپس یک متغیر سراسری با نام background_id تعریف کنید و در رویداد Start بنویسید :
کد:
background_id=load_texture("bg.png");
حالا در رویداد Main بنویسید :
کد:
draw_background(background_id);
اسکریپت را ذخیره کنید و بازی را اجرا کنید.
فقط پس زمینه !
چرا ؟ دلیلش ساده است. آبجکت Background بعد از Player ترسیم میشه بنابراین پلیر همیشه پشت Background قرار داره. برای تغییر ردیف ترسیم آبجکت ها، می توانید از دکمه های بالای ادیتور که به شکل فلش های بالا و پایین هستند استفاده کنید.
روی فلش بالا یک بار کلیک کنید تا آبجکت Background بالای آبجکت Player قرار بگیرد.
با اجرای دوباره بازی میبینید که همه چیز درست شده است.
حالا یک آبجکت با نام Sword بسازید.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
پس از ایجاد رویداد های on Create و on Loop چهار متغیر سراسری بصورت زیر تعریف کنید :
کد:
var sword_id;
var sword_angle;
var mouseX,mouseY;
در رویداد Start تصویر شمشیر را لود می کنیم و زاویه را برابر 0 قرار می دهیم :
کد:
sword_id=load_texture("sword_simple.png");
set_origin(sword_id,9,80);
sword_angle=0;
در رویداد Main شمشیر را در وسط صفحه رسم می کنیم :
کد:
draw_sprite(sword_id,400-get_width(sword_id)/2,300-get_height(sword_id)/2,255);
حالا می خواهیم کاری کنیم که شمشیر با چرخش دور پلیر، همیشه جهتش به سمت ماوس باشد.
بنابراین :
کد:
sword_angle=lookAt(sword_id,mouseX,mouseY);
متغیر های mouseX و mouseY را در رویداد MouseMove مقدار دهی کنید :
کد:
function onMouseMove (e){
mouseX=e.X;
mouseY=e.Y;
rotate(sword_id,sword_angle);
}
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
خسته نباشید.
