تثبيت وتجهيز المشروع
هذا البرنامج التعليمي سوف يعلمك كيفية استخدام بيئة وبرنامج Cocos2D لمنصة iOS لاجهزة آبل من أجل إنشاء العاب بسيطة 2D ثنائية البعد تستهدف جميع أجهزة iOS.
هو مصمم للمبتدئين وكذلك المتقدمين والمحترفين علي حد سواء، وخلال البرنامج التعليمي سوف تتعرف على المفاهيم الأساسية ومبادئ برنامج Cocos2D مثل: التفاعل مع الاجهزة عن طريق اللمس، القوائم وواجهة المستخدم، المجسمات، الاوامر، والاختلافات في الاوامر ... تابع.
سيكون البرنامج التعليمي لبرنامج Cocos2D مقسما إلى ثلاثة أجزاء، حتي يتم شرح وتغطية جميع جوانب البرنامج، بعد شرح الثلاثة أجزاء ستكون قادرا علي إنشاء ألعاب ثنائية البعد استثنائية ومثيرة باستخدام Cocos2D.
سيكون البرنامج التعليمي لبرنامج Cocos2D مقسما إلى ثلاثة أجزاء، حتي يتم شرح وتغطية جميع جوانب البرنامج، بعد شرح الثلاثة أجزاء ستكون قادرا علي إنشاء ألعاب ثنائية البعد استثنائية ومثيرة باستخدام Cocos2D.
كل جزء سيكون له ناتج عملي، وبعد فهم تلك الأجزاء سيكون هناك الناتج الأخير وهو اللعبة النهائية.
علي الرغم أن كل جزء من الشرح يمكن قراءته بشكل مستقل, ولكن لفهم أوضح وأعمق فإننا نقترح أن تتابع الشرح خطوة بخطوة, وسيكون مضمنا ايضا مع الشرح الكود المصدرى لكل جزء بطريقة منفصلة، مما يتيح لك بدء الشرح من أي جزء تريد بدون قراءة الأجزاء السابقة.
منظمة السلسلة:
قبل بدء الشرح نود أن نشكر Rodrigo Bellão علي إعطائه لنا صور الوحوش.
1: بدء التثبيت والأساسيات
إذا كانت هذه هي المرة الاولي لك في التعامل مع برنامج Cocos2D، فسيتوجب عليك تحميل وتثبيت مكتبة الـ SDK من هذا الموقع الرسمي Cocos2D for iPhone Webpage او من موقع GetHub.
بمجرد انتهاء التحميل سيتوجب عليك أيضا تثبيت قوالب مشاريع Xcode الأساسية، فقط فك ضغط الملفات وافتح شاشة الدوس "Terminal" الموجودة بالمسار الذى قمت
بتثبيت برنامج Cocos2D فيه وأدخل الامر التالي:
./install-templates.sh -f -u
الأمر سيعمل فقط إذا قمت بتثبيت Xcode في المسار الإفتراضي
2: تحطيم الوحوش!
الآن, لدينا برنامج Cocos2D مثبت، لبدء اللعبة يجب علينا تشغيل برنامج Xcode ومن ثم الذهاب إلي قائمة File ثم New ثم Project, سنري الواجهة الآن تشبه هذه الصورة.
يجب علينا اختيار قالب Cocos2D iOS من القائمة الجانبية لبرنامج Cocos2D الإصدار الثاني فما فوق، هذا القالب ينشئ ما نحتاجه لبدء المشروع، وهو المكتبات الخاصه بالمنصة لتشغيل برنامج Cocos2D، يتم انشاء المشروع بثلاث فئات: (AppDelegate و HelloWorldLayer و IntroLayer) اليوم سوف نعمل علي HelloWorldLayer
3:البيكسل ونقط الترقيم
البيكسل هو أصغر عنصر يمكن التحكم به وعرضه علي الشاشه، وهناك العديد من أحجام الشاشات في عائلة ال iOS.
فبالتالي تقدم منصة Cocos2D نقاط ترقيم لمساعدة المطورين علي تحديد ووضع الكائنات علي الشاشة، وهذا ما يسمي بنقاط الترقيم.
يتم تنسيق وقياس مساحة الجهاز عادة بالبيكسل ومع ذلك فإن المقياس المنطقي للمساحة يمكن قياسه بالنقطة, وفي الجدول التالي عرض العلاقة المباشرة بين الجهاز والنقطة والبيكسل :
من خلال برنامج Cocos2D الإصدار 0.99.5-rc0 فما فوق يمكن للمستخدم وضع الكائنات علي الشاشة فقط باستخدام نقاط الترقيم، وهنا الأفضلية لأن المستخدم يعلم بأن وضع الكائنات علي الشاشة سوف يكون ثابت مهما تغير الجهاز الذي سوف يعمل به التطبيق!
ومع ذلك يمكن للمستخدم وضع الكائنات باستخدام البيكسل اذا أراد فقط ببساطة عن طريق تعديل الرسالة التى يتم تمريرها للكائن عن طريق الكود
// Director
CCDirector *director [CCDirector sharedDirector];
CGSize objectA = [director winSize]; // points notation
CGSize objectB = [director winSizeInPixels]; // pixel notation
// Node
CCNode *node = [...];
CGPoint posA = [node position]; // points notation
CGPoint posB = [node positionInPixels]; // pixel notation
// Sprite
CCSprite *sprite = [...];
CGRect rectA = [sprite rect]; // points notation
CGRect rectB = [sprite rectInPixels]; // pixel notation
ولاحظ ايضا انه يمكن وضع الكائنات بكلي الطريقتين
[sprite setPosition:ccp(x,y)]; // points notation
[sprite setPositionInPixels:(x,y)] // pixel notation
ولكن من الافضل وضع الكائنات علي الشاشة باستخدام نقاط الترقيم حيث يكون المستخدم مطمئنا أن مكان الكائنات لن يتغير وسوف يكون ثابتا علي جميع الاجهزة.
الآن بما أننا نعلم كيف تعمل نقاط الترقيم وكذلك البيكسلات، فإن الخطوة التالية هي فهم أين توضع الكائنات عند تمرير الإحداثيات المحددة للمكان، في برنامج Codos2D النقطة (0,0) هي الجانب الأيسر السفلي من الجهاز، والنقطة (480,320) هي الجانب الايمن العلوي كما بالصورة الاتية:
كمثال لوضع كائن ما يمكنك استخدام الكود التالي :
sprite.position = ccp(480,320); // at the top-right corner
sprite.position = ccp(0,320); // at the top-left corner
sprite.position = ccp(480,0); // at the bottom-right corner
sprite.position = ccp(240,160); // at the center of the screen
4: الخلفية واللوجو
برنامج Cocos2D يوفر العديد من المشاهد, كل مشهد يمكن ان يُرى كشاشة مختلفة, كى يمكنك استخدام القوائم والمستويات في اللعبة والحقوق وأي شئ آخر تراه داخل اللعبة، ولكن عليك الإنتباه أنه يمكنك تشغيل مشهد واحد فقط في وقت واحد,
بداخل كل مشهد يوجد العديد من الطبقات مثل برنامج الفوتوشوب، الطبقات أيضا تحتوي علي العديد من الخصائص، ويمكن وضع العديد منها علي الشاشة معا, يمكنها أن تحتوي علي عدة خصائص مثل لون الخلفية، التحركات، القوائم أو حتي الظلال.
هنا ، الأرواح هي ببساطة صور ثنائية البعد يمكنك تحريكها، تدويرها، أو تغيير مكانها وهكذا, في الخطوة التالية سنغير الكود المصدرى للمشروع وسنضع شبح، ولكن قبل وضعه سنحتاج لبعض الفن أو المؤثرات والتي يمكن إيجادها في ملف resources ، جميع ال resources المستخدمة في هذا الشرح هي مصممه خصيصا لشاشة ال iPad ، بمجرد تحميلهم ستجد ستة صور قم بنسخهم لهذا الملف resources الخاص بمشروعك وتأكد من انك قمت بتحديد هذا الاختيار
"Copy items into destination goups's folder (if needed)"
الآن هنا HelloWorldLayer.m يمكنك مسح جميع ما بداخل جملة الشرط
(self=[super init])).
سيمكنك إنشاء الشبح عن طريق هذا الكود :
CGSize winSize = [CCDirector sharedDirector].winSize;
CCSprite *backgroundImage = [CCSprite spriteWithFile:@"WoodRetroApple_iPad_HomeScreen.jpg"];
backgroundImage.position = ccp(winSize.width/2, winSize.height/2);
[self addChild:backgroundImage z:-2];
عن طريق هذا الكود سيمكنك تغيير صورة الخلفية الإفتراضية لهذه الفئة، الكود سهل جدا في الفهم
*اولا يقوم بالسؤال عن مساحة الشاشة
*ثم يقوم بتجهيز ال CCSprite بالصورة التي نحتاج لتحميلها
*ثم يقوم بوضع الشبح الخاص بنا في منتصف الشاشة
*ومن ثم يقوم بوضع الشبح في المشهد
ولاحظ اننا وضعنا "z = -2" لاننا نريد ان تكون الخلفية بالتاكيد خلف كل الكائنات
والآن لنضع لوجو للتطبيق، بالنظر للكود بالأعلي, يمكننا بالفعل معرفة كيفية وضع الكود.
الطريقة سهلة وسلسة ولكن اذا كنت تحتاج لبعض المساعدة فيمكنك استخدام الكود التالي:
CCSprite *logo = [CCSprite spriteWithFile:@"MonsterSmashing.png"];
logo.scale = 1.2;
logo.position = ccp(winSize.width /2 , 800 );
[self addChild: logo];
حان الآن وقت تشغيل التطبيق لنرى إن كان كل شئ يعمل بصورة صحيحة, يجب ان تري صورة مشابهة لتلك الصورة.
5: انشاء القوائم
الهدف الرئيسي من هذه الخطوة هو إضافة قائمة رئيسية، هذه القائمة ستحتوي فقط علي عنصرين:
Play
Sound
اختيار Play سوف يقوم ببدء لعبة جديدة أما اختيار Sound فهو زر ثنائي يمكننا من تشغيل أو إيقاف الصوت (الخلفية الموسيقية).
لتشغيل زر Play باستخدام فئة CCMenuItem يجب علينا فقط وضع سطر (for now) هذا السطر يقوم بتقديم العنصر في القائمة، هذا الإختيار يتم تقديمه باستخدام صورة (التي وضعناها مسبقا
بملف (resources) ، باستخدام هذا الكود:
CCMenuItem *startGameButtonImage = [CCMenuItemImage itemFromNormalImage:@"playButton.png" selectedImage:@"playButtonSelected.png" target:self selector:@selector(onStartGamePressed)];
لإنشاء وشرح زر Play يجب علينا تمرير أمره إلي عدة رسائل:
أولا itemFromNormalImage : هو معلومات عن مكان وجود ملف الصورة
و selectedImage هي الصورة التي تظهر عند تمرير الأصبع علي الزر
وselector هو الأمر الذي يتم تنفيذه عند الضغط علي الزر وهو في هذه الحاله onStartgamePressed وسنتحدث عنه لاحقا.
الزر الثنائي هو أكثر تعقيدآ بقليل من الزر العادى حيث انه يعمل علي تنفيذ أمرين (التشغيل والإيقاف)
لذا يجب علينا تحديد الحالتين ووضعهما في الزر النهائي CCMenuItemToogle
اختياري on و off يمكن كتابة أكوادهم بالضبط كزر Play، الآن بعد كتابة الأمرين يجب علينا دمجهما باستخدام الكود التالي:
CCMenuItem *startGameButtonImage = [CCMenuItemImage itemFromNormalImage:@"playButton.png" selectedImage:@"playButtonSelected.png" target:self selector:@selector(onStartGamePressed)];
CCMenuItem *_soundOn = [[CCMenuItemImage itemFromNormalImage:@"soundOn.png"
selectedImage:@"soundOnSelected.png" target:nil selector:nil] retain];
CCMenuItem *_soundOff = [[CCMenuItemImage itemFromNormalImage:@"soundOff.png"
selectedImage:@"soundOffSelected.png" target:nil selector:nil] retain];
CCMenuItemToggle *toggleItem = [CCMenuItemToggle itemWithTarget:self
selector:@selector(soundButtonTapped:) items:_soundOn, _soundOff, nil];
بعد كتابة الكود السابق يجب علينا إنشاء القائمة الفعلية التي ستحتوي الأمرين عن طريق استخدام CCMenu وإرسال عدة CCMenuItems عن طريق menuWithItems بالضبط كأى كائن آخر لدينا، ويجب علينا ايضا تحديد مكانها وطريقة انزلاقها علي الشاشة وهي هنا في هذه الحالة عمودية, بالكود التالي:
CCMenu *menu = [CCMenu menuWithItems:startGameButtonImage, toggleItem, nil];
menu.position = ccp(winSize.width * 0.5f, winSize.height * 0.4f);
[menu alignItemsVerticallyWithPadding:15];
//Add the menu as a child to this layer
[self addChild:menu];
سابقا قلنا أن الselector سيستخدم طريقة محددة، سنستخدم اثنتان onStartGamePressed و soundButtonTapped
الاولي ستستبدل المشهد الحالي أما الثانية ستقوم بتشغيل أو إيقاف صوت اللعبة
ولكن قبل فعل أي شئ علينا إنشاء مشهد جديد عن طريق File > New > File وقم باختيار CCNode وأعد تسميتها الي MonsterRun
سيتم إضافة ملفين جديدين لمشروعك وهما MonsterRun.h و MonsterRun.m
+(CCScene *) scene {
CCScene *scene = [CCScene node];
MonsterRun *layer = [MonsterRun node];
[scene addChild: layer];
return scene;
}
الآن سنعود الي
HelloWorldLayer.m
ونضع مرجع إلي
MonsterRun
#import "MonsterRun.h"
إلى الآن سنترك هذا الكود وسنقوم بتغطيته في الشرح التالي, سنقوم بتسريع الأحداث إلى القوائم والطريقتين التي ذكرناهما مسبقا onStartGamePressed و soundButtonTapped
- (void)soundButtonTapped:(id)sender {
// Covered in Part 3
}
- (void)onStartGamePressed {
CCScene *MonsterRunScene = [MonsterRun scene];
CCTransitionFlipAngular *transition = [CCTransitionFlipAngular transitionWithDuration:0.5f scene:helloWorldScene];
[[CCDirector sharedDirector] replaceScene:MonsterRunScene];
}
الآن قم بتشغيل المشروع لتري النتائج إن كان كل شئ يعمل علي ما يرام ستري صورة شبيهة للتالي:
6: النتائج
إلى الآن يجب أن تكون قادرآ علي فهم وتنفيذ الآتي:
*تثبيت منصة Cocos2D.
*تعديل خيارات مشروع Cocos2D.
*إضافة مشاهد وطبقات وكائنات وتعديل أماكنهم.
*الفرق بين البيكسل ونقاط الترقيم.
*وضع الكائنات علي الشاشة باستخدام محاور (x-,y-).
*تحديد واستخدام القوائم.
ليست هناك تعليقات: