От идеи до фичера в App Store: как я делал мобильную игру
Год назад я ушёл с работы, чтобы сделать мобильную игру и вот недавно она оказалась на главной странице App Store в 16 странах.
Сперва давайте познакомимся. Меня зовут Артём, для многих я более известен как Кристоф Стим. Я делаю игры, а также веду канал о разработке.
Этот проект для меня очень личный. После того, как я оставил работу, мне хотелось создать что-то небольшое, но значимое. Рассказать о том, что меня волнует. У меня не было большого бюджета, поэтому я решил делать всё сам. Далее я расскажу вам с какими трудностями я столкнулся и чем это всё закончилось. И закончилось ли?
Пару слов о проекте. Это интерактивная история, нарративный опыт, управляемая анимация — можно сказать как угодно. Я решил не называть свою историю игрой в описании магазина, так как подозревал, что столкнусь с недопониманием.
История длится всего 10-15 минут, но рассказывает о важных вещах, не используя при этом слов — только графика, музыка и управление. Подобный жанр не очень популярен в игровом сообществе, и в большей степени мне хотелось достучаться до аудитории, которой интересны любые авторские проекты. Именно поэтому я снял кинематографический трейлер, чтобы задать нужный тон.
Долгое время я не понимал как должен выглядеть мой проект, в чём будет его особенность. Основная идея пришла ко мне внезапно, во время утреннего душа.
Что если показать эмоциональное состояния героя через изменение графики? Пиксель арт, например, будет отражением рутины, а увлечённость и влюблённость я покажу через живописные локации.
За завтраком я рассказал об идее своей жене, ей понравилось и с этого момента я твёрдо решил, что хочу реализовать задуманное.
Это мой первый самостоятельный проект такого уровня. У меня был опыт выстраивания процессов, с графикой я тоже знаком давно, но вот написание игровой логики было для меня вызовом. Поэтому было важно в самом начале оценить свои силы и определить ограничения, иначе можно так никогда и не закончить начатое дело. Одним из таких ограничений для меня была максимально простая механика, которую я смогу полностью реализовать самостоятельно.
Далее необходимо было разбить весь этот, кажущийся необъятным, процесс на понятные этапы вроде написания сценария, подготовки эскизов, создание базового прототипа, а после определить конкретные задачи и сроки.
В качестве инструментов я решил использовать Unity в связке с Playmaker. Я посматривал в сторону Construct и Gamemaker, но быстро понял, что это не самый удачный для меня вариант. Во-первых, у меня уже был опыт работы с Unity с точки зрения геймдизайна, а во-вторых, у движка очень большое коммьюнити — сложно наткнуться на проблему, которую ещё не решили. Playmaker же позволил мне создавать логику, не погружаясь в глубины кодинга. Для моих задач его функциональности хватало полностью.
К процессу я старался подходить основательно. Ставил себе задачи, писал дизайн документ, собирал референсы, выстраивал сценарий — всё это помогало дисциплинировать себя.
Тут хорошо видна структура истории, даже несмотря на то, что не видно текста.
Раскадровка нужна, чтобы понимать как будет выглядеть каждый экран визуально.
После того как я начал понимать историю более предметно, я смог собрать первый прототип с черновой графикой и музыкой. В таком виде я собирался показать проект своим друзьям и узнать их мнение. Я подумал: если мне удастся вызвать эмоциональный отклик без красивой графики и анимации, значит я двигаюсь в правильном направлении.
Когда я показал прототип нескольким своим знакомым, я понял, что всё не зря. В то же время я осознал насколько много всего мне предстоит ещё сделать. В первую очередь, мне хотелось найти композитора, потому что я не хотел использовать музыку со стоков. Оригинальный саундтрек больше подходил к моей задумке.
Помимо этого, я понимал, что мне потребуется помощь с графикой. Я хотел, чтобы живописный стиль исполнил мой хороший приятель Рафаэль, который гораздо более умелый художник, чем я.
Бюджетов у меня по-прежнему не было, поэтому оставалось рассчитывать на то, что и композитору, и художнику настолько понравится идея, что они согласятся поработать над ним во имя искусства! К счастью, так и вышло.
Мы условно разделили процесс по графической части так: он рисует живописные фоны, которые соответствуют самому высокому уровню графики, а я — персонажей, анимацию и всё остальное.
В итоге всё получилось гораздо сложнее. На определённом этапе у Рафаэля начались завалы по основной работе и он не всегда мог заниматься проектом. Поэтому я под конец также рисовал фоны и мы вместе обсуждали насколько наши стили согласуются. Возможно, самые внимательные смогут разглядеть эту разницу.
Для композитора Ивана проект также оказался очень личным. Чувствовалось, что он вкладывает душу в каждую ноту. Вскоре он сам подробнее расскажет создании музыки для этой истории. Пока же привожу небольшой комментарий от него
В Will it ever end? музыка — это нечто большее, чем звучание, задающее настроение. Мы сделали так, чтобы на каждое «предложение», которое рассказывает игроку история, у музыки был ответ. Саундтрек к игре — это две контрастные темы: рутины и любви. В зависимости от происходящего на экране, они меняют свою структуру и перетекают одна в другую, они смешиваются, распадаются на партии, звучат издалека или вблизи. Всё это чтобы описать состояние героя.
Тема рутины — это экспериментальное звучание, состоящее из множества повторяющихся музыкальных фраз. В нашем представлении именно так звучит повседневность. Тема любви же — джазовая и яркая. Мы хотели, чтобы эпизод про жизнь героя и героини был очень «киношным» и наивно-счастливым. И поэтому музыка там как в старых фильмах и мюзиклах про любовь.
Продвижение игр, как и продвижение вообще — довольно хитрая задача. Необходимо хорошо понимать свою аудиторию и жанр в который ты метишь. Люди хотят знать, что примерно они получат.
В этом смысле, короткометражная история для iPhone — это очень рискованный подход, если стоит цель заработать много денег. У меня такой цели не было изначально, поэтому и не было высоких ожиданий. При этом я старался делать всё возможное, чтобы проект заметили. Я сделал промосайт, выпустил трейлер, нарисовал постеры и даже напечатал открыток. После, писал различным журналистам задолго до релиза.
Пресса не особо заинтересовалась проектом, и её можно понять.
Мне оставалось надеяться только на поддержку платформы: редакция App Store отсматривает тысячи проектов каждый день и вручную отбирает лучшие для демонстрации их на главной странице. И вот в один день я захожу в App Store и вижу Will it ever end? на главной странице в категории «Игры».
Как выяснилось позже, приложение попало в разного рода подборки в 16-ти странах. Среди них: Россия, большая часть Европы, Великобритания, Канада, Австралия, Корея и Китай. За весь период размещения, охват игры в App Store составил более 10 миллионов.
Уже после фичера об истории написало несколько зарубежных изданий.
Когда я начинал работу над своей историей, я не рассчитывал на подобный исход. Я был бы рад, даже если бы мне удалось достучаться всего до нескольких человек.
Разумеется, есть и отрицательные отзывы. По большей части они из-за того, что люди ожидают получить именно игру, а не короткий опыт. Что тут поделаешь?
Сейчас Will it ever end? продаётся в App Store по хорошей скидке. Буду рад, если зацените!
Если будут какие-то вопросы, вы можете написать мне в ВК, ФБ или Телеграме.
Создание игры для iOS. Начало
Меня зовут Марк и я ученик Школы программистов. В этом блоге я расскажу, как создаю полноценную iOS-игру. До сих пор я работал над различными проектами, набивал шишки и получал бесценный опыт, но приложения, прошедшего путь от самого начала и до логического завершения, ещё не делал. Так что в этом и последующих постах я поделюсь своим первым опытом разработки полноценного продукта. Итак, поехали!
Немного об идее.
Вы когда-нибудь играли в Цивилизацию? Скорее всего да, но если вдруг не довелось, попробуйте, это одна из тех немногих игр, в которые поиграть разок-другой абсолютно не зазорно. Моя идея в том, чтобы переосмыслить Цивилизацию и адаптировать под мобильные устройства. Играть в неё можно будет как с ИИ, так и с другими пользователями.
Что необходимо.
1. Разработка под iOS возможна только на macOS, здесь есть два варианта — использовать компьютер Mac или установить macOS на виртуальную машину.
2. Так как мы разрабатываем приложение под iOS, то нам никак не обойтись без специального инструмента для разработчиков — Xcode, он бесплатный.
3. Нам нужен инструмент, в котором мы будем создавать облик наших объектов, в качестве графического редактора подойдут Sketch, Adobe Illustrator, Photoshop, Gimp.
4. Желательно (но не обязательно) иметь устройство для тестирования.
Первые шаги.
Итак, мы разобрались с тем, что хотим создать, обзавелись всем необходимым и уже готовы ринуться в бой. Так давайте творить! Начнем с создания нового проекта в Xcode.
1. Открываем Xcode, нажимаем создать новый проект, выбираем платформу iOS и тип Game.
2. В появившемся окне даем имя нашему приложению, выбираем язык, на котором писать и технологию. В данном случае название — Grasp, язык — Swift, технология — SpriteKit. Done!
3. Последний эта здесь — выбираем директорию, в которую мы сохраним наш проект и готово, проект создан! Однако, нужно провести первый этап настройки.
4. В открывшемся проекте в разделе Deployment Info выбираем минимальную версию iOS, на которой можно будет использовать наше приложение, ориентацию экрана, которая будет поддерживаться в приложении. В данном случае iOS 8 и только Portrait orientation.
Теперь предлагаю сделать несколько первых шагов, которые помогут нам двигаться быстрее в будущем. Создадим файл Useful.swift, в котором напишем несколько полезностей. Для этого в файловом меню нажмите правой кнопкой мыши -> Новый файл, затем выберите swift file.
Открыв только что созданный файл, для начала добавим сокращений. Во-первых, это повышает скорость написания кода, а во-вторых, сильно сокращают длину строчек, тем самым повышается читаемость кода, конечно, при том условии, что строчек не слишком много и они интуитивно понятны. Для этого импортируем несколько полезных библиотек после строчки import Foundation:
Теперь наш файл должен выглядеть примерно так:
В следующих частях блога будем добавлять сюда еще всяких полезных фишечек, пока запомним этот момент и пойдем дальше.
Давайте наведем порядок в нашем проекте.
Откроем файл GameScene.swift и удалим содержимое класса — творить лучше на чистом холсте. После этой несложной манипуляции файл должен выглядеть примерно так:
Аналогичную процедуру проделываем с файлом GameViewController.swift
2) Удаляем файлы Actions.sks и GameScene.sks
3) Настроим иерархию, создадим папки Main, Design, Scenes.
В папку Main поместим файлы AppDelegate.swift, Info.plist, Main.storyboard, LaunchScreen.storyboard и GameViewController.swift
В папку Design поместим файл Assets.xcassets
А в папку Scenes GameScene.swift
После проделанных процедур наш проект должен выглядеть примерно вот так:
Ну что ж, все подготовительные работы проделаны, не забывайте сохранять ваши проекты! Следующая часть
Сделай игру для iPhone за 10 минут. Прямо сейчас
В закладки
В этой статье мы пошагово разберем, как сделать элементарную игру для iOS, ничего об этом не зная!
Вы пройдете путь от создания проекта до просмотра готовой игры на устройстве за 12 шагов и освоите основные принципы создания игр в xCode. Ну а потом решите, продолжать ли учиться разработке под iOS.
На все действия уйдет 10-15 минут.
Нам понадобятся:
- Mac с установленным Xcode;
- Устройство с iOS;
- Изображение цветка;
- Изображение травы.
Шаг 1. Создаем новый проект в Xcode
Запускаем xCode, выбираем пункт меню File -> New -> Project.
Шаг 2. Выбираем тип проекта
На следующем экране выбираем тип проекта – Game.
Шаг 3. Указываем основную информацию о проекте
Указываем название проекта и сверяем остальные настройки с картинкой.
Шаг 4. Выбираем место для папки с проектом
В открывшемся окне Finder указываем папку, в которой будем хранить проект. При необходимости можно воспользоваться кнопкой Create Folder в левом нижнем углу окна.
Шаг 5. Настраиваем игру
Теперь перед нами окно детальных настроек приложения. Снимаем галочку с Portrait в разделе Deployment Info, чтобы игра работала только в горизонтальном режиме.
Шаг 6. Смотрим на стандартный пример игры
Нажимаем на кнопку запуска симулятора в левом верхнем углу. Ждем некоторое время, пока симулятор загрузится. Кликаем на серое поле, чтобы появлялись космические корабли.
Шаг 7. Меняем космические корабли на цветы
В правом меню выбираем пункт assets.wcassets, потом делаем активным объект Spaceship и на место картинки с космическими кораблем перетаскиваем картинку с цветком.
Шаг 8. Смотрим, что изменилось
Снова запускаем эмулятор. Теперь вместо космических кораблей появляются цветы.
Шаг 9. Уменьшаем размер цветка
Уменьшим цветы в пять раз. В правом меню выбираем файл GameScene.swift и находим в нем строчки кода:
Шаг 10. Добавляем траву в коллекцию картинок
Идем в assets.wcassets, находим плюсик (см. картинку), нажимаем на него и выбираем пункт меню New Image Set. Называем новый набор картинок Background (название должно быть точным) и перетаскиваем в него картинку с травой из Finder.
Шаг 11. Добавляем траву в код
Удаляем код, который делает фоновую надпись HelloWorld:
На его место вставляем:
Шаг 12. Тестируем игру на устройстве
Идем в Xcode -> Preferencies -> Accounts и добавляем свой Apple ID:
1. Подключаем iOS-устройство к компьютеру.
2. Выбираем устройство и жмем на кнопку запуска.
3. Если появляется сообщение о проблемах с безопасностью, идем на iOS-устройстве в Настройки -> Основные -> Управление устройством и разрешаем запуск приложений от нужного разработчика.
4. Находим на Spring Board иконку приложения и запускаем его.Теперь устройство можно отсоединить от компьютера и продолжать пользоваться приложением.
Если возникли какие-то проблемы, то обновите iOS и xCode.
В App Store такую игру не примут, но можно развлекаться на своих устройствах. Если проявить немного усердия, из этой основы можно сделать что-то действительно интересное с помощью Google и StackOverflow.
Не разбираясь в программировании, мы создали простую игру и потратили всего 10 минут. Чему же можно научиться за год интенсивного обучения под руководством опытных преподавателей?
Где учиться разработке под iOS?
Лучший вариант — поcтупить на факультет iOS-разработки в онлайн-университет GeekUniversity, созданный GeekBrains и Mail.ru. Целый год несколько вечеров в неделю вы будете изучать программирование под iOS. Занятия проходят в формате вебинаров и учиться можно в любой стране мира.
В GeekUniversity практикуют проектно-ориентированное обучение. За год вы создадите 4 собственных приложения для iOS:
- Погодное приложение;
- Мобильную игру;
- Приложение для интернет-магазина;
- Командный проект.
После года обучения вы получите годовой опыт индивидуальной и командной разработки, примеры реальных проектов для портфолио и знания, достаточные для работы разработчиками. У каждого ученика на курсе есть наставник, который контролирует прогресс и отвечает на все вопросы.
Какие знания вы получите на факультете iOS-разработки?
За год супер-интенсивного обучения ученики усваивают огромный объем знаний:
- Навыки программирования на Swift
- Навыки программирования на Objective C
- Навыки разработки мобильных игр
- Знание алгоритмов и структур данных
- Понимание компьютерных сетей и операционных систем
- Работа в команде
- Методологии разработки: Agile, Scrum
- Умение работать с GIT
- Знание принципов ООП
- Навыки успешного прохождения собеседований и общения с заказчиками
- Навыки проектирования архитектуры, использования шаблонов проектирования singletone, adapter, factory, dependency injection
- Навыки использования IOS SDK, карт, геолокации, push-уведомлений, анимаций и 3d-touch
- Навыки разработки мобильных приложений под iOS
- Навыки написания чистого кода
Это очень мощная теоретическая база, на основе которой можно вырасти в действительно крутого спеца, если не снижать темп и продолжать интенсивное обучение.
Что вас ждет после обучения?
Выпускники получают сертификат об окончании GeekUniversity, гарантированное трудоустройство и год онлайн-обучения английскому языку в подарок.
Узнайте больше о факультете о факультете iOS-разработки и запишитесь на подготовительные курсы здесь.
В закладки
Пишем простейшую игру для iPhone
Осваивать программирование лучше всего на практике. В этой статье мы пошагово создадим простую игру с игральными костями, а также оптимизируем её под любые диагонали экранов. Для работы вам потребуется iMac или Macbook с предустановленным Xcode. Писать приложение для iOS будем на Swift.
Создание проекта
В первую очередь следует создать новый проект: в нашем случае речь идёт об iOS-приложении «Single View Application»:
Далее просто вводим желаемые значения:
Теперь нажимаем «Next», сохраняя проект в нужной папке. Потом в левой части экрана Xcode находим Main.Storyboard и нажимаем «Создать интерфейс пользователя».
Теперь можно переходить к следующему этапу.
Интерфейс пользователя
Справа снизу есть панель библиотек, выбираем там вкладку «Object».
Далее находим элемент Label, а потом перетаскиваем его на Main.Storyboard. В результате соданный вами проект должен выглядеть приблизительно следующим образом:
На данном этапе не волнуйтесь относительно размещения элементов на экране, т. к. оптимизацией мы займёмся позже. Сейчас же введём название для элемента «The sum is:» во вкладке «Inspector Pane»:
Далее добавим в Main.Storyboard два элемента из Object, а конкретнее, Image View. После того, как добавим их на главный экран, их нужно будет сделать квадратными. В результате получим:
Останется добавить кнопку. Чтобы это сделать, найдём элемент Button в правом нижнем углу и перетянем его на главный экран.
И введём в файловом менеджере новое название для кнопки — «Roll».
Используем функцию Auto Layout
Auto Layout — одна из лучших функций в Xcode. С её помощью можно оптимизировать размещение элементов на экране под любой необходимый размер. Давайте сначала поместим 2 элемента Image View в Stackview, выбрав их на экране либо боковой панели с зажатой кнопкой «CMD»:
Теперь нажимаем на кнопку «Embed In Stack», выставляем параметр Axis в позицию Horizontal и устанавливаем параметр Spacing в значение 40:
Если что-то пойдёт не так, можно нажать «CMD + Z» и повторить процедуру. Теперь нужно добавить оставшиеся элементы в Stackview. Зажимаем «CMD», а потом выбираем их на экране Main.Storyboard. И выставляем параметр Vertical в поле Axis.
Теперь нажимаем кнопку «Add New Constraints» и выставляем параметры, показанные на скриншоте:
Осталось выбрать Stackview для всех элементов, а потом в поле Spacing установить значение 50.
Разумеется, это ещё не всё, ведь для работы приложения потребуется написать код.
Подключаем элементы к коду
В первую очередь соединяем визуальные элементы с ViewController.swift. При этом элементы UILabel и UIImageView должны быть типа @IBOutlet, а UIButton — @IBAction. Выполняем эту операцию с зажатой кнопкой «CTRL» и выбранным Assistant Editor. По итогу получим:
Добавляем графику
Теперь пришёл черёд для графики. Давайте скачаем архив с изображениями и добавим их в Assets.xcassets. Откроем архив и перетянем все элементы в проект за исключением папки icon.
По итогу Assets.xcassets должен выглядеть следующим образом:
Вернёмся к экрану Main.Storyboard и выберем для каждого ImageView любое изображение игральных костей. Это следует делать в Attributes Inspector:
Для добавления фонового изображения вставляем дополнительный ImageView и устанавливаем параметры, которые указаны на скриншоте:
Для нашего фона в Attributes Inspector выбираем изображение «table»:
Дабы сделать текст читабельнее, изменим цвет и увеличим шрифт. Давайте выберем надпись, установим белый цвет и увеличим шрифт.
Кроме того, стоит выбрать изображение для кнопки.
Пишем код
Вот мы и дошли до кода. Откроем файл ViewController.swift и вставим в функцию кнопки следующее:
В результате мы программно поменяем значения элементов. Если мы запустим проект и нажмём на кнопки, то увидим эти значения на экране:
Завершающий шаг — написание функции, которая будет случайно выбирать значения для наших игральных костей. Также код станет выводить сумму чисел на экране. Создадим функцию rollDice() , а потом поместим в неё код:
Далее надо удалить код внутри кнопки «rollACTION» и вставить туда rollDice() . Потом поместим это значение в функцию viewDidLoad() :
Вот и всё, теперь можно запускать игру. При этом каждый раз при нажатии кнопки «Roll» мы будем получать различные значения. Кстати, готовый проект есть на GitHub.