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

آخر المواضيع

تعلم مؤثرات لمس الشاشة والرسوم المتحركة الأساسية للعبة iPhone SDK.


تُعتبر خاصية " لمس الشاشة " من اهم الخصائص الموجودة في اجهزة الآيفون والآي باد، تعتبر اللمسة غير مفيدة إذ لم يترتب عليها حدوث شئ له معني علي الشاشة، لذلك فإن هذه المقالة تتحدث عن كيفية جعل لمس الشاشة مرتبطة بحدوث شئ، وكيف أن نجعل تلك اللمسة تؤدي إلي تحريك شئ علي الشاشة وبناءًا عليه تؤدي مهمة سنقوم بتخصصيها، وفي النهاية ستكون تلك اللمسة البسيطة آداة تحكم قوية، والتي من الممكن أن نقوم بإعادة إستخدامها مرة اخري
لفعل أشياء تفوق ما تتخيل أن تقوم به.
خطوة 1: إنشاء مشروع جديد 
قم بفتح برنامج xCode وإختر بدء مشروع جديد، 
Start new project > View Based applications 
قم بتسمية المشروع "Jumping" وبذلك ستطيع أن تسير معي خلال المقالة بشكل سلس.



خطوة 2: قم بجلب المصادر التي سوف تعمل بها
بعد أن تقوم بفتح الملفات المرفقة، قم بفتح المجلد المسمي "images" ستجد في هذا المجلد كل الصور التي سنحتاجها خلال هذا المشروع، سوف تحتاج إلي أن تصنع نسخة من الصور في المجلد الخاص بالمصادر Resources Folder، إفعل هذا ببساطة بطريقة السحب والإسقاط Drag & Drop، قم بسحب الصور من المجلد الخاص إلي جزء "Groups & Files" في الشريط الجانبي لبرنامج xCode.



في النافذة التي سوف تظهر لك، قم بتعليم علامة صح علي المربع المكتوب امامه Copy items into destination group's folder.



الآن يفترض أن تكون كل الصور التي نحتاج إليها في المشروع قد تم نسخها إلي نفس المجلد الذي يحتوي علي ملفات المشروع، ولكي تحتفظ بهذا المجلد نظيف دائمًا، دعنا نقوم بتجميّع كل الصور التي قمنا بجلبها معًا، قم بإختيار كل الصور عن طريق الضغط بإستمرار علي السهم الأسفل مع النقر علي كل واحدة علي حدة بينما تضغط علي زر Ctrl، بعد أن تقوم بتعليم كل الملفات قم بالضغط ضغطة يمني علي الفارة مع الإستمرار في الضغط علي زر Ctrl قم بإعادة تسميّة هذه المجموعة معًا بأي إسم تريد إختياره، لقد قمت بتسميّة خاصتي "images".




قم ببناء وتنفيذ التطبيق الآن بحالته الحالية، يفترض ألا يكون هناك اخطاء اثناء تنفيذ الكود، ويفترض أن يُظهر لك المحاكي Simulator شاشة مُسطحّة رُماديّة اللون.
خطوة 3: قم بتعديل JumpingAppDelegate.m
بداخل الملف المسمي jumpingAppDelegate.m قم بالتعديل علي الدالة المسماة didFinishLaunchingWithOptions عن طريق إضافة السطر التالي:
// Allocate a new view, add this line:self.viewController = [jumpingViewController alloc];

[window addSubview:viewController.view];
سيقوم هذا التعديل بإعادة تخصيص شكل جديد للعرض قابل للتحكم، هذه الخطوة هامة لأننا لا نريد أن نستخدم شكل العرض المصنوع من واجهة المنشئ interface Builder ولكن نريد أن نصنع اسلوب آخر للعرض خاص بالتطبيق الذي ننشأه.
خطوة 4: تعديل JumpingViewController.h
في الملف المسمي jumpingViewController.h قم بتعريف خاصيّة جديدة، عن طريق إضافة:

UIImageView *player;

وقبل كلمة @end قم بإضافة:

@property (nonatomic, retain) UIImageView *player;

سوف يسمح هذا لنا بإستخدام المُشغِّل Player كما لو أنَّه خاصية من خواص الكلاس الخاص بالصور.

الآن يجب أن تكون يكون الجانب الأعلي من أسطر الكود كالآتي:

