مساحة اعلانية

آخر المواضيع

بناء لعبة طائرات باستخدام Sprite Kit- الأعداء و المنبعثات

بناء لعبة طائرات باستخدام Sprite Kit- الأعداء و المنبعثات

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


شكل السلسلة

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

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

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

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

بناء لعبة طائرات باستخدام Sprite Kit- الأعداء و المنبعثات
توضيح للنتيجة النهائية - Sprite Kit





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

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

1. إضافة ذيل من الدخان

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

لحسن الحظ, قدم Xcode 5 محرر منبعث كميزة .builtin تعد هذه أداة مفيدة جدا و ستسمح لنا بتحرير الخصائص بسهولة كنسيج الجزيء و لون الخلفية و جزيئات معدل الولادات و الجزيئات القصوى و مدة الحياة و الموقع و المدى و الزاوية و السرعة و التسارع و الوزن و الدوران و أكثر بكثير. من خلال الافتراضي, يزود Xcode 5 أيضا عدة منبعثات جاهزة للاستخدام. لذا دعونا نبدأ بإضافة منبعث واحد للعبة.

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

من أجل إضافة منبعث واحد للعبة, ستحتاج الى الذهاب الى ملف < جديد<  ملف... سترع شيئا يشبه الصورة التالية:

الشكل 1 انشاء ملف SpriteKit منبعث

توضيح لانشاء ملف SpriteKit منبعث (Xcode) اختر iOS > موارد و خيار ملف جزيء SpriteKit (كما هو موضع بالشكل الانف الذكر). انقر على التالي. الان, ستسأل عن العارض الذي ترغب باستخدامه. هنالك 8 عوارض مختلفة متاحة للاستخدام. اختر عارض الدخان و انقر على التالي و من ثم أعطه اسما. (قمنا بتسمية عارضنا "الذيل") و انقر على انشاء. سيضيف Xcode ملفين جديدين الى مشروعك (trail.sks and spark.png). ستحتاج الى تغيير رقم الجزيئات و النسيج و مدى الموقع و الزاوية مقياس للحصول على أفضل النتائج. الق نظرة على تركيبتنا:

الشكل 2 خصائص المنبعث

توضيح لخصائص المنبعث (Xcode).

الان, دعونا نضيف الدخان للطائرة.

من داخل MyScene.h,, أضف خاصية ذيل الدخان:


@property SKEmitterNode *smokeTrail;




في نهاية if (self = [super initWithSize:size] ) شرط في MyScene.m, اضف المقطع التالي:



//adding the smokeTrail

NSString *smokePath = [[NSBundle mainBundle] pathForResource:@"Smoke" ofType:@"sks"];

_smokeTrail = [NSKeyedUnarchiver unarchiveObjectWithFile:smokePath];

_smokeTrail.position = CGPointMake(screenWidth/2, 15);

[self addChild:_smokeTrail];


بالطبع عندما تتحرك الطائرة, فان الذيل يحتاج الى أن يتحرك أيضا. في نهاية (طريقة -void)update:(NSTimeInterval)currentTime), أضف هذا السطر:


_smokeTrail.position = CGPointMake(newX,newY-(_plane.size.height/2));


قم ببناء و إدارة هذا المشروع و اذا سار مل شيء على ما يرام فان ذلك سيكون رائعا!

يجب أن ترى شيئا كالتالي:

الشكل 3 خصائص المنبعث




 

توضيح خصائص المنبعث( Xcode ).

2 أضف و حرك المنبعثات.

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

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

الطريقة الوحيدة التي كان علينا استخدامها لفعل ذلك باستخدام Cocos2D كانت schedule:interval:. لسوء الحظ, لم تضف Apple طريقة مشابهة لـ Sprite Kit, و لكن من السهل انشاء واحدة مشابهة باستخدام SKActions. من أجل تحقيق ذلك البرنامج, يجب أن ننشئ استدعاء SKAction لطريقة waitForDuration. بعد ذلك, سننشئ SKAction و الذي يمكنه إدارة تكتل و استخدامه لاستدعاء الطريقة التي تضيف الأعداء. و بعدها ستقوم بوضع هذين النشاطين في سلسلة بالترتيب و فقط قل من أجل اعادتها على مدى الوقت.

