كيفية تصميم العاب الفلاش

كيفية تصميم العاب الفلاش!!

السلام عليكم ورحمه الله وبركاته
أختي ساكنة بالنت هذه هي الدروس :
هاي الدروس :

رح نستخدم الفلاش 8 أو الفلاش 9 بس بشرط action script2.0

بسم الله نبدأ

فهرس الدروس اللي تم عملها (متجدد):
السلسلة الأولى:
1- مقدمة لعمل لعبة ناجحة
2- تصميم خوارزمية للعبة
3- تصميم الرسوم وبرمجتها المبدئية
4- تحريك Object على الشاشة
5- البرمجة النهائية للعبة

السلسلة الثانية:
1- مقدمة اللعبة الثانية (الفكرة)
2- الخوارزمية وتصميم الرسوم
3- تحريك الأجسام المبدئي
4- تحريك الأجسام 2
5- تحريك الأعداء
6- تحريك الأعداء 2
7- التحكم بإطلاق النار

الدرس الأول: مقدمة لعمل لعبة ناجحة
لو حبينا نشوف شو مقومات أي لعبة بغض النظر عن البرنامج المستعمل رح يطلع معنا الأتي:
القصة - مستوى الرسومات - أسلوب العب(game paly) - الموسيقى والأصوات

في كثير عوامل أخرى ... عند بعض الناس القصة هي الأهم في اللعبة زي
محبين ألعاب RPG (أنا منهم) وعند البعض gameplay بس بالنسبة لألعاب الفلاش
game play أنا برأيي هو ألأهم ...
لأن بكل بساطه أحنا بنلعب ألعاب الفلاش للتسلايه مش عشان نقعد نختم ونفتح مراحل فيها

لذلك الخطوة الأولى لعمل لعبة ناجحه : فكرة جميلة لـ game play
طبعا ألأفكار ما بتخلص بس بدها كاسة شاي وقعدة وأكيد الفكرة بتطلع

طيب ... طلعنا فكرة وبعدين ؟؟
بنروح على الكمبيوتر وبنشغل الفلاش ونبلش شغل!!!

لأ .. أكبر خطأ بنعمله هو ان نبلش برمجة مباشرة ... في علم Software Enginering
تعتبر البرمجة أخر مرحلة في التصميم وتشكل أخر 10% من الشغل!!!

طيب شو نسوي؟؟
اللي لازم نعمله هو انه نمسك ورقة وقلم ونبلش نعمل خوارزمية (algorithm) للشغل

طيب أنا مش محترف في البرمجة وعمري ما عملت خوارزمية !!
مش مشكلة ، الشغلة سهلة كتير بس بدها شوية تنظيم ورح نحكي عنها بالتفصيل في الدرس الثاني ان شاء الله

نبلش نشوف شو بدنا وشو بلزمنا في البرمجة ونحفظه كله بعدين بنبلش شغل؟!

طبعا لأ ... المفروض نطبق اللي بنتعلمه أول بأول في اللعبة أو رح نمل وعمرها اللعبة ما رح تخلص
عشان هيك .. بشوف شو بلزمني أتعلمه في البرمجة عشان أعمل فكرة معينة بس وبطبقه في اللعبة
بعد فترة رح تشوف إنك صرت محترف في البرمجة ( يعني عارف كيف تشتخدم اللي تعلمته مش حافظ كيف تكتبه بس)

وشوي شوي رح تصير محترف وتقدر تعمل ألعاب إحترافية وممتعة بشكل رائع!!
وبتعرفوا شو أحلى شعور ؟؟
لما تعمل لعبة .. ويشوفها شخص ويحكيلك لعبتك روعة كيف عملتها انت شخص مميز!
والله انو شعور النجاح بعمل لعبة أحلى الف مرة من انك تلعب لعبة جاهزة!!

هيك خلص الدرس الأول
وان شاء الله الدرس القادم: تصميم خوارزمية للعبة
أرجو الدرس يكون مفيد وتكون السلسلة فيها خير للجميع

الدرس الثاني : تصميم خوارزمية للعبة

بسم الله
في البداية شو هي الخوارمية؟؟
الخوارزمية أو algorithm هي عبارة عن تصميم للكود لكن بلغتنا

