XNA: Lesson14 - Models and Meshed

السلام عليكم

نستكمل رحلة دراسة الالعاب الثلاثية الابعاد و مع الدرس الرابع عشر القراءة و التحميل علي الرابط التالي:

https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B6X_tYWvCOy6MDI2ZjViZmItOTM0MS00ODZjLWExYzQtMzFlZDM3OWI5ZDg0&hl=en

XNA - Lesson 14: Drawing the 3D Axis in XNA

بسم الله

في هذا الدرس سوف نقوم برسم اول مشهد ثلاثي الابعاد لنا ...

تحميل و قراءة الدرس علي الرابط التالي:

https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B6X_tYWvCOy6YTdiOGJjNDUtODk4YS00YmY5LThlZTItNDQ5YmI3ZWZhNGZj&hl=en

XNA: Lesson13 - 31- ‪XNA Lights, Camera and Effects

بسم الله 

الدرس الثالث عشر من سلسلة دروس برمجة الالعاب بواسطة اطار العمل XNA

للقراءة و التحميل علي الرابط التالي:

https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B6X_tYWvCOy6ODkyYzM3MTAtNTdiMS00MTU0LWFiMDEtYTFlODg2ODc5NTkz&hl=en

XNA Lesson 12 - XNA Vectors, Metrices and 3D Transformations

السلام عليكم و رحمة الله و بركاته

مع الدرس الثاني عشر من سلسلة دروس برمجة اﻻلعاب الثلاثية اﻻبعاد بواسطة اطار العمل 

XNA

رابط قراءة و تحميل الدرس

https://docs.google.com/leaf?id=0B6X_tYWvCOy6ODI2YWRiODAtYzQ5Ny00YjQxLTljZTktNTk4NDI3ZTYyNjUz&hl=en

XNA: Lesson11 - XNA Vertices and Primitives

السلام عليكم 

مع الدرس الحادي عشر من سلسلة دروس برمجة الالعاب بواسطة اطار العمل XNA: علي الرابط التالي:

https://docs.google.com/leaf?id=0B6X_tYWvCOy6YzAxOGVjODQtZTUyYy00NTllLWI2ZTItMTQwMjM1NWMzM2Ey&hl=en

بالتوفيق ...

XNA: Lesson10 - 3D Coordinate Systems and Projections – النظام ثلاثي الابعاد و الاسقاطات

بسم الله و الصلاة و السلام علي رسول الله

اللهم لا سهل الا ما جعلته سهلا و انت تجعل الحزن اذا شئت سهلا

3D Coordinate Systems and Projections – النظام ثلاثي الابعاد و الاسقاطات
عرفنا في الدورة السابقة نظام الاحداثي ثنائي الابعاد و عرفنا انه يتكون من الاحداثي
X , Y

 اما في النظام ثلاثي الابعاد فيتكون من ثلاثة احداثيات:

X المحور الافقي.

Y المحور الرأسي

Z العمق

و يمكن تشبيه النظام الثلاثي الابعاد بالصورة التالية:

كما نري اتجاه الاحداث باليد هنا ..   
حيث الابهام يمثل العمق او محور ال  
 Z.
لحسن الحظ … تقوم 
XNA

بمعظم العمل الصعب في رسم الكائن الثلاثي الابعاد علي الشاشة و العمل الصعب يتمثل في الرياضيات الثقيلة لرسم الكائن … و لكن  
يجب علينا مع ذلك ان نفهم جيدا نظام الاسقاطات
 Projections
و هو المسئول عن رسم الكائن ثلاثي الابعاد علي الشاشة باحداثياته الثلاثة …
تدعم ال 
XNA

 نوعين من انظمة الاسقاطات:

Perspective Projection: او نظام منظور الاسقاط:

و هذا المنظور يقوم بحساب عمق الرؤية حسب قرب او بعد الكائن عن الشاشة يعني اذا كان الكائن بعيد عن الشاشة فيرسم صغير و اذا كان قريب من الشاشة يرسم كبير … كالاتي:

طبعا هنا ال 
Camera Position 

هي الكاميرا التي بداخل الشاشة … ثم الشاشة ثم بالخارج نحن ننظر الي الشاشة … فكلما بعد الكائن عن نظرنا كلما صغر حجمه …

