Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS SDK

أساسيات سبريتيكيت: ارواح -سبرايتس-

by
Length:MediumLanguages:
This post is part of a series called SpriteKit Basics.
SpriteKit Basics: Nodes
SpriteKit Basics: Actions and Physics

Arabic (العربية/عربي) translation by osamagaradh (you can also view the original English article)

 في هذه السلسلة ، نتعلم كيفية استخدام SpriteKit لإنشاء ألعاب ثنائية الأبعاد لنظام التشغيل iOS. في هذا المنشور ، سنواصل استكشافنا لعقد SpriteKit ، والتعرف على نوع خاص من العقدة يسمى سبرايت skSpriteNode.

لمتابعة هذا البرنامج التعليمي ، ما عليك سوى تنزيل الإصدار المصاحب من GitHub repo. يحتوي على مجلد يسمى ExampleProject Starter. افتح المشروع في ذلك المجلد في Xcode ، وانت على استعداد للذهاب!

غقد سبرايت

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

أضف التالي إلى الأسلوب didMove(to داخل GameScene.swift.

هنا نستخدم init(color:size:) إينتييليزير الراحة التي ستعتمد العفريت مستطيل بلون وحجم يمكنك تمرير كمعلمات. إذا قمت باختبار هذا المشروع الآن، سوف تشاهد نصف عرض مربع أحمر.

red sprite

قد تتساءل عن سبب عرض نصف الرموز المتحركة فقط لأننا قررنا أن أصول SKNode هي (0،0). هذا بسبب إطار SKSpriteاNode وبالتالي يتمركز نسيجه على موضعه. لتغيير هذا السلوك ، يمكنك تغيير خاصية anchorPoint لسبرايت ، والتي تحدد النقطة التي يتم وضع الإطار علبها. يوضح الرسم البياني أدناه كيفية عمل برنامج anchorPoint.

Diagram showing the anchorPoint property within a coordinate system

يتم تحديد anchorPoint في نظام إحداثيات الوحدة ، والذي يضع (0،0) في أسفل اليسار و (1،1) في الزاوية اليمنى العليا من الإطار. الافتراضي لـ SKSpriteNodes هو (0.5،0.5).

 امضي قدما وقم بتغيير خاصية anchorPoint إلى (0،0) ولاحظ الفرق الذي تحدثه.

الآن، إذا قمت باختبار، سترى أن السبرايت اصطف تماما مع اليسار السفلي من  المشهد.

red sprite aligned bottom left

الآن دعنا ننتقل إلى مركز أعلى من مكان الحادث عن طريق تغيير الخاصية للموضع به. قم باستبدال الدالة :didMove(to الخاصة بك بما يلي:

لاحظ كيف كان علينا طرح من قيم x و y لتوسيط sprite. إذا غادرنا anchorPoint في وضعه الافتراضي ، فسيكون قد تم بالفعل توسيطه على محور x.  من المهم أن تتذكر أنه عند تغيير نقطة الربط ، قد تضطر إلى إجراء بعض التعديلات في وضعيتك.

red sprite centered top

Sprites  -سبرايتس- محكمة

هذا الصندوق الأحمر جيد للممارسة مع تحديد المواقع ، ولكنك عادة ما تريد أن تقوم بتشكيل sprite الخاص بك مع العمل الفني للعبة الخاص بك.

 دعونا نقم بإنشاء SKSpriteNode محكم. قم بإضافة التعليمة البرمجية التالية في الجزء السفلي من الأسلوب didMove (إلى :).

نستخدم هنا المهيىء المناسب init(imageNamed:)، الذي يأخذ كمتغير اسم صورة بدون الامتداد. هذه هي الطريقة الأسهل لإنشاء عواميد منقوشة أثناء إنشاء النسيج لك من الصورة التي تمر بها.

الطريقة الأخرى لإنشاء SKSpriteNode محكم هو إنشاء SKTexture مسبقًا واستخدام أحد intializers تأخذ المحكم كمتغير.

textured sprite

دعونا نقم بإنشاء زوجين أكثر SKSpriteNodes وبتغيير بعض خصائصها. مرة أخرى ، إضافة هذه إلى أسفل دالة didMove (إلى :).

 هنا نخلق اثنين من SKSpriteNodes ، enemy1 و enemy2. قمنا بتعيين xScale على enemy1 الى 2 وتغيير zRotation على enemy2 لتدويره بمقدار 90 درجة. . (تأخذ الخاصية zRotation قيمها بالتقدير الدائري ، وتشير القيمة الموجبة إلى دوران عكس عقارب الساعة.)

لقد جربنا تغيير بعض الخصائص على سبرايت. ألق نظرة على وثائق SKNodes و SKSpriteNodes وحاول تغيير بعض الخصائص الأخرى لرؤية التأثيرات التي لديهم.

textured sprite properties changed

 تعتبر عُقد Sprite جيدة للمستطيلات الاساسية والقوام الأساسي ، ولكن في بعض الأحيان ، ستكون هناك حاجة إلى شكل أكثر تعقيدًا. لقد قمت بتغطية SKShapeNode في هذه الحالات. سنلقي نظرة على عقد الشكل تاليا.

عقد الشكل

عقدة أخرى مفيدة هي SKShapeNode. تعرض هذه العقدة شكلًا محددًا بمسار Core Graphics. تعد SKShapeNodes مفيدة للمحتوى الذي لا يمكن ملاحظته بسهولة باستخدام SKSpriteNode. هذه الفئة هي أكثر شدة للذاكرة وأداء أقل من استخدام SKSpriteNode ، لذلك يجب أن تحاول استخدامها بشكل مقتصد.

لتعيين شكل إلى SKShapeNode ، يمكنك تعيين CGPath  لخاصية مسار العقدة. ومع ذلك ، هناك عدد قليل من المُهيئات التي تقدم أشكالًا محددة مسبقًا مثل المستطيلات والدوائر والأشكال البيضاوية. لنقم بإنشاء دائرة باستخدام  initizer مناسب init init (circleOfRadius :).

ثم أضف الأمر التالي إلى الجزء السفلي من الأسلوب didMove(to:).

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

لحسن الحظ ، هناك أداة تسمح لك برسم الأشكال بصريًا وتصدير CGPath على هيئة رمز Swift. تحقق من PaintCode إذا كنت تريد معرفة المزيد.

shape node

ستغطي عقود الرموز وعقد الأشكال معظم الحالات ، ولكن في بعض الأحيان قد ترغب في عرض الفيديو في تطبيقاتك. إن SKVideoNode ، الذي سنلقي نظرة عليه في المرة التالية ، قد مررت عليه.

عقد الفيديو

العقدة الأخيرة التي سنلقي نظرة عليها هي SKVideoNode. كما يشير الاسم ، تسمح لك هذه العقدة بتشغيل الفيديو داخل الألعاب الخاصة بك.

هناك عدة طرق مختلفة لإنشاء SKVideoNode.واحد يستخدم مثيل AVPlayer ، وآخر يستخدم فقط اسم ملف فيديو الذي تم تخزينه في حزمة التطبيق ، والطريقة الثالثة هي استخدام عنوان URL.

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

 شيء آخر يجب أن تكون على علم به هو أن SKVideoNode يوفر أساليب التشغيل () و pause () فقط. إذا كنت تريد المزيد من التحكم في مقاطع الفيديو الخاصة بك ، فستتم تهيئة SKVideoNode باستخدام AVPlayer حاليًا واستخدم ذلك للتحكم في مقاطع الفيديو الخاصة بك.

دعنا نستخدم أبسط طريقة لإنشاء SKVideoNode . يضاف ما يلي إلى الجزء السفلي من الأسلوب didMove(to:).

 هنا استخدمنا المهيء init (fileNamed :) لإنشاء فيديو. أنت تمرر اسم الفيديو مع الإضافة. لم أقم بتضمين فيديو مع شفرة المصدر الخاصة بالمشروع ، ولكن إذا كنت تريد مشاهدة هذا العمل ، فيمكنك إضافة اسم مقطع فيديو يسمى "video.mov" إلى مشروعك.

الاستنتاج

هذا يكمل دراستنا على العقد. بعد قراءة هذا المنشور والسابق ، يجب أن يكون لديك فهم جيد لـ SKNodes والفئات الفرعية الخاصة بهم. في الجزء التالي من هذه السلسلة ، سنلقي نظرة على SKActions واستخدام الفيزياء في ألعابنا. شكرا على القراءة ، وسأراك هناك!

في هذه الأثناء ، تحقق من بعض الدورات والدروس الرائعة الأخرى لدينا حول إنشاء تطبيقات iOS باستخدام Swift و SpriteKit.

أيضا ، تحقق من دورات SpriteKit لدينا! ستأخذك هذه  خلال خطوات إنشاء أول لعبة SpriteKit لنظام التشغيل iOS ، حتى إذا لم تكن قد شفرت باستخدام SpriteKit من قبل.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.