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

Основы SpriteKit

This post is part of a series called SpriteKit From Scratch.
SpriteKit From Scratch: Constraints and Actions

Russian (Pусский) translation by Ellen Nelson (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.

SpriteKit Scene FileSpriteKit Scene FileSpriteKit Scene File

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

MainScene FileMainScene FileMainScene File

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

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

Scene SizeScene SizeScene Size

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

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

Object LibraryObject LibraryObject Library

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

Empty Color SpriteEmpty Color SpriteEmpty Color Sprite

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

Sprite PropertiesSprite PropertiesSprite Properties

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

Car in SceneCar in SceneCar in Scene

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

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

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

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

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

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

Scene Inside AppScene Inside AppScene Inside App

Заключение

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

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

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

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.