الدرس الثالث
2D Graphics
- هدف الدرس: في هذا الدرس سنتعلم كيف نكون كائن 2D و عرضه في اللعبة ...
- دعونا في البداية نتعرف علي مصطلحات هامة في عالم ال 2D:
- Sprite:
- هذا العنصر يمثل الكائن ال 2D الذي سنقوم برسمه علي الشاشة و هذا الكائن سنقوم بتحميله ب:
- الصورة Texture كما سنري بعد ذلك ان شاء الله.
- الموضع Position: مكان الكائن في اللعبة.
- طول و عرض الكائن.
- السرعة velocity.
- و هذا الكائن طبعا يقوم برسم الصورة بدون الاماكن الفارغة فيها لان هناك مشكلة في الحاسب انه يقوم باعتبار اي صورة علي انها مربع ... و لكن هناك برامج تمكننا من عمل الصورة Transparent اي تكون شفافة لما تحتها و كائن ال sprite يمكننا من رسم الصورة بشكلها الشفاف و ليس كمربع.
- Textures:
- هي الصورة نفسها ال 2D التي سنقوم برسمها بواسطة ال Sprite... طبعا ستسالوني ما الفرق بين ال srite و ال texture ... ال sprite هو الكائن الذي يقوم برسم ال texture علي الشاشة و ال texture محمل بالصورة من مخزن البيانات Content... وصلت ؟؟؟
- Background:
- طبعا هي خلفية اللعبة التي سيتم رسم كافة الكائنات الاخري فوقها...
- 2D and Screen Coordinates Systems:
- الرسم ثنائي الابعاد و علاقته باحداثيات الشاشة:
- كلنا طبعا نذكر هذا الشكل البياني:
و هو يمثل المحور السيني و الصادي ... شاشة الحاسب مقسمة ايضا الي هذا ... فكل نقطة علي شاشة الحاسب تمثل برقمين ... الاحداث السيني X ... و الاحداث الصادي Y ... و لكن في الشاشة هذا الشكل البياني يكون بالعكس اي نقطة الصفر (0,0) تكون في الشمال الاعلي كالاتي:
و كما نري فان نقطة الصفر في الشاشة تكون في اعلي الشمال ... يعني اذا اردنا ان نضع صورة في اللعبة و اردنا تحديد مكانها في الشمال فستكون مثلا في النقطة (3, 5) يعني x=3 و y=5 حاولوا رسمها علي الرسم البياني و تخيلوا موضعها اين ...
- Drawing a Sprite using XNA:
- هنا بدا الجد اخوتي و اخواتي ... لاننا سنقوم الان ببدء اول تجربة برسم كائنات 2D في اللعبة...
- سنبدا بانشاء مشروع لعبة جديد كما تعلمنا.
- سنقوم بعد ذلك بانشاء كلاس Class جديدة لتمثل لنا كائن ال 2D الذي نريد رسمه في اللعبة:
- انشأ كلاس جديدة Class اسمها clsSprite عن طريق الاتي:
- في solution explorer نضغط كليك يمين ثم نختر
- Add è Class
- ثم نكتب اسمها clsSprite.CS.
- و ستحتوي هذه الكلاس علي التالي:
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
namespace Chapter2_2D
{
class clsSprite
{
public Texture2D texture { get; set; }
public Vector2 position { get; set; }
public clsSprite(Texture2D newTexture, Vector2 newPosition)
{
texture = newTexture;
position = newPosition;
}
public void Draw(SpriteBatch spriteBatch)
{
spriteBatch.Draw(texture, position, Color.White);
}
}
}
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
- قمنا باستيراد نطاقات الاسماء هذه لاحتوائها علي :
- Texture2D لتحميل الصورة
- Vector2 لتخزين السرعة و الحجم
public Texture2D texture { get; set; }
هذا العنصر يمثل الصورة ...
public Vector2 position { get; set; }
و هذا هو مكان الكائن علي الشاشة
public clsSprite(Texture2D newTexture, Vector2 newPosition)
{
texture = newTexture;
position = newPosition;
}
و هذا طبعا يسمي Constructor و هو ينفذ عند تعريف نسخة من هذا الكائن ... و عند تعريف اي نسخة من هذا الكائن يجب ان نعطيه الصورة و المكان و الحجم ثم نسلم هذه المتغيرات للصفات الداخلية للعنصر كما ترون ...
public void Draw(SpriteBatch spriteBatch)
{
spriteBatch.Draw(texture, position, Color.White);
}
هنا قمنا بعمل دالة الرسم Draw و التي سنستخدمها في اللعبة لرسم الكائن علي الشاشة و هنا قام باستقبال بارامتر من نوع SpriteBatch و هو كما ذكرنا كلاس الوصول الي كارت الشاشة ... قم قمنا بتنفيذ الدالة
spriteBatch.Draw
و التي ستقوم بالرسم الفعلي علي الشاشة و تحتوي علي:
texture:الصورة
Position: المكان
Color.White: ليس مجالها الان و نكتبها كما هي
- مرحلة رسم الصورة:
- يمكنكم تحميل الصورة من خلال الرابط التالي:
- http://www.mytruebluehomes.com/xsites/Agents/AggusRealty/content/uploadedFiles/TBR_Ball_transparent.png
- نضيف الصورة الي المشروع عن طريق الاتي:
- اضغط كليك يمين علي مجلد Content طبعا لانه كما اتفقنا المخزن الخاص باللعبة ثم :
- Add è Existing Item:
- ثم نختار الصورة و نضغط OK
- نبدا الان في العمل في ملف اللعبة Game1.CS:
- نعرف كائن جديد بعد السطر:
- SpriteBatch spriteBatch;
- نكتب هذا الكود:
- clsSprite spriteBall;
ما الذي فعناه هنا؟
قمنا بتعريف كائن جديد من الكلاس التي قمنا بعمها ...
- ثم بعد ذلك نذهب الحدث LoadContent
- بعد هذا السطر:
- // TODO: use this.Content to load your game content here
- نكتب السطر الاتي:
- spriteBall = new clsSprite(Content.Load<Texture2D>("ball"), Vector2.Zero);
- ما الذي نفعله هنا؟ هنا نقوم باخذ نسخة جديدة من الكلاس clsSprite و حملناها من المخزن بالصورة عن طريق الكود:
- Content.Load<Texture2D>("ball")
و هنا قمنا بامر ال Content او المخزن بتنفيذ امر التحميل Load من نوع Texture2D و هو نوع الملف الذي سنحمله ثم اعطيناه اسم الصورة ball و نلاحظ هنا قاعدة عامة ...
عند تحميل اي ملف في ال Content.Load يكون بدون الامتداد الخاص به...
يعني هنا في هذه الحالة كتبنا اسم الصورة ball و ليس ball.png و ال XNA سيفهم بمفرده صيغة الصورة....
- نذهب بعد ذلك الي حدث ال Draw في نفس الكلاس Game1.CS:
- و نكتب قبل
- base.Draw(gameTime);
- هذا الكود:
spriteBatch.Begin();
spriteBall.Draw(spriteBatch);
spriteBatch.End();
قلنا مسبقا ان هذا هو حدث الرسم ... و سننفذ الاتي فيه:
spriteBatch.Begin();
يجب ... يجب ... يجب قبل رسم اي شئ علي الشاشة ان نكتب هذا السطر الذي يأمر ال spriteBatch ببدء العمل و بدونه لن تعمل اللعبة...
ثم ...
spriteBall.Draw(spriteBatch);
نفذنا حدث الرسم الخاص بال spriteBall و الذي قمنا بعمله في الكلاس ...
spriteBatch.End();
يجب ... يجب ... يجب بعد رسم اي شئ علي الشاشة ان نكتب هذا السطر الذي يأمر ال spriteBatch ببدء العمل و بدونه لن تعمل اللعبة...
طبعا لو هنرسم عدة كائنات و ليس كائن واحد علي الشاشة فسنكتب كل الكود بين:
spriteBatch.Begin();
spriteBatch.End();
الكود الكامل حتي الان:
clsSprite.cs:
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
namespace Chapter2_2D
{
class clsSprite
{
public Texture2D texture { get; set; }
public Vector2 position { get; set; }
public clsSprite(Texture2D newTexture, Vector2 newPosition)
{
texture = newTexture;
position = newPosition;
}
public void Draw(SpriteBatch spriteBatch)
{
spriteBatch.Draw(texture, position, Color.White);
}
}
}
Game1.cs
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;
namespace Chapter2_2D
{
///
/// This is the main type for your game
///
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
clsSprite spriteBall;
public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}
///
/// Allows the game to perform any initialization it needs to before starting to run.
/// This is where it can query for any required services and load any non-graphic
/// related content. Calling base.Initialize will enumerate through any components
/// and initialize them as well.
///
protected override void Initialize()
{
// TODO: Add your initialization logic here
base.Initialize();
}
///
/// LoadContent will be called once per game and is the place to load
/// all of your content.
///
protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
// TODO: use this.Content to load your game content here
spriteBall = new clsSprite(Content.Load<Texture2D>("ball"), Vector2.Zero);
}
///
/// UnloadContent will be called once per game and is the place to unload
/// all content.
///
protected override void UnloadContent()
{
// TODO: Unload any non ContentManager content here
}
///
/// Allows the game to run logic such as updating the world,
/// checking for collisions, gathering input, and playing audio.
///
///
Provides a snapshot of timing values.
protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
// TODO: Add your update logic here
base.Update(gameTime);
}
///
/// This is called when the game should draw itself.
///
///
Provides a snapshot of timing values.
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
// TODO: Add your drawing code here
spriteBatch.Begin();
spriteBall.Draw(spriteBatch);
spriteBatch.End();
base.Draw(gameTime);
}
}
}
تطبيق اليوم:
قم برسم كائن اخر في اللعبة بجانب الكرة التي رسمناها ....
