تعطيك هذه الدورة نظرة عامة للمييزات الجديدة لاطار عمل SpriteKit الذي يقدم حسب نظام التشغيل iOS 8 . هذه المميزات الجديدة تم تصميمها لجعلها اسهل في دعم المؤثرات في الالعاب المتطورة بما في ذلك دعم تخصيص OpenGL ES لتظليلل الاجزاء , الاضاءة , الضلال , مؤثرات فيزيائية جديدة متقدمة و مؤثرات حركية و اندماج مع المشهد SceneKit . في هذه الدورة ستتعلم كيفيه مواكبه هذه المميزات الجديدة .
المتطلبات الاساسية :
تتطلب هذه الدورة ان تكون على دراية تامه بكلا SpriteKit , Objective-C على حد سواء . للتفاعل مع التظليل و تحرير المشهد بدون تأخير .كذلك نوصي بتحميل وتثبيت Xcode 6.1 او ماهو احدث منه . ويمكنك تحميل المشروع Xcode من GitHub ان ترغب بالمتابعة دائما .
تنسيق المجموعات:
بما أنه كل جزء من هذه المجموعات يقف من تلقاء نفسه , نوصي بأتباع خطوات طويلة متسلسلة خطوة خطوة لفهم صحيح للمميزات الجديدة لأطر SpriteKit .
بعد قراءه كلا الجزئين ستكون قادرا على أنشاء كلا من لعبه بسيطة ومتقدمة بأستخدام الخصائص الجديدة لأطر SpriteKit .
مقدمةيوفر SpriteKit عرض تقديمي RENDERING لخط الانابيب الذي يستخدم لتحريك الجني الصغير Sprites , ويشمل العرض التقديمي تقديم حلقة تتكرر بين تحديد المكون و تقديم القطة .
يقوم المطور بتحديد محتوى كل لقطة وكيف تتغير .
SpriteKit تستخدم GPU الخاصه بالجهاز لتقديم اكثر كفاءه لكل لقطة . أطر SpriteKit متوفرة لكلا من iOS , OS x و تدعم مختلف الانواع من المحتوى , تشمل Sprite , النص , الشكل , الفيديو .
المميزات الجديدة لـ SpriteKit التي تقدم في النظام التشغيلي iOS 8 هي :
التظليل (ٍShaders) : ويخصص كيفيه رسم الاشياء في الشاشة , وتكون مفيدة لأضافة أو تعديل التأثيرات . التظليل يستند على OpenGL ES لتظليل الاجزاء. كل تأثير يتم تطبيقه على أساس كل - بكسل . كذلك سوف تستخدم C مثل اللغه البرمجية لبرمجة التظليل و يمكن تطويره الى كل من iOS, OS X . التظليل يمكن ان يطبق لمشهد او لدعم فئات SKSpriteNode, SKShapeNode, SKEmitterNode, SKEffectNode, and SKScene
الظل & الاضاءة(Lighting & Shadows) :
يستخدم الأضاءه لتسليط الضوء على مشهد او عفريت Sprite. كل ضوء يدعم اللون و الظلال , ومطابقة السقوط الفوري . ويمكن ان تمتلك اكثر من ثمانيه اضواء مختلفه لكل عفريت .
الفيزياء (Physics) : تستخدم الفيزياء لأضافة الواقعية للألعاب .
تكامل SceneKit :
من خلا ل الـ SceneKit , تستطيع أحتواء محتوى ثلاثي البعد في تطبيقات SpriteKit و تسيطر عليهم مثل الحالات المنتظمة SKNode . حيث يتم تقييم العرض للمحتوى الثلاثي البعد مباشرة بجانب تقيمم عرض خطوط الانبوب للـ SpriteKit , ويمكنك أستيراد ملفات موجودة مثل dae , abc. الى SKScene
2- نبذه عن المشروع :
لقد قمنا مسبقا بأنشاء مشروع Xcode للبداية به . حيث يمكننا من البداية فورا بأستخدام المميزات الجديدة SpriteKi . مع ذلك هناك بعض الاشياء التي يجب ان تكون على دراية بها .- يستخدم المشروع Objective-C , يستهدف اجهزة الايفون التي تعمل بنظام تشغيل iOS 8.1. مع ذلك يمكنك تغيير الجهاز المستهدف اذا أردت .
- اسفل Resources > Editor , ستجد ثلاث فايلات SpriteKit للمشاهد بأمتداد (.sks) في هذه المجموعة . قم بأضافة فايل المشهد SpriteKit الرابع . كل فايل مشهد يكون مسؤول عن قسم محدد للدورة
- التظليل يمكن تهيأته بأحدى الطريقتين . الاولى استخدام طرق اضافية بينما الثانية بأستخدام طرق جديده من SpriteKit. والهدف من هذا هو لتتعلم الأختلافات لتكون قادرا في المستقبل من اختيار ما يلائمك تماما .
- اذا كنت تمثل كائن SKScene بأستخدام فايل SpriteKit scene سوف تستخدم دائما الارشفه للفايل : الطريقة . ومع ذلك فمن الالزامي اضافه كل فايل SpriteKit scene الطبقه المقابلة من SKScene class.- أذا كنت تمثل كائن SKScene بدون استخدام فايل SpriteKit scene . يجب عليك أستخدام initWithSize : هذه الطريقة تستخدم في احدث اصدار لنظام التشغيل iOS.
- مراقب عرض اللعبة ( GameViewController) ومشهد اللعبة يشمل طريقة تسمى الارشفة من فايل . هذه الطريقة تحول الك ائنات الرسومية المعرفة فيSpriteKit scene ويتم تحويلهم الى SKScene object . هذه الطريقة تستخدم الكلمات التعريفية , منذ ذلك يتم أرجاع المثيل من الفئه الذي يتم أستدعائه وفي هذه الحالة تكون طبقة SKScene . يأخذ تحميل المشروع لحظات ليتصفح بالمجلدات , الصفوف , والمصادر . بناء و تشغيل المشروع على جهاز فيزيائي او نظام محاكاه تشغيلي iOS . اذا كانت التطبيقات تعمل بدون مشاكل اذن يكون الوقت لبداية استكشاف الخصائص الجديده للنظام التشغيل iOS 8 SpriteKit .
3- التظليل
الخطوة الأولى : أنشاء SpriteKit Sceneفي مشروع Xcode , قم بأضافة ملف جديد SpriteKit Scene , أختار ....File > New >File , من قسم الـ Resource قم بأختيار SpriteKit Scene.ثم قم بتسميته ShaderSceneEditor ثم أضغط على أنشاء Create. واجهه رصاصيه اللون تظهر .
الخطوة الثانية: مواصفات SpriteKit Sceneفي المفتش SKNode في جهه اليمين , يجب ان ترى خاصيتين , الحجم والجاذبية . تعيين الخاصية الحجم مع الأخذ بعين الاعتبار قرار شاشة الجهاز الخاص بك وتعيين الجاذبية إلى 0.0.
ستلاحظ أن حجم المستطيل الأصفريتغير ليعكس التغييرات التي قمت بها. المستطيل الأصفر هو واجهة الجهاز الظاهري. وتبين لكم كيف يتم عرض الكائنات على جهازك.
الخطوة الثالثة :إضافة لون Sprite
بجانب كائن المكتبه جهه اليمين , قم بأختيار لون Sprite ثم اسحبه الى المستطيل الاصفر .
الخطوة الرابعة :أضافة ظل مخصص
الطريقة الأولى , قم بأضافة فايل جديد لمصدر فارغ File > New > File. اختار Other > Empty من قسم iOS , وقم بتسميته Shader01.fsh , وقم بأضافه الكود التالي للفايل لجديد ..
void main()
{
float currTime = u_time;
vec2 uv = v_tex_coord;
vec2 circleCenter = vec2(0.5, 0.5);
vec3 circleColor = vec3(0.8, 0.5, 0.7);
vec3 posColor = vec3(uv, 0.5 + 0.5 * sin(currTime)) * circleColor;
float illu = pow(1. - distance(uv, circleCenter), 4.) * 1.2;
illu *= (2. + abs(0.4 + cos(currTime * -20. + 50. * distance(uv, circleCenter)) / 1.5));
gl_FragColor = vec4(posColor * illu * 2., illu * 2.) * v_color_mix.a;
}
يولد قالب التشفير اعلاه مزيج من الالوان تأخذ مركز الدائرة و حافاتها بنظر الاعتبار . قامت Apple بأظهار هذا التظليل في قسم الـ SpriteKit اثناء WWDC 2014.
بالعودة الى المحرر , اختار اللون كيان العفريت . و التظليل المخصص و اختار الظل الذي قمت بأنشاءه , الان يجب ان ترى التظليل مفعل .
الخطوة الخامسة :الوقت الحقيقي للتغذية الرجعية .
برمجة التضليل تستخدم Xcode و SpriteKit بسهوله , لانك تستلم وقت حقيقي للتغذية الرجعية , قم بفتح Assistant Editor ,وقم بتمثيله لروءيه كلا SpriteKit scene الذي قمت بأنشاءه
دعنا نرى كيف يعمل ذلك , مقدمه للخطأ في وقت التنفيذ في التظليل , مثال عن طريق تغيير اسم متغير وحفظ التغييرات لنرى النتيجة.
كما ترون،Xcode يوفر وسيلة سهلة وسريعة لتنبيه المطور حول أخطاء التظليل الممكنة. ميزة هي أنك لا تحتاج إلى بناء أو نشر التطبيق الخاص بك على جهازك أو دائرة Ios محاكي لمعرفة ما إذا كان كل شيء يسير على ما يرام. انه حان الوقت لإضافة تظليل آخر ,و برمجته يدويا .
الخطوة السادسة :إضافة ظل مخصص الخطوة الثانية.
في . هذه الطريقة سوف تتعلم كيفية :
استدعاء قائمة التظليل :
تعيين تظليل للكائن SpriteKitأنشاء وارسال خصائص الى المظلل
في هذه الخطوة عليك اظافة SKSpriteNode خطوة 6: إضافة شادر مخصص: الأسلوب 2 في هذه الخطوة، سوف تتعلم كيفية: الدعوة لتظليل يدويا تعيين تظليل إلى كائن SpriteKit إنشاء وإرسال خصائص لتظليل في هذه الخطوة، عليك إضافة SKSpriteNode المخصصة في مكان شريط المستخدم ومن ثم عليك استخدام تظليل لتعديل اللون والملمس من SKSpriteNode. الخطوة الأولى هي إضافة تظليل آخر. اسم تظليل shader02.fsh جديدة وإضافة كتلة التعليمات البرمجية التالي إلى ملف تظليل :
4. الإضاءة والظلال :الإضاءة والظلال هما الخصائص التي نلعب معا. والهدف من هذا القسم هو لإضافة العديد من العقدالضوئية والعفاريت، واللعب مع ممتلكاتهم. الخطوة 1: إضافة الضوء LightingSceneEditor.sks فتح وتصفح الكائنات داخل مكتبة الوسائط على اليمين. في مكتبة الوسائط، يمكنك ان ترى الموارد المدرجة في المشروع. حدد واسحب background.jpg إلى المستطيل الأصفر. إذا لم تكن قد غيرت قرار المشهد الافتراضي، ينبغي للصورة تناسب داخل المستطيل. عند تحديدSprite ستلاحظ أن لديها العديد من الخصائص مثل الوظيفة، الحجم، قناع الإضاءة، الظل الفيزياء تعريف، وغيرها الكثير.
يجب أن تأخذ اهتماما خاصا لممتلكات categoryBitMask. إذا قمت بتعيين أنه إلى 1، وعلى ضوء هذا التفاعل مع كل العفريت. تسميته ضوء وتعيين zPosition إلى 1.
مقتطف الكامل لSKLightNode ينبغي أن تبدو هذه:
الخطوة 4: تغيير موقع الضوء عند هذه النقطة لديك ضوء الثاني. ولكن دعونا نضيف بعض تفاعل للمستخدم. لذلك يجب عليك إضافة touchesMovedt: مع withEvenطريقة وتغيير موقف ضوء، مع الأخذ بعين الاعتبار موقع Tap
في . هذه الطريقة سوف تتعلم كيفية :
استدعاء قائمة التظليل :
تعيين تظليل للكائن SpriteKitأنشاء وارسال خصائص الى المظلل
في هذه الخطوة عليك اظافة SKSpriteNode خطوة 6: إضافة شادر مخصص: الأسلوب 2 في هذه الخطوة، سوف تتعلم كيفية: الدعوة لتظليل يدويا تعيين تظليل إلى كائن SpriteKit إنشاء وإرسال خصائص لتظليل في هذه الخطوة، عليك إضافة SKSpriteNode المخصصة في مكان شريط المستخدم ومن ثم عليك استخدام تظليل لتعديل اللون والملمس من SKSpriteNode. الخطوة الأولى هي إضافة تظليل آخر. اسم تظليل shader02.fsh جديدة وإضافة كتلة التعليمات البرمجية التالي إلى ملف تظليل :
void main()
{
gl_FragColor = texture2D(myTexture,v_tex_coord) * vec4(1, 0.2, 0.2, 1);
}
قم بفتح ملف التنفيذ الخاص بـ الطبقة ShaderScene. الخطوة الأولى هي كشف ما إذا كان المستخدم قد عمل tap للشاشة والعثور على موقع tap . لذلك، نحن بحاجة لتنفيذ touchesBegan: withEvent: الأسلوب. داخل هذا الأسلوب، إضافة مثيل SKSpriteNode في الموقع من tap. يمكنك استخدام أيSprite تريد. لقد استعملت Spaceship.png، والتي يتم تضمينها بالفعل في المشروع.
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
for (UITouch *touch in touches){
CGPoint location = [touch locationInNode:self];
// Create the node
SKSpriteNode *space = [SKSpriteNode spriteNodeWithImageNamed:@"Spaceship.png"];
space.position = CGPointMake(location.x, location.y);
[self addChild:space];
}
}
تم إنشاء كائن SKShader وتهيئة باستخدام ملف shader02.fsh:
1 SKShader *shader = [SKShader shaderWithFileNamed:@"shader02.fsh"];
. هذه ليست خاصية تظليل محددة مسبقا، ولكن إشارة التطبيق يحتاج لتمريرها إلى تظليل. يوضح التعليمات البرمجية المتكررة التالية كيفية القيام بذلك.
shader.uniforms = @[ [SKUniform uniformWithName:@"myTexture" texture:[SKTexture textureWithImageNamed:@"Spaceship.png"]] ];
تم إنشاء كائن SKShader وتهيئة باستخدام ملف shader02.fsh:
1 space.shader = shader;
طريقة مع withEvent: يجب أن تبدو
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
for (UITouch *touch in touches){
CGPoint location = [touch locationInNode:self];
// Create the node
SKSpriteNode *space = [SKSpriteNode spriteNodeWithImageNamed:@"Spaceship.png"];
space.position = CGPointMake(location.x, location.y);
[self addChild:space];
SKShader *shader = [SKShader shaderWithFileNamed:@"shader02.fsh"];
shader.uniforms = @[ [SKUniform uniformWithName:@"myTexture" texture:[SKTexture textureWithImageNamed:@"Spaceship.png"]] ];
space.shader = shader;
}
}
بناء وتشغيل المشروع. اضغط على زر التظليل (initWithSize) واضغط على الشاشة. في كل مرة تنقر على الشاشة، يتم إضافة Sprite سفينة الفضاء مع نسيج تعديلها.
باستخدام هذا الخيار، ترى أن تظليل الأول لا تعرض على الشاشة
. يحدث هذا لأنه تم إنشاء هذا تظليل وتكوينها داخل المحرر SpriteKit المشهد. لمعرفة ذلك، تحتاج إلى تهيئة الطبقة ShaderScene باستخدام unarchiveFromFile:
. يحدث هذا لأنه تم إنشاء هذا تظليل وتكوينها داخل المحرر SpriteKit المشهد. لمعرفة ذلك، تحتاج إلى تهيئة الطبقة ShaderScene باستخدام unarchiveFromFile:
. في GameScene.m، يجب أن تشاهد المقطع الذي يكتشف ويوزعTap المستخدم في touchesBegan: withEvent :. :في الثانية، ونحن تهيئة مثيل ShaderScene كما هو مبين أدناه.
([node.name isEqualToString:@"buttonShaderCoder"]) {
ShaderScene *scene = [ShaderScene unarchiveFromFile:@"ShaderSceneEditor"];
[self.scene.view presentScene:scene];
}
بناء وتشغيل المشروع مرة أخرى، اضغط على زر التظليل(initWithCoder)، واضغط على الشاشة.وعلى تظليل ,كلا التظليلان مفعلان في مشهد واحد SpriteKit
لا تتردد في اللعب مع هذه الخصائص. في الوقت الحالي، على الرغم من أنه من المهم أن تترك خصائص في إعداداتها الافتراضية. اسحب كائن خفيفة من مكتبة كائن على اليمين باتجاه خلفيةٍSprite. مكان ضوء ليست مهمة، ولكن خصائص الضوء مهمه .
يمكنك تكوين اللون، الظل، واللون المحيط لتكوين الضوء والظل. وZ مكان هو العقدة ارتفاع نسبة إلى عقدة الأم. تعيينها إلى 1. يعرف قناع الإضاءة الفئات التي ينتمي إليها هذا الضوء. عندما يتم تقديم المشهد، تتم مقارنة الملكية categoryBitMask الضوء على خصائص lightingBitMask، shadowCastBitMask، وshadowedBitMask كل عقدة Sprite و. إذا تطابق القيم، يتفاعل شبح مع الضوء. وهذا يتيح لك تحديد واستخدام أضواء متعددة التي تتفاعل مع كائن واحد أو أكثر.
ربما كنت قد لاحظت أن الخلفية لم تتغير بعد إضافة النور. أن يحدث لأن قناع إضاءة النور وخلفية مختلفة. تحتاج إلى تعيين قناع الإضاءة الخلفية لهذا الضوء، الذي هو 1 في مثالنا.
تحديث الخلفية في SKNode المفتش واضغط مفتاح الإدخال. تأثير هذا التغيير على الفور. ضوء ينير الآن الخلفية على أساس موقفها. يمكنك تعديل موقف ضوء لمعرفة التفاعل بين العقد الخلفية والضوء في الوقت الحقيقي.
لزيادة الواقعية للخلفية أو التأكيد على واحد من معالمه، ولعب مع النعومة وعلى النقيض من الخصائص. لعب مع القيم لرؤية التغييرات في الوقت الحقيقي.
الخطوةالثانية: تعبئة المشهد
حان الوقت لإضافة بعض الأشياء التي تتفاعل مع عقدة الضوء. في مكتبة الوسائط، والعثور على croquette-o.png و croquette-x.png sprites وإضافتها الى مكان الحادث. يحتاج كل Sprite ليتم تكوينه بشكل فردي. حدد كل ٍSprite وتعيين قناع الإضاءة، يلقي الظل قناع، وZ الموقع إلى 1. الإضاءة قناع يضمن أن Spriteيتأثر عقدة الخفيفة في حين يلقي الظل قناع يخلق الظل في الوقت الحقيقي على أساس الموقف من الضوء عقدة. أخيرا، تعيين نوع الجسم (الفيزياء الوضوح) إلى لا شيء. هل هذا لكل منSprite.
يجب أن لاحظت أنه حتى بعد تحديد خصائص الإضاءة والظل، لا يمكن أن نرى التفاعل بين الضوء والعقد. لذلك، تحتاج لبناء وتشغيل المشروع على الجهاز البدني أو في محاكي.
الخطوةالثالثة : دليل الاضاءة
كنت تعرف كيفية إضافة أضواء باستخدام محرر موقع الحادث. دعونا نرى كيفية إضافة ضوء دون استخدام محرر موقع الحادث. فتح LightingScene.m وداخل didMoveToView: طريقة نخلق كائن SKSpriteNode وكائن SKLightNode. لكائن SKSpriteNode، ونحن نستخدمSprite شرير-Cat.png. موقف العقدة ليست بتلك الأهمية، ولكن قيم zPosition، shadowCastBitMask، وlightingBitMask هي. لأن SpriteKit يوزع بشكل تسلسلي البيانات، تحتاج إلى تعيين zPosition العقدة إلى 1 لهذا العفريت إلى أن تكون واضحة، وعلى رأس من العفريت الخلفية. وضعناها shadowCastBitMask وlightingBitMask إلى 1. هذا هو ما didMoveToView: طريقة تبدو حتى الآن:
بعد ذلك دعونا نضيف الكائن SKLightNode.- (void)didMoveToView:(SKView *)view {
SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@"Wicked-Cat.png"];
[sprite setPosition:CGPointMake(self.frame.size.width/2, self.frame.size.height/2)];
[sprite setScale:0.6];
[sprite setZPosition:1];
[sprite setShadowCastBitMask:1];
[sprite setLightingBitMask:1];
[self addChild:sprite];
}
يجب أن تأخذ اهتماما خاصا لممتلكات categoryBitMask. إذا قمت بتعيين أنه إلى 1، وعلى ضوء هذا التفاعل مع كل العفريت. تسميته ضوء وتعيين zPosition إلى 1.
مقتطف الكامل لSKLightNode ينبغي أن تبدو هذه:
SKLightNode* light = [[SKLightNode alloc] init];
[light setName:@"light"];
[light setPosition:CGPointMake(100, 100)];
[light setCategoryBitMask:1];
[light setFalloff:1.5];
[light setZPosition:1];
[light setAmbientColor:[UIColor whiteColor]];
[light setLightColor:[[UIColor alloc] initWithRed:1.0 green:0.0 blue:0.0 alpha:.5]];
[light setShadowColor:[[UIColor alloc] initWithRed:0.9 green:0.25 blue:0.0 alpha:.5]];
[self addChild:light];
الخطوة 4: تغيير موقع الضوء عند هذه النقطة لديك ضوء الثاني. ولكن دعونا نضيف بعض تفاعل للمستخدم. لذلك يجب عليك إضافة touchesMovedt: مع withEvenطريقة وتغيير موقف ضوء، مع الأخذ بعين الاعتبار موقع Tap
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
for (UITouch *touch in touches) {
CGPoint location = [touch locationInNode:self];
[self childNodeWithName:@"light"].position = CGPointMake(location.x, location.y);
}
}
أخيرا، قم ببناء وتشغيل التطبيق الخاص بك. اضغط على زر الإضاءة ويجب أن نرى شيئا من هذا القبيل إلى الصورة أدناه:
خاتمة
هذا ويختتم البرنامج التعليمي الأول في سلسلة من جزئين أحتوت على الميزات الجديدة التي أدخلت في إطار SpriteKit دلنظام التشغيل 8. في هذا الجزء، تعلمت لخلق تظليلالغرف وتأثيرات الإضاءة باستخدام كل من محرر SpriteKit المشهد وخلال التعليمات البرمجية. إذا كان لديك أي أسئلة أو تعليقات، كما هو الحال دائما، لا تتردد في التعليقات.
ليست هناك تعليقات: