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

آخر المواضيع

iOS SDK: بناء لعبة حقائق – برنامج بدء تشغيل المشروع

iOS SDK: بناء لعبة حقائق – برنامج بدء تشغيل المشروع
iOS SDK: بناء لعبة حقائق – برنامج بدء تشغيل المشروع

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



المقدمة

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


لعبة الحقائق النهائية

1. برنامج بدء التشغيل الاولي

ابدأ بمشروع SpriteKit Xcode جديد و سمه حقائق. المعلومات المنشورة المستخدمة خلال الأجزاء الثلاث هي:
  • هدف النشر: 7
  • الأدوات: iPad
  • توجه الأداة: صورة

أسلوب لوح الحالة المخفي

لاحظ ان اطر العمل الأربعة التالية متضمنة أوتوماتيكيا في المشروع: CoreGraphics, UIKit, SpriteKit, و Foundation. سترى ثلاثة أصناف, صورة (Spaceship.png) و ملف Main.storyboard. يمكنك حذف الصورة بما انك لن تستخدمها.

قم الان بفتح Myscene.m و اكتب طريقة whole -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event. لا تحتاج الى انشاء إشارة نقر في هذا المشهد لانك ستستخدم عدة UIKit UIButtons لتفاعل المستخدم.

2. الخلفيات, العلامات, و الازرار

ابدأ بتغيير لون خلفية SKScene من خلال تغيير خواص self.backgroundColor. لاحظ أنها استخدمت كائن SKColor مع خواص لمكونات اللون الأحمر و الأزرق و الأخضر. قم الان بتغيير النص الى "حقائق!!"  او أي عنوان اخر ترغبه.

تقتضي الخطوة التالية بإضافة الموارد الضرورية الى مشروعك, يمكنك ايجادهم بملف الموارد. على الرغم من انك لن تستخدم كل الموارد الان, يجب ان تضيفهم كلهم. بما انك ستستخدم اطار عمل UIKit, قم بإضافة الطريقة المحددة -(void) didMoveToView:(SKView *)view التي ستكشف فيما اذا انتقال المشهد قد حصل بلا مشاكل. اذا لم تحدث اية مشاكل, سيقوم التطبيق بتحميل الموارد الى الشاشة. اضف هذه الطريقة الى الكود. ستقوم بالإعلان عن ثلاثة ازرار: واحد لبدء اللعبة, و واحد للخيارات و الخير للخروج من التطبيق.

اضف ثلاثة UIButtons الى MyScene.m. ستبدو كهذه:
 

@implementation MyScene {

    UIButton *startButton;

    UIButton *optionsButton;

    UIButton *exitButton;

}



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

-(void) didMoveToView:(SKView *)view{

    startButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];

    startButton.frame = CGRectMake(CGRectGetMidX(self.frame)-100, CGRectGetMidY(self.frame), 200, 70.0);

    startButton.backgroundColor = [UIColor clearColor];

    [startButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal ];

    UIImage *buttonImageNormal = [UIImage imageNamed:@"StartBtn.png"];

    UIImage *strechableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth:12 topCapHeight:0];

    [startButton setBackgroundImage:strechableButtonImageNormal forState:UIControlStateNormal];

    [self.view addSubview:startButton];



    optionsButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];

    optionsButton.frame = CGRectMake(CGRectGetMidX(self.frame)-100, CGRectGetMidY(self.frame)+90, 200, 70.0);

    optionsButton.backgroundColor = [UIColor clearColor];

    [optionsButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal ];

    UIImage *buttonOptionsImageNormal = [UIImage imageNamed:@"OptionsBtn.png"];

    UIImage *strechableButtonOptionsImageNormal = [buttonOptionsImageNormal stretchableImageWithLeftCapWidth:12 topCapHeight:0];

    [optionsButton setBackgroundImage:strechableButtonOptionsImageNormal forState:UIControlStateNormal];

    [self.view addSubview:optionsButton];



    exitButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];

    exitButton.frame = CGRectMake(CGRectGetMidX(self.frame)-100, CGRectGetMidY(self.frame)+180, 200, 70.0);

    exitButton.backgroundColor = [UIColor clearColor];

    [exitButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal ];

    UIImage *buttonExitImageNormal = [UIImage imageNamed:@"ExitBtn.png"];

    UIImage *strechableButtonExitImageNormal = [buttonExitImageNormal stretchableImageWithLeftCapWidth:12 topCapHeight:0];

    [exitButton setBackgroundImage:strechableButtonExitImageNormal forState:UIControlStateNormal];

    [self.view addSubview:exitButton];



}


