بناء لعبة طائرة باستخدام Sprite Kit – الانفجارات و الغيوم

بناء لعبة طائرة باستخدام Sprite Kit – الانفجارات و الغيوم

هذا الدرس سيعلمك كيفية استخدام اطار عمل Sprite Kit لانشاء لعبة طائرات بسيطة. ستتعلم في هذه المرحلة كل ما يهم مفاهيم Sprite Kit  الأساسية: الاحياء, المنبعثات, كشف التصادم و أكثر بكثير!
شكل السلسلة

ستقسم دروس الطائرة الى ثلاثة أجزاء من أجل تغطية كل قسم بشكل كامل. و بعد قراءة أجزاء الدرس الثلاثة, سيتكمن القراء من انشاء لعبة 2D مشوقة باستخدام اطار عمل Sprite Kit مزودا بـ iOS 7.

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

العرض النهائي

الشكل 1: النتيجة النهائية

توضيح للنتيجة النهائية - Sprite Kit

حيث توقفنا...

مرحبا بعودتكم الى الجزء الثالث من لعبة الطائرات المصممة باستخدام Sprite Kit. في المنشور الأخير, قمنا بالتركيز على إضافة أعداء و منبعثات الى اللعبة. في درس اليوم, ستقوم ببرمجة كشف التصادم, العمل مع أطلس النسيج و خلق بعض التفجيرات من أجل انهاء اللعبة. دعونا نبدأ!

1. إضافة كشف التصادم

غالبا ما تستخدم اختبارات مفترق الطرق في البيئات حيث يتواجد أكثر من كائن واحد. في Sprite Kit, ستستخدم التصادم و الاحتكاك من أجل كشف فيما اذا قام كائن محدد بالاصطدام مع كائن اخر.

في هذه اللعبة, ستستخدم كشف التصادم. عندما تلامس رصاصة العدو, سيتم استبعاد كلا الرصاصة و العدو من الشاشة.

لفعل ذلك, يجب عليك تعريف مجموعة القيم الخفية. يجب ان يكون هنالك مجموعة لكل كائن فيزيائي. في MyScene.h, أضف الكود التالية:
   

static const uint8_t bulletCategory = 1;

static const uint8_t enemyCategory = 2;

الان,  و بينما انت ضمن MyScene.h, قم بإضافة SKPhysicsContactDelegate كما فعلنا من قبل مع UIAccelerometerDelegate.

@interface MyScene : SKScene<UIAccelerometerDelegate, SKPhysicsContactDelegate>

{

قبل استخدام الفيزياء, يجب عليك بدء اعدادات الفيزياء. عند if (self = [super initWithSize:size [) الشرط, قم بتفعيل الجاذبية بالقيمة 0 (أي لا جاذبية) و من ثم تفويض الاحتكاك:

self.physicsWorld.gravity = CGVectorMake(0, 0);

self.physicsWorld.contactDelegate = self;

ان الكائنين اللذين يحتاجان الى الفيزياء هما الرصاصة و الأعداء. دعونا نعين عدة خصائص لكا واحد. دعونا نضيف الكود التي بالاسفل ضمن طريقة -(void)EnemiesAndClouds:
   

enemy.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:enemy.size];

enemy.physicsBody.dynamic = YES;

enemy.physicsBody.categoryBitMask = enemyCategory;

enemy.physicsBody.contactTestBitMask = bulletCategory;

enemy.physicsBody.collisionBitMask = 0;

توضح الكود التي في الأعلى ان منطقة احتكاك الطائرة ستكون مستطيل لديه حجم العدو sprite. توضح الخاصية الحيوية فيما اذا الكائن الفيزيائي قد تم تحريكه من قبل تحفيز الفيزياء. تاليا, categoryBitMask هي حيث تقوم بتعيين المجموعة للكائن و تشير categoryBitMask الى اية كائنات سيقوم العدو بالتفاعل معها ( في هذه الرصاصات).

دعونا الان نقوم بتعريف الفيزياء لكائن الرصاصة. ضمن the -(void)touchesBegan:(NSSet *) تلمس طريقة withEvent:(UIEvent *), يجب تعديل كود الرصاصة لاضافة:
   

bullet.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:bullet.size];

bullet.physicsBody.dynamic = NO;

bullet.physicsBody.categoryBitMask = bulletCategory;

bullet.physicsBody.contactTestBitMask = enemyCategory;

bullet.physicsBody.collisionBitMask = 0;

حتى الان, لقد قمت بتعريف خصائص الاصطدام. و لكن, يجب كشف فيما اذا الاحتكاك قد تم.

يجب ان تستخدم طريقة didBeginContact لمعرفة أية كائنات قامت بالاحتكاك مع كائنات أخرى. لذا, تحسب الكود التالية الكائنين اللذين احتكا و بنفس الوقت تستبعدهم من المشهد

-(void)didBeginContact:(SKPhysicsContact *)contact{

    

    SKPhysicsBody *firstBody;

    SKPhysicsBody *secondBody;

    

    if (contact.bodyA.categoryBitMask < contact.bodyB.categoryBitMask)

    {

        firstBody = contact.bodyA;

        secondBody = contact.bodyB;

    }

    else

    {

        firstBody = contact.bodyB;

        secondBody = contact.bodyA;

    }

    

    if ((firstBody.categoryBitMask & bulletCategory) != 0)

    {

        

        SKNode *projectile = (contact.bodyA.categoryBitMask & bulletCategory) ? contact.bodyA.node : contact.bodyB.node;

        SKNode *enemy = (contact.bodyA.categoryBitMask & bulletCategory) ? contact.bodyB.node : contact.bodyA.node;

        [projectile runAction:[SKAction removeFromParent]];

        [enemy runAction:[SKAction removeFromParent]];

        

    }

    

}

انها بسيطة جدا, اليس كذلك؟ الان, قم بالبناء و الإدارة. اذا سار كل شيء على ما يرام, و من ثم سيختفي كلا من العدو و الرصاصة عندما يصطدمان.

2. دمج أطلس النسيج

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

حتى الان, لم نستخدم أطلس النسيج. تتضمن Sprite Kit مولد أطلس النسيج الذي لديه عدة ميزات مشوقة. في Xcode 5, يمكنك انشاء أطلس النسيج باستخدام الخطوات التالية:

1.    ضع كل sprites في ملف واحد. و لمشروعنا, يمكنك إيجاد كل الصور في التنزيل الملحق ضمن مجلد "EXPLOSION" "الانفجار".

2.    قم بتغيير إضافة المجلد الى *.atlas. و في هذه الحالة, اعد تسمية  EXPLOSION الى EXPLOSION.atlas.

3.    قم بسحب-و-اسقاط المجلد على المشروع. قمت بإضافته الى مجلد الملفات المدعومة ضمن ملاح Xcode.

4.    احرص على أن خيار "تفعيل توليد أطلس النسيج" قد تم تشغيله. لفحص ذلك, قم ببناء اعدادات مشروعك.

هذا كل ما في الامر. مرة أخرى, تتوافر صور هذا القسم ضمن مجلد الموارد للتنزيل الملحق.

الان, تحتاج الى تحميل أطلس النسيج على مشروعك.

ضمن MyScene.h, قم بإضافة:

@property NSMutableArray *explosionTextures;

في نهاية if (self = [super initWithSize:size]) الشرط, قم بإضافة مقطع الكود التالي:

//load explosions

        SKTextureAtlas *explosionAtlas = [SKTextureAtlas atlasNamed:@"EXPLOSION"];

        NSArray *textureNames = [explosionAtlas textureNames];

        _explosionTextures = [NSMutableArray new];

        for (NSString *name in textureNames) {

            SKTexture *texture = [explosionAtlas textureNamed:name];

            [_explosionTextures addObject:texture];

        }

3. إضافة التفجيرات

حالما تقوم بتحميل التفجيرات, هنالك خطوة أخرى يجب تفعيلها. ستقوم الان بانشاء تفجير يحدث عندما ترتطم رصاصة بالعدو. في نهاية if الشرطية اذا ((firstBody.categoryBitMask & bulletCategory) != 0), أضف المقطع التالي:   

//add explosion

SKSpriteNode *explosion = [SKSpriteNode spriteNodeWithTexture:[_explosionTextures objectAtIndex:0]];

explosion.zPosition = 1;

explosion.scale = 0.6;

explosion.position = contact.bodyA.node.position;



[self addChild:explosion];



SKAction *explosionAction = [SKAction animateWithTextures:_explosionTextures timePerFrame:0.07];

SKAction *remove = [SKAction removeFromParent];

[explosion runAction:[SKAction sequence:@[explosionAction,remove]]];

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

توضيح التفجير (Xcode).

4.  إضافة الغيوم

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

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

ضمن ملف MyScene.h أضف التالي:
   

@property NSMutableArray *cloudsTextures;

ضمن ملف MyScene.h, تحت كود "تفجيرات التحميل", أضف التالي: 

//load clouds

SKTextureAtlas *cloudsAtlas = [SKTextureAtlas atlasNamed:@"Clouds"];

NSArray *textureNamesClouds = [cloudsAtlas textureNames];

_cloudsTextures = [NSMutableArray new];

for (NSString *name in textureNamesClouds) {

    SKTexture *texture = [cloudsAtlas textureNamed:name];

    [_cloudsTextures addObject:texture];

}

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

//random Clouds

   int randomClouds = [self getRandomNumberBetween:0 to:1];

   if(randomClouds == 1){

       

       int whichCloud = [self getRandomNumberBetween:0 to:3];

       SKSpriteNode *cloud = [SKSpriteNode spriteNodeWithTexture:[_cloudsTextures objectAtIndex:whichCloud]];

       int randomYAxix = [self getRandomNumberBetween:0 to:screenRect.size.height];

       cloud.position = CGPointMake(screenRect.size.height+cloud.size.height/2, randomYAxix);

       cloud.zPosition = 1;

       int randomTimeCloud = [self getRandomNumberBetween:9 to:19];

       

       SKAction *move =[SKAction moveTo:CGPointMake(0-cloud.size.height, randomYAxix) duration:randomTimeCloud];

       SKAction *remove = [SKAction removeFromParent];

       [cloud runAction:[SKAction sequence:@[move,remove]]];

       [self addChild:cloud];

   }

توضيح اللعبة الأخيرة (Xcode).

قم ببناء و إدارة المشروع مرة أخرى. اذا سار كل شيء على ما يرام, يجب عليك أن ترى شيء كالشكل التالي:

الخاتمة

و بهذا نختم الجزء الثالث و الأخير من هذا الدرس موضحا كيفية انشاء لعبة الطائرات باستخدام اطار عمل Sprite Kit الجديد المتوفر بـ iOS 7 SDK. اذا قمت باتباع هذه السلسلة من الأول الى النهاية, يجب أن يكون لديك الان معرفة كافية و ووافية لانشاء لعبة Sprite Kit باستخدام محرك لعبة جديدة و حيوية.  اذا كان لديك أية أسئلة أو تعليقات, لا تتردد باضافتها بالاسفل!