لسا ما فهمت ...
طيب .. لو مثلا شوف هاي الحالة:
بدي اللاعب يجمع مجموعة من الفواكه اللي موجوده على الشاشة عن طريق
الضغط عليهم بالماوس .. إذا وصل المجمزع لحد 10 طلع رساله احكي فيها
للاعب انه فاز
بدنا نعمل خوارزميه الها شوف كيف ...
رح اكتبها بالنجليزي وبعدين رح اشرحها:
variable counter
counter = 0
with every click on an object
counter = counter +1
this object visible = false
if counter = 10
show message "You have won"1

الشرح:
اعمل متغير اسمه counter عشان يعد الفواكه
خلي counter=0
مع كل كبسة على الفواكه زيد counter بمقدار واحد
اخفي الفواكه اللي اختارها اللاعب
اذا وصل العداد لحد 10 طلع الرسالة

هذا المثال بسيط بس عشان نشوف كيف رح ننظم الشغل وما ننسى إشي

طيب .. والأن ايش رح نعمل؟؟
في هاي الدروس رح نجزئها لـ 3 مستويات
رح نعمل لعبة للمستوى begginer
ومستوى Normal
ومستوى advance

اليوم رح نعمل الفكرة للعبة من المستوى الأول ونعمل الخوارزمية لها

الفكرة :
اللاعب رح يكون يتحكم بالماوس حيث عليه تجميع فواكه موجوده على الشاشة بالضغط عليها
هاي الفواكه بتظهر بمواقع مختلفة بشكل عشوائي (فاكهه واحده في كل مرة)
مع كل فاكهه بيجمعها رح يزيد عنده score
على الشاشة في وحش .. هدف الوحش الأمساك بالماوس
لو لمس الوحش الماوس يخسر اللاعب
مع كل شكل اللاعب بيجمعه سرعة الوحش رح تزيد

أرجو الفكرة تكون واضحة وهاي صورة للفكرة عند انتهائها:

طيب .. طلعنا فكرة والأن الخوارزمية:

اجعل الفاكهه تظهر بمكان عشوائي على الشاشة
اجعل الوحش يستمر بملاحقة الماوس

اذا ضغط اللاعب على الفواكه
{ زيد score بمقدار واحد
اخفي الفاكهه
أظهرها في مكان عشوائي جديد
زيد سرعه حركة الوحش }

اذا لمس الوحش اللاعب
{ أوقف اللاعب
أظهر رساله تخبر اللاعب أنه خسر
اظهر score اللي وصل له اللاعب }

هيك انتهت الخوارزمية ... كيف سهله !!
وهيك كمان انتهى الدرس الثاني .. ان شاء الله عجبكم
شو رأيكم إخواني في الشرح ولو فيه غلط أرجو تخبروني

الدرس الثالث : تصميم الرسومات وبرمجتها المبدئية

ليوم ان شاء الله رح نكمل الدرس الثالث وهو بعنوان
تصميم الرسومات وبرمجتها المبدئية

في البداية رح نبلش نجهز مكان العمل ... يعني layers اللي سوف نرسم عليها ... مش راح أشرح كيفية الرسم بالتفصيل لأن هذا مش موضوعنا بس كيف نحضر المشهد

بس المهم أنه نجزء layers للأجزاء التالية:
1- الجزء الأول ( Background Layer) :
في هذا الجزء رح نرسم الخلفيات للعبتنا وممكن تكون أكثر من layer

2- الجزء الثاني (Object Layer):
هنا سنرسم أي كائن يمكن برمجته في اللعبة
زي في مثالنا الوحش و الفواكه

3- الجزء الثالث (Action Layer):
من اسمه هو layer ما في اي رسم بس نضع فيه كودات البرمجة

هاي هي الأجزاء الثلاثة اللي أي لعبة لازم تحتويها

هاي شكل layers بعد عمل السابق:

طيب أنا ما عجبتني رسمتك ، بدي أغيرها!!
مش مشكلة الرسمة والخلفيات انت حر فيها بإمكانك تختار الشكل اللي بيعجبك