قم بتشغيل المشروع و انظر الى واجهة الجذر الجديدة. اذا اردت, يمكنك تعديل الموقع, الاحجم, موقع كائنات الواجهة. اذا اردت تعلم المزيد عن SKLabelNode أو UIButton, انصحك باللعب مع هذه الأصناف قليلا. حان الوقت الان لاضافة أصناف جديدة الى مشروعك.

3. لعبة جديدة و خيارات SKScenes

الخطوة 1

بما انك قمت بإضافة عدة ازرار, حان الوقت الان لاستخدامهم في ياعادة توجيه المستخدم لواجهة أخرى. اضفهم الى الأصناف. اختر ملف < جديد < ملف و صنف Objective-C. سم الأصناف FactsScene و OptionsScene. لاحظ ان كلاهما سيكونان صنف فرعي لـ SKScene.


لديك أربعة ملفات متوفرة في مشروعك: FactsScene.h, FactsScene.m, OptionsScene.h, و OptionsScene.m. لاحظ ان ملفات الانشاء لكلا الأصناف تقريبا فارغة. لذلك عليك إضافة بادئ الصنف. من أجل كلا الصنفين استخدم طريقة -initWithSize: حاول و اضفها بنفسك. اذا كانت لديك اية مشكلة, سيقوم المقطع التالي بمساعدتك:

      

-(id)initWithSize:(CGSize)size{

    if (self = [super initWithSize:size]) {

        NSLog(@"Opstions Scene");

    }

    return self;

}

يجب ان تقوم بتطبيقها مرة أخرى على كلا الصنفين. الان و قد اصبح لديك بادئ الصنف, حان الوقت الان لتعديل كود UIButton من الخطوة الأخيرة الى التغيير بين الأصناف. ارجع الى MyScene.m و استورد كلا الأصناف في قسم الاستيراد:      

#import "OptionsScene.h"

#import "FactsScene.h"

تحتاج الان في startButton, optionsButton, و exitButton الى إضافة نشاط تقليدي. عند كل زر, اضف سطر الكود الموافق.

      

[startButton addTarget:self action:@selector(moveToGame) forControlEvents:UIControlEventTouchUpInside];

[optionsButton addTarget:self action:@selector(moveToOptions)

forControlEvents:UIControlEventTouchUpInside];

[exitButton addTarget:self action:@selector(endApplication) forControlEvents:UIControlEventTouchUpInside];

يجب ان ترى ثلاثة تحذيرات ("مختار غير معلن عنه").  لا تقلق! حان الوقت الان الى إضافة هذه الطرق الى صنفك.       

-(void) moveToGame {}

-(void) moveToOptions {}

-(void) endApplication {}

كل واحدة مسؤولة عن نشاط معين و اسم كل طريقة يعد ذاتي الشرح. تتشابه طرق -(void) moveToGame و -(void) moveToOptions,  بما ان كلاهما يستخدم لانشاء انتقال من   SKSceneالى اخر. عند كل طريقة, يجب عليك انشاء كائن وجهة SKScene و كائن انتقال, و عرض المشهد الجديد. لاحظ انه بما انك تستخدم كائنات UIKit, بامكانك أيضا إزالتهم من المشهد عند انتقالات SKScene. اذا واجهتك اية مشاكل بهذه الخوات, يمكنك الاستعانة بهذا المقطع:

-(void) moveToGame{

    NSLog(@"moveToGame");

    FactsScene* factsScene = [[FactsScene alloc] initWithSize:CGSizeMake(CGRectGetMaxX(self.frame), CGRectGetMaxY(self.frame))];

    SKTransition* transition = [SKTransition revealWithDirection:SKTransitionDirectionUp duration:1];

    [startButton removeFromSuperview];

    [optionsButton removeFromSuperview];

    [exitButton removeFromSuperview];

    [self.scene.view presentScene:factsScene transition:transition];

}



-(void) moveToOptions{

    NSLog(@"moveToOptions");

    OptionsScene* optionsScene = [[OptionsScene alloc] initWithSize:CGSizeMake(CGRectGetMaxX(self.frame), CGRectGetMaxY(self.frame))];

    SKTransition* transition = [SKTransition revealWithDirection:SKTransitionDirectionLeft duration:1];

    [startButton removeFromSuperview];

    [optionsButton removeFromSuperview];

    [exitButton removeFromSuperview];

    [self.scene.view presentScene:optionsScene transition:transition];

}

تعد الطريقة الأخيرة -(void) endApplication ابسط بما انها تستخدم فقط لانهاء التطبيق.     

-(void) endApplication{

    [startButton removeFromSuperview];

    [optionsButton removeFromSuperview];

    [exitButton removeFromSuperview];

    exit(0);

}

الخطوة 2

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

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

اضف طريقة 


-(void) didMoveToView:(SKView *)view

    Add a UIButton object

    Configure the UIButton

    Add the @selector method

    Import the MyScene.h

أولا, اذهب الى OptionsScene.h و أضف:

@property (nonatomic, retain) UIButton* backButton;

قم الان بتحويل انتباهك الى OptionsScene.m. يجب إضافة مقاطع الكود الزائفة الى طريقة didMoveToView,  UIButtonو تركيبة الزر.



-(void) didMoveToView:(SKView *)view{

  _backButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];

  _backButton.frame = CGRectMake(CGRectGetMidX(self.frame)-100, CGRectGetMidY(self.frame)+180, 200, 70.0);

  _backButton.backgroundColor = [UIColor clearColor];

  [_backButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal ];

  UIImage *buttonExitImageNormal = [UIImage imageNamed:@"ExitBtn.png"];

  UIImage *strechableButtonExitImageNormal = [buttonExitImageNormal stretchableImageWithLeftCapWidth:12 topCapHeight:0];

  [_backButton setBackgroundImage:strechableButtonExitImageNormal forState:UIControlStateNormal];

  [_backButton addTarget:self action:@selector(moveToHome) forControlEvents:UIControlEventTouchUpInside];

  [self.view addSubview:_backButton];

  }

تاليا, اضف طريقة @selector.

      

-(void) moveToHome{

  MyScene* myScene = [[MyScene alloc] initWithSize:CGSizeMake(CGRectGetMaxX(self.frame), CGRectGetMaxY(self.frame))];

  [_backButton removeFromSuperview];

  [self.scene.view presentScene:myScene];

}

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

4. خيارات SKScene

الخطوة 1

تكون خيارات اللعبة حيث يمكن للمستخدم تغيير تركيبات اللعبة. في الوقت الحالي, ستركز فقط على خيارين: الموسيقا و الصوت. تحتاج الى ان تضيف SKLabelNode و UISwitch و كائن AVAudioPlayer الى OptionsScene.h:

@property (nonatomic, retain) IBOutlet UISwitch *musicSwitch;

@property (nonatomic, retain) IBOutlet UISwitch *soundSwitch;

@property (nonatomic, retain) SKLabelNode* soundTitle;

@property (nonatomic, retain) SKLabelNode* musicTitle;

بعد ذلك قم بتعيين الكائنات على the OptionsScene.m داخل طريقة didMoveToView كـ:

_soundSwitch = [[UISwitch alloc] initWithFrame:CGRectMake(CGRectGetMidX(self.frame)+50, CGRectGetMidY(self.frame)-26, 100, 100)];[_soundSwitch addTarget: self action: @selector(flipMusicAndSound:) forControlEvents:UIControlEventValueChanged];

[self.view addSubview: _soundSwitch];



_musicSwitch = [[UISwitch alloc] initWithFrame:CGRectMake(CGRectGetMidX(self.frame)+50, CGRectGetMidY(self.frame)+50, 100, 100)];

[_musicSwitch addTarget: self action: @selector(flipMusicAndSound:) forControlEvents:UIControlEventValueChanged];

[self.view addSubview: _musicSwitch];



_soundTitle = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];

[_soundTitle setText:@"Sound"];

[_soundTitle setFontSize:40];

[_soundTitle setPosition:CGPointMake(CGRectGetMidX(self.frame)-80, CGRectGetMidY(self.frame))];

[self addChild:_soundTitle];



_musicTitle = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];

[_musicTitle setText:@"Music"];

[_musicTitle setFontSize:40];

[_musicTitle setPosition:CGPointMake(CGRectGetMidX(self.frame)-80, CGRectGetMidY(self.frame)-80)];

[self addChild:_musicTitle];

ستحصل على تحذير.  من اجل تصحيح ذلك,  اضف طريقة flipMusicAndSound. تفحص هذه الطريقة حالة _soundSwitch و _musicSwitch UISwitches,, و تعين مفتاح افتراضي لكل خاصية باستخدام NSUserDefaults. قبل ان تكمل الطريقة, يجب ان تضيف كائن NSUserDefaults الى الصنف.     

@implementation OptionsScene{

    NSUserDefaults* defaults;

}

ثم يجب تعيينها في طريقة initWithSize كـ:

defaults = [NSUserDefaults standardUserDefaults];

الخطوة 2