نظام الاسقاطات الثاني هو ال

 Orthogonal Projection او نظام الاسقاط المتعامد:

و في هذا النظام يتم اهمال البعد Z كالاتي:

و في هذا المنظور كما ترون قد تم اهمال البعد Z و بالتالي بعد او قرب الكائن لا يؤثر في حجمه …

و هذا النظام يستخدم في رسم الكائنات فوق فوقها في النظام الثنائي الابعاد او في الالعاب الثلاثية ابعاد البسيطة حيث يستخدم مثلا في رسم الكائنات البسيطة الثلاثية الابعاد مثل الطاقة المتبقية للاعب التي ترسم فوق راس اللاعب و تتحرك معه في اي اتجاه …

ما قمنا بدراسته:

قمنا بالتعرف علي نظام الاسقاطات في النظام الثلاثي الابعاد و عرفنا انواعه و اشكاله و كيفية رسم الكائنات بكل مقياس …

XNA: Lesson9 - Basics of 3D Game Development

بسم الله و الصلاة و السلام علي رسول الله
صلي الله عليه و سلم
اللهم لا سهل الا ما جعلته سهلا
و انت تجعله الحزن اذا شئت سهلا




دورة أساسيات برمجة الالعاب ثلاثية الابعاد بواسطة اطار العمل
Microsoft XNA 3.1

خطة الدورة:
3D Coordinate Systems and Projections – ما هو النظام ثلاثي الابعاد و ما هي الاسقاطات.
Vertices and Primitives: مقاييس و محددات و انواع النظام الثلاثي الابعاد.
Vectors, Matrices and 3D Transformatio – المقايس ثلاثي الابعاد و التفاف المصفوفات و نقلها.
Lights, Camera and Effects – الاضاءة و الكاميرات و التاثيرات.
أول تطبيق لرسم شكل ثلاثي الابعاد.
Models and Meshes: النماذج و الشبكات.

فلنستعن بالله و لنبدأ علي بركة الله ...

حمل الان لعبة زحمة في الفضاء من انتاجي

يجب توفر اطار العمل
Microsoft .NET Framework 3.5
لكي تتمكن من بدء اللعبة
يمكنك تحميله من هنا
http://www.microsoft.com/downloads/en/details.aspx?FamilyId=333325FD-AE52-4E35-B531-508D977D32A6&displaylang=en

رابط تحميل اللعبة
http://www.mediafire.com/file/4hrey407ljyrl8d/RockRain.rar

XNA: Lesson8: Game Audio - اصوات اللعبة

Lesson 8: Game Audio

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

بسم الله و الصلاة و السلام علي رسول الله ... صلي الله عليه و سلم...

اليوم ان شاء الله نتحدث عن كيفية اضافة الاصوات و المؤثرات الصوتية علي اللعبة ...

و قد قامت ميكروسوفت باضافة برنامج ضمن مجموعة برامج ال XNA يقوم بتحويل صيغة ملفات الصوت الي ملفات يفهمها ال XNA حتي تستطيع التعامل معها داخل اللعبة ... هذا البرنامج اسمه XACT ...

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

قبل التعرف علي البرنامج نحمل ملف الصوت علي الرابط التالي:

http://www.mediafire.com/?k3g8v24e8fn3ede

ثم ننشأ مجلد فارغ في اي مكان علي الجهاز و نضع فيه هذا الملف ...

و نبدا الان بالتعرف علي هذا البرنامج ...

-          لبدء برنامج XACT:

-          Start è Programs è Mircosoft XNA Game Studio 3.0 è Tools è Cross-Platform Audio Creation Tool (XACT).

-          سيفتح لك برنامج XACT بالصورة التالية:

-          نبدا مشروع جديد من خلال القائمة:

-          File è New Project

-          ستفتح لك نافذة لتحديد مكان حفظ المشروع ... يجب ان تكون نفس المجلد الذي تم تكوينه سابقا الذي به ملف الصوت.  (هذه النقطة هامة جدا جدا).

-          بعد تكوين المشروع ستظهر قائمة علي الشمال بالشكل التالي:

-          يجب الان ان نكون Wave Bank و Sound Bank و ذلك لادخال ملفات الصوت الخاصة بنا عليهم ...

