هذا المحتوي التعليمي سوف يعطينا نظرة عامة عن الملامح الجديدة ل spritekit التم تم تقديمها في ios 8 . فلقد تم تصميم تلك السمات الجديدة لتجعل دعم مؤثرات الالعاب المتطورة اسهل ويشمل الدعم ايضا لبرنامج open GLES لتظليل جزء , الاضاءة , الظلال اثار الفيزياء المتطورة , والرسوم المتحركة , والتكامل بواسطة scenekit . ففي هذا المحتوي سوف تتعلم كيفية تنفيذ تلك المزايا الجديدة .
تكوين المجموعة
-يتم تقسيم هذه السلسلة الي نوعين من الدروس واللذان يغطيان اهم مزايا برنامج spritekit . في الجزء الاول نلقي نظرة عن التظليل , و الاضاءة , و الظلال وفي الجزء الثاني سوف نتحدث عن الفيزياء و التكامل بواسطة scenekit .
-و سوف يكون كل جزء من تلك السلسلة مستقلا بذاته بحيث لا يعتمد عما قبله او بعده . و اوصي باتباعي خطوة بخطوة لفهم و استيعاب المزايا الجديدة لبرنامج spritekit . وبعد قراءة كل الاجزاء .
فبعد قرائتها سوف تكون قادرا علي تصميم كل من الالعاب البسيطة والمعقدة باستخدام السمات الجديدة ل Spritekit .
-تحميل مشروع xcode الذي انشأناه في الفقرة السابقة من Git Hub اذا كنت ترغب في متابعته .
(1) الفيزياء :-
-في ios8 , يقدم spritkit مزايا فيزيائية جديدة مثل الكينماتيكا العكسية , والقيود , وحقول الفيزياء , والفيزياء لكل بكسل .
-الكينماتيكا هي عملية حساب للموقع بالبعد الثلاثي الابعاد لنهاية بناية متصلة , فيعطيك زوايا كل المفاصل , اما الكينماتيكا العكسية فهي علي النقيض تماما , فيكون معطي فيها نهاية نقطة البناء , ويطلب منك الزوايا التي تحتاجها المفاصل لتحقق تلك النقطة , الصورة التالية توضح تلك المفاهيم .
الخطوة الاولي
-قم بفتح physics scene editor و قم باضافة رسمة Croquette-o.png للمستطيل الاصفر ,قم باختيار الرسمة ثم قم بتغيير الاسم في SkNode inspector ل ( First Node ) , قم بجعل physics definition body type ل None .
-قم باضافة صورة ثانية wood.png ثم قم بتغيير اسمها ل ( first node ) . قم بتغيير parent ل root . ثم قم بتحريك First Node بوضعها علي يمين Root و قم باعادة صياغة لها لتصبح في النهاية علي شكل مستطيل كما هو موضح بالاسفل . ثم قم بانشاء physics definition body type بمعني تحويلها ل None ..... و سوف تظهر لك النتائج مثل تلك الصورة التالية .
-قم بملاحظة انه عند اختيار selectnode , الدائرة البيضاء تظهر عند مركزها . حيث تمثل الدائرة نقطة الارتكاز حول (Spritekit) اي دوران يتم .
- غير الاسم second node
- غير ال parent ل first node
- ضعها علي يمين first node
- غير phyaics definition body type ل none
الـ Sprite الثاني
ا) قم باضافة رسمة في corqutte-o.pngب) غير اسمها ل third node
ج) غير parent ل second node
د)قم بوضعها علي يمين first node
و) قم بضبط حجمها حتي تحصل علي مستطيل
ي) غير physics definition body type ل none
,, وسوف تظهر لك النتائج مثل تلك الصورة ,,,
الخطوة الثالثة: التعديل و المحاكاة
لاختبار اتصال المفاصل والقيود ,فانت لا تحتاج لبناء وتشغيل مشروعك , حيث يوفر لك xcode تعيين كل من وضعي التعديل والمحاكاة .
-يعرف لك وضح المحاكاةالوقت الحقيقي لاختبار المشروع بينما يتم استخدام وضع الايديت وهو التعديل لانشاء المنظر الخاص بك وتعديله .حتي الان , كنا نعمل في وضع التعديل , وكما يجب ايضا عزيزي القارئ ملاحظة ان اي تغييرات تجريها في وضع المحاكاة لا يتم حفظها .
-فاثناء عملك في المشروع يمكنك تحديد ومعرفة اي وضع انت تعمل فيه . حيث عندما يكون الجزء اسفل الصورة التي تعمل عليها مظلل باللون الابيض فانت عمل في وضع التعديل , اما اذا كان مظلل باللون الازرق فانت تعمل في وضح المحاكاة .
-ثم اضغط shift>control>click , وقم بتحريك الرسومات حول الصورة . فتكون النتيجة ان سوف تدور الرسوم المتحركة . ومع ذلك , سوف يكون الدوران غريب بعذ الشئ ويحتاج لتعديله.
الخطوة الرابعة: قيود IK
قم بالتبديل لوضع التعديل ثم قم باضافة قليل من القيود ل sprite node , ثم قم بتحديد كل sprite node وقم بتغيير node وايضا تغيير خصائصها كما يلي .
-قم بتحديد ال root و secondnode ثم قم بتغيير القيود و جعل الزاوية الكبري ل صفر . ثم قم بتحديد ال الصورة الاولي والثالثة و اجعل نقطة ارتكازهم x هي صفر و زوايتهم الكبري قم بجعلها ل 90
-عن طريق تعديل تلك الخصائص , فسوف يتغير الحجم و الموضع ال sprite node بعد اضافة القيود , ويدويا قم بتحديد حجمها و موقعها , و تحويلها لو ضع المحاكاة لاختبار القيود الجديدة التي تم اضافتها .
,, وتوضح تلك الصورة بالاسفل التكوين الجديد للقيود .
الخطوة الخامسة: المجال الجاذب لل Node
المجال الجاذب يكون هو الاخر نظام مستحدث في sprite kit . فدعنا نري كيفية عمله باضافته في المشروع الذي نقوم بعمله . قم بفتح physicsScene.m و متغير مثله يسمي المجال الجاذب لل node من نوع SKFieldNode
@implementation PhysicsScene { SKFieldNode *magneticFieldNode; }
SKPhysicsBody *physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:self.frame]; [self.physicsWorld setGravity:CGVectorMake(0, -9)]; [self setPhysicsBody:physicsBody];
و لتكوين المجال العقدة الجاذب للشئ , تحتاج لتكوين قالبه الطبيعي وهكذا الحال بالنسبة لموقعه و شدته . و يجب ملاحظة ان كل SkFieldNode لها خصائصها المميزة التي تميزها .و الكود التالي يوضح لك كيفية جذب العقدة . فنضيف نحن فقط الكود الجديد ل المشهد الذي نقوم به (المشروع )
magneticFieldNode = [SKFieldNode magneticField]; [magneticFieldNode setPhysicsBody:[SKPhysicsBody bodyWithCircleOfRadius:80]]; [magneticFieldNode setPosition:CGPointMake(100, 100)]; [magneticFieldNode setStrength:3]; [self addChild:magneticFieldNode];
و لتكوين المجال العقدة الجاذب للشئ , تحتاج لتكوين قالبه الطبيعي وهكذا الحال بالنسبة لموقعه و شدته . و يجب ملاحظة ان كل SkFieldNode لها خصائصها المميزة التي تميزها .و الكود التالي يوضح لك كيفية جذب العقدة . فنضيف نحن فقط الكود الجديد ل المشهد الذي نقوم به (المشروع )
for (int i = 0; i < 300; i++) { SKSpriteNode *node4 = [SKSpriteNode spriteNodeWithTexture:[SKTexture textureWithImageNamed:@"wood.png"] 04 size:CGSizeMake(25, 25)]; [node4 setPhysicsBody:[SKPhysicsBody bodyWithRectangleOfSize:CGSizeMake(25, 25)]]; [node4 setPosition:CGPointMake(arc4random()%640, arc4random()%950)]; [node4.physicsBody setDynamic:YES]; [node4.physicsBody setAffectedByGravity:YES]; [node4.physicsBody setAllowsRotation:true]; [node4.physicsBody setMass:0.9]; [self addChild:node4]; }
الخطوة السادسة: التفاعلات (التأثيرات)
لرؤية المجال المغناطيسي او الجاذب في العمل , نحتاج لاضافة بعض العقد لكي يقوم المجال بجذبها , فيما يلي الكود , ونحن نقوم باعداد 300 عقدة . و يجب ملاحظة ان كل عقدة لها خصائصها الفيزيائية الخاصة بها ونحن نفعل خاصية affectedByGravity ال yes .
for (int i = 0; i < 300; i++) { SKSpriteNode *node4 = [SKSpriteNode spriteNodeWithTexture:[SKTexture textureWithImageNamed:@"wood.png"] size:CGSizeMake(25, 25)]; [node4 setPhysicsBody:[SKPhysicsBody bodyWithRectangleOfSize:CGSizeMake(25, 25)]]; [node4 setPosition:CGPointMake(arc4random()%640, arc4random()%950)]; [node4.physicsBody setDynamic:YES]; [node4.physicsBody setAffectedByGravity:YES]; [node4.physicsBody setAllowsRotation:true]; [node4.physicsBody setMass:0.9]; [self addChild:node4]; }
لانهاء ذلك اتبع الاكواد كما هي موضحة امامك .
-قم ببناء و تشغيل التطبيق لاختبار تاثير جذب العقدة امامك ام لا , للحصول علي معلومات اضافية عن المحاكاة الفيزيائية باستخدام برنامج Spritekit , انصحك بقرائة وثائق ابل حول هذا الموضوع .-(void)didMoveToView:(SKView *)view { SKPhysicsBody *physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:self.frame]; [self.physicsWorld setGravity:CGVectorMake(0, -9)]; [self setPhysicsBody:physicsBody]; magneticFieldNode = [SKFieldNode magneticField]; [magneticFieldNode setPhysicsBody:[SKPhysicsBody bodyWithCircleOfRadius:80]]; [magneticFieldNode setPosition:CGPointMake(100, 100)]; [magneticFieldNode setStrength:3]; [self addChild:magneticFieldNode]; for (int i = 0; i < 300; i++) { SKSpriteNode *node4 = [SKSpriteNode spriteNodeWithTexture:[SKTexture textureWithImageNamed:@"wood.png"] size:CGSizeMake(25, 25)]; [node4 setPhysicsBody:[SKPhysicsBody bodyWithRectangleOfSize:CGSizeMake(25, 25)]]; [node4 setPosition:CGPointMake(arc4random()%640, arc4random()%950)]; [node4.physicsBody setDynamic:YES]; [node4.physicsBody setAffectedByGravity:YES]; [node4.physicsBody setAllowsRotation:true]; [node4.physicsBody setMass:0.9]; [self addChild:node4]; } }
-قبل تكوين ذلك و تشغيل التطبيق , نتجاوز طريقة the touchesMoved:withEvent: لكي تكون قادر علي تحريك جذب العقدة باستخدام اصبعك .
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent )event { for (UITouch *touch in touches) { [magneticFieldNode setPosition:[touch locationInNode:self]]; }}
2)الدمج بواسطة scenekit:-
ان scenekit هو برنامج ذو مستوي عالي موضوعي لل C ويقوم بانشاء التطبيقات و الالعاب التي تستخدم الرسومات ثلاثية الابعاد . فهو يدعم كلا من استيراد , المعالجات البارعة و ايضا اداء اصول الرسم ثلاثي الابعاد . فعلي سبيل المثال طريقة الخوارزمي فقط تتطلب شرح محتويات المشهد الذي تقوم به , و رسوماته المتحركة واحداثه التي تريد انت تأديتها .
-ومن خلال scenekit , انت قادر الان علي انشاء و تقديم محتوي ثلاثي الابعاد باستخدام scenekit , الذي لديه هيكل فرعي والذي تستطيع استخدامه في طريقين
- انشاء بيئة مستقلة scenekit
- و دمجها في spritekit
-فان scenekit لديه تكوين التسلسل الهرمي الفرعي . فعند انشاء بيئة مستقلة بذاتها scenekit , فان القاعدة الاساسية للبناء الشجري او الفرعي يكون مثيل SCNNode كما هو واضح امامك في المخطط بالاسفل , فبواسطة SCNNode وحده لايحتوي كما هو مبين علي اي محتوي مرئي وعندما يتم تقديم اداء محتوي المشهد . فهو ببساطة يقوم بتحديد الموقع في الفراغ الذي يمثل موقع ,دوران وايضا حجم العقدة التي لها علاقة بالنظام الاصلي .
-فعند دمج scenekit الي التطبيق القائم عليspritekid , تحتاج لتعريف sk3dNode للشئ المراد انشائه ك دوران الشئ حول المشهد الخاص بك . فذلك يعني ان التسلسل الهرمي الاساسي يتغير الي ما يلي :
الخطوة الاولي: معاينة نماذج واقعية :-
فكلا من Spritekit و scenekit يدعموا عدد من صيغ ملفات استيراد النماذج . و يمكنك معاينة تلك النماذج في الوقت الصحيح في xcode . فداخل مجلد القوام في مشروعك
(موارد > القوام ) , هناك ملف يسمي ship.dae . عند تحديد هذا الملف .,تكون الان قد قدمت بواجهة مستخدم جديد كما هو موضح في الاسفل
الكيانات: تضم هذه المجموعة من المعلومات على الرسوم المتحركة مسبقا، موضع الكاميرا والأضواء والمواد التي يحددها ملف نموذج. والنماذج المعرفه من قبل الفايل , ويكون الفايل الذي قمت بفتحه تيحتوي فقط على معلومات بشأن علم الهندسة والماديات.
الرسم البياني المشهد: تحتوي هذه المجموعة من المعلومات عن شبكة الكائن الأصلي. في هذه الحالة، تم إنشاء الكائن ككل وترى سوى شبكة واحدة
الخطوة الثانية: استيراد نموذج خارجي :-
لاستخدام scenekit في تركيبة مع Spritekit , تحتاج لاستيراد مكتبة Scenekit من اطار scenekit . قم بفتح Scenekitscene.m
وقم بادراجه كما هو موضح في الاسفل .
#include <SceneKit/SceneKit.h>
سوف نستخدم الان النموذج الذي تم تخزينه في ship.dae كمشهد ثلاثي الابعاد . بداخل didMoveToView: method, قم بانشاء ScNScene للشئ الذي تعمل عليه والذي بدوره يقوم بتحميل مشهد من هذا الملف .
SCNScene *shipScene = [SCNScene sceneNamed:@"ship.dae"];
أ)قم بانشاء SK3DNode object ب) قم بتعريف مشهد SCenekit لتقديمه
-وفي تلك الحالة , المشهد الذي يتم تقديمه هو Ship scene . لاحظ هنا ان ايضا يجب تعريف موقع العقدة وحجمها .
SK3DNode *sk3DNodeFist = [[SK3DNode alloc] initWithViewportSize:CGSizeMake(300, 300)]; [sk3DNodeFist setPosition:CGPointMake(200,300)]; [sk3DNodeFist setScnScene:shipScene];
وفي النهاية , قم باضافة الكائن SK3DNode كعقدة تابعة ل SKSCene object
[self addChild:sk3DNodeFist];
[self setBackgroundColor:[SKColor greenColor]];
-هذا ما يجب أن تبدو طريقة the complete didMoveToView:كما هو عليه , قم بانشائه و قم بتشغيل التطبيق لكي تري النتيجة .
(void)didMoveToView:(SKView *)view { [self setBackgroundColor:[SKColor greenColor]]; SCNScene *shipScene = [SCNScene sceneNamed:@"ship.dae"]; SK3DNode *sk3DNodeFist = [[SK3DNode alloc] initWithViewportSize:CGSizeMake(300, 300)]; [sk3DNodeFist setPosition:CGPointMake(200,300)]; [sk3DNodeFist setScnScene:shipScene]; [self addChild:sk3DNodeFist]; }
الخطوة الثالثة: انشاء مشهد مخصوص :-
-دعنا نقوم بانشاء مشهد اكثر تعقيدا الذي يحتوي علي SCNNode object . و بخصوص المشهد الثاني , نحتاج لانشاء SK3DNode اخر .
SK3DNode *sk3DNode = [[SK3DNode alloc] initWithViewportSize:CGSizeMake(400, 400)]; [sk3DNode setPosition:CGPointMake(150,200)];
ثم , نقوم بانشاء SCNScene object , فواحدة من شأنها ان تحتوي علي العقد التابعة للمشهد .
SCNScene *sceneObject = [SCNScene scene];
-فسوف يكون ل Scene object ثلاث عقد :
ا)الكاميرا : فهي تستخدم لعرض المشهد من خلال موقف معين
2)الضوء: هذه العقدة يمكنك ان تري فيها خصائص المواد المختلفة للشئ ثلاثي الابعاد .فانت عادة تقوم بتحديد نوع الضوء و لونه
3)3D object : فهذا هو الشئ الذي تم استيراده او تعريفه بواسطة الكود الخاص بك . فافتراضيا , ان scenekit قادر علي تعريف عدة اشياء بارامترية ثلاثية الابعاد , والتي تكون مثل الحيد , مربع , الهرم , المجال , الاسطوانة , المخروط , انبوب , كبسولة , الارضية , نص ثلاثي الابعاد , او شكل مخصوص .
ولكل عقدة فردية , انت تنفذ مقابلها دائما 3 اشياء . دعنا نأخذ عقدة الكاميرا علي سبيل المثال .
* انشاء SCNCamera object و تعريف خصائصه
* انشاء SCNNode لكي يتم تعيين SCNScene
* قم باضافة SCNNode كعقدة تابعة ل SCNScene
-دعونا الان نقوم بانشاء ثلاث عقد الذي قمت بالاشارة اليهم مسبقا . فهذا ما نحتاجه لانشاء عقدة الكاميرا .
SCNCamera *camera = [SCNCamera camera]; SCNNode *cameraNode = [SCNNode node]; [cameraNode setCamera:camera]; [cameraNode setPosition:SCNVector3Make(0, 0, 40)]; [sceneObject.rootNode addChildNode:cameraNode];
افتراضيا , تم تحديد المشهد ثلاثي الابعاد و موضع الكاميرا الذي يكون موجود عند نقطة الاصل (0.0) .فباستخدام خاصية الموقع , يمكنك ضبط الكاميرا علي طول الثلاثة محاور X,y,z لتغيير موضعها .
-و الضوء يتطلب عمل اكثر قليلا , ولكن ينبغي علينا ان نقوم باتباع الاكواد الاتية لتكون سهلة بالنسبة لك لفهمها
SCNLight *spotLight = [SCNLight light]; [spotLight setType:SCNLightTypeDirectional]; [spotLight setColor:[SKColor redColor]]; SCNNode *spotLightNode = [SCNNode node]; [spotLightNode setLight:spotLight]; [spotLightNode setPosition:SCNVector3Make(0, 0, 5)]; [cameraNode addChildNode:spotLightNode]; [sceneObject.rootNode addChildNode:spotLightNode];
سنقوم ايضا بانشاء كائن الحيد , كما هو موضح في التعليمات البرمجية المتكررة التالية
SCNTorus *torus= [SCNTorus torusWithRingRadius:13 pipeRadius:1.5]; SCNNode *torusNode = [SCNNode nodeWithGeometry:torus]; [torusNode setTransform:SCNMatrix4MakeRotation(M_PI / 3, 0, 1, 0)]; [sceneObject.rootNode addChildNode:torusNode];
واخيرا تم وضع المشهد الذي نريد تقديمه و اظهاره و نقوم باضافة SK3DNode كعقدة تابعة ل SKScene
[sk3DNode setScnScene:sceneObject]; [self addChild:sk3DNode]
-(void)didMoveToView:(SKView *)view { [self setBackgroundColor:[SKColor greenColor]]; SCNScene *shipScene = [SCNScene sceneNamed:@"ship.dae"]; SK3DNode *sk3DNodeFist = [[SK3DNode alloc] initWithViewportSize:CGSizeMake(300, 300)]; [sk3DNodeFist setPosition:CGPointMake(200,300)]; [sk3DNodeFist setScnScene:shipScene]; [self addChild:sk3DNodeFist]; SK3DNode *sk3DNode = [[SK3DNode alloc] initWithViewportSize:CGSizeMake(400, 400)]; [sk3DNode setPosition:CGPointMake(150,200)]; SCNScene *sceneObject = [SCNScene scene]; SCNCamera *camera = [SCNCamera camera]; SCNNode *cameraNode = [SCNNode node]; [cameraNode setCamera:camera]; [cameraNode setPosition:SCNVector3Make(0, 0, 40)]; [sceneObject.rootNode addChildNode:cameraNode]; SCNLight *spotLight = [SCNLight light]; [spotLight setType:SCNLightTypeDirectional]; [spotLight setColor:[SKColor redColor]]; SCNNode *spotLightNode = [SCNNode node]; [spotLightNode setLight:spotLight]; [spotLightNode setPosition:SCNVector3Make(0, 0, 5)]; [cameraNode addChildNode:spotLightNode]; [sceneObject.rootNode addChildNode:spotLightNode]; SCNTorus *torus= [SCNTorus torusWithRingRadius:13 pipeRadius:1.5]; SCNNode *torusNode = [SCNNode nodeWithGeometry:torus]; [torusNode setTransform:SCNMatrix4MakeRotation(M_PI / 3, 0, 1, 0)]; [sceneObject.rootNode addChildNode:torusNode]; [sk3DNode setScnScene:sceneObject]; [self addChild:sk3DNode];}
الخطوة الرابعة: ايحائية المشهد :-
- يمكنك تحريك المشهد باستخدام CABasicAnimation . فانت فقط تستطيع انشائه من خلال animationWithKeypath . فالتصميم الذي قمنا بانشائه في الاكواد التالية سوف يكرر هذا الي مالا نهاية و وقد يستغرق مدة خمس ثوان . قم باضافة الكود التالي ل didMoveToView: method.
CABasicAnimation *torusRotation = [CABasicAnimation animationWithKeyPath:@"rotation"]; torusRotation.byValue = [NSValue valueWithSCNVector4:SCNVector4Make(1, 1, 0, 4.0*M_PI)]; [torusRotation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]]; [torusRotation setRepeatCount:INFINITY]; [torusRotation setDuration:5.0]; [torusNode addAnimation:torusRotation forKey:nil];
قم ببناء وتشغيل التطبيق لاحتبار الرسوم المتحركة
-واذا كنت ترغب معرفة المزيد عن sprite kit , انا اوصيك بقراءة دروس spritekit التالية :-1) بناء لعبة الطائرة بواسطة Spritekit
2)بناء قيادة الصواريخ مع ٍSpritekit
3)نظام تشغيل ios SDK : بناء العاب حقائق
-واذا كنت ترغب في قراءة المزيد عن برنامج Spritekit , اوصيك بقراءة دليل ابل Sprite kit للبرمجة او تصفح مرجع البرنامج .
خاتمــــــــة.
استنتاج هذا ويختتم البرنامج التعليمي الثاني من هذه السلس التي تتكون من جزئين لشرح الميزات الجديدة للإطار SpriteKit للنظام الشغيلي 8. في هذا الجزء، تعلمت كيفية استخدام محاكاة الفيزياء ودمج SceneKit. إذا كان لديك أي أسئلة أو تعليقات، لا تتردد في التخلي في الرد في التعليقات.
ليست هناك تعليقات: