Кто не мечтал создать свою игру для iPhone и iPad? Игровая индустрия сейчас развивается стремительными темпами, и желание попробовать себя в данном направлении вполне естественно. Многие боятся стать , поскольку считают, что дело это непростое, требующее предельной концентрации и богатого опыта. Однако начать свой путь к мечте можно и без навыков программирования.

Один из инструментов разработки двух- и трехмерных приложений и игр — игровой движок Unity. С его помощью создаются приложения как для Windows и OS X, так и для iOS, Android и . Кроме того, движок используют на приставках PlayStation 4, Xbox 360, Wii и других. Unity очень популярен среди таких разработчиков, как Blizzard, EA, Ubisoft, поскольку работа с движком довольно простая, интерфейс удобный и есть бесплатная версия. Редактор легко настраивать, он имеет несколько различных окон, что делает возможным отладку игры прямо в нем.

Сам проект в Unity поделен на уровни, которые также называются сценами — это отдельные файлы с игровыми мирами, содержащими свои наборы сценариев, объектов и настроек. Скрипты при этом взаимодействуют с объектами, которые содержат наборы определенных компонентов. А благодаря поддержке системы Level of Detail высокодетализированные модели заменяются на менее детализированные, если игрок находится на дальнем расстоянии.

Редактор Unity действительно многофункциональный: система наследования объектов, скрипты в виде отдельных компонентов, поддержка физики твердых тел и ткани. Знакомство с движком на двух уровнях, включая интерфейс, создание скриптов, разработку ландшафта и создание мультиплеерной игры — это и многое другое предлагает сервиса GeekBrains.

Данная профессия имеет оценку сложности 2/5, при этом максимально востребована на современном рынке, а освоить разработку можно всего за полгода. Чтобы приступить к данному курсу, вам не нужны навыки программирования: главное — интерес и желание. При этом перспективы, как мы с вами убедились, впечатляющие — создание игр для iOS, Android, Xbox, PlayStation и других платформ. Средняя зарплата по Москве и МО для разработчика игр составляет 102 тысячи рублей в месяц. Опытные сотрудники запросто увеличивают этот показатель в пару-тройку раз.

Пусть к профессии «Разработчик игр» состоит из обучения C#, разбитого на два уровня, затем учеников ждут два уровня Unity, после чего они сразу приступают к командной разработке в компаниях и проектах. По итогам выпускник не просто получает резюме и сертификат о прохождении курса, но и имеет за плечами неплохое портфолио (в том числе создание мультиплеерных игр с помощью Unity 3D) и навыки командной разработки.

Уроки происходят онлайн, во время урока преподаватель объясняет материал, его действия ученики видят на экране, задают вопросы и обсуждают урок в чате. Как и в офлайне, они получают домашние задания, выполняют их, после этого проходят тестирование для закрепления пройденного материала. При помощи форума и опытных программистов можно обсуждать связанные с обучением темы.

Это руководство научит вас тому:

• Как использовать Xcode для создания и управления проектом
• Как определить ключевые части Xcode проекта
• Как собрать и запустить ваше приложение на iOS Симуляторе
• Как создать стандартный пользовательский интерфейс в storyboard’е
• Как предварительно просмотреть интерфейс
• Как использовать Авто Расположение для добавления гибкости интерфейса

После того как вы закончите это руководство, у вас будет приложение, похожее как изображённое на рисунке:

Это руководство использует Xcode 6.1.1 и iOS SDK 8.1 , если вы используете другие версии вы можете столкнуться с некоторыми различиями.

Создание Нового Проекта

Xcode включает несколько втроенных шаблонов , которые вы можете использовать для разработки распространённых типов iOS приложений, таких, как игры, приложения с навигацией, основанной на закладках и приложения, построенные на табличном представлении данных. Большинство этих шаблонов имеют предварительно сконфигурированный интерфейс и файлы с исходным кодом. В этом руководстве вы начнёте с наиболее простого шаблона: Single View Application .

Работа с шаблоном Single View Application поможет вам понять базовую структуру iOS приложения и как контент попадает на экран. После того как вы узнаете, как всё работает, вы можете использовать один из других шаблонов для собственного приложения.

Чтобы создать новый проект:

1. Откройте Xcode из каталога Приложения

Появится Окно приветствия Xcode

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

2. В Окне приветствия нажмите «Создать новый Xcode проект» (или выберите File > New > Project ).

Xcode откроет новое окно и покажет диалог, в котором вы сможете выбрать шаблон.

3. В разделе iOS в левой части диалога выберите Приложение.

4. В главной области диалога нажмите Single View Application и после нажмите Далее .

5. В появившемся диалоговом окне назовите ваше приложение и выберите дополнительные опции для вашего проекта.

Используйте следующие значения:

• Product Name: ToDoList

Xcode использует имя продукта в качестве названия вашего проекта и вашего приложения.

• Organization Name: называние вашей компании, или ваше собственное имя. Это поле можно не заполнять.

• Organization Identifier: идентификатор вашей компании, если он есть. Если нет, то используйте com.example .
• Bundle Identifier: это значение автоматически сгенерируется, основываясь на Product Name и Organization Identifier.
• Language: Objective-C
• Devices: Universal

Universal приложение — это то приложение, которое может запускаться и на iPhone и на iPad.

• Use Core Data: оставьте не выбранным.

7. В появившемся диалоговом окне выберите куда будет сохранён ваш проект и нажмите Создать.

Xcode откроет ваш новый проект в окне (называется это окно workspace window ), которое будет выглядеть вот так:

Вы можете получить сообщение об ошибке, в котором будет написано «No signing identity found». Это предупреждение означает, что вы пока не настроили Xcode для iOS разработки, но вы можете закончить это руководство и без этого. В конце документа вы найдёте ссылку на руководство, которое поможет вам настроить Xcode и продолжить iOS разработку.

Знакомство с Xcode

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

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

Запуск iOS Симулятора

Так как ваш проект основан на шаблоне Xcode, для вас автоматически настраивается базовая среда приложения. Даже если вы не написали ни строчки кода, вы можете собрать и запустить шаблон Single View Application без какой-либо добавочной конфигурации.

Для сборки и запуска вашего приложения используйте iOS Симулятор приложения, который встроен в Xcode. Как понятно из его названия iOS Симулятор позволяет вам увидеть как ваше приложение будет выглядеть и как будет вести себя, если мы запустим его на iOS устройстве.

iOS Симулятор может моделировать разные типы устройств iPhone, iPad с разными размерами экрана и т. д. В результате вы можете смоделировать ваше приложение на каждом устройстве под которое разрабатываете. В этом руководстве используется вариант .

Для запуска приложения в iOS Симуляторе

1. Убедитесь что выбран iPhone 6 из всплывающего меню «Scheme » на панели Xcode.

Не спешите и посмотрите в меню, чтобы увидеть какие ещё варианты устройств доступны на iOS Симуляторе.

2. Нажмите кнопку Запустить, находящуюся в верхнем левом углу панели Xcode.

Также вы можете выбрать Product > Run (или нажать Command-R ). Если вы в первый раз запускаете приложение Xcode спросит хотите ли вы включить режим разработки на вашем Mac. Режим разработки позволяет Xcode иметь доступ к определённым функциям отладки без необходимости ввода вашего пароля каждый раз. Решите, хотите ли вы включать режим разработки и следуйте подсказкам. Если вы выберите не включать его, позже у вас запросят пароль. В руководстве режим разработки разрешён.

3. Посмотрите на панель инструментов Xcode по завершении процесса сборки.

Xcode отобразит сообщения о процессе сборки в панели просмотра активных задач , которая находится в середине панели инструментов.

iOS Симулятор запустится автоматически после того, как Xcode завершит сборку вашего проекта. Это может занять пару минут при первом запуске.

iOS Симулятор откроется в режиме iPhone, как вы указали. Симулятор покажет ваше приложение на виртуальном экране iPhone. До того, как приложение полностью запустится вы увидите на экране запуска название вашего приложения ToDoList.

После, вы должны увидить, что-то вроде этого:

Сейчас шаблон Single View Application, почти ничего не делает, он только показывает белый экран. Другие шаблоны имеют более сложное поведение. Очень важно понять назначения шаблонов до того, как вы решите использовать их для создания приложения. Запуск вашего приложения на iOS Симуляторе без изменений — это лучший путь для понимания его разработки.

Закройте iOS Симулятор, выбрав iOS Simulator > Quit iOS Simulator (или нажав Command-Q )

Обзор исходного кода

Шаблон Single View Application содержит несколько файлов с исходным кодом, которые настраивают среду приложения. Большую часть работы выполняет функция UIApplicationMain , которая автоматически вызывается в вашем проекте в исходном файле main.m . Функция UIApplicationMain создаёт объект приложения, который настраивает инфраструктуру для работы вашего приложения с системой iOS. Это включает создание цикла выполнения , который доставляет входные события в ваше приложение. Вам не нужно работать с исходным кодом main.m напрямую, но важно понять, как он работает.

Посмотрим на исходный файл main.m

1. Удостоверьтесь, что навигатор проекта открыт в навигационной панели.

Навигатор проекта показывает все файлы в вашем проекте. Если навигатор проекта не открыт, нажмите крайнюю левую кнопку на панели переключения навигации. (Или откройте его, нажав View > Navigators > Show Project Navigator .)

2. Откройте каталог Supporting Files в навигаторе проекта кликнув по треугольнику рядом за ним.

3. Выберете main.m .

Xcode откроет исходный файл в основной области редактирования, как на рисунке:

Или вы можете дважды кликнуть на файл main.m , чтобы открыть его в отдельном окне.

Файл main.m и функция UIApplicationMain

Функция main в main.m вызывает функцию UIApplicationMain внутри autorelease pool

1. @autoreleasepool {
2. returnUIApplicationMain(argc, argv, nil, NSStringFromClass());

Оператор @autoreleasepool здесь для управления памятью в вашем приложении. Автоматический подсчёт ссылок (ARC) делает управление памятью простым, давая компилятору выполнять работу по отслеживанию того, кто владеет объектом. @autoreleasepool — это часть инфраструктуры управления памятью.

Вызов UIApplicationMain создаёт 2 важных начальных компонента вашего приложения:

• Экземпляр класса UIApplication , называемый объектом приложения .

Объект приложения управляет циклом событий и координирует другие высокоуровневые особенности поведения приложения. Этот класс определённый в UIKit фреймворке, не требует от вас писать какой-либо дополнительный код, для его работы.

• Экземпляр класса XYZAppDelegate , называемый делегатом приложения .

Xcode создаёт этот класс для вас как часть создания шаблона Single View Application. Делегат приложения создаёт окно, где рисуется контент вашего приложения и предоставляет место, для реагирования на изменение состояния приложения. Это то где вы пишете свой код. Как и все классы, класс XYZAppDelegate определён в двух файлах в вашем приложении: в файле интерфейса XYZAppDelegate.h , и в файле реализации XYZAppDelegate.m .

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

Исходный файл Делегата Приложения

Для того чтобы глубже понять роль делегата приложения, посмотрите его исходные файлы, AppDelegate.h (файл интерфейса) и AppDelegate.m (файл реализации). Чтобы посмотреть файл интерфейса делегата выберете AppDelegate.h в навигаторе проекта. Интерфейс делегата приложения содержит всего одно свойство: window . С помощью этого свойства делегат приложения следит за окном, в котором написан весь контент вашего приложения.

После посмотрите файл реализации делегата приложения. Для этого выберите AppDelegate.m в навигаторе проекта. Реализация делегата приложения содержит «скелеты» важных методов. Эти предопределённые методы позволяют объекту общаться с делегатом. В момент важного события времени выполнения, например, запуска приложения, предупреждения о загруженности памяти и завершения приложения — объект приложения вызывает соответствующий метод в делегате приложения, давая ему возможность отреагировать соответственно. Вам не нужно делать что-то особенное, для того, чтобы быть уверенным в том, что эти методы вызовутся в нужный момент времени — объект приложения берёт на себя эту часть работы.

Каждый из этих автоматически реализованных методов имеет поведение по умолчанию. Если вы оставите «скелет» реализации пустым или удалите его из вашего AppDelegate.m файла, вы получите поведение по умолчанию когда бы эти методы ни были вызваны. Используйте эти «скелеты» для того, чтобы добавить код, который будет исполнен когда метод будет вызван. В этом руководстве, вам не требуется использовать специальный код, поэтому вам не нужно вносить какие-либо изменения в файл AppDelegate.m .

Открытие Storyboard

На данный момент вы уже готовы создать Storyboard для вашего приложения. Storyboard — это визуальное представление пользовательского интерфейса приложения, которое отображает экраны с содержимым и переходы между ними. Вы используете Storyboard’ы для описания последовательности представлений.

Для того чтобы открыть storyboard нужно:

• В навигаторе проекта надо выбрать Main.storuboard .

Xcode откроет storyboard в Interface Builder — в визуальном редакторе интерфейса, в области редактирования. Всё, что вы видите в окне представления — это рабочая область . На ней вы добавляете и размещаете элементы интерфейса.

Storyboard вашего приложения должна выглядеть вот так:

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

Когда вы запускаете приложение на iOS Симуляторе первое, что вы увидите на экране — это представление, добавленное на сцену. Но, когда вы посмотрите на сцену, которая находиться на рабочей области, вы заметите, что у неё нет точного размера экрана iPhone 6. Это происходит потому что у сцены имеется общее отображение интерфейса, которое может применяться на любом устройстве с любой ориентацией экрана. Вы используете эту функцию для создания Приспосабливающегося Интерфейса, который может автоматически регулировать отображение контекста в зависимости от устройства и ориентации. Вы узнаете больше о том, как сделать ваш интерфейс Приспосабливающимся чуть позже.

Построение Базового Интрефейса

Настало время построить базовый интерфейс для сцены, который позволит добавить новый элемент в список дел.

Xcode предоставляет библиотеку объектов, которую вы можете добавить в файл storyboard. Некоторые из этих объектов — элементы интерфейса, которые являются частью представления, такие как кнопки и текстовое поле. И другие, такие как контроллеры представлений и распознование жестов, которые определяют поведение приложения и не видны на экране.

Чтобы добавить элемент в список дел вам нужно текстовое поле — элемент интерфейса, который позволяет пользователю вносить строки в текст.

Для добавления текстового поля на вашу сцену:

1. Откройте бибилиотеку Объектов.

Библиотрека Объектов покажется внизу области утилиты. Если вы не видите Библиотеку, нажмите на третью кнопку слева на панели переключения библиотеки. (Ещё вы можете отобразить её, выбрав View > Utilities > Show Object Library .)

Посвившийся список отображает каждое имя объекта, описание и визуальное изображение.

2. В библиотеке Объектов напечатайте в поле фильтра text field , чтобы найти объекты Текстового Поля быстрее.

3. Перетащите объект Поле Текста из списка на вашу сцену.

Если необходимо вы можете увеличить изображение выбрав Editor > Canvas > Zoom .

4. Перетащите поле текста так, чтобы центр поля был посередине вертикальной направляющей и размещалось слева экрана.

Остановите перетаскивание, когда увидите что-то вроде этого:

Голубая направляющая помогает вам поместить текстовое поле. Она видна только когда вы перетаскиваете или изменяете размер объекта, направляющая исчезает когда вы отпускаете текстовое поле.

5. Если необходимо, нажмите на поле текста, чтобы выделить и изменить размеры.

Вы изменяете размеры UI элемента, перетаскивая метку изменения размера, которая выглядит как маленький белый квадрат, который появляется на рамке элемента. Вы делаете их видимыми, выделяя элемент. В этом случае поле текста уже должно быть выбрано, так как вы только что остановили перемещение объекта. Если ваше поле текста выглядит как на картинке, значит, оно готово к изменению его размера, если это не так, выделите его.

6. Изменяйте положение левого и правого краёв поля текста, пока не увидите три вертикальные направляющие.

Прекратите изменение размера, когда увидите что-то вроде этого:

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

Для конфигурации заполнителя текстового поля:

Инспектор Атрибутов показывается когда вы выбираете четвёртую кнопку слева на панели переключения Инспекторов. Он позволяет вам редактировать свойства объекта в вашем storyboard.

2. В Инспектор Атрибутов найдите поле, обозначающее Заполнитель, и наберите New to-do item .

3. Для того чтобы новый заполнитель отобразился нажмите Ввод.

Предспросмотр Вашего Интерфейса

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

Для предпросмотра вашего интерфейса нужно:

1. Нажмитена кнопку Assistan t на панели инструментов Xcode, чтобы открыть assistant editor.

1. На панели editor selector , переключите этот редактор из положения Автоматически в положение Предпросмотр.

3. Если вам нужно больше пространства для работы сверните навигатор проекта и вспомогательную область, нажав кнопки Navigator и Utilities на панели Xcode.

Ваше окно Xcode должно выглядеть вот так:

Как видите, текстовое поле выглядит неправильно. Оно заканчивается примерно на середине экрана. Определённый в storyboard интерфейс отображается правильно, так почему это происходит в предпросмотре?

Как вы узнали ранее вы теперь разрабатываете Приспосабливаемый интерфейс, который масштабируется в зависимости от размеров iPhone и iPad. Сцена, которую вы видите в storyboard по-умолчанию отображается как общая версия интерфейса. Здесь вам нужно указать как интерфейс должен подгоняться к разным устройствам. Например, когда интерфейс сжимается до размеров iPhone, и текстовое поле тоже должно сжаться. Когда интерфейс расширяется до размеров iPad, текстовое поле тоже должно расшириться. Вы може определить эти правила масштабирования интерфйса используя Авто расположение.

Добавление Авто Расположения

Авто Расположение — это мощный механизм расположения, который легко помогает разработать адаптивное расположение. Вы описываете желаемые условия для позиционирования элементов на сцене, и потом позволяете механизму расположения определять как лучше реализовать эти условия. Вы описываете условия, используя ограничения — правила, которые объясняют как один элемент должен быть расположен относительно другого, или какой размер у него должен быть, или кто из двух элементов должен сжаться первым когда что-то уменьшает пространство для каждого из элементов.

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

Для расположения текстового поля, используя Авто Расположение, необходимо:

1. В вашем storyboard выберете текстовое поле.
2. На рабочей области выбирете иконку Auto Layout Align .

3. Выбирете пункты «Horizontal Center in Container » и «Vertical Center in Container ».

4. Нажмите на кнопку Добавить два ограничителя.

5. На рабочей области выбирете иконку Auto Layout Pin .

6. Под «Spacing to nearest neighbor » выбирете два красных ограничителя, нажав на них.

Эти ограничения определяют расстояния до ближайшего соседнего представления спереди и сзади. В случае когда пункт «Constrain to margins » выбран, текстовое поле ограничивается относительно отступов представления.

7. Нажмите на кнопку Добавить два ограничителя.

Предпросмотр интерфейса обновится для отображения новых ограничителей:

Если вы не получаете того поведения, что ожидаете, используйте функцию Xcode по поиску ошибок в Автоматическом Расположении. С выбранным текстовым полем нажмите на иконку Resolve Auto Layout Issues и выбирете Reset для SuggestedConstraints для того, чтобы Xcode обновил интерфейс с действующими ограничениями, описанные выше. Или нажмите на иконку Resolve Auto Layout Issues и выбирете ClearConstraints для удаления всех ограничений в текстовом представлении и после попробуйте снова шаги, описанные выше.

Проверка: запустите ваше приложение на iOS Симуляторе, чтобы убедиться, в том, что созданная сцена выглядет так как ожиалось. У вас должно получится кликнуть внутри текстового поля и ввести строку, используя клавиатуру (если хотите, вы можете переключить клавиатуру, нажав Command-K). Если вы перевернёте устройство (Command-Левая Стрелка или Command-Правая стрелка) или запустите приложение на другом устройстве, текстовое поле должно расшириться или сжаться в зависимости от размера устройства и его ориентации.

Несмотря на то что ваша сцена добавления элемента пока не очень функциональна, но, базовый интерфейс есть и он функционирует. Рассмотрение разметки с самого начала руководства позволяет вам быть уверенным, что у вас твёрдый фундамент для надстройки.

Резюме

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