-          كما ترون بالصورة نضغط كليك يمين علي Wave Banks ثم نختار New Wave Bank و نترك نفس الاسم الافتراضي Wabe Bank  ...

-          ظهرت لنا الان شاشة جديدة داخل البرنامج عنوانها Wave Bank بالشكل التالي:

في الشاشة التي ظهرت Wave Bank نضغط كليك يمين ثم نختار Insert Wave File لكي ندخل ملفات الصوت الخاصة بنا علي البرنامج...

ثم نختر ملف الصوت من ملف المشروع ...

نلاحظ ان الملف ظهر داخل مربع ال Wave Bank ...

ثم نضغط كليك يمين علي ال Sound Bank و نختر New Sound Bank و نترك نفس الاسم الافتراضي Sound Bank ...

ستظهر لنا شاشة مثل ال Wave Bank  اسمها Sound Bank ... و لكن ...

سنجد شاشة ال Sound Bank  مقسمة الي 4 اقسام ... يوجد قسمين بالشمال اسمهم Sound Name و Cue Name...

الان ننظم شكل الشاشات المعروضة كالتالي ... من قائمة:

Window è Tile Horizontally

الان الشاشات معروضة امامنا و مترتبة ...

كل ما سنعمله بمنتهي البساطة هو اختيار ملف الصوت من القائمة Wave Bank و نعمل سحب و القاء Drag and Drop  داخل شاشة ال Sound Bank  في قسم ال Cue Name ... و سنجد ان البرنامج كون لنا تلقائيا في قسم ال Sound Name   ملف بنفس الاسم ... بحيث يصبح شكل الشاشات كالتالي:

ثم نحفظ المشروع و نغلق البرنامج ...

استخدام الصوت داخل اللعبة:

الان نفتح المشروع الاخير الخاص بالدرس السابع ... و في ال Solution Explorer نضغط كليك يمين علي فولدر ال Content و نضيف فولدر جديد نسميه Audio  ...

ثم نضغط كليك يمين علي فولدر ال Audio  و نختر Addè Existing Item

ثم نفتح الفولدر الخاص بمشروع XACT الذي قمنا بعمله ... سنلاحظ ان هناك ملف تم انشاءه ينتهي ب .XAP

نختاره و نختر ملف الصوت الذي حملناه ثم نضغط Add ...

الان قد اضفنا ملف الصوت و اضفنا ملف المشروع الذي ينتهي ب .XAP

و الان نفتح ملف ال Game1.CS

نعرف المتغيرات التالية بعد هذا السطر مباشرة

SpriteBatch spriteBatch;

و هي متغيرات سوف نستخدمها لبرمجة الصوت ...

AudioEngine audioEngine;

WaveBank waveBank;

SoundBank soundBank;

نشرح الكود:

AudioEngine audioEngine;

ال AudiiEngine  هي مكتبة توصلك بخدمات الصوت علي كارت الصوت في جهازك ...

WaveBank waveBank;

هو مخزن يحمل soundBanks

SoundBank soundBank;

هو مخزن يحمل عدة ملفات صوتية ...

الان نحمل مخازن الصوت ... نتجه الي الدالة LoadContent و نكتب الكود التالي في نهاية الدالة :

audioEngine = new AudioEngine(@"Content\Audio\mysounds.xgs");

waveBank = new WaveBank(audioEngine, @"Content\Audio\Wave Bank.xwb");

soundBank = new SoundBank(audioEngine, @"Content\Audio\Sound Bank.xsb");

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

Project Folder \ bin\x86\Debug\Content\Audio

الان نحن حملنا الملف الاساسي لمشروع XNA  ... ثم حملنا ال Wave Bank الذي قمنا بعمله في المشروع و سميناه بنفس الاسم الافتراضي ... و ايضا حملنا ال Sound Bank الذي حملناه في المشروع و سميناه بنفس الاسم الافتراضي ...

و الان في نفس الدالة LoadContent سنجعل الصوت يبدا مع بداية اللعبة كالاتي:

soundBank.PlayCue("skullcollision");

ثم نشغل اللعبة و نلاحظ ظهور الصوت ...

تطبيق اليوم ...

اجعل الصوت يعمل عند اصطدام الكائن بحروف الشاشة ....

XNA Lesson 7: Circle Collision Detection and Game Input