#import <UIKit/UIKit.h> @interface jumpingViewController : UIViewController {    UIImageView *player;} @property (nonatomic, retain) UIImageView *player; @end
خطوة 5: تعديل jumpingViewController.m
ستكون خطوتنا التالية إضافة بعض الواجهات الرسوميّة للعرض
قم بفتح jumpingViewController.m ثم قم بمسح الدوال التي عليها تعليقات، واترك الدوال التي ليس تعليقات.
في الأعلي، وبعد علامة @ قم بإضافة ثم تحديث الدالة المسماة dealloc إلي الآتي:
@synthesize player;
وبعد هذه الدالة، قم بإضافة الكود الآتي:
- (void)dealloc {    [player release];    [super dealloc];}
 الدالة المسماة addButton سوف تُنادي مؤخرًا لأضافة زر إلي الواجهة، واول شئ يجب ملاحظته هنا أن هذا زر قابل للتعديل، هناك ايضًا الدالة المسماة buttonPressed والتي سوف تُنادي تلقائيًا عندما يتم لمس الشاشة.

قم بتعريف دالة مؤقتة بإسم buttonPressed بإضافة الكود الآتي:

- (void)addButton {

    UIButton *button = [[UIButton buttonWithType:UIButtonTypeCustom]
                                         initWithFrame:CGRectMake(240, 150, 50, 50)];

    // Set the button's image
    [button setBackgroundImage:[UIImage imageNamed:@"button.png"]
                 forState:UIControlStateNormal];

    // Attach an event
    [button addTarget:self action:@selector(buttonPressed)
                 forControlEvents:UIControlEventTouchUpInside];

    // Add the button to the view
    [self.view addSubview:button];
}

ستقوم الدالة NSLog بإرسال إخطار إلي الكونوسول، والذي من الممكن أن تدخل إليه عبر القائمة، فقط بتحرير cmd+shift+run.
الزر الجديد يجب أن يظهر علي الشاشة بعد أن يتم تحميل الواجهة، ولكي يحدث هذا قم بإضافة الكود الآتي:

- (void)buttonPressed {    NSLog(@"Button pressed");}

هذه الدالة تكون مُعرَّفة إفتراضيًا لُمتحكمات العرض، سنقوم بإضافة صورة كخلفيّة للشاشة ونقوم بإرسالها إلي الدالة addButton Message.

قم بحفظ عملك، ثم قم ببناء المشروع وتشغيله، يجب أن تري خلفيّة الشاشة التي قد قمت بإضافتة مع زر أحمر اللون، إذا تم فتح نافذة الكونسول، فإن لمس هذا الزر يجب أن يعرض رسالة في الكونسول عبر الدالة NSLog () 
خطوة 6: إضافة شخصيّة إلي الشاشة
لكي نقوم بعرض الكائن UIImage قم بإضافة هذا الكود إلي jumingViewController.m باعلي الدالة addButton:
- (void)loadView {     // Allocate the view    self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];     // Set the view's background color    self.view.backgroundColor = [UIColor blackColor];     // Create the background image    UIImageView *bg = [[UIImageView alloc] initWithFrame:CGRectMake(0 , 0, 572, 206)];    [bg setImage:[UIImage imageNamed:@"bg.jpg"]];    [self.view addSubview:bg];     // Create the button    [self addButton];}
هذا الكود سوف يقوم بكلا من - إنشاء وبدء الكائن UIImage، و إضافته إلي الواجهة الرئيسية، أما الدالة normalStance فسوف تكون هامة في إستخدامات قادمة.

سنقوم الآن بإرسال initPlayer إلي الواجهة الرئيسية، نقوم بعمل هذا عن طريق تعديل الدالة loadView كالآتي:

- (void)initPlayer {
    self.player = [[UIImageView alloc] initWithFrame:
                   CGRectMake(10, 100, 77.0, 94.0)];
    [self normalStance];
    // opaque for better performance
    self.player.opaque = YES;
    [self.view addSubview:self.player];
}
- (void)normalStance {
    [self.player setImage:[UIImage imageNamed:@"ryu.png"]];
}
قم ببناء الكود وتشغيله، هل ظهرت لك شخصيّة علي شاشة الآن؟ 
خطوة 7: جعل الشخصيّة التي قمنا بإضافته تقفز
الآن، لنقوم ببعض المرح!
قم بإضافة الكود الآتي أعلي الدالة addButton
- (void)loadView {
    // Allocate the view
    self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];

    // Set the view's background color
    self.view.backgroundColor = [UIColor blackColor];

    // create the background image
    UIImageView *bg = [[UIImageView alloc] initWithFrame:CGRectMake(0 , 0, 572, 206)];
    [bg setImage:[UIImage imageNamed:@"bg.jpg"]];
    [self.view addSubview:bg];

    //create the button
    [self addButton];

    // now initialize the player
    [self initPlayer];
}
تقوم الدالة الاولي التي قمنا بإضافتها بمسح أيّ صور مرتبطة بالكائن player، نقوم بإستخدامها لمحو كل اُطر التحريك المستخدمة سابقًا، اما الدالة الثانية تقوم بإضافة حركة بسيطة إلي الكائن player، ستظهر اثناء حركة الكائن.

