В этой статье мы пошагово разберем, как сделать элементарную игру для iOS, ничего об этом не зная!
Вы пройдете путь от создания проекта до просмотра готовой игры на устройстве за 12 шагов и освоите основные принципы создания игр в xCode. Ну а потом решите, продолжать ли учиться разработке под iOS .
На все действия уйдет 10-15 минут.
Нам понадобятся:
Запускаем xCode, выбираем пункт меню File -> New -> Project .
На следующем экране выбираем тип проекта – Game.
Указываем название проекта и сверяем остальные настройки с картинкой.
В открывшемся окне Finder указываем папку, в которой будем хранить проект. При необходимости можно воспользоваться кнопкой Create Folder в левом нижнем углу окна.
Теперь перед нами окно детальных настроек приложения. Снимаем галочку с Portrait в разделе Deployment Info , чтобы игра работала только в горизонтальном режиме.
Нажимаем на кнопку запуска симулятора в левом верхнем углу. Ждем некоторое время, пока симулятор загрузится. Кликаем на серое поле, чтобы появлялись космические корабли.
В правом меню выбираем пункт assets.wcassets , потом делаем активным объект Spaceship и на место картинки с космическими кораблем перетаскиваем картинку с цветком.
Снова запускаем эмулятор. Теперь вместо космических кораблей появляются цветы.
Уменьшим цветы в пять раз. В правом меню выбираем файл GameScene.swift и находим в нем строчки кода:
Sprite.xScale = 0.5 sprite.yScale = 0.5
Заменяем их на:
Sprite.xScale = 0.1 sprite.yScale = 0.1
Идем в assets.wcassets , находим плюсик (см. картинку), нажимаем на него и выбираем пункт меню New Image Set . Называем новый набор картинок Background (название должно быть точным) и перетаскиваем в него картинку с травой из Finder.
Удаляем код, который делает фоновую надпись HelloWorld:
Class GameScene: SKScene { override func didMoveToView(view: SKView) { /* Setup your scene here */ let myLabel = SKLabelNode(fontNamed:"Chalkduster") myLabel.text = "Hello, World!" myLabel.fontSize = 45 myLabel.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame)) self.addChild(myLabel) }
На его место вставляем:
Class GameScene: SKScene { var background = SKSpriteNode(imageNamed: "Background") override func didMoveToView(view: SKView) { /* Setup your scene here */ background.position = CGPoint(x: frame.size.width / 2, y: frame.size.height / 2) addChild(background) }
Идем в Xcode
-> Preferencies
-> Accounts
и добавляем свой Apple ID:
1.
Подключаем iOS-устройство к компьютеру.
2.
Выбираем устройство и жмем на кнопку запуска.
3.
Если появляется сообщение о проблемах с безопасностью, идем на iOS-устройстве в Настройки
-> Основные
-> Управление устройством
и разрешаем запуск приложений от нужного разработчика.
4.
Находим на Spring Board иконку приложения и запускаем его.Теперь устройство можно отсоединить от компьютера и продолжать пользоваться приложением.
Если возникли какие-то проблемы, то обновите iOS и xCode.
В App Store такую игру не примут, но можно развлекаться на своих устройствах. Если проявить немного усердия, из этой основы можно сделать что-то действительно интересное с помощью Google и StackOverflow.
Не разбираясь в программировании, мы создали простую игру и потратили всего 10 минут . Чему же можно научиться за год интенсивного обучения под руководством опытных преподавателей?
Лучший вариант - поcтупить на факультет iOS-разработки в онлайн-университет GeekUniversity
, созданный GeekBrains и Mail.ru. Целый год несколько вечеров в неделю вы будете изучать программирование под iOS. Занятия проходят в формате вебинаров и учиться можно в любой стране мира.
В GeekUniversity практикуют проектно-ориентированное обучение . За год вы создадите 4 собственных приложения для iOS:
После года обучения вы получите годовой опыт индивидуальной и командной разработки, примеры реальных проектов для портфолио и знания, достаточные для работы разработчиками. У каждого ученика на курсе есть наставник, который контролирует прогресс и отвечает на все вопросы.
За год супер-интенсивного обучения ученики усваивают огромный объем знаний:
Это очень мощная теоретическая база, на основе которой можно вырасти в действительно крутого спеца, если не снижать темп и продолжать интенсивное обучение.
Ну что-же, пришло время написать нам свою первую программу для нашего iPhone. Если вы еще не поставили себе XCode + iPhone SDK — то вам . И так, XCode у нас стоит и настроен, начнем?
Для начала научимся самому простому. Создадим программу, в которой будет одно текстовое поле в которое будем записывать наше имя и одну кнопку, по нажатию на которую наше имя будет записываться в приветствие. Выглядеть наша первая программа будет так:
Создаем наш первый и надеюсь не последний проект:
Далее нас спросит какой тип приложения создавать. Слева в панели выбираем iPhone OS -> Application а в центральном окне выбираем тип проекта View-based Application . Назовем нашу первую программу, допустим, FirstApp
В результате у нас создается проект с уже созданным контроллером (первым окном нашей программы)
Главное окно проекта выглядит вот так:
Xcode создал для нас первый контроллер, это два файла c названиями FirstAppViewController.h и FirstAppViewController.m
Файл FirstAppViewController.h выступает как-бы заголовком (оттуда и расширение файла.h от слова header) В нем мы будем оглашать переменные и методы которыми будем пользоваться в главном файле FirstAppViewController.m
И так, открываем файл FirstAppViewController.h и создадим два указателя:
IBOutlet UILabel *username;
Первая переменная username — это текстовая метка, в которую мы будем записывать наше имя. nikField — это текстовое поле, откуда мы будем читать наше имя.
Записывать это нужно в блоке @interface firstAppViewController: UIViewController { }
Еще создадим метод, который будем вызывать при нажатии на кнопку, для того чтобы представиться. Назовем метод setNik:
— (IBAction)setNik;
В итоге, наш файл FirstAppViewController.h должен выглядеть так:
#importТеперь, перейдем в файл FirstAppViewController.m
Добавим сюда наш метод setNik. Писать нужно после строчки @implementation firstAppViewController
- (IBAction)setNik{ username.text = nikField.text; }Тут мы прописываем, что при выполнении этого метода в текстовую метку username будет записан текст из поля nikField
Еще нам нужно освободить память от этих указателей после того как мы их используем. Делается это в методе под названием dealoc
- (void)dealloc { ; ; ; }Просто добавляем все указатели, которые использовали, вот в таком формате: ;
Теперь, открываем файл интерфейса FirstAppViewController.xib Он запускается в редакторе интерфейсов Interface Builder.
Из библиотеки компонентов перетаскиваем нужные нам компоненты в окно нашей программы и расставляем так как удобно. Дальше в маленьком окне выбираем File’s Owner и нажимаем Command+2 что переносит нас в меню Connections inspector. Видим там список наших указателей, которые мы уже прописывали, а справа от них пустые кружечки. Клацаем на пустой кружочек возле указателя nikField и не отпуская тянем к текстовому полю. Когда мы подводим к ниму указатель мыши, он обводится прямоугольником и отпускаем. Таким образом, мы привязали это поле к указателю nikField. Теперь сделаем так же с указателем username и перетащим его на тот текст, где хотим видеть наш ник (у меня на картинке это текст %username%). Еще чуть ниже видим наш метод setNik и связываем его с нашей кнопкой. Но когда вы поднесете к кнопке и отпустите, то выпадет контекстное меню из которого выберите Touch Up Inside. Это означает, что этот метод сработает когда мы нажмем и отпустим кнопку. То что нам и нужно:)
Ну что, сохраняем, переходим обратно в Xcode и нажимаем Build & Run. Урааа, наша первая программа запустилась:) Нажмем в текстовое поле, появляется клавиатура, пишем имя. Но в нашей программе еще не хватает одного маленького штриха. Это чтобы убиралась клавиатура по нажатию на кнопку Done, когда мы закончили вводить наше имя.
Для этого опять включимся в конструктор интерфейсов, нажмем на нашу кнопку. Нажмем Command+1 и найдем там блок Text Input Traits. В нем есть несколько выпадающих списков, но нас интересует только самый нижний: Return Key. Выбираем со списка Done и в низу блока ставим галочку возле Auto-enable Return Key. Дальше мереходим в Command+2 Connections Inspector и видем там слово delegate . Жмем на кружек возле него и тяним к блоку File’s Owner
Теперь возвращаемся в наш файл FirstAppViewController.m После нашего метода setNik добавляем еще такой код:
- (BOOL)textFieldShouldReturn:(UITextField *)theTextField { ; return YES; }Сохраняем и пробуем запустить (можно использовать комбинацию Command+R) Пробуем написать наше имя в текстовом поле. При написании появляется кнопка Done по нажатию на какую закрывается клавиатура. Теперь жмем на нашу кнопку и вуа-ля, программа с нами здоровается:)
Казалось бы какая мелоч, подумаешь написали такую мелоч. А я, когда много лет назад учил делфи, выучив один такой пример, чтобы по нажатию на кнопку что-то писалось на экране делал уже разные игрушки. Помните одну из самых первых браузерных игр Бойцовский клуб? Вот я делал себе ради забавы что-то похожее и там все было основано именно на таком принципе как мы только что с вами сделали. Так что играйтесь, экспериментируйте!
Вот вам еще линк на архив проекта Можно скачать, включить посмотреть если у кого-то что не получилось. Ну а если есть вопросы — то пишите в комментариях.
Все началось с того, что я огляделся по сторонам и, не увидев автомобиля своей мечты, решил сконструировать его сам
Фердинанд Порше
Поэтому, поставив все ставки на простоту и удобство, я приступил к созданию концепции. Модель приложения с единым списком заметок. Все в одном месте, что может быть проще? Если что–то имеет большую ценность или актуальность, совсем не обязательно вешать на него ярлык, ведь достаточно просто переместить более важную заметку в топ списка. Старые и ненужные записи постепенно будут опускаться вниз и в последствии будут удалены пользователем.
Довольно стандартный функционал для подобного рода приложений, согласитесь. Но это только верхушка айсберга, дьявол кроется в деталях.
Кроме того, в приложении очень удобно создавать скриншоты для публикации в AppStore. Для каждого размера экрана создавался свой набор артбордов, вместе с использованием стилей, время потраченное на форматирование минимально. Но про публикацию чуть позже.
После создания базового функционала (создание, удаление, редактирование заметок) я решил улучшить каждую из этих функций.
Согласитесь, редактирование текста в iOS реализовано достаточно неудобно. При допущении ошибки в слове для перемещения курсора на нужную позицию необходимо сделать касание и не убирая пальца от экрана, попытаться попасть в выбранную область. К тому же после исправления ошибки нужно вернуть курсор назад в конец строки. В своем приложении я решил переработать механизм перемещения курсора: для того чтобы внести изменение в слово, нужно лишь сделать свайп в зоне между клавиатурой и набираемой фразой не загораживая при этом обзор текста.
Анимации удаление и перемещения в топ я решил реализовать самостоятельно, а визуальное сопровождение максимально приблизить к реальной жизни. Что-то приобрело более высокий приоритет - свайп вправо и заметка перемещается в топ списка. Чтобы удалить - свайп влево и анимация зачеркивания покажет на сколько еще нужно продлить свайп чтоб завершить удаление. При случайном удалении - нужно просто потрясти устройство («Shake»), и заметка вернется на свое прежнее место.
Для того, чтобы выделить заметку, я использовал LongTapGesture и три основных цвета приложения - белый, синий и красный, которые и сформировали главную палитру цветов.
Переход между дневной и ночной темами я решил сделать автоматическим - почему никто еще не додумался менять внешний вид в зависимости от положения солнца на небе? Все очень просто - после наступления темноты и после восхода солнца тема меняется, при этом пользователю не нужно отвлекаться от создания заметок, ведь приложение всегда будет автоматически подстраиваться под окружающие условия.
mad note - excellent, entertaining, surprising, unexpected or awe-inspiring
Поскольку заметки на бумаге пишут карандашом или ручкой, я решил отобразить это на иконке - карандаш повернутый под углом 45 градусов. Получилось вот так:
Спасибо внимание.
Note your passion
Многие начинающие разработчики или люди, которые просто интересуются программированием, не знают, как можно легко и быстро создать приложение для iOS.
Мы разберем весь этот процесс пошагово, чтобы каждый мог прочесть данный материал и самостоятельно выполнить разработку.
Конечно же, с самого начала необходимо придумать хорошую идею, которая могла бы пользоваться популярностью. Приложение должно быть простым, функциональным и нужным пользователям. Вот несколько советов, которые помогут вам найти отличную идею и воплотить ее в жизнь:
1 Зайдите в AppStore и посмотрите представленные там программы. Возможно, вам что-то придет в голову.
2 Также посмотрите на список своих приложений (установленных ). Вероятно, что не все из них нравятся вам и хотелось бы добавить к некоторым какую-то функцию. Это и будет идея для вашего творения!
3 Посмотрите на приложения своих друзей с той же целью .
Важно! В конце раздумий над идеей у вас должно быть четкое понимание того, какую функцию будет выполнять ваше приложение.
Что касается названия, то к этому вопросу также стоит отнестись очень серьезно. Для начала посмотрите на самые и их названия. Зайдите на apple.com/ru/itunes/ с этой целью. Обязательно посмотрите раздел бесплатных и платных.
Эксперты выделяют несколько советов относительно того, каким должно быть название, а конкретно:
На первом шаге вы уже приняли идею и название будущего приложения. Теперь стоит сделать то, что позволит вам приступить непосредственно к разработке. Речь идет о концепции. В этом понятие включается следующее:
Когда все наброски у вас есть, можно приступать к кодингу!
Вот теперь открывайте Xcode и выполняйте следующие этапы создания ПО на iOS:
1 На стартовом экране, в меню слева нажмите «Application» (откройте этот раздел) и выберете «Empty Application» . Нажмите «Next» . Дальше введите свои данные, а в поле идентификатора разработчика (дается Apple) укажите «example» , а в поле префикса класса укажите «XYZ» .
2 Дальше выберете «File» и в выпадающем списке «New» . Дальше последовательно нажмите «User Interface» , «Storyboard» и кнопку «Next» . В меню устройств выберете и в поле имени введите «Main» . Сохраните этот файл в ту же папку, что и основной проект. После этого в древе проекта (слева) появится файл Main.storyboard. Это, как вы уже могли понять, визуальное представление всех экранов вашей программы. В дальнейшем вы будете редактировать именно его.
3 Теперь нужно сделать так, чтобы при запуске приложения открывался именно тот экран, который вы создадите в Storyboard. Для этого в дереве папок слева последовательно выберете свой проект, «Targets» , «General» , «Deployment Info» . Затем возле надписи «Main Interface» выберете «Main» , как на рисунке 8, - именно так мы назвали наш экран на предыдущем этапе.
Рис. 9. Назначение созданного экрана главным в Storyboard
4 Теперь, собственно, нужно создать этот самый главный экран, который откроется первым при запуске. Для этого в дереве слева нажмите на «storyboard» один раз. В основном окне откроется пустое окно. Внизу справа нажмите на иконку в виде куба, это библиотека объектов, которые можно внести на экран. Теперь справа найдите «View Controller» и перетащите его курсором мыши на пустое поле. Появится объект прямоугольного вида. Собственно, туда можно добавлять и все элементы.
5 Теперь вы можете добавлять и другие объекты из библиотеки . Это могут быть текстовые поля, поля ввода и остальные элементы. Если нажать на них два раза, то появится возможность изменять их атрибуты и свойства. Собственно, таким же образом можно написать какой-то код для реакции на клик. Впрочем, если вы смотрели видеоуроки по Objective-C, то прекрасно знаете, какие элементы вам нужны и как их добавить.
6 Если вам потребуется добавить еще экран, то сделайте это таким же образом, как и раньше – переместите на пустое место объект «View Controller» . Дальше можно будет так же перемещать различные объекты на него.
7 Теперь нужно сделать так, чтобы пользователь мог перемещаться между этими экранами с помощью свайпа или же путем нажатия на соответствующую ссылку. Для этого существует объект под названием «Navigation Controller» . Переместите его на свой главный экран. Дальше нажмите на «Editor» , затем «Embed In» и на вышеупомянутый объект. Вверху главного экрана появится серая панель. Это и означает, что к нему добавлена так называемая панель навигации.
8 Чтобы добавить кнопку перемещения по экранам, существует объект «Bar Button» . Это кнопка, если сказать проще. Переместите ее на панель навигации и задайте соответствующие свойства.
Таким же образом добавьте и остальные объекты, а также задайте им нужные свойства. Сильно углубляться в том, как выполнить кодинг приложения, мы не будем, так как это весьма обширная тема. Тем более что если вы ознакомитесь с вышеуказанным материалом, то будете знать об этом необходимую информацию. Но вышеуказанные этапы кодинга являются стартом ваших дальнейших разработок.
Давайте, для начала, разберемся с актуальностью разработки под Apple устройства в целом. Ведь на сегодняшний день в App Store находится более 2 миллионов приложений.
Каждое приложение и его обновление должно проходить через строгую модерацию. Все приложения в магазине обновляются с периодичностью в 1 месяц.Каждый уважающий себя разработчик хочет сделать максимально качественное приложение с красивыми анимациями, хорошо проработанным пользовательским интерфейсом и максимальной производительностью.
Заработная плата iOS разработчиков варьируется от 60 000 до 250 000 рублей. Актуальность разработки под iOS неоспорима.
В рамках этой статьи мы создадим приложение, где выведем сообщение “Hello World” на главном экране и не напишем ни строчки кода.
Давайте разберемся, что нам потребуется, для того, чтобы разработать самое примитивное iOS приложение:
Голова нам, как видите, не потребуется. Да, компания Apple приложила максимум усилий, чтобы как можно сильнее упростить процесс и сократить время разработки мобильных приложений под их платформы, такие как: iOS, tvOS, macOS, watchOS. Также Apple представила в 2014 году язык программирования Swift, который очень прост для начинающих разработчиков и очень функциональный для профессионалов. Если вы сможете создать приложение для одной платформы Apple, к примеру для iOS, то вам не составит труда создать приложение и под другие платформы. Все унифицировано до такой степени, что вы можете использовать чуть ли не один и тот же код, запуская его на разных типах устройств.
Поехали!
И так, как говорилось ранее, нам потребуется компьютер Apple , и установленное приложение Xcode , которое находится в App Store в свободном доступе.
Давайте разберемся, что такое Xcode
и зачем он нам нужен.
Xcode
— это программная среда разработки, которая включает в себя: редактор кода, редактор графических интерфейсов, систему контроля версий и инструменты для отладки и выкладки, написанных нами приложений. Одним словом, это программа, в которой ведется 90% всех взаимодействий в разработке приложений под семейство операционных систем Apple
.
И так, запустив программную среду разработки мы видим приветственное окно, где мы можем открыть, создать или клонировать проект. Нам нужно создать новый, нажав на “Create a new Xcode project” . Да, весь интерфейс Xcode на английском языке, поэтому советую запастись англо-русским словарем.
Следующим шагом нам требуется ввести название проекта, организацию, в которой мы его разрабатываем, выбрать язык и включить/отключить дополнительные функции.
Заполнив информацию, нажимаем Next , и выбираем местонахождение проекта на нашем компьютере и жмем Create
У нас открывается наше основное рабочее пространство и давайте разберемся, что у нас тут есть. Разделим все приложение на несколько частей: вверху, слева, справа, внизу и посередине.
Также мы видим строку состояния, в которой можно наблюдать текущую задачу, которую выполняет среда разработки, правее мы можем увидеть настройки вида редактора: стандартный редактор , редактор с ассистентом и просмотр изменений в системе контроля версий, а также есть кнопки, чтобы показать/скрыть части среды, которые мы будем рассматривать далее: снизу (отладочная информация) , справа (навигация) и слева (утилиты)
Слева мы видим несколько кнопок, которые будут переключать функционал левой панели, а именно:
Справа у нас есть две части: верхняя и нижняя . Вся правая панель зовется утилитами. В верхней части мы увидим настройки выбранного файла и/или элемента пользовательского интерфейса. В нижней части утилит, мы видим элементы пользовательского интерфейса, которые мы можем использовать.
В нижней части программной среды разработки мы можем увидеть отладочную информацию, логи приложения и другую полезную информацию, чтобы проверить правильную работу приложения. Открыть нижнюю часть, можно с помощью предпоследней кнопки в верхней части приложения, а также при запуске данная панель открывается автоматически.
И в основной (центральной) части среды мы можем наблюдать редактор, в котором пишется код и ведется работа над пользовательским интерфейсом приложения.
И в основной (центральной) части среды мы можем наблюдать редактор, в котором пишется код и ведется работа над пользовательским интерфейсом приложения.
Остальные пункты нам пока не потребуются.
Теперь, когда мы разобрались с тем, из чего состоит наша среда разработки, можно приступить к созданию нашего “Hello World” приложения.
Если вас интересуют готовые шаблоны, то стоит обратить внимание на наш обзор онлайн-конструкторов , с помощью которых, вы сможете сами разработать приложение для телефона или планшета.
Открыв файл, мы видим экран приложения. Теперь нам нужно перетащить элемент под названием Label
на этот экран. Этот элемент находится слева внизу.
Перетаскиваем его на экран в любое место. Затем в панели утилит, ищем поле, в котором написано “Label”
.
И изменяем Label
на Hello World
. После этого, мы увидим, что наш элемент на экране не показывает полностью нашего текста, который мы вписали, так как у него был текст изначально меньше, и он принял его размеры.
Заставим данный элемент зафиксироваться по-центру экрана и принять правильную форму, чтобы наш текст полностью отобразился. Для этого, нам нужно найти вторую кнопки внизу слева, которая называется Align
и нажимаем на нее.
Здесь мы видим некоторые параметры расположения нашего элемента. Нам требуются два последних параметра. Активируем их и нажимаем “Add 2 Constraints”.
После этого, мы можем наблюдать, как наш элемент зафиксировался посередине экрана и принял форму, в которой отображается наш текст полностью.