Lesson 7: Circle Collision Detection and Game Input

الدرس السابع: اكتشاف التصادم الدائري و التعامل مع لوحة المفاتيح و الماوس للتحكم باللعبة

بسم الله و الصلاة و السلام عليكم رسول الله ....

اكتشاف التصادم الدائري:

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

و بالتالي نتجه الي الملف clsSprite و نعرف الخصائص التالية ضمن ال properties:

public Vector2 size { get; set; }

public Vector2 center { get { return position + (size / 2); } }

public float radius { get { return size.X / 2; } }

public Vector2 size { get; set; }

يمثل مقاس الصورة ... طولها و عرضها ...

public Vector2 center { get { return position + (size / 2); } }

يمثل منتصف الصورة بالضبط و يحسب بمكان الصورة و طبعا هذا يكون في اقصي شمال اعلي الصورة ثم يضيف اليه المقاس مقسوم علي 2 مثلا

مكان الصورة = 0,0 ........ و مقاس الصورة = 40,40 ....... اذن منتصف الصورة يساوي ...

Center = (0, 0) + ((40, 40) /2) = (0, 0) + (20, 20) = (20, 20)

اذن بالفعل منتصف الصورة هو x=20 و y=20 .....

public float radius { get { return size.X / 2; } }

يمثل نصف قطر الصورة الدائرية و يحسب طبعا بعرض الصورة مقسوم علي 2 ... يعني لو عندنا صورة قطرها 40 بكسل اذن نصف قطرها هو 20 بكسل ...

ثم نذهب الي ال Consrtuctor و نعدله ليصبح كالاتي:

   public clsSprite(Texture2D newTexture, Vector2 newPosition, int screenWidth, int screenHeight)

        {

            texture = newTexture;

            position = newPosition;

            screenSize = new Vector2(screenWidth, screenHeight);

            size = new Vector2(texture.Width, texture.Height);

        }

و هنا قمنا بملء خاصية ال size بطول و عرض الصورة ليصبح التعامل معهم اسهل من خلال ال size....

و الان ننشا دالة جديدة تحت دالة ال collide بالضبط كالاتي:

public bool circleCollides(clsSprite otherSprite)

{

return (Vector2.Distance(this.center, otherSprite.center) <

                this.radius + otherSprite.radius);

}

و هنا قمنا بمقارنة المسافة بين نقطتين باستخدام Vector2.Distance و هي تحسب المسافة بين نقطتين ... فحسبنا المسافة بين منتصف هذه الصورة و منتصف الصورة الاخري بحيث اذا كانت المسافة بينهما اصغر من نصف قطر الصورة الاولي + نصف قطر الصورة التالية اذن يحدث التصادم ....

مش فاهمين ... طيب صلوا علي النبي (اللهم صلي علي سيدنا محمد و علي اله و صحبه و سلم) ....

هذه الصورة ستوضح لنا كل ما نريد معرفته ان شاء الله :::

اظن الصورة شرحت كل شئ ....

الان نذهب الي الملف Game1.cs و نعدل الحدث update بحيث نستخدم الدالة circleCollides بدلا من الدالة Collide ... و نشغل اللعبة بحيث تحتوي علي كائنين فقط و نلاحظ اكتشاف التصادم ....

الان دعونا ننتقل لموضوع درس اليوم و هو التعامل مع لوحة المفاتيح و الماوس او ما يسمي مدخلات اللعبة ...

مدخلات اللعبة قد تكون Game Pad او ذراع الالعاب ... او لوحة المفاتيح ... او الماوس ... و في مشروع ناتال الذي قامت به ميكروسوفت الان يمكنك اللعب بذاتك يعني تقف امام الشاشة و تلعب بجسمك و جهاز ال xbox يلقط حركاتك و ينفذها باللعبة ......

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

اولا نفتح المشروع السابق و الذي يحتوي علي الكرات المتحركة ...

ثانيا: نحذف كل الكائنات و نترك كائن واحد علي اللعبة ...

و الان دعونا نعرف زر لاغلاق اللعبة ...

فنذهب الي الحدث update و نعدله بحيث يكون هكذا:

        protected override void Update(GameTime gameTime)

        {

            // Allows the game to exit

            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)

                this.Exit();

            if (Keyboard.GetState().IsKeyDown(Keys.Escape))

            {

                this.Exit();

            }

            // TODO: Add your update logic here

            ball1.Move();

            base.Update(gameTime);

        }

