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

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.

Diagram showing the anchorPoint property within a coordinate system

يتم تحديد 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.

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