اموزش ساخت بازی به وسیله MonoGame

[silsin]

* یکمی دیر شد ولی بلاخره این قسمت رو هم نوشتم
قسمت 7 :


همانگونه که این فریم ورک از کارایی بالایی برخوردار است به طبع نیز دارای مشکلاتی جدی نیز می باشد.
در ابتدای شروع این تاپیک نیز به این نکته اشاره کرده ایم که MonoGame یک پورت از فریم ورک XNA شرکت مایکروسافت می باشد . بنابراین به طبع اکثر ویژگی های پدر خود را نیز به ارث خواهد برد.
اگر چه مشکلات عمده فریم ورک MonoGame که هنوز هم در حالت توسعه می باشد در نسخه های متعدد که تا کنون ارائه میشود برطرف شده ولی هنوز به خاطر وابستگی به XNA برخی از محدودیت ها در آن به اسانی مشاهده می شود.
یکی از این مشکلاتی که به این قسمت از اموزش ها نیز ارتباط دارد مربوط به بخش ساخت Content و پکیج گیری آن به سبک خود فریم ورک جهت استفاده و امنیت آن می باشد.
سابقا در xna شیوه content managment ای به صورت طبقه بندی کردن فایل ها و سپس تغییر فرمت آنها در قالب پسوند XNB می باشد که در بخش های قبلی مورد بررسی قرار گرفت .
متاسفانه با قطع شدن پشتیبانی مایکروسافت از XNA علاوه بر عرضه نشدن این فریم ورک پشتیبانی آن نیز در ویندوز 8 و ویژوال استدیو 2012 نیز تقریبا قطع شده و اگر می توان آن را با ترفند هایی بر روی نسخه های بالاتر نصب کرد اما به واقع ویندوز 8 محدودیت های بسیاری را ایجاد خواهد کردکه البته چاره این مشکل در اینجا استفاده از پورت های xna نظیر همین MonoGame می باشد .
در XNA ساختار مدیریت Content ای وجود دارد که همانند توضیح قبل می توان مدیریت انواع منابع شامل تصاویر - صوت و غیره ... را در بازی بر عهده بگیرد و این مسئله مهمترین جزئ یک بازی می باشد بنابراین به طبع ما انتظار خواهیم داشت که MonoGame نیز همین امکانات را نیز داشته باشد اما متاسفانه در حال حاظر استفاده از این بخش در ویندوز 8 و ویژوال استدیو 2012 و نسخه ultimate ویژوال استدیو 2010 امکان پذیر نمی باشد . همچنین افزونه ان تا این نسخه هنوز به Xarmin Studio اضافه نشده که خود این امر می تواند برای محصولات تولیدی ما مشکل ایجاد کند . ( که البته با پیگیری هایی که به شخصه انجام دادم گفتن که توی نسخه جدید این مشکل رو برطرف می کنند) . برای رفع مشکل چندین راه پیشنهاد شده است :
1- استفاده از windows mobile sdk :
استفاده از این sdk به خاطر اینکه هنوز پشتیبانی مایکروسافت بر روی این پلتفرم قطع نشده می تواند امکان استفاده از بخش مربوط را برای ما فراهم کند .
2- استفاده از Content Manegment خود Xna :
می توان با استفاده از این قسمت در خود xna ابتدا منابع را به فرمت فریم ورک تبدیل کرد و سپس آن را در MonoGame استفاده کرد
اگر چه به این نکته اشاره شد که نمی توان به صورت مستقیم xna را بر روی ویندوز 8 نصب کرد اما می توان به صورت نصب اجزای آن به این قسمت دسترسی داشت
در حال حاظر به خاطر این باگ کار را بر روی ویژوال استدیو سویچ می کنیم
((همچنین یک راه ترکیب نیز وجود دارد که درصورت به وجود نیاوردن مشکل در بخش های اینده به آن اشاره خواهد شد))



برای این کار ما باید ابتدا xna را بر روی ویژوال استدیو نصب کنیم .
پس از نصب و جهت ساخت XNA Content Project مراحل زیر را انجام دهید :
ویژوال استدیو را اجرا کرده و یک پروژه جدید از نوع Windows Game ایجاد کنید


همانطور که در سمت راست پروژه نیز مشاهده می کنید ساختاری همانند MonoGame به وجود امده و این دلیل آن است که گفته بودیم این پورتی از Xna است .
حال باید منابع خود را وارد آن کنیم .
برای چندمین بار جدول منابع قابل پشتیبانی توسط این فریم ورک را تکرار می کنیم :

