Основы SpriteKit | Envato Tuts+

() translation by (you can also view the original English article)

Вступление

SpriteKit, доступен на iOS, tvOS и OS X, это фреймворк, который позволяет разработчикам создавать высококачественные 2D игры, не думая о сложности графических APIs, таких как OpenGL и Metal. Помимо обработки всей графики для разработчиков, SpriteKit также предлагает широкий спектр дополнительных функций, включая физическое моделирование, воспроизведение аудио/видео и сохранение/загрузку игр.

По ходу этих серий, вы узнаете всё о SpriteKit и приобретёте навыки, которые затем можете применить к любой 2D-игре, созданной с помощью этого превосходного фреймворка. В этой серии, мы создаём полифункциональную игру, в который игрок управляет машинкой, которая должна обходить препятствия на пути.

Необходимые условия

Для этой серии нужно, чтобы у вас был Xcode 7.3 или выше, что включает поддержку для Swift 2.2, а также для SDKдля iOS 9.3, tvOS 9.2 и OS X 10.11.5. Вам также нужно загрузить с GitHub проект, который содержит графические ресурсы, для использования в игре и несколько строк кода для начала.

Графика, используемая в этой серии для игры, может быть найдена на GraphicRiver. GraphicRiver это отличный источник для поиска рисунков и графики для ваших игр.

1. Сцены, узлы и виды

Сцены

Первый класс, о котором вам нужно знать при работе с SpriteKit это класс SKScene. Для любой 2D-игры, созданной с помощью SpriteKit, вы разбиваете содержимое игры на несколько сцен, каждая из которых имеет свой собственный подкласс SKScene.

Хотя в дальнейшем мы рассмотрим функциональность и внутреннюю работу класса SKScene, то, что вам нужно знать на данный момент, заключается в том, что сцена это то, что вы добавляете в содержимое игры, и оно действует как корневой узел. Это подводит нас к узлам (node).

Узлы (спрайты)

Класс SKNode, который является подклассом SKScene, используется для представления любого элемента в вашей сцене. Хотя в SpriteKit существует множество различных типов узлов, которые обычно называются спрайтами, они имеют одни и те же ключевые свойства, наиболее важные из них:

position (CGPoint)
xScale (CGFloat): горизонтальный масштаб узла
yScale (CGFloat): похоже на xScale но действует в вертикальном направлении
alpha (CGFloat): прозрачность узла
hidden (Bool): значение, определяющее должен ли узел быть видимым
zRotation (CGFloat): угол в радианах, на который должен быть повернут узел
zPosition (CGFloat): используется для определения, какой узел должен быть поверх других узлов в сцене

Как вы можете видеть, приведенные выше свойства позволяют точно позиционировать, поворачивать и редактировать базовое представление каждого узла в сцене.

Так же, как вы можете добавить подвид в любой объект UIView в UIKit, в SpriteKit вы можете добавить любое количество дочерних узлов к существующему узлу. Это делается с помощью метода addChild(_:) для любого объекта SKNode.

Подобно объектам UIView, свойства положения и масштаба любого дочернего узла относятся к родительскому узлу, к которому он добавлен. Таким образом, объект SKScene, являющийся подклассом SKNode, может выступать в качестве корневого узла вашей сцены. Для любых узлов, которые вы хотите добавить в вашу сцену, вам нужно добавить их как дочерние в саму сцену, используя метод addChild(_:).

Класс SKNode сам по себе не способен создавать визуальный контент. Чтобы сделать это, вы должны использовать один из многих подклассов, доступных в SpriteKit. Некоторые важные подклассы SKNode, о которых вы должны знать:

SKSpriteNode: принимает изображение и создает текстурированный спрайт в вашей сцене
SKCameraNode: управляет тем, откуда просматривается ваша сцена
SKLabelNode: отображает текстовую строку
SKEmitterNode: используется совместно с системой частиц для визуализации эффектов частиц
SKLightNode: создает эффекты освещения и теней в вашей сцене

По ходу этих серий, мы используем эти типы узлов, а также некоторые другие, менее распространенные.

Виды

Чтобы отобразить содержимое SpriteKit в рабочем приложении, вам необходимо использовать класс SKView. Это подкласс UIView (или NSView в OS X), который можно легко добавить в любую часть вашего приложения. Чтобы представить сцену SpriteKit, вам нужно вызвать метод presentScene(_:) или presentScene(_:transition:) в экземпляре SKView. Второй метод используется, когда вам нужна пользовательская анимация или переход на новую сцену.

