جزوه آموزشي شماره 1

تهيه شده توسط :‌ علي كسايي
در صورت داشتن هر گونه سوال يا مشكل با آدرس زير تماس بگيريد

Ali_nwdo@yahoo.com

www.persian-designers.com

براي ساخت بازي قبل از هر چيز نياز به يك موتور گرافيكي داريم كه ميتواند 2 بعدي يا 3 بعدي باشد. البته موتور هاي ساخت بازي بسيار زيادند و البته اكثر انها مجاني نيستند و از قيمتهايي بسيار بالايي نيز برخوردارند. براي نمونه شما ميتوانيد موتور هاي 3 بعدي بسيار قدرتمندي را پيدا كنيد كه از توابع فراواني نيز براي ساخت بازي هاي قوي بهره ميبرند ولي چيزي در حدود 100 الي 2000 دلار قيمت دارند. ما در اينجا قصد نداريم به اموزش ساخت بازي با اين گونه موتور هاي گرانقيمت 3 بعدي بپردازيم. بلكه هدف اصلي ما در اين سري اموزشي استفاده از يك موتور قدرتمند و مجاني 2 بعدي مي باشد كه بطور بالقوه توانايي ايجاد محيط هاي 3 بعدي را نيز دارد

موتوري كه ما قصد اموزش ان را داريم يك موتور دو بعدي است كه با امكانات بسيار عالي و جذابش ساخت هر نوع بازي 2 بعدي را ممكن ميكند. از بازي هاي ساده دو بعدي گرفته تا بازي هاي سنگين ايزو متريك مانند عصر امپراتورها - سري بازي هاي سيمز و غيره. البته بايد توجه داشت كه براي ساخت يك چنين بازي هايي شما نيازمند تسلط كامل به برنامه نويسي تحت ويندوز و يك تيم حرفه اي و كاربلد ميباشيد. ولي ساختن بازي هاي ساده تر بعنوان شروع كار هيچ نيازي به دانستن زبان هاي برنامه نويسي ندارد

اينها اولين عكس هاي متحركي هستند كه ما در بازيمان از انها استفاده خواهيم كرد. شما ميتوانيد انها را ذخيره كرده و در قسمتهاي بعدي در هنگام نياز از انها استفاده كنيد

اكنون بدون هيچ گونه بحث اضافه به تشريح ساخت اولين مثال مي پردازيم. لطفا قبل از شروع اين قسمت چند دقيقه اي را صرف گشتن در قسمتهاي مختلف نرم افزار كنيد و بكوشيد تا حد امكان با اسمها اشنا شويد. چرا كه در طول اموزش از انها بسيار استفاده خواهيم كرد

ساخت اولين دموي تکنيکي

(Technical demo) 

دوستان عزيز 
من كوشيده ام تا اين جزوه به ساده ترين صورت ممكن نوشته شود و از همان ابتدا نيز به اموزش برنامه نويسي در اين نرم افزار پرداخته ام. بنا بر اين اگر شما در برنامه نويسي داراي تجربه ميباشيد كه هيچ. در غير اين صورت اين مثال به بهترين وجهي شما را با اصول اوليه كد ها و اسكريپت ها اشنا ميكند. لطفا مراحل ساخت را عينا مانند مراحل جزوه انجام بدهيد و گرنه با مشكل رو به رو خواهيد شد. در صورت داشتن هر گونه سوال ميتوانيد با من تماس بگيريد

در فايلي كه دانلود كرده ايد 3 ست انيميشن وجود دارد. در واقع 3 انيميشن راست-بالا و پايين براي هر كاراكتر. به سليقه خودتان يا بر اساس جزوه ( كاراكتر سبز رنگ ) يك كاراكتر را انتخاب كرده و مراحل زير را انجام بدهيد

ابتدا با کليک کردن بر روي ايکن "اضافه کردن يک شکل" يک عکس متحرک از عکس هاي موجود در اين فايل را لود کنيد

اگر دقيقا ميخواهيد براساس جزوه پيش برويد مطابق شکل روبرو عکس کاراکتر سبز رنگ در جهت راست را لود نماييد

سپس همين مراحل را عينا براي عکسهاي کارکتر سبز رنگ در جهات پايين و بالا تکرار نماييد

توجه داشته باشيد که براي ايجاد جهت چپ از همان عکسهاي طرف راست استفاده ميکنيم با اين تفاوت که تابع "آينه افقي" را بر روي ان اعمال ميکنيم

براي ايجاد جهت چپ کاراکتر از عکس جهت راست ان مراحل زير را انجام بدهيد

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

توجه داشته باشيد که در تمامي عکسها بعد از پايان عمل لود کردن در محل مختصات عکس عدد40 را براي ايکس و عدد65 را براي واي وارد کنيد. در اين حالت چيزي شبيه صفحه مقابل خواهيد داشت

بسيار خوب. تا اينجا در واقع لباسي را که ميخواهيم به تن کاراکترمان بپوشانيم را اماده کرده ايم. مرحله بعد نوشتن برنامه اي براي حرکت دادن کاراکتري است که قرار است در اين مرحله به طور کامل ايجاد کنيم