ما الذي قمنا بفعله هنا:

طبعا اللعبة في البداية تفحص ذراع الالعاب اذا كان اللاعب يضغط علي زر Back فانها تغلق اللعبة و بما اننا لسنا نلعب بذارع العاب فاننا نستخدم لوحة المفاتيح لنفحص اذا كان اللاعب يضغط علي زر Escape و دعونا نفصل قليلا هنا ...

            if (Keyboard.GetState().IsKeyDown(Keys.Escape))

            {

                this.Exit();

            }

Keyboard هنا هي تمثل نسخة من لوحة المفاتيح الان ...

GetState() هي دالة ترجع بحالة كل مفتاح من لوحة المفاتيح ...

IsKeyDown تفحص اذا كان زر معين مضغوط عليه ...

Keys.Escape ........ keys هي اسماء المفاتيح جميعا و طبعا هنا نحن نفحص زر escape....

نشغل اللعبة و نضغط علي زر Escape لنغلق اللعبة ....

الان دعونا نحرك الكرة بالاسهم بدلا من تحركها تلقائيا ... فنذهب الي الحدث Update لنجعله كالاتي:

  protected override void Update(GameTime gameTime)

        {

            // Allows the game to exit

            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)

                this.Exit();

            KeyboardState keyState = Keyboard.GetState();

            if (keyState.IsKeyDown(Keys.Escape))

            {

                this.Exit();

            }

            // TODO: Add your update logic here

            if (keyState.IsKeyDown(Keys.Up))

            {

                ball1.position += new Vector2(0, -5);

            }

            if (keyState.IsKeyDown(Keys.Down))

            {

                ball1.position += new Vector2(0, 5);

            }

            if (keyState.IsKeyDown(Keys.Left))

            {

                ball1.position += new Vector2(-5, 0);

            }

            if (keyState.IsKeyDown(Keys.Right))

            {

                ball1.position += new Vector2(5, 0);

            }

            base.Update(gameTime);

        }

هنا قمنا بحذف الدالة move بحيث لا يتحرك الكائن بمفرده و قمنا بفحص الزر المضغوط عليه الان و نحرك الكائن علي حسب الاتجاه اللي ضغط عليه بسرعة 5 بكسل ...

دعونا نشغل اللعبة الان ... نري الكائن ثابت لا يتحرك ... نبدا نحركه بالاسهم و نري .............

الان قمنا بتحريك العنصر بواسطة لوحة المفاتيح ...

دعونا الان نحرك العنصر بواسطة الماوس:

نذهب الي الحدث Update و نعدله ليصبح كالاتي:

        protected override void Update(GameTime gameTime)

        {

            // Allows the game to exit

            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)

                this.Exit();

            KeyboardState keyState = Keyboard.GetState();

            if (keyState.IsKeyDown(Keys.Escape))

            {

                this.Exit();

            }

            // move the object with keyboard

            if (keyState.IsKeyDown(Keys.Up))

            {

                ball1.position += new Vector2(0, -5);

            }

            if (keyState.IsKeyDown(Keys.Down))

            {

                ball1.position += new Vector2(0, 5);

            }

            if (keyState.IsKeyDown(Keys.Left))

            {

                ball1.position += new Vector2(-5, 0);

            }

            if (keyState.IsKeyDown(Keys.Right))

            {

                ball1.position += new Vector2(5, 0);

            }

            // move the object with mouse

            if (Mouse.GetState().LeftButton == ButtonState.Pressed)

            {

                ball1.position = new Vector2(Mouse.GetState().X, Mouse.GetState().Y);

            }

            base.Update(gameTime);

        }

ما الذي فعلناه في هذا الكود:

            if (Mouse.GetState().LeftButton == ButtonState.Pressed)

            {

                ball1.position = new Vector2(Mouse.GetState().X, Mouse.GetState().Y);

            }

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

بهذا نكون انتهينا من الدرس السابع و الخاص بتحريك العناصر الدائرية و التحكم بادخالات اللعبة ...

تطبيق الدرس:

زود سرعة الكرة عند التحرك بالاسهم ..................