هذا
الدرس سيعلمك كيفية استخدام اطار عمل Sprite Kit لانشاء لعبة طائرات
بسيطة. ستتعلم في هذه المرحلة كل ما يهم مفاهيم Sprite Kit الأساسية:
الاحياء, المنبعثات, كشف التصادم و أكثر بكثير!
شكل السلسلة
ستقسم دروس الطائرة الى ثلاثة أجزاء من أجل تغطية كل قسم بشكل كامل. و بعد قراءة أجزاء الدرس الثلاثة, سيتكمن القراء من انشاء لعبة 2D مشوقة باستخدام اطار عمل Sprite Kit مزودا بـ iOS 7.
سيقدم كل حزء نتيجة عملية, و سينتج عن مجموع كل الأجزاء اللعبة النهائية. في حين أن كل جزء من السلسلة يمكن أن يقرأ بشكل مستقل, سننصحكم بان تتابعوا معنا خطوة بخطوة لتفهموا بشكل كامل الموضوع المقدم. تزود الكود الاصلية لكل لعبة بشكل إضافي مع كل منشور
شكل السلسلة
ستقسم دروس الطائرة الى ثلاثة أجزاء من أجل تغطية كل قسم بشكل كامل. و بعد قراءة أجزاء الدرس الثلاثة, سيتكمن القراء من انشاء لعبة 2D مشوقة باستخدام اطار عمل Sprite Kit مزودا بـ iOS 7.
سيقدم كل حزء نتيجة عملية, و سينتج عن مجموع كل الأجزاء اللعبة النهائية. في حين أن كل جزء من السلسلة يمكن أن يقرأ بشكل مستقل, سننصحكم بان تتابعوا معنا خطوة بخطوة لتفهموا بشكل كامل الموضوع المقدم. تزود الكود الاصلية لكل لعبة بشكل إضافي مع كل منشور
مرحبا بعودتك الى جزئنا الثاني من لعبة الطائرات مع 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
- ابق مستعدا للتنصيب التالي من هذه السلسلة, حيث سنكمل بناء لعبة الطائرة!
من أجل تقدير هذه السلسلة بشكل كامل, ننصحك بفحص الكود من خلال نشرها على جهاز حقيقي بإدارة iOS 7 ستحتاج الى Xcode 5 و أخير نسخة iOS 7 SDK. في حال لم تكن لديك هذه الأدوات مسبقا, يمكنك تنزيلهم من مركز المطور Apple. حالما تقوم بتنزيلهم, قم بتنصيب software و ستكون جاهزا للبدء.
ليست هناك تعليقات: