توسعه بازی های تحت وب با کتابخانه EASELJS

آمدن HTML5 در بزرگی از امکانات بسیار جذاب را به دنیای ما توسعه دهندگان باز کرده است. 

ایده‌ی اینکه می توانید به سرعت بازی های دو بعدی و سه بعدی را خلق کنید و مستقیما آن ها را در مرورگر اجرا نمایید آن هم تنها با دستورات ساده جاوا اسکریپت و بدون استفاده از یک کامپوننت خارجی و عجیب و غریب کافی‌ست که شما علاقه مند به حوضه بازی سازی و کار در این حوضه با استفاده از جاوااسکریپت و HTML5 شوید. بعد از آنکه شروع به انجام چنین کاری کردید متوجه می شوید که به چه میزان موارد جالب و جدیدی وجود دارد که باید برای ساختن ایده‌تان و تبدیل آن به واقعیت یاد بگیرید. البته ممکن است در اوایل کمی گیج شوید و یا اینکه وحشت کنید.

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

یکی از این توسعه دهندگان عالی که می گویم یک توسعه دهنده کانادایی به نام Grant Skinner است که فریمورکی را به نامEaselJS  درست کرده و ما قصد داریم تا در رابطه با آن در این مقاله صحبت کنیم.

چرا EaselJS ؟

فریمورک های بسیار زیادی وجود دارند که کار با HTML5 و ساخت بازی را بسیار ساده تر می کنند. در این بین EaselJS یکی از ساده ترین و بهترین مورد برای یک شروع سریع و عالی است.

یادگیری با انجام دادن

یکی از بهترین راه های یادگیری انجام برخی تمرینات است. پس ما قصد داریم در این مقاله شیوه ساخت یک بازی ساده را به شما آموزش دهیم. بازی ساده ما این است: شما یک معلم هستید و همه دانش آموزان از شما متنفرند –حالت طبیعی!- هدف شما در این بازی این است که به سلامت از در خروج بیرون بروید، این در حالی است که دانش آموزان با میوه های‌شان قصد دارند شما را بکشند. اگر شما موفق شوید، به امیدواری می رسید که همه معلم ها دوست دارند به آن برسند.

طرح ریزی اولیه

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

• پشت زمینه برای دنیایی که شما قرار است بسازید
• ساختن شکل کلی (برای کاراکترها و اشیا)
• افکت های صوتی
• موسیقی
• برای مدرسه نیاز داریم تا مواردی زیر را داشته باشیم:
• پشت زمینه کلاس
• تخته سیاه
• کاراکتر معلم
• کاراکتر دانش آموزان
• خلق میوه ها
• صدای ضربه میوه ها
• یک موسیقی اصل برای پشت زمینه بازی

هرچند که به شما توصیه میکنم که این پروژه را با نگاهی ایزومتریک با نمایش جزئیات کامل از داده ها بسازید اما من سعی می کنم همه اشکال را در ساده ترین حالت ممکن با استفاده از دایره ها و معکب و... رسم کنم.

خب من برای اینکه کارها سریع‌تر انجام شود بجای رسم کردن شکل و استفاده از Canvas از تصاویر SVG استفاده کرده‌ام. هرچند که مطمئنا به این شکل بازی جذابی نخواهد بود اما به یاد داشته باشید که ما در این مقاله قصد داریم تا کارایی درستی را داشته باشیم نه اینکه بازی زیبایی بسازیم.

خب در این بازی من از تصاویر مربوط به موارد زیر استفاده کردم:

• زمین
• نیمکت
• معلم
• دانش آموز
• سیب
• هدف

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

پایه های بازی

پایه های بازی که قرار است وجود داشته باشد عبارت است از موارد زیر:

• سطح طراحی
• شناسایی رویداد KeyDown
• شناسایی برخورد
• هوش مصنوعی
• تصادفی سازی

شروع با سطح طراحی این بازی کار واقعا ساده است. تنها نیاز داریم تا پشت زمینه ای داشته باشیم که اندازه آن را برابر 500 x 300 قرار دادیم.

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

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

خب بیاید شروع به اجرایی کردن ایده ها بکنیم

اولین کاری که باید بکنید این است که EaselJS را به پروژه خود اضافه نمایید. برای اینکار کافی است قطعه کد زیر را به کدهای‌تان اضافه نمایید:

<script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>

بعد از آن باید کاری کنید که با بارگذاری صفحه تابع init() فراخوانی شود. برای اینکار می توانید رویداد onload

را در تگ body به صورت زیر قرار دهید:

<body onload="init();">

حال باید از شئ Canvas برای ساختن صفحه‌تان استفاده کنید، برای اینکار کدهای زیر را بین تگ body قرار دهید:

<canvas id="myCanvas" width="500" height="300"></canvas>