نکته

حتما عکس هاي لود شده را با اسامي مناسب نام گذاري کنيد مثل شکل مقابل

spr_right / spr_down / spr_up / spr_left

با اين کار در مراحل بعدي کار خود را بسيار راحت ميکنيد

شروع برنامه نويسي

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

زبان موجود در اين موتور "جي ام ال" ناميده ميشود که تا اندازه اي شبيه زبان توربو پاسکال و دلفي است. در واقع شما با يادگيري اين زبان ساده و شيرين تا اندازه اي با پاسکال و دلفي نيز اشنا ميشويد. من سعي ميکنم که کار هر قطعه کد را بطور کامل براي شما توضيح بدهم. با اين حال در صورت بر خوردن به مشکل ميتوانيد با اينجانب تماس حاصل کنيد و من در اسرع وقت سوال شما را جواب خواهم داد

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

با کليک کردن بر روي فضايي خالي در پنجره "حوادث" گزينه "ايجاد" را انتخاب ميکنيم. به شکل مراجعه کنيد

اين تابع به کاراکتر ميگويد که به محض اجراي بازي و فقط در لحظه اول چه کاري انجام بدهد

Event > Event Selector > Create

حال از بين گزينه هايي که در طرف راست صفحه ايجاد شده است به زبانه کد ميرويم و با کشيدن ايکن " اجراي چند خط کد" شروع به نوشتن برنامه ميکنيم. از شکل کمک بگيريد

Code Tab >Excute a piece of code icon > Drag to Action Space

بر روي اين ايکن جديد دابل کليک کرده و کد زير را وارد ميکنيم

Image_single = 0;

توضيحات

همان طور که ميدانيد عکس هايي که ما براي کاراکترمان استفاده کرديم عکسهايي متحرک بودند. بنابر اين ما توسط اين کد به به موتور بازي ميگوييم که در لحظه شروع بازي کاراکتر ما در عکس فرعي شماره 0 اش متوقف شود و در واقع از اجرا شدن انيميشن کاراکتر جلوگيري کرده ايم. زيرا کاراکتر بايد با دستور ما به عقب يا جلو حرکت کند و فقط در حالت حرکت با يد از خود تغيير شکل نشان دهد. نه در حالت ايستاده

نکته

توجه داشته باشيد که دو قطعه کد توسط آندر لاين _ از هم جدا شده اند نه با استفاده از خط فاصله

نکته2

سميکولون ؛ در پايان هر خط کد يادتان نرود

مجددا مانند حالت پيش که در پنجره حوادث حالت ايجاد در لحظه شروع را درست کرديم مجددا اينبار همان کار را با استفاده از دستور صفحه کليدانجام ميدهيم

(شماره 2 در شکل)

و همان طور که ديده ميشود در طي 5 مرحله متوالي بترتيب حالت هاي

no key - left - up - right - down

را ايجاد ميکنيم و مجددا مثل مورد قبلي براي هر کدام از اين حالت ها يک ايکن "اجراي چند خط کد" را به محيط برنامه نويسي درگ ميکنيم

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

شروع ميکنيم

No key

بر روي ايکن برنامه نويسي کليک کرده و کد زير را وارد ميکنيم

image_single = image_index;

حال به توضيح عملکرد اين کد ميپردازيم.قسمت اول کد که تکراري است و ما در قسمت قبلي يکبار از ان استفاده کرديم. اما مجددا براي توضيح بايد بگويم که اين دستور به موتور ميگويد که وقتي هيچ کليدي فشرده نشده دستوري را که مقابل مساوي است را اجرا کند. بديهي است که کد طرف دوم تساوي بايد به يک عدد ختم شود چرا که اين دستور براي کنترل عکس هاي فرعي موجود در عکس اصلي  بکار ميرود. مثلا يک عکس با فرمت جيف ميتواند 10 فرم داخلي داشته باشد. کاراکتر سبز رنگ مثال مابراي هر جهت31 عکس فرعي دارد!!

اما قسمت دوم تساوي به موتور ميگويد که عکس فرعي کاراکتر عکسي باشد که کاراکتر در لحظه رها کردن کليد داشته. بعبارت ديگر همان حالت کاراکتر بعد از رها کردن کليدهاي جهت دار کماکان حفظ شود

Left

حالت

مجددا بر روي ايکني که قبلا براي اين حالت به صفحه درگ کرده بوديم دابل کليک کرده و کد هاي زير را وارد ميکنيم

self.x -= 3;

sprite_index = spr_left;

image_single = -1;

ميتوانيد از شکل مقابل کمک بگيريد

مجددا به تشريح انچه نوشتيم ميپردازيم

self.x -= 3;   OR    self.x = self.x - 3;

اين کد به موتور بازي ميگويد که به محض فشرده شدن کليد چپ کيبورد مختصات کاراکتر را در راستاي محور ايکس در هر گام که هر گام 1/30 ثانيه طول ميکشد3واحد کم کند. يا اينکه 3واحد به مختصات کاراکتر در راستاي منفي ايکس اضافه کند !

با يک محاسبه ساده معلوم ميشود که با سرعت فوق کاراکتر در هر ثانيه به اندازه 3 * 30 = 90 پيکسل درراستاي مشخص شده جابجا ميشود

sprite_index = spe_left;

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

image_single = -1;

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

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

Up

Right

Down

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

ابتدا روي ايکن ايجاد يک اتاق کليک کنيد تا اتاقي مطابق شکل ايجاد شود البته خالي از هرگونه شکل و کاراکتر و همچنين به رنگ خاکستري

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

اگر مراحل را درست انجام داده باشيد بايد چيزي شبيه شکل مقابل را در صفحه مانيتورتان داشته باشيدو اگر جايي را اشتباه کرده ايددوباره به عقب برگرديد و مراحل را مجدد بررسي کنيد. در صورت تداوم مشکل به قسمت مشکل يابي در انتهاي جزوه مراجعه نماييد.

حال به عنوان اخرين مرحله طراحي اين دموي تکنيکي ان را ذخيره کنيد. البته اميدوارم که اين کار را قبلا چند بار انجام داده باشيد !! توجه کنيد که پروژه شما با فرمت جي ام دي ذخيره خواهد شد. علاوه بر ان يک نسخه پشتيبان نيز با فرمت جي بي وان ايجاد خواهد شد که درصورت وارد امدن هرگونه صدمه به فايل اصلي ميتوانيد فرمت اين فايل پشتيبان را به جي ام دي تغيير داده و مثل فايل اصلي از ان استفاده کنيد

تبريک ميگويم. برنامه نويسي و طراحي اولين دموي تکنيکيمان در اينجا به پايان رسيد. اگر تا به اينجا تمامي مراحل را مطابق جزوه انجام داده و موردي را از قلم نيانداخته باشيد بازي شما بايد به درستي اجرا شود. براي اجراي شاهکارتان برروي مثلث سبز رنگ اجرا يکبار کليک نماييد و نتيجه زحماتتان را ببينيد. در صورت عدم اجراي پروژه به قسمت اشکالات احتمالي در پايين اين بخش مراجعه کنيد تا بتوانيد ايراد هاي احتمالي تان را رفع کنيد

اجراي پروژه

اشکالات احتمالي

چنانچه در مراحل ساخت بازي به مشکلي برخورده ايد موارد زير را مجددا چک کنيد. اگر موفق به رفع مشکل نشديد با اينجانب تماس بگيريد

موتور بازي نامهاي کاراکترها را نميشناسد و انها را با رنگ سياه نشان ميدهد؟

نامهايي را که براي عکسهاي جهات مختلف کاراکترتان در موقع لود کردن را انتخاب کرديد مجددا چک کنيد و اطمينان حاصل کنيد که دقيقا همان نام ها را در کدهايتان فراخواني کرده باشيد

کاراکتر در هرجهت نغيير زيادي در مرکز دارد ؟

دقت کنيد که در قسمت لود کردن عکس کاراکتر ايکس و واي را براي همه عکس ها مساوي بترتيب40و65بگذاريد

بازي اصلا اجرا نميشود ؟

ايا در بازي اتاق درست کرده و کاراکتر را در ان فرار داده ايد ؟در غير اينصورت بازي اصلا اجرا نميشود

بازي شروع به اجرا ميکند ولي درست در لحظه شروع پيغام خطا داده و بسته ميشود ؟

احتمالا جايي در نوشتن کد ها اشتباه کرده ايد. مجددا کل کدهايتان را با اين جزوه مطابقت بدهيد

در صورتي که مشکل شما غير از نمونه هاي ذکر شده بود با ادرس زير تماس بگيريد و مشکل خود را مطرح کنيد.در صورت تمايل ميتوانيد به قسمت بررسي مشکلات در سايت

www.persian-designers.com

www.persian-designers.com/forum

مراجعه کرده و مشکل خود را در انجا بيان کرده و از کمک ساير دوستان حاضر در سايت بهرهمند شويد.مطمئنا افرادي هستند که با کمال ميل به سوالات شما پاسخ دهند. براي اطلاعات بيشتر به تالار سايت مراجعه کنيد

براي مشاهده جديدترين بازيهاي ساخت اينجانب به سايت شخصي بنده در ادرس

www.persian-designers.com

مراجعه کنيد. همچنين در اين سايت ميتوانيد نمونه هاي جالبي را براي تست کردن و يادگيري بيشتر پيدا کنيد. کليه موارد اموزشي به صورت رايگان ميباشند.

کليه حقوق اين جزوه اموزشي براي مولف ان محفوظ است

هرگونه تقليد از اين طرح و کپي برداري از مطالب ان ممنوع است

استفاده از مطالب اين جزوه فقط با کسب اجازه مستقيم از مولف ممکن است

براي تماس با اينجانب از ادرس زير استفاده نماييد