أصبحت الان جاهزا لاستخدام ميزات NSUserDefaults. ستقوم باستخدامها لتخزين حالة خواص الصوت و الموسيقا عبر كامل التطبيق. يمكنك كتابة و اكمال طريقة flipMusicAndSound. ستستخدم قيمة الرقم 1 لتشغيل الصوت و الموسيقا, و 0  للعكس. flipMusicAndSound موجودة اسفلا.

- (IBAction)flipMusicAndSound:(id)sender {

    if (_musicSwitch.on) {

        [defaults setInteger:1 forKey:@"music"];

    }

    else {

        [defaults setInteger:0 forKey:@"music"];

    }



    if (_soundSwitch.on) {

        [defaults setInteger:1 forKey:@"sound"];

    }

    else {

        [defaults setInteger:0 forKey:@"sound"];

    }

}

اذا قمت بتشغيل المشروع و اللعب بكلا المفتاحين, سترى ان في كل مرة تذهب الى OptionsScene سيكون لكلا المفتاحين حالة افتراضية, بدلا من الحالة الأخيرة المعرفة.

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

      

long soundDefaults = [defaults integerForKey:@"sound"];

long musicDefaults = [defaults integerForKey:@"music"];



if (soundDefaults == 1) {

  [_soundSwitch setOn:YES animated:YES];

}

else {

  [_soundSwitch setOn:FALSE animated:YES];

}



if (musicDefaults == 1) {

  [_musicSwitch setOn:YES animated:YES];

} else{

  [_musicSwitch setOn:FALSE animated:YES];

}

تقضي الخطوة الأخيرة في ملف OptionsScene.m بإزالة مواد UISwitch من superview في كل مرة ينقر المستخدم على الزر:

 [_soundSwitch removeFromSuperview];

[_musicSwitch removeFromSuperview];

واجهة الخيارات

الخطوة 3


انتقل الى FactsScene.m. يمكنك الان إضافة عناصر الصوت و الموسيقا. كما فعلنا مع OptionsScene, نحتاج الى استخدام NSUserDefaults للحصول على القيمة للموسيقا و الصوت. سنحتاج أيضا الى كائن لتخزين طريق الموسيقا و اخرا لمشغل موسيقا iOS. لذا سنعلن عنهم كالتالي:   

@implementation FactsScene{

    NSUserDefaults* defaults;

    NSString* musicPath;

}

Also in the FactsScene.h:

@property (nonatomic, strong) AVAudioPlayer* musicPlayer;

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

musicPath = [[NSBundle mainBundle] pathForResource:@"music" ofType:@"mp3"];

_musicPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:[NSURL fileURLWithPath:musicPath] error:NULL];

_musicPlayer.numberOfLoops = -1; // loop forever

_musicPlayer.volume = 0.7;



long musicFlag = [defaults integerForKey:@"music"];

if (musicFlag == 1){

  [_musicPlayer play];

} else {

  [_musicPlayer stop];

}

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

هل تذكر طريقة -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event من ملف انشاء MyScene.m؟ ستقوم بتعريفها و استخدامها هنا.

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

    for (UITouch *touch in touches) {

        [self touchWillProduceASound:@"False"];

    }

}
لاحظ انه لم يتم الإعلان عن -(void) touchWillProduceASound:(NSString*)answer بعد. اعلن عنها. انها تستخدم لاختبار فيما اذا كانت اللمسة "صحيحة" أو "خاطئة" (سيكون هنالك المزيد عن هذا في الدرس القادم). انها تحلل (NSString*)answer و تنتج الصوت تبعا لمحتوى NSString ذاك.

يتم انشاء الصوت بالكائن SKAction. انها تقوم بانشاء كائن صوت و يتعوف صوتا محددا. مرة أخرى, يحدث ها فقط اذا كانت خاصية الصوت تعمل  (المعطاة من قبل NSUserDefaults) تعمل.



-(void) touchWillProduceASound:(NSString*)answer{

    long soundFlag = [defaults integerForKey:@"sound"];



    if (soundFlag == 1){

        SKAction* sound;

        if ([answer isEqualToString:@"False"]) {

            sound = [SKAction playSoundFileNamed:@"beep.mp3" waitForCompletion:YES];

            NSLog(@"inside");

        }

        [self runAction:sound];

    }

}

قم بتشغيل المشروع و فحص تفاعلات الصوت و الموسيقا الجديدين. قم بتفعيل و تعطيل كلا UISwitches التابعة للصوت و الموسيقا و انتقل الى مشهد اللعبة الجديدة لفحصهم بشكل صحيح.

الخاتمة

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

الكــاتــب

    • مشاركة

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

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