قم بإضافة الكود الآتي بعد الدالة jumpStance
- (void)cleanStance {    [self.player setImage:nil];    self.player.animationImages = nil;}-(void)jumpStance {    [self cleanStance];     NSArray *imageArray = [[NSArray alloc] initWithObjects:                                                   [UIImage imageNamed:@"jump1.png"],                                                   [UIImage imageNamed:@"jump2.png"], nil];         self.player.animationImages = imageArray;        self.player.animationDuration = 0.3;        self.player.contentMode = UIViewContentModeBottomLeft;        [self.view addSubview:self.player];        [self.player startAnimating];}

تقوم هذه الدالة تحديدًا بتحريك الكائن، في البداية تقوم بتغيير مجموعة الصور، ثم تقوم بتحريك الكائن بمقدار 40 بيكسل رأسيًا، 

اما هذا السطر البرمجي:
- (void)jump:(UIImageView *)image {    [self jumpStance];    [UIView beginAnimations:nil context:NULL];    [UIView setAnimationDuration: 0.3];    [UIView setAnimationCurve: UIViewAnimationCurveEaseOut];    [UIView setAnimationBeginsFromCurrentState:YES];        image.transform = CGAffineTransformMakeTranslation(0, -40);    [UIView commitAnimations];}

يقوم بإضافة تأثير easing، مما يجعل الحركة تبدو واقعيّة.
قم بتغيير الدالة buttonPressed حتي تبدو الدالة هكذا:

[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
قم ببناء الكود وتشغيله، بالضغط علي الزر الآن، ستقوم الشخصيّة بالقفز، لكن سوف تتجمد في الهواء، لقد قمت بعمل رائع لجعله يقفز، والآن دعنا نكمل العمل لنقوم بإنزاله مرة أخري!
خطوة 8: إنهاء تحريك الشخصيّة
أعلي الدالة jump التي قمنا بإضافتها من قبل، أضف الكود الآتي: 

- (void)buttonPressed {    [self jump:self.player];}
ستقوم مجموعة الدوال هذه بإرجاعه مرة اخري الي وضعه الطبيعي، ستقوم بتحريكه إلي الوضع الإبتدائي.

الآن قم بتعديل الدالة jump لتبدو كالآتي:
-(void)fall:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {    [self cleanStance];    [self normalStance];     [UIView beginAnimations:nil context:NULL];    [UIView setAnimationCurve: UIViewAnimationCurveEaseOut];    [UIView setAnimationBeginsFromCurrentState:YES];    [UIView setAnimationDuration:0.2];        self.player.transform = CGAffineTransformMakeTranslation(0, 0);    [UIView commitAnimations];} 
قم ببناء الكود وتشغيله، الآن قم بالضغط علي الزر الأحمر، ستقوم الشخصيّة بالقفز والعودة مرة اخري الي الأرض، هذه هو كل شئ ! 
- (void)jump:(UIImageView *)image {    [self jumpStance];    [UIView beginAnimations:nil context:NULL];    [UIView setAnimationDuration: 0.3];    [UIView setAnimationCurve: UIViewAnimationCurveEaseOut];    [UIView setAnimationBeginsFromCurrentState:YES];     // Execute fall after the animation ended    [UIView setAnimationDelegate:self];    [UIView setAnimationDidStopSelector:@selector(fall:finished:context:)];    image.transform = CGAffineTransformMakeTranslation(0, -40);    [UIView commitAnimations];}
الخلاصة
الآن يجب ان يكون لديك فهم أساسي بأكثر الدوال إستخدامًا مثل: UIButton, NSLog, UIImageView وكيف أن هذه الدوال تقوم بتحريك الكائنات، هناك أيضًا نماذج مختلفة يمكن تطبيقها واستخدامها لإضافة ازرار اخري إلي الشاشة، والتي ستقوم بدعم حدوث اشياء اخري، لذا، من الممكن أن يقوم الكائن لديك بالمزيد من الحركات.

الكــاتــب

    • مشاركة

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

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