من أجل إعادة انشاء الشرح ستحتاج الى المقطع التالي. أضفه الى نهاية الشرط if (self = [super initWithSize:size: ( [


//schedule enemies

SKAction *wait = [SKAction waitForDuration:1];

SKAction *callEnemies = [SKAction runBlock:^{

    [self EnemiesAndClouds];

}];

       

SKAction *updateEnimies = [SKAction sequence:@[wait,callEnemies]];

[self runAction:[SKAction repeatActionForever:updateEnimies]];


سهل كفاية؟ اذا كان لديك أي استفسار ,لا تتردد بطرحه ضمن قسم التعليقات.

يجب عليك الان إضافة الطريقة التي تنشئ الطرق التي يجب ان يتبعها العدو. اخترنا استخدام CGPathAddCurveToPoint, بما أن هذه الطريقة تنشئ منحني zierأ©B ذي نقطتي تحكم.

لذا, عليك أن تضيف الكود التالي الى ملف MyScene.m:


-(void)EnemiesAndClouds{

    //not always come

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

   

    if(GoOrNot == 1){

       

        SKSpriteNode *enemy;

       

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

        if(randomEnemy == 0)

            enemy = [SKSpriteNode spriteNodeWithImageNamed:@"PLANE 1 N.png"];

        else

            enemy = [SKSpriteNode spriteNodeWithImageNamed:@"PLANE 2 N.png"];

        

       

        enemy.scale = 0.6;

       

        enemy.position = CGPointMake(screenRect.size.width/2, screenRect.size.height/2);

        enemy.zPosition = 1;

       

       

        CGMutablePathRef cgpath = CGPathCreateMutable();

       

        //random values

        float xStart = [self getRandomNumberBetween:0+enemy.size.width to:screenRect.size.width-enemy.size.width ];

        float xEnd = [self getRandomNumberBetween:0+enemy.size.width to:screenRect.size.width-enemy.size.width ];

       

        //ControlPoint1

        float cp1X = [self getRandomNumberBetween:0+enemy.size.width to:screenRect.size.width-enemy.size.width ];

        float cp1Y = [self getRandomNumberBetween:0+enemy.size.width to:screenRect.size.width-enemy.size.height ];

       

        //ControlPoint2

        float cp2X = [self getRandomNumberBetween:0+enemy.size.width to:screenRect.size.width-enemy.size.width ];

        float cp2Y = [self getRandomNumberBetween:0 to:cp1Y];

       

        CGPoint s = CGPointMake(xStart, 1024.0);

        CGPoint e = CGPointMake(xEnd, -100.0);

        CGPoint cp1 = CGPointMake(cp1X, cp1Y);

        CGPoint cp2 = CGPointMake(cp2X, cp2Y);

        CGPathMoveToPoint(cgpath,NULL, s.x, s.y);

        CGPathAddCurveToPoint(cgpath, NULL, cp1.x, cp1.y, cp2.x, cp2.y, e.x, e.y);

       

        SKAction *planeDestroy = [SKAction followPath:cgpath asOffset:NO orientToPath:YES duration:5];

        [self addChild:enemy];

       

        SKAction *remove = [SKAction removeFromParent];

        [enemy runAction:[SKAction sequence:@[planeDestroy,remove]]];

       

        CGPathRelease(cgpath);

       

    }

   

}



-(int)getRandomNumberBetween:(int)from to:(int)to {

   

    return (int)from + arc4random() % (to-from+1);

}


تضيف طريقة  enemiesAndClouds أعداء فقط في المرحلة الحالية. سننتظر لاضافة الغيوم في الجزء الثالث و الأخير من هذه السلسلة.

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

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

الان, قم ببناء و إدارة المشروع و شاهد بدء الأعداء بالظهور على الشاشة.

3. انشاء رصاصات الطائرة

من أجل جعل اللعبة ممتعة, يجب على الأعداء أن يكونوا مدمرين. ستضيف بعض الرصاصات لطائرتك من أجل انجاز ذلك.  لفعل ذلك, ستحتاج الى التالي:

  • احصل على موقع الطائرة الحالي
  • أنشئ رصاصة sprite
  • أنشئ نشاك لتحريك الرصاصة
  • أنشئ نشاط لإزالة الرصاصة
  • أضف الرصاصة الى الشاشة
  • استبدل طريقة touchesBegan بالمقطع التالي:

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

    /* Called when a touch begins */

   

    CGPoint location = [_plane position];

    SKSpriteNode *bullet = [SKSpriteNode spriteNodeWithImageNamed:@"B 2.png"];

   

    bullet.position = CGPointMake(location.x,location.y+_plane.size.height/2);

    //bullet.position = location;

    bullet.zPosition = 1;

    bullet.scale = 0.8;

   

    SKAction *action = [SKAction moveToY:self.frame.size.height+bullet.size.height duration:2];

    SKAction *remove = [SKAction removeFromParent];

   

    [bullet runAction:[SKAction sequence:@[action,remove]]];

   

    [self addChild:bullet];  

}

Build and run your project. If you want to fire a bullet you only need to tap the screen!

الخاتمة

وصلت الى نهاية الدرس الثاني من هذه السلسلة.

في هذه المرحلة, يجب عليك أن تكون فاهما و قادرا على تطبيق المهام التالية:

  • انشاء منبعث
  • إضافة رصاصات الى sprites
  • انشاء طرقzier©B من أجل حركة sprite
  • ابق مستعدا للتنصيب التالي من هذه السلسلة, حيث سنكمل بناء لعبة الطائرة!

التشكرات و التزكيات

نود أن نشكر Daniel Ferenak لتزويده ايانا بفن اللعبة المستخدم لانتاج هذه السلسلة التعليمية.

من أجل تقدير هذه السلسلة بشكل كامل, ننصحك بفحص الكود من خلال نشرها على جهاز حقيقي بإدارة iOS 7 ستحتاج الى Xcode 5 و أخير نسخة iOS 7 SDK. في حال لم تكن لديك هذه الأدوات مسبقا, يمكنك تنزيلهم من مركز المطور Apple. حالما تقوم بتنزيلهم, قم بتنصيب software و ستكون جاهزا للبدء. 

الكــاتــب

    • مشاركة

ليست هناك تعليقات:

جميع الحقوق محفوظة لــ الشبح للمعلوميات 2019 ©