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.
override func didMove(to view: SKView) { let startGameLabel = SKLabelNode(text: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2) addChild(startGameLabel) let redSprite = SKSpriteNode(color: .red, size: CGSize(width: 200, height: 200)) addChild(redSprite) }
هنا نستخدم init(color:size:) إينتييليزير الراحة التي ستعتمد العفريت مستطيل بلون وحجم يمكنك تمرير كمعلمات. إذا قمت باختبار هذا المشروع الآن، سوف تشاهد نصف عرض مربع أحمر.

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

يتم تحديد anchorPoint
في نظام إحداثيات الوحدة ، والذي يضع (0،0) في أسفل اليسار و (1،1) في الزاوية اليمنى العليا من الإطار. الافتراضي لـ SKSpriteNodes
هو (0.5،0.5).
امضي قدما وقم بتغيير خاصية anchorPoint
إلى (0،0) ولاحظ الفرق الذي تحدثه.
override func didMove(to view: SKView) { let startGameLabel = SKLabelNode(text: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2) addChild(startGameLabel) let redSprite = SKSpriteNode(color: .red, size: CGSize(width: 200, height: 200)) redSprite.anchorPoint = CGPoint(x: 0, y:0) addChild(redSprite) }
الآن، إذا قمت باختبار، سترى أن السبرايت اصطف تماما مع اليسار السفلي من المشهد.