فایل های سه بعدی : .x, .fbx
تصاویر و تکسچرها : .bmp, .dds, .dib, .hdr, .jpg, .pfm, .png, .ppm, .tga
اصوات : .xap (an XACT audio project), .wma, .mp3, .wav
فونت : .spritefont
و همچنین افکت ها : Effects

جهت انجام این کار فایلی را در نظر می گیریم .
به عنوان مثال فایل زیر :



در محیط ویزوال استدیو و پروژه windows Game فریم ورک Xna در سمت راست بر روی windowsGame4content در شکل زیر راست کلیک کرده و پوشه جدیدی با نام دلخواه مثلا (Content) ایجاد کنید

حالا باید فایل خود را وارد این پوشه کنیم . بر روی پوشه راست کلیک کرده و سپس از طریق کلیک بر روی گزینه شکل زیر و یا فشردن کلید های shift + alt + a فایل فوق را وارد کنید .



بر روی فایل کلیک کنید در قسمت Properties آن می توانید مشاهده کنید که گزینه های متعددی وجود دارد که از طریق ان ها می توانید نوع کامپایل و پکیج شدن فایل منبع خودتان را تعیین کنید به عنوان مثال در فایل فوق من Content خود را بر روی Texture تعیین کردم .

توجه کنید که دو گزینه فوق تنظیماتی جهت وارد کردن منابع و همچنین نوع پردازش آن ها در بازی است . که باید تنظیم ان ها برای بازی مورد توجه قرار گیرد . (بررسی بیشتر گزینه های این بخش در قسمت های اینده)


سپس با استفاده از Build > Build Solution
و یا گزینه ctrl + shift + b پروژه را یک باز از اول Build کنید .
حالا با رفتن به مسیر

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

می توانید مشاهده کنید که فایل شما با نام Arrow.xnb ایجاد شده است .

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]


* مسیر پیش فرض ویژوال استدیو برای ذخیره پروژه ها : C:/Users/[Username]/Documents/Visual Studio 2010
حالا باید این پکیج را وارد MonoGame کنیم .
پروژه جدیدی از نوع MonoGame Windows OpenGl ایجاد کنید .

سپس بر روی پوشه Content خود راست کلیک کرده و پس از انتخاب گزینه Add > Add Existing فایل Arrow.xnb که در xna و پوشه مربوط به آن ساخته شده را وارد کنید .

توجه داشته باشید که برای وارد کرد آن نیاز است تا در پنجره انتخاب فایل نوع فایل را All File انتخاب کنید .

پس از وارد کردن آن بر روی فایل وارد شده کلیک کرده تا تنظیمات آن در سمت راست و پایین صفحه نمایش داده شود.
سپس Build Action آن را بر روی Content و Copy to Output Directory آن را بر روی Copy Always قرار دهید

سپس پروژه را یک بار Build کرده تا فایل به پوشه پروژه شما منتقل شود .
با استفاده از این کار ما توانستیم فایل را وارد MonoGame کنیم . اکنون باید از آن استفاده کنیم
در بخش قبل با چگونگی استفاده از یک تکسچر اشنا شدید . اکنون دوباره آن مراحل را برای فایل فوق تکرار می کنیم .
متغییری از نوع Texture2d با نام Arrow ایجاد کنید . ما این متغییر را از نوع سراسری تعریف می کنیم

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

حال در متد LoadContent تکسچر فوق را وارد می کنیم

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

سپس آن را بر روی سکانس بازی ترسیم می کنیم .
برای این کار کد ترسیم این تکسچر را به متد Draw کلاس Game خود اضافه می کنیم .

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

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









پایان بخش 7

[silsin]

قسمت 8 :
گرافیک دو بعدی !!!!
در این قسمت ما نگاهی به موجودیت گرافیک دو بعدی خواهیم داشت. گرافیک 2 بعدی و یا به اختصار 2d یکی از شیوه های نمایش تصویر بوده که در آن تنها شاهد طول و عرض یک تصویر هستیم . به عبارت دیگر استفاده از گرافیک دو بعدی می تواند در ساخت یک بازی بسیار کاربردی باشدبعلاوه اینکه ما می توانیم تماما بازی خود را به صورت دو بعدی بسازیم . برای درک بهتر این موضوع می توان موارد کاربرد گرافیک های دو بعدی را از جمله : منو ها - HUD ها و یا Spash Screen ها نام ببریم که از موارد بسیار کاربردی این گونه گرافیک ها است که در دنیای بازی های سه بعدی امروزی بیشتر به چشم ما امده است . در ادامه می خواهیم دنیای دو بعدی را بیشتر بررسی کنیم .


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



در تصویر فوق می توانید نحوه ترسیم یک تصویر دو بعدی را مشاهده کنید.
همانطورکه پیش از این نیز بیان شد تصاویر دو بعدی تنها دو محور را در اختیار دارند x و y طول و عرض همانطور که در تصویر فوق می بینید تصویر فوق از مبدائ 0 و صفر شروع می شود و دو عنصر مختصاتی این سیستم تشکیل عرض و ارتفاع را در تصاویر رسم شده خواهند داد .




اسپرایت ها :
در گرافیک کامپیوتری ما اسپرایت را به صورت یک تصویر دو بعدی مشاهده می کنیم . در حقیقت این تصاویر در بازی و محصول ما کاربرد بسیاری دارند . چه ار ترسیمات دو بعدی در بازی و چه حتی در محیط سه بعدی . به عبارت دیگری می توان اسپرایت ها را تصاویر متحرک دو بعدی نیز نامید چرا که تقریبا اگر بخواهیم در محیط اینترنت به دنبال این چنین تصاویری بگردیم بیش از 80 در صد نتایج به تصاویر کوچک پیکسلی مترحک ختم خواهد شد. می توان این گونه نیز تعریف کرد که تقریبا تمامی اجزای دو بعدی سکانس ما را می توان به صورت اسپرایت در نظر گرفت (توجه داشته باشید تقریبا !! ) همچنین این اسپرایت ها علاوه بر محیط های دو بعدی در محیط های سه بعدی نیز کاربرد دارند . همانند کاربرد این تصاویر متحرک در ساخت سیستم های پارتیکل و یا حتی استفاده از آن به عنوان یک مدل (محیطی را در نظر بگیرید که از اسپرایت به عنوان عمق یک محیط استفاده شود . مثلا برای نمایش کوه ها و غیره .....)
در ادامه بخش های اینده به چگونگی استفاده از این گونه تصاویر خواهیم پرداخت
پایان بخش 8

[silsin]

قسمت 9 :
تمرین 1 : نقاشی فضایی!!
در این قسمت چگونگی استفاده از تصاویر و در کل رسم سکانس های دو بعدی را در صفحه بازی خواهیم اموخت .
منابع مورد استفاده :
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]


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




شروع تمرین :
در قسمت های قبلی با مفاهیم مورد نیاز این مثال و تمرین اشنا شده ایم .
اموختیم که چگونه منابع را وارد کنیم
و مفاهیم سیستم مختصات دو بعدی را نیز تا حدودی بررسی کرده ایم .
اکنون با مثالی این مفهوم را به صورت عملی نمایش خواهیم داد.
نرم افزار کد نویسی خود را اجرا کنید :
(همانطور که در قبل نیز به آن اشاره شد برای مقایسه کاربرد دو ادیتور معرفی شده ویژوال استدیو و Xarmin Studio به تناوب هر دو را مورد استفاده قرار خواهیم داد)
من در این تمرین از ویژوال استدیو استفاده خواهم کرد .
پروژه جدیدی از نوع MonoGame Windows OpenGl Project ایجاد کنید

همانطور که با چگونگی وارد کرد کنتنت ها یا همان منابع در قسمت های قبل اشنا شده اید سه تصویر تمرین فوق را وارد بخش Content های این پروژه کنید .
اکنون کلاس Game را اجرا کرده و شروع به کد نویسی می کنیم .
ابتدا باید متغییر هایی برای نگه داری این سه تصویر تعریف کرد .
سه متغییر فوق را به صورت سراسری تعریف می کنیم .

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

تا اینجای کار ما سه متغییر مورد نیازمان را که از نوع تصاویر دو بعدی هستند را تعریف کرده ایم .
اکنون باید آن ها را وارد کنیم .
همانطور که می دانید برای این کار باید وارد کردن این منابع را در متد LoadContent انجام دهیم .
سه دستور زیر را به این متد اضافه کنید :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

حالا سه تصویر شما در بازی بارگزاری شده و اماده استفاده هستند
اکنون باید آن ها را رسم کنیم .
SpriteBatche :
SpriteBatche یکی از دستورات مهم در زمینه رسم تصاویر دو بعدی می باشد . SpriteBatche شامل متدهایی است که برای رسم تصاویر دو بعدی در سکانس به کار می رود.
برای استفاده از ان باید ابتدا یک نمونه سازی از ان را انجام دهیم .
اگر چه به صورت پیش فرض این متغییر و نمونه سازی ان انجام شده است اما جهت انجام این کار ابتدا متغییر را به صورت زیر :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

و سپس نمونه سازی ان را در متد LoadContent به صورت زیر انجام می دهیم :

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

جهت رسم تصاویر دو بعدی با استفاده از این دستور ما باید به متد Draw آن دسترسی داشته باشیم .
متد Draw این دستور شامل بخش های زیر می شود :
1- نام تکسچر : همان تکسچری که در متد LoadContent آن را مقدار دهی کرده ایم .
2 - مختصات طول - عرض و محل قرار گیری بر روی تصویر
3 - رنگ


برای رسم باید این کار را در متد Draw انجام دهیم .
در متد Draw ایتدا شروع و پایانی برای این رسم در نظر می گیریم .

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

حال با استفاده از متد Draw شیئ ایجاد شده Sprite Batch اولین تکسچر را رسم می کنیم .

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

پس از اجرای پروژه می توانید خروجی آن را مشاهده کنید :



در ادامه دو تصویر بعدی را نیز با قرار دادن در ادامه این دستور و در متد Draw رسم خواهیم کرد .

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

* پارامتر های به کار برده شده در قسمت مختصات رسم تصاویر :
در اولین رسم ما Rectangle را داریم که شامل مختصات زیر است :
محل قرار گیری در صفحه :
طول - عرض
اندازه رسم :
طول - عرض


در دو رسم بعدی ما تنها یک محور 2 بعدی با نام Vactor داریم که فقط مختصات رسم ها را دریافت کرده و بر روی نمایش تکسچر اعمال می کنند و برعکس اولی نقشی در تغییر طول آن ها ندارند.
پس از اجرا می توانید خروجی را مشاهده کنید :





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

[silsin]

قسمت 10 ام از سه شنبه هفته اینده (کار دارم به خدا )

[lord arthas]

اینا که کداش تقریبا همون XNA عه :|

[silsin]

بله بله تقریبا شبیه هم هستن با این فرق که امکاناتش MonoGame رو بیشتر کردن - کد نویسی رو تا حدودی ساده تر کردن - و صد البته پلتفرم های خروجی اون رو هم اضافه کردن و یه سری چیزای دیگه .......
بد نیست یاد گرفتنش میشه یه جور یادگیری تکمیلی در کنار xna دونستش که اگه xna بلد باشی این رو هم می تونی خیلی سریع یاد بگیری

[parvizamd]

حسین جون ای ول داری هرچند من از هیچ کدومش خوشم نیمی اد.

[iload]

حسین جون ای ول داری هرچند من از هیچ کدومش خوشم نیمی اد.

سلام

پرویز یعنی این حسن رو بیچاره کردیا ! بابا حسین نیست حسنه . حسن - حسن . چند بار بگو یادت بمونه .

[silsin]

قسمت 10 :
بخش اول
اشنایی با تکنیک تکسچر اطلس :

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

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

می توان مشاهده کرد که برای به حرکت در امدن یک و یا دو قدم مجموعه تصاویر پشت سر همی از هر فریم تغییر حرکت به وجود امده که با نگاه به این تصویر اگر ان را ده فریم فرض کنیم در هر فریم تغییرات از شروع به حرکت تا پایان حرکت رسم شده است .
از کاربرد های این گونه های اسپرایت ها یا همان تصاویر انیمیشنی دو بعدی می توان به اکتور های صحنه اشاره کرد . کارکتر اصلی - دشمنان - اسلحه - پارتیکل - پرنده و حتی ایتم ها .....
در مثالی دیگر می توان کارکتر زیر را در نظر داشت :

در صورتی که مثلا بخواهیم مثلا این کارکتر را در حالت راه رفتن مشاهده کنیم ابتدا باید به اندازه کافی کنترل آن را در اختیار بگیریم تا در هر جای سکانس که می خواهیم به حرکت در بیاید و سپس باید حالات حرکت آن را نیز بر روی صفحه ترسیم کنیم . در حالت تصاویر Gif مشاهده می کردیم که هر کدام از حالات انیمیشن به صورت تصاویر جداگانه پشت سر هم اجرا می شد که در اینجا مطمئنا کاربردی ندارد که چون ابتدا سرعت اجرای آن و کیفیت نسبتا پایین است و در ضمن نمی توان از تصاویر پشت سر هم در اکثر انجین های ساخت بازی جهت خلق اسپرایت انیمیشن استفاده کرد (اکثرا) جهت بر طرف شدن این مشکل از تکنیکی که آن را اطلس می نامیم استفاده می کنند . در این تکنیک به جای استفاده از تصاویر جدای تکنیک Gif که پشت سر هم اجرا می شوند تمامی تصاویر را به همراه تغییرات در کنار هم قرار می دهیم . مانند تصویر زیر :

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

4 3 2 1
8 7 6 5
12 11 10 9
16 15 14 13

[ehsan_wwe]

مرسی خیلی عالی بود شرمنده یه نه ماهی درگیر کارو زندگی شدم
خیلی آموزش خوبی بود ممنون