طيب خلصت الرسمة ، شو أسوي هسا؟؟
رح نحول كل Object رسمناه الى Movie clip ما دام رح نتعامل معه في البرمجة
يعني حول التفاحة والخفاش الى Movie Clip
الأن رح نحط Objects على المشهد ونعطيها أسماء

دائما إخواني يفضل تسمية أي Object بالطريقة التالية:
1- الأسم معبر ( يعني بلاش من x أو من y
2- أن ينتهي الأسم بأحد الأجزاء التالية حسب نوعه:
mc : movie clip
btn : Button
txt : textArea

يعني الخفاش : bat_mc
التفاحه : apple_mc
شاشة عرض النتيجة : score_txt

طبعا التسمية انت حر فيها بس الطريقة السابقة بتساعدك جدا في نتظيم شغلك

هيك بنكون حطينا الوحش في المشهد وحطينا التفاحة وكل Object له اسم

أخر شغلة رح نعملها في هذا الدرس هي تجهيز المكان اللي رح نبرمج فيه:
طبعا كل البرمجة تقريبا رح تكون في أول فريم من Action Layer
هنا رح نجزء مكان البرمجه بنفس الطريقة السابقة

الأجزاء الثلاثة الرئيسيه:
1- Variables:
يتم هنا تعريف كل المتغيرات اللي رح نستخدمها وإعطاء قيم ابتدائية لها
2- Function:
نتكتب هنا كل functions اللي رح يناديهم اللاعب أثناء اللعب
3- Running function:
نكتب هنا function التي تستمر بالعمل أو التنفيذ طوال فترة تشغيل اللعبة أي لا يتم استدعائها من قبل اللاعب (في مثالنا : جعل الخفاش يلاحق الماوس)

طيب أنا ما فهمت كيف يعني أجزء وشو أحط في كل جزء؟؟
التجزيء ببساطه عن طريق استخدام جمل التعليق (Comments) زي هيك:
اكتب فب أول فريم في action layer التالي:

هذه الصورة تم تصغيرها تلقائيا . اضغط على هذا الشريط لتشاهدها بأبعادها الاصليه . الابعاد الاصليه لهذه الصورة هي 629x353 والحجم هو %3$sكيلو بايت .

أما بالنسبه شو نحط فيه ... ولا إشي !!
رح نحكي شو نحط في الدروس القادمه ان شاء الله

هذا رابط لكل الشغل في هذا الدرس
في الرابط: شكل الخلفية ، شكل الفواكه(إخترت تفاح) ، شكل الوحش (خفاش)
معلش أنا مش كثير منيح في الرسم
الرابط : scene.fla

نهاية الدرس الثالث بحمد الله
ان شاء الله الدرس الرابع رح يكون بعنوان : تحريك Objects على الشاشة

أول شي رح نراجع بعض اللي اشتغلناه لحد الأن
1- رسمنا الخلفية
2- رسمنا الكائنات اللي رح نبرمجها
3- أعطينا أسماء لها
4- جهزنا مكان العمل ومكان البرمجة

طيب هسا شو رح نعمل؟؟
رح نعمل الشغلات الأتية:
رح نقوم بتحريك التفاحة من خلال وضعها في أماكن عشوائيه
رح نجعل الخفاش يلاحق الماوس
سرعة الخفاش رح تزيد مع كل كبسة على التفاحه

في البداية رح نبدأ بتحريك التفاحة:
طبعا كل الشغل الأن في frame الأول من Action Layer

رح نعمل function اسمه locoate
هو المسؤول عن إعطاء المواقع العشوائية للتفاحة ، حيث سنستخدم method في الفلاش
اسمها Math.random لإنشاء أرقام عشواية

ونضع فيه الأتي:
لكي نعدل قميه الأحداثي السيني للتفاحة
root.apple_mc._x = Math.random() * 530_
شرح الجملة السابقة:
root.apple_mc _ : لكي نؤشر على التفاحة
X_ : الإحداثي السيني
Math.random() * 530 : إنشاء رقم عشوائي بين 0 - 530

طيب ليش 530 ؟؟
لأن عرض حيز العمل اللي بنشتغل عليه 550 فلكي نضمن أن التفاحة لن تخرج خارج حيز العمل

لكي تعدل الإحداثي الصادي:
root.apple_mc._y = Math.random() * 380_

نفس الشرح السابق ، وضعنا 380 لكي لا تخرج التفاحة من حيز العمل
(حيز العمل 550 * 400)

هيك حركنا التفاحة .... طيب بس انت حكيت لازم يزيد score ، كيف نعملها هاي؟؟
ببساطة لازم نعمل متغير إسمه Score يكون في البداية = 0 ثم نزيده مع كل كبسة على التفاحة

نعرف متغير في قسم المتغيرات
var score = 0;

طيب هسا بنزيده في function :
score += 10
هيك score رح يزيد بمقدار 10

طيب كيف نعرض score على الشاشة ؟
بكل بساطه إحنا عملنا textArea اسمها score_txt
رح نعدلها كالأتي:
root.score_txt.text = "Score :" + score

طيب لحد الأنا شكل الكود كالتالي:

أخر خطوة نعمل call لهذا function
لازم نسأل حالنا وين لازم هذا الكود يشتغل؟؟
تماما عندما يضغط اللاعب على التفاحة ... إذن أنسب مكان هو داخل التفاحة
نفتح شاشة Action في التفاحة ونكتب:
كالصورة التالية:

لو جربنا السابق .. رح يتغير مكان التفاحة بشكل عشوائي مع كل ضغطه عليها.

طيب كيف بدنا نحرك الخفاش ؟؟؟
هاي بسيطة كمان ... شوف هاي الرسمة...

بإستخدام هاي الرسمة رح نحرك الخفاش اعتمادا على موقع الماوس
يعني لو الماوس على يمين الخفاش (الإحداثي السيني للماوس أكبر) رح يتحرك الخفاش لليمين
لو الماوس على يسار الخفاش (الإحداثي السيني للماوس أصغر) رح يتحرك الخفاش لليسار
لو الماوس تحت الخفاش (الإحداثي الصادي للماوس أصغر) رح يتحرك الخفاش للأسفل
لو الماوس فوق الخفاش (الإحداثي الصادي للماوس أكبر) رح يتحرك الخفاش للأعلى

طبعا رح نعمل function في قسم Running function اسمه moveBat
كالتالي :

شرح الكود:
في جمل if رح نفحص عشان نشوف موقع الخفاش بالنسبة للماوس
إذا تحقق الشرط وعرفنا المكان رح نحرك الخفاش بمقدار معين يعتمد عل سرعة الخفاش
لذا صنعنا متغير اسمه speed... يبدأ بقيمه ابتدائية =1

طبعا فحص الموقع بإستخدام صورة الإحداثيات

هيك صار لازم نعدل شغلة بسيطه في function اللي بيغير مكان التفاحة
ألا وهو زيادة سرعة الخفاش عن طريق زيادة قيمة speed
speed += 1

أخر خطوة ننادي هذا function
طبعا لازم هذا الكود يضل يشتغل لذا رح نناديه بالطريقة التالية:
افتح شاشة Action في الخفاش ( اختاره واكبس F9)
وضع الكود التالي:

الشرح:
عندما يبدأ الفلاش بعرض محتويات هذا الفريم سيظل هذا الكود ينادي moveBat باستمرار

لو جربنا السابق سيظهر الخفاش يلاحق الماوس ، كلما ضغط اللاعب على التفاحة سيتغير مكانها
وسيزيد عنده Score وتزيد سرعة الخفاش

هذا شكل الكود كاملا:

وطبعا ملف العمل اللي اشتغلنا عليم موجود بالرابط في الأسفل
الرابط: scene.fla

نهاية الدرس الرابع بحمدالله ويليه بإذن الله الدرس الخامس والأخير بعنوان:
البرمجه النهائية للعبة

طبعا بعد ذلك رح نبدأ بإذن الله سلسلة دروس أصعب شوي عن برمجه ألعاب متوسطة الصعوبه
ان شاء الله يكون شرحي واضح ، وأي سؤال انا جاهز ويا ريت يا إخوان تعطوني رأيكم
وأي ملاحظة على الشغل

طبعا رح نبدأ باستعراض اللي عملناه في الدروس السابقة
رسمنا الخلفيات ورسمنا الكائنات اللي رح نبرمجها
بدنا يعمل الحركات ; حركنا التفاحة في أماكن عشوائية وحركنا الخفاش ليلاحق الماوس
عملنا Score بيزيد لما نكبس على التفاحة

طيب ... اليوم شو رح نعمل؟؟
اليوم رح ننهي البرمجة ، يعني لو لمس الخفاش الماوس رح تنتهي اللعبة ويطلع score للاعب

كيف رح نعملها هاذي؟
ببساطة لازم نعمل running function جديد وظيفته يتأكد إذا الخفاش لمس الماوس

شو يعني الخفاش لمس الماوس؟؟
يعني لو إحداثيات الماوس تساوي إحداثيات الخفاش

رح نعملها كالأتي:
إعمل running function اسمه checkPos

قبل ما أشرح اللي رح نعمله بدي أشرح شغلة بسيطة
بما أن الخفاش حجمه بيغطي أكثر من بيكسل لذا ما بينفع نعمل الشرط اللي رح يفحص موقع الخفاش على نقطة واحدة ... يعني لازم نفحص مساحة كبيرة شوي
شوف الصورة ورح تفهم..

يعني لازم نفحص المنطقة كاملة اللي بيغطيها جسم الخفاش كالأتي:

هذه الصورة تم تصغيرها تلقائيا . اضغط على هذا الشريط لتشاهدها بأبعادها الاصليه . الابعاد الاصليه لهذه الصورة هي 732x138 والحجم هو %3$sكيلو بايت .

طيب ليش اخترنا 93 ، 26 أو كيف عرفت هاي الأرقام؟
هاي الأرقام هي أبعاد الخفاش وعرفتها من شاشة properties الموجوده أشفل الشاشة

طيب .... والأن شو رح نعمل؟
لما نتأكد ان الخفاش لمس الماوس لازم نوقف moveBat اللي بيحرك الخفاش
ونوقف التفاحة (نخليها غير قابلة للتفاعل مع الماوس) كالأتي:

هذه الصورة تم تصغيرها تلقائيا . اضغط على هذا الشريط لتشاهدها بأبعادها الاصليه . الابعاد الاصليه لهذه الصورة هي 729x149 والحجم هو %3$sكيلو بايت .

باستخدم delete أوقفنا function
باستخدام enabled = false أبطلنا تفاعل الماوس مع التفاحة

أخر خطوة نعرض score للاعب ... كالأتي:
رح نعمل textArea من نوع dynamic text
ونسميها result_txt ... ممكن نجعاها باللوم الأحمر وبخط كبير
طبعا رح تكون خارج مكان العمل لكي ما يراها اللاعب الا في النهاية

طيب ... الأن عندما يلمس الخفاش الماوس رح نعدل القيمة في result_txt
لنضع فيها score ثم سنغير مكانها لتكون في وسط الشاشة كالأتي:

هذه الصورة تم تصغيرها تلقائيا . اضغط على هذا الشريط لتشاهدها بأبعادها الاصليه . الابعاد الاصليه لهذه الصورة هي 728x215 والحجم هو %3$sكيلو بايت .

وهيك بحمد الله بتكون اللعبة خلصت ... الف مبروك !!
جرب اللعبة وان شاء تعجبكم

طبعا هذا رابط للعبة : scene.fla

ان شاء الله أكون قدرت أوصل لكم الفكرة وأنا أسف جدا لو قصرت في شغلة معينه....

هيك انتهت السلسة الأولى بحمد الله وان شاء الله رح نكمل في اليومين الجايات السلسة الثانية اللي رح تكون عن تصميم لعبة متوسطة المستوى

تحياتي ..

اخواني يا ريت اتقدرو تعبي في هاذا الموضوع tongue

واتمنى انه الي عنده اي سؤال يتفضل ويشارك confused

» كيفية تصميم مواقع انترنت ( للمبتدئـين)
» العاب
» برنامج تشغيل العاب ps2 على الكمبيوتر مع الشرح بالصور 100%
» احترف تصميم المواقع
» كورس تصميم مواقع