در این دستور شئ Canvas با پشت زمینه انطباق اندازه‌ای دارد، اما ممکن است بعضی وقت ها بخواهید که Canvas را بزرگ تر از پشت زمینه قرار دهید.

لایه بازی را در EaselJS  یک «scene» می نامیم. Scene درست روی مورد دیگری به نام «stage» اجرا می شود. پس تمام شخصیت ها و المان های ما برای اینکه بخواهند در صحنه حضور داشته باشند ابتدا باید در استیج قرار بگیرند. برای اینکار باید در تابع init تمام موارد را فراخوانی کرده و همانطور که در دستورهای قبلی انجام دادیم با بارگذاری صفحه تابع مورد نظر باید فراخوانی شود. در قطعه کد زیر ما قسمت های مختلف بازی را داخل تابع init فراخوانی کرده‌ایم. 

<script>
  function init() {
    stage=new createjs.Stage("myCanvas");
    backgroundImg=createjs.Bitmap("background.svg")
    desk=new Image();
    desk.src="desk.svg";
    teacher=new Image();
    teacher.src="teacher.svg";
    student=new Image();
    student.src="student.svg";
    apple=new Image();
    apple.src="apple.svg";
    exit=new Image();
    exit.src="exit.svg";
  }
</script>

خیلی ساده است! درسته؟ هیچکدام از این دستور ها یک شکل را ایجاد نمی کنند بلکه تنها تصویری را از یک منبع لود می کنند. منظور از اسم تابع همان Initialization یا مقداردهی اولیه است که برای این ساخته شده تا قبل از انجام هر کاری مواد مورد نیاز را در اختیار داشته باشیم.

حال نوبت آن است که تمام موارد را پیاده سازی کنیم. برای اینکار کافیست تابع زیر را بعد از کروشه تابع قبلی و قبل از </script> بنویسید:

drawEverything();

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

function drawEverything(){
  addBackground();
  addExit();
  addTeacher();
  for(i=0;i<4;i++){
    addDesk(i);
    addStudent(i);
  }
}

حال باید تابع های نوشته شده داخل تابع drawEverything(); را نیز نوشته و مقداردهی کنیم. 

 function addBackground(){
  bg=new createjs.Bitmap(bg);
  stage.addChild(bg);
}

متد addChild  استفاده شده در این دستور به شئ های والد، شئ های دیگری اضافه می کند. در این مثال شئ stage والد شئ background است. حال برای بقیه قسمت ها نیز درست همین کار را انجام می دهیم.

function addDesk(num){
  var randX=Math.floor(Math.random()*450);
  var randY=Math.floor(Math.random()*250);
  desks[i]=new createjs.Bitmap(desk);
  desks[i].x=randX;
  desks[i].y=randY;
  stage.addChild(desks[i]);
}
function addStudent(num){
  var randX=Math.floor(Math.random()*450);
  var randY=Math.floor(Math.random()*250);
  students[i]=new createjs.Bitmap(student);
  students[i].x=randX;
  students[i].y=randY;
  stage.addChild(students[i]);
}
function addExit(){
  exit=new createjs.Bitmap(exit);
  var randX=Math.floor(Math.random()*450);
  exit.x=randX;
  exit.y=1;
  stage.addChild(exit);
}
function addTeacher(){
  teacher=new createjs.Bitmap(teacher);
  teacher.x=50;
  teacher.y=250;
  stage.addChild(teacher);
}

حال به تابع اصلی init برگشته و قبل از بسته شدن آن دستور زیر را قرار دهید:

stage.update();

حال اگر این برنامه را اجرا کنید متوجه می شوید درست مانند چیزی که در ذهن بود اجرا خواهد شد. تمام تصاویر در جای خودشان قرار گرفته اند. درست است که ظاهر چندان زیبایی ندارد اما مهم آن است که به خوبی کار می کند. اگر نتیجه مناسبی را نتوانستید پیدا کنید قبل از هرگونه تغییر آن را در مرورگرهای دیگری نیز امتحان کنید، ممکن است برخی از آن ها به خوبی از این فریمورک و ویژگی های آن پشتیبانی نکنند. یکی از راه های دیگر بجای ساختن شکل ها یا قرار دادن SVG استفاده از bitmap است، با وجود آنکه برنامه را سنگین می کنند اما به شما دسترسی بیشتری برای ویرایش و تغییر اندازه تصاویر را می دهند. 

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

• تابعی برای تشخیص به هم خوردن شئ های مختلف
• تابعی برای حرکت اشیا
• تابعی برای جواب دادن به رویدادهای کیبورد
• تابعی برای جواب دادن به اکشن های کاراکترها
• و سعی کنید بازی را تا زمانی که پایان می یابد در یک حلقه نگه دارید

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

منبع