В дополнение к простому предоставлению вашего SpriteKit контента класс SKView также предлагает некоторые дополнительные и очень полезные функции. Включая свойство Bool, называемое paused, которое можно легко использовать для приостановки или возобновления сцены.

Есть также несколько свойств, которые полезны при отладке вашей игры и могут отображать информацию, такую как текущий FPS (кадры в секунду), количество узлов и область физики в вашей сцене. Если вы хотите просмотреть все доступные свойства, ознакомьтесь со ссылкой на класс SKView.

2. Редактор сцен

Теперь, когда мы рассмотрели основные классы, используемые в играх SpriteKit, пришло время создать нашу первую сцену. Хотя сцены могут быть созданы полностью программно, в Xcode есть превосходный инструмент редактирования сцен, который позволяет вам легко перетаскивать узлы в вашу сцену, изменяя их положение, внешний вид и другие свойства.

Откройте начальный проект и создайте новый файл, нажав Command+N или через меню Xcode'а New > File... Выберите тип файла iOS > Resource > SpriteKit Scene и нажмите Next.

Назовите файл MainScene и сохраните его. Теперь, вы должны увидеть ваш новый файл сцены в навигаторе — Project Navigator.

Выберите MainScene.sks, чтобы открыть его в редакторе сцен Xcode. В настоящий момент, ваша сцена пуста и имеет серый фон. В ней пока нет узлов. Прежде чем добавлять спрайты в вашу сцену, сначала нам надо изменить её размер.

В Attributes Inspector справа, измените размер вашей сцены до: ширина (W) равна 320 точек и высота (H) равна 480 точек.

Этот размер сцены соотносится с наименьшим размером экрана, на который мы нацелены (3,5-дюймовый экран на iPhone 4), чтобы мы могли правильно определить наши узлы. Мы изменим размер сцены, чтобы сделать её адаптивной для размера экрана современных устройств, в следующем учебном пособии.

Чтобы добавить узлы в вашу сцену, откройте Библиотеку объектов (Object Library) справа. Вам может понадобится кликнуть на значок, выделенный синим, если Object Library не видна.

Из Object Library, перетащите Color Sprite в центр сцены.

Откройте Attributes Inspector справа и измените текстуру (Texture), положение (Position) и размер (Size) атрибутов на следующие:

Теперь в вашей сцены должна быть машина посередине, как показано ниже.

Заметьте, что в отличие от системы координат UIKit, в SpriteKit, position узла всегда связана с его центром от левого угла сцены (0, 0). Вот почему установка положения автомобиля (160, 120) устанавливает центр автомобиля на 160 пунктов слева и 120 точек снизу.

3. Отображение сцены

Теперь, когда ваша сцена завершена, откройте ViewController.swift и добавьте оператор import для фреймворка SpriteKit в самом верху. Это позволяет использовать классы и интерфейсы SpriteKit в ViewController.swift.

1	import UIKit
2	import SpriteKit

Затем обновите реализацию метода viewDidLoad() класса ViewController следующим образом:

override func viewDidLoad() {
    super.viewDidLoad()
    
    let skView = SKView(frame: self.view.frame)
    let scene = SKScene(fileNamed: "MainScene")
    skView.presentScene(scene)
    view.addSubview(skView)
}

Этим кодом, мы сначала создаём экземпляр SKView, такого же размера, как и вид контроллера вида. Затем мы загружаем нашу сцену из созданного нами файла с помощью инициализатора SKScene(fileNamed:). Мы создаем экземпляр SKView этой сцены, а затем добавляем его, как подвид к основному виду.

Выберите симулятор iPhone 4s (чтобы наша сцена была правильно рассчитана для его экрана), а также создайте и запустите приложение. Вы должны увидеть экран, похожий на следующий:

Заключение

В этом первом уроке о SpriteKit вы изучили основы видов, сцен и узлов в SpriteKit. Вы создали базовую сцену с одним спрайтом, используя редактор сцен, встроенный в Xcode, что значительно упрощает создание сцен по сравнению с созданием их программно.

В следующем уроке мы добавим больше функциональности в нашу игру, используя действия SpriteKit, чтобы перемещать автомобиль по сцене. Вы также познакомитесь с физическим моделированием в SpriteKit, по обнаружению, когда автомобиль сталкивается с другим узлом.

Как всегда, оставьте свои комментарии и отзывы ниже.