الآن دعنا ننتقل إلى مركز أعلى من مكان الحادث عن طريق تغيير الخاصية للموضع به. قم باستبدال الدالة :didMove(to
الخاصة بك بما يلي:
override func didMove(to view: SKView) { let startGameLabel = SKLabelNode(text: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2) addChild(startGameLabel) let redSprite = SKSpriteNode(color: .red, size: CGSize(width: 200, height: 200)) redSprite.anchorPoint = CGPoint(x: 0, y:0) redSprite.position = CGPoint(x: size.width/2 - 100, y: size.height - 210) addChild(redSprite) }
لاحظ كيف كان علينا طرح من قيم x
و y
لتوسيط sprite. إذا غادرنا anchorPoint
في وضعه الافتراضي ، فسيكون قد تم بالفعل توسيطه على محور x
. من المهم أن تتذكر أنه عند تغيير نقطة الربط ، قد تضطر إلى إجراء بعض التعديلات في وضعيتك.

Sprites -سبرايتس- محكمة
هذا الصندوق الأحمر جيد للممارسة مع تحديد المواقع ، ولكنك عادة ما تريد أن تقوم بتشكيل sprite الخاص بك مع العمل الفني للعبة الخاص بك.
دعونا نقم بإنشاء SKSpriteNode
محكم. قم بإضافة التعليمة البرمجية التالية في الجزء السفلي من الأسلوب didMove (إلى :)
.
override func didMove(to view: SKView) { ... let player = SKSpriteNode(imageNamed: "player") player.position = CGPoint(x: size.width/2 , y: 300) addChild(player) }
نستخدم هنا المهيىء المناسب init(imageNamed:)
، الذي يأخذ كمتغير اسم صورة بدون الامتداد. هذه هي الطريقة الأسهل لإنشاء عواميد منقوشة أثناء إنشاء النسيج لك من الصورة التي تمر بها.
الطريقة الأخرى لإنشاء SKSpriteNode
محكم هو إنشاء SKTexture
مسبقًا واستخدام أحد intializers تأخذ المحكم كمتغير.

دعونا نقم بإنشاء زوجين أكثر SKSpriteNodes
وبتغيير بعض خصائصها. مرة أخرى ، إضافة هذه إلى أسفل دالة didMove (إلى :)
.
override func didMove(to view: SKView) { ... let enemy1 = SKSpriteNode(imageNamed: "enemy1") enemy1.position = CGPoint(x: 100 , y: 300) enemy1.xScale = 2 addChild(enemy1) let enemy2 = SKSpriteNode(imageNamed: "enemy2") enemy2.position = CGPoint(x: size.width - 100 , y: 300) enemy2.zRotation = 3.14 * 90 / 180 addChild(enemy2) }
هنا نخلق اثنين من SKSpriteNodes
، enemy1
و enemy2
. قمنا بتعيين xScale
على enemy1
الى 2 وتغيير zRotation
على enemy2
لتدويره بمقدار 90 درجة.
. (تأخذ الخاصية zRotation
قيمها بالتقدير الدائري ، وتشير القيمة الموجبة إلى دوران عكس عقارب الساعة.)
لقد جربنا تغيير بعض الخصائص على سبرايت. ألق نظرة على وثائق SKNodes و SKSpriteNodes وحاول تغيير بعض الخصائص الأخرى لرؤية التأثيرات التي لديهم.

تعتبر عُقد Sprite جيدة للمستطيلات الاساسية والقوام الأساسي ، ولكن في بعض الأحيان ، ستكون هناك حاجة إلى شكل أكثر تعقيدًا. لقد قمت بتغطية SKShapeNode
في هذه الحالات. سنلقي نظرة على عقد الشكل تاليا.
عقد الشكل
عقدة أخرى مفيدة هي SKShapeNode
. تعرض هذه العقدة شكلًا محددًا بمسار Core Graphics. تعد SKShapeNodes
مفيدة للمحتوى الذي لا يمكن ملاحظته بسهولة باستخدام SKSpriteNode
. هذه الفئة هي أكثر شدة للذاكرة وأداء أقل من استخدام SKSpriteNode
، لذلك يجب أن تحاول استخدامها بشكل مقتصد.
لتعيين شكل إلى SKShapeNode
، يمكنك تعيين CGPath
لخاصية مسار
العقدة. ومع ذلك ، هناك عدد قليل من المُهيئات التي تقدم أشكالًا محددة مسبقًا مثل المستطيلات والدوائر والأشكال البيضاوية. لنقم بإنشاء دائرة باستخدام initizer مناسب init init (circleOfRadius :)
.
ثم أضف الأمر التالي إلى الجزء السفلي من الأسلوب didMove(to:).
override func didMove(to view: SKView) { ... let circle = SKShapeNode(circleOfRadius: 50) circle.strokeColor = SKColor.green circle.fillColor = SKColor.blue circle.lineWidth = 8 circle.position = CGPoint(x: size.width/2, y: 400) addChild(circle) }
نحن نقم بتغيير خصائص قليلة على عقده الشكل ووضعه، وإضافته إلى موقع الحادث. من السهل جداً استخدام مهيئات الشكل المعرف مسبقاً. ومع ذلك ، فإن إنشاء CGPath
معقد يستغرق وقتًا طويلاً يدويًا وليس لضعاف القلب لأنه عادة ما يتضمن بعض الرياضيات المعقدة.
لحسن الحظ ، هناك أداة تسمح لك برسم الأشكال بصريًا وتصدير CGPath
على هيئة رمز Swift. تحقق من PaintCode إذا كنت تريد معرفة المزيد.

ستغطي عقود الرموز وعقد الأشكال معظم الحالات ، ولكن في بعض الأحيان قد ترغب في عرض الفيديو في تطبيقاتك. إن SKVideoNode
، الذي سنلقي نظرة عليه في المرة التالية ، قد مررت عليه.
عقد الفيديو
العقدة الأخيرة التي سنلقي نظرة عليها هي SKVideoNode
. كما يشير الاسم ، تسمح لك هذه العقدة بتشغيل الفيديو داخل الألعاب الخاصة بك.
هناك عدة طرق مختلفة لإنشاء SKVideoNode
.واحد يستخدم مثيل AVPlayer
، وآخر يستخدم فقط اسم ملف فيديو الذي تم تخزينه في حزمة التطبيق ، والطريقة الثالثة هي استخدام عنوان URL
.
هناك شيء واحد يجب أخذه في الاعتبار هو أن حجم
الفيديو سيكون في البداية نفس حجم الفيديو الهدف. ومع ذلك ، يمكنك تغيير خاصية الحجم
هذه ، وسيتم توسيع الفيديو إلى الحجم الجديد.
شيء آخر يجب أن تكون على علم به هو أن SKVideoNode
يوفر أساليب التشغيل ()
و pause ()
فقط. إذا كنت تريد المزيد من التحكم في مقاطع الفيديو الخاصة بك ، فستتم تهيئة SKVideoNode
باستخدام AVPlayer
حاليًا واستخدم ذلك للتحكم في مقاطع الفيديو الخاصة بك.
دعنا نستخدم أبسط طريقة لإنشاء SKVideoNode
. يضاف ما يلي إلى الجزء السفلي من الأسلوب didMove(to:)
.
override func didMove(to view: SKView) { ... let video = SKVideoNode(fileNamed: "video.mov") video.position = CGPoint(x: size.width/2,y: 600) addChild(video) video.play() }
هنا استخدمنا المهيء init (fileNamed :)
لإنشاء فيديو. أنت تمرر اسم الفيديو مع الإضافة. لم أقم بتضمين فيديو مع شفرة المصدر الخاصة بالمشروع ، ولكن إذا كنت تريد مشاهدة هذا العمل ، فيمكنك إضافة اسم مقطع فيديو يسمى "video.mov" إلى مشروعك.
الاستنتاج
هذا يكمل دراستنا على العقد. بعد قراءة هذا المنشور والسابق ، يجب أن يكون لديك فهم جيد لـ SKNodes
والفئات الفرعية الخاصة بهم. في الجزء التالي من هذه السلسلة ، سنلقي نظرة على SKActions
واستخدام الفيزياء في ألعابنا. شكرا على القراءة ، وسأراك هناك!
في هذه الأثناء ، تحقق من بعض الدورات والدروس الرائعة الأخرى لدينا حول إنشاء تطبيقات iOS باستخدام Swift و SpriteKit.
- سبريتيكيتإنشاء غزاة الفضاء مع سويفت وطقم العفريت: تقديم طقم سبيرت-العفريت او الروح-جيمس تينر
- iOS SDKقم بإنشاء لعبة العوامة في سويفت 3 وسبريتيكيتجيمس Tyner
- اي او اسسبريتيكيت من نقطة الصفر: الأساسياتديفيس الي
أيضا ، تحقق من دورات SpriteKit لدينا! ستأخذك هذه خلال خطوات إنشاء أول لعبة SpriteKit لنظام التشغيل iOS ، حتى إذا لم تكن قد شفرت باستخدام SpriteKit من قبل.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post