Уроки iPhone SDK: Создаем аналог Doodle Jump для iPhone с помощью Corona SDK

Держу пари, что сегодня утром, когда вы проснулись, ваша первая мысль была: «Я хочу создать игру Doodle Jump и написать 300 строчек кода».

«Ах да, и я хочу чтобы игра работала на iPhone и Android и чтобы код был прост, как три копейки».

Ваше желание исполнится!

В этом уроке состоящим из 2-х частей мы сделаем игру на популярном и простом в использовании движке для iOS и Android под названием Corona. По окончании изучения этой серии уроков вы узнаете:

• Как создать игру с помощью Corona.
• Плюсы/Минусы Corona и cocos2d.
• Как делать уровни в LevelHelper.
• И, конечно же, как сделать игру на подобие Doodle Jump!

Этот туториал нацелен на новичков в Corona, но он будет полезен и более опытным девелоперам.

Так же, неплохо, если у вас есть опыт работы с LevelHelper и SpriteHelper. Однако, если эти названия вы слышите впервые, рекомендую ознакомиться с этим уроком. Не переживайте если у вас нет этих утилит или опыта работы с ними, т.к. вы сможете использовать готовые спрайт листы (sprite sheet) и уровни, если потребуется.

Ну что ж, начнем!


Хотя большинство из вас наверняка знакомы с cocos2d , вы можете ничего не знать о движке Corona.

Начнем с того, что же такое Corona.

Corona – это кросс платформенный игровой движок, поддерживающий платформу iOS и Android. Движок разработан компанией Ansca и для разработки вы можете использовать триальную версию Corona. Когда появится желание опубликовать свое приложение в App Store придется купить лицензию. Цена колеблется от 199$ до 349$.

Для программирования в Corona используется язык Lua, который представляет из себя легкий и простой в использовании язык. Для Corona не существует IDE, так что вы можете использовать обычный текстовый редактор.

В Corona есть симулятор для тестирования ваших приложений.

В Corona встроены некоторые API необходимые для программирования (спрайты, звук и т.д.) а так же доступны API от Apple включая Game Center, In App Purchase (продажа контента внутри приложения) и TableViews.

Так же есть ряд сторонних API таких как Open Feint, inMobi (реклама), Flurry (аналитика). Ко всем API от Apple у Corona доступа нет. Например не удастся воспользоваться iAds, Game Center Multyplayer и соединением по Bluetooth.


Теперь давайте поговорим о разнице между Corona и Cocos2D.

Прежде всего, Corona и Cocos2D имеют немало общего:

• Позиционировать спрайты в Corona очень просто. Нужно установить свойства .x/.y для спрайта.
• Есть масштаб, поворот и альфа свойства (alpha property) связывающие отображаемые объекты.
• Метод “transition.to”, который анимирует позицию, масштаб, поворот и т.д.
• Corona использует физический движок Box2D, поэтому методы и свойства должны быть вам знакомы, если вы использовали Box2D в cocos2d.
• Как и cocos2d, Corona использует спрайты, текстовые лейблы (text labels), методы рисование примитивов, но все это называется иначе. Любые объекты, которые появляются на экране имеют общее название “отображаемые объекты” (display objects), которые похожи на CCNode в Cocos2D. В Corona есть отображаемая группа (display group), которая функционально похожа на CCLayer в Cocos2D.

Помимо сходств, у этих движков есть существенные различия:

• В Cocos2D используется язык Objective-C, в то время как Corona использует Lua. API в Corona находятся под сильным влиянием Action Script. Flash разработчики считают Corona очень дружелюбной средой. Код в Corona может быть написан согласно модели ООП, но модель функционального программирования более распространена.
• Cocos2D позволяет интегрировать сторонние библиотеки написанные на Objective-C. Corona в свою очередь закрытая система. Хотя на Lua и написаны некоторые сторонние библиотеки, но в настоящее время для Corona их всего несколько.
• И, конечно же, Corona платная, а Cocos2D бесплатна.

Я знаю какой вопрос вас мучает – какой движок следует выбрать? Лучшим ответом станет список плюсов и минусов Corona по отношению к Cocos2D.

Плюсы:

• Время на разработку. Создание игр в Corona зачастую быстрее и проще чем в Cocos2D. Так как используется язык Lua, добвление переменной объекта не требует ничего более, чем назначение (например: Sprite.newvalue = 0). Движок Box2D интегрирован, так что спрайт объекта и физика тела это один объект. Вам не придется писать файлы интерфейста, декларировать дубликаты переменных или декларировать типы данных переменных (здесь есть некоторые исключения).
• Кросс-платформенность. Если вы создаете игру в Corona, то она будет работать как на iOS так и на Android, как говориться “из коробки”.

Минусы:

• Нехватка поддерживаемых API. Corona не имеет доступа ко всем API от Apple, или так много сторонних дополнений как Cocos2D. Сетовой мультиплеер должен быть написан с нуля. Проходит немало времени прежде чем интегрируются новые фишки от Apple.
• Низкая производительность. Так как Corona работает с Lua, ваш код не будет работать так быстро как если бы использовался Objective-C.
• Corona платная. За Corona придется заплатить, если вам нужно будет опубликовать приложение. Cocos2D - совершенно бесплатна.

Если Corona у вас еще не установлена, то скачивайте триал версию и установите. Триалка полностью функциональна, за исключением возможности публиковаться в App Store. Перейдите на сайт (http://coronalabs.com/products/corona-sdk/) и скачайте/установите Corona (нажмите “DOWNLOAD NOW” внизу... придется зарегистрироваться).

С Corona я работаю на Mac, но имейте ввиду, что вы можете пользоваться Corona и на PC. Однако, вы не сможете собрать iOS билд без Mac’а, только билд для Android.

Когда закончится установка, в папке Applications появится папка Corona. В этой папке лежат различные исполняемые файлы. Я рекомендую всегда запускать Corona выполняя Corona Terminal. Это откроет окно терминала вместе с Corona Simulator. Терминал даст вам лог ошибок или print().

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

Итак, откройте новый текстовый файл и добавьте следующий код:

Как вы поняли, этот код выводит на экран надпись “Hello World” с позициями X=20 и Y=30 в 50-ти точках шрифтом Helvetica.

Сохраните свой текстовый файл. Он должен называться “main.lua”. Запомните, что этот файл является отправной точкой любой программы в Corona.

Откройте Corona Simulator, либо запустив Corona Simulatior.app, либо, как я рекомендовал через Corona Terminal. Перейдите File->Open, найдите ваш файл. Оба этих файла лежат в папке Corona в Applications.


Поздравляю, теперь вы разработчик Corona. Что может быть легче чем это? К вашему сведению, чтобы сделать билд для устройства в Corona, вам понадобится аккаунт Apple Developer.


Прежде чем мы перейдем к Doodle Jump, нам нужно создать спрайт лист. Так как мы собираемся использовать LevelHelper для создания уровней для игры, мы будем использовать SpriteHelper для создания спрайт листа.

Если у вас нет SpriteHelper’а не стоит волноваться, вы сможете воспользоваться готовым “спрайт листом” и перейти к следующему разделу.

Но если вы успели приобрести SpriteHelper, продолжайте читать по порядку.

Для этого проекта вам понадобятся некоторые ресурсы, так что скачивайте все по этой ссылке и распаковывайте. Внутри папки спрайтов вы увидите изображения, которые мы будем использовать. Бесплатный пак с изображениями предоставила Viki, жена Ray’а.

Теперь нужно настроить ряд атрибутов физики. Мне нравиться делать это с помощью Sprite Helper’а, но эти свойства позже могут быть установлены и в Level Helper’е. В этом уроке я покажу вам как устанавливать атрибуты в Level Helper’е. Углубляться в подробности использования SpriteHelper/LevelHelper мы не станем, так как эти вопросы были рассмотрены в соответствующем уроке - http://www.raywenderlich.com/4622/how-to-use-spritehelper-and-levelhelper-tutorial, на английском.

Запустите SpriteHelper и перетащите все спрайты в окно.


Выберите File-> Save, укажите директорию где лежит main.lua и введите как имя “cloudSprites”. Необходимые расширения будут добавлены автоматически. В итоге создастся три файла - cloudSprites-hd.png, cloudSprites.png и cloudSprites.pshs (проект SpriteHelper’а).


Теперь воспользуемся LevelHelper’ом для создания уровня игры. Напомню, если у вас нет указанной утилиты. Можете взять готовый уровень из необходимых ресурсов для игры о которых мы говорили ранее.

Если LevelHelper у вас есть, то запустите его и кликните “+” в Project. Введите cloudJumper и выберите “iPhone Portrait (320×480)” и нажмите “Create New Project”.


Внизу окна LevelHelper найдите раздел Game World Size и замените установленные значения на 0, 0, 320, 9600. Также добавьте эти значения в Physic Boundaries. Установите gravity на 0, -10.


Нажмите “+” возле выпадающего меню выбора сцены с правой стороны. Выберите файл cloudSprites.pshs, который недавно был создан SpriteHelper’ом. Теперь все ваши спрайты загружены в панель спрайтов.

Переместитесь в самый низ уровня.

Первое, что мы сделаем, это загрузим фоновые облака. Перетащите три облака – bg_cloud1, bg_cloud2 и bg_cloud3 в нижнюю секцию. Выделите все три спрайта.

Установите тип физики для облаков на “No Physic”. Установите свойство Z Order на “-2”. Мы хотим чтобы эти облака всегда были далеко на фоне.


С помощью инструмента Clone and Align сделайте 19 (или около того) копий всех трех спрайтов. Вы можете отступ по Y на “-480” чтобы разместить один блок облаков для каждого экрана. Следуйте по экрану и располагайте облака. Не зацикливайтесь на одних и тех же положениях, чтобы не выглядело одиникого.

Когда вы закончите, выделите все спрайты облаков и нажмите кнопку с замком. Теперь, когда кнопка нажата, спрайты не могут быть выбраны в макете. Это облегчает позиционирование других спрайтов поверх этих. Если необходимо подредактировать заблокированные спрайты, сделайте это в списке “Sprites in Level” и нажмите ту же кнопку, чтобы разблокировать их.

Теперь перетащите спрайты cloud1, cloud2 и cloud3 в низ уровня. Присвойте этим спрайтам свойства как показано ниже:



Несколько моментов на заметку. Все облака имеют значение “Z Order” -1. Это установит их поверх наших фоновых облаков, но позади всего остального. Белые и серые облака являются сенсорами (sensors). Мы будем пролетать через них и отскакивать только падая на них сверху. Синие облака не являются сенсорами, поэтому их придется избегать и это сделает игру сложнее.

На всех облаках в “Category Bit” стоит значение “1”. Нам нужно, чтобы монстры и стрелы двигались через них без столкновений, поэтому мы установим атрибуты маски этих объектов соответствующим образом. Убедитесь в правильности установленных значений в physic type, shape border и TAG. Не беспокойтесь если число в tag отличается от показанного выше, только имя имеет значение.

Если у вас есть вопросы касательно этих свойств, ознакомьтесь с этим уроком - http://www.raywenderlich.com/4622/how-to-use-spritehelper-and-levelhelper-tutorial, на английском.

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

Вот несколько советов по созданию уровней:

1. Уровень должен начинаться легко, чтобы игрок успел понять что от него требуется.
2. Уровни не должны повторяться.
3. Игрок прыгает примерно на 200 пикс. максимум, поэтому убедитесь, что он может прыгнуть с одной платформы на другую.
4. Серые облака – отвлекающий маневр, они исчезнут после приземления
5. Синие облака трудны тем, что игрок не может пройти через них и они узкие.
6. Пик сложности должен наступать ближе к концу уровня.

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

Имейте ввиду, что если вы скачаете готовый уровень, он уже будет полностью завершен, т.е. все спрайты (монстры, игрок, тэги) будут установлены, так что некоторые моменты, которые мы будем разбирать ниже у вас будут уже сделаны. Если вы хотите пройти все по порядку и не тратить много времени на придумывание уровня, просто сделайте его маленьким (например 960 пикселей в высоту).


Теперь, когда все облака расставлены, мы можем представить игрока. Перетащите спрайт char_jump2 в нижнюю часть экрана над одним из облаков. Присвойте ему следующие свойства:


Игрок будет сталкиваться с облаками, монстрами, поэтому значение “Mask Bit” нужно установить на 5.

Теперь нам нужно сохранить уровень и сгенерировать код. Выберите File-> Save и назовите файл “level1”, остальные расширения будут созданы автоматически. Также выберите File->Generate Code->Corona, создастся файл LevelHelperLoader.lua. Этот файл надо перегенерировать всякий раз, когда мы добавляем новый TAG.

Положите эти файлы в ту же директорию где лежит main.lua.


Давайте перейдем к коду и вернемся на минуту к дизайну уровня. Удалите имеющийся код в main.lua и замените следующим:

Файл main.lua будет выполняться сверху вниз. Эти первые три строки будут выполнены первыми, когда мы запустим Corona Simulator. Давайте разберем каждую:

1. Импортирует код физического движка и присваивает движок объекту называемый physics.
2. Запускает физический движок с дефолтными значениями гравитации. Corona использует физический движок Box2D, так что если вы использовали его ранее многое вам будет знакомо.
3. Скрывает статус бар.

Теперь, когда файл запускается и у нас работает физика мы будем загружать уровень, который мы создали в LevelHelper’е.

Давайте попробуем. Добавьте новую функцию для загрузки уровня:

Первая строка загружает класс LevelHelperLoader (сгенерированный нами ранее или взятый вами из ресурсов для игры), который похож на #import в Objective-C.

Следующая строка создает функцию, которая в Lua делается с помощью ключевого слова “function”. Переменные и функции в Lua по умолчанию являются глобальными по своим масштабам. Если мы хотим уменьшить масштабы текущей функции нужно включать ключевое слово “local”.

Corona называет визуальные объекты (спрайты, нарисованные объекты, слои) “отображаемыми объектами”. Каждый из наших спрайтов, фоновые облака, игрок, платформы и т.д. являются отображаемыми объектами.

Функция в первой строке создает новую отображаемую группу, которая в функциях Corona похожа на CCLayer в Cocos2D. Мы собираемся добавить все содержимое нашего уровня к отображаемым группе.

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

В Corona нам необходимо только одно обращение/вызов (call) к LevelHelper, который создает все наши отоброжаемые объекты и создает соответствующие физическте тела. Физические тела в Corona автоматически соотносятся со своими спрайтами. Это делает создание физики в игре очень простой.

Вызов instantiateObjectsInGroup() имеет два параметр: наш физически движок объекта и отображаемая группа. Как только мы загрузим уровень в отображаемую группу, он будет виден на экране.

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

Наши отображаемые объекты сейчас на экране и часть отображаемой группы называется localGroup. Однако, localGroup в данный момент находится на “y” на позиции “0″. Система координат в Corona берет отсчет в верхнем левом углу экрана и увеличивается в направлении к низу, это означает, что мы увидим самый верх нашего уровня или самый конец.

Нам нужно двигать отображаемую группу вверх, что и делают следующие две строчки кода. Сначала мы берем размер мира (world size), который мы установили в LevelHelper’е, затем мы устанавливаем localgroup.y на величину противоположную размеру мира, двигая это все вверх с минусом в одну высоту экрана.

Наконец мы создаем и инициализируем игрока. Этот код еще не добавлен, поэтому вставьте его прямо над loadLevel:

Получаем спрайт с уникальным именем “char_jump2”, который мы добавили на уровень созданный в LevelHelper.

Одна вещь, которую нужно иметь ввиду, что физическое тело уже связанно с ним. Так, в дальнейшем, у нас будет доступ к тем вызовам (calls), которые получают и устанавливают физические свойства.

Теперь, когда у нас на месте две эти функции, давайте использовать их! Добавьте следующую строку сразу после описания функции:

И это все! Сохраните main.lua, и поместите в один каталог с LevelHelperLoader.lua, cloudSprites.png, cloudSprites-hd.png, cloudSprites.pshs и level1.plhs. Затем запустите main.lua в Corona Simulator.

Вы должны увидеть облака и нашего героя падающего вниз:


Поздравляю, вы написали свою первую программу на Corona с главным героем и платформами!

Давайте двигаться дальше и сделаем так, чтобы игрок прыгал по облакам!


Для добавления прыжков, измените функцию newPlayer, добавив обработчик столкновений, как показано ниже:

Вторая строка создает нашу callback-функцию столкновения. Второй параметр содержит информацию о событии столкновения (collision event).

Self - это объект игрока, а other эти тип события. Event.other - это объект с которым столкнулся self.

Затем нам нужно, чтобы прыжок делался только один раз. Столкновение может быть неоднократным, но нам нужен единичный прыжок с одним столкновением, так что мы будем проверять это на фазе “began”.

Затем мы проверяем должны ли мы прыгать. Мы берем линейную скорость (linear velocity) игрока и проверяем чтобы она была больше 0, потому что мы хотим прыгать только на обратном пути вниз, а не когда мы пролетаем через облака.

И наконец мы смотрим с чем мы столкнемся. Нам нужно отскакивать только от белых облаков, поэтому нам нужно проверять tag объекта с которым сталкиваемся.

Если все эти условия соблюдены, мы установим линейную скорость self до -350 или вверх до 350. Мы используем зедесь setLinearVelocity (вместо applyLinearImpulse), потому что неважно какой импульс мы получили падая вниз, нам нужно чтобы обратный прыжок был одинаковой высоты.

Наконец, мы собираемся установить только что созданную функцию, чтобы был обратный вызов столкновения (collision callback) для объекта игрока. Следующие две строчки делают это. С обратным вызовом столкновения (collision callback) мы установим свойство .collision и добавим слушателя события (event listener) к объекту.

Снова откройте проект в Corona Simulator. Теперь игрок должен отскакивать от белых облаков!


Я держу Corona Simulator открытым и использую сочетание клавиш Command-R чтобы перезагрузить проект после сохранения файла. Corona тоже обнаружит, что main.lua был обновлен и попросит вас о перезапуске.


Сейчас самое время поговорить подробнее об event listeners в Corona.

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

Event listeners в Corona это callback-методы. Есть event listener’ы, которые обрабатывают касания и акселерометр, изменение ориентации или инпут GPS, столкновения (collision), приостановка или выход из приложения и т.д.

Существует два вида слушателей события:
События, которые касаются всех объектов. Они известны как runtime events (события времени исполнения) и включают в себя такие события как изменение ориентации или инпут (input) от GPS. Другой пример – слушатель enterFrame, который является событием, которое вызывается каждый раз при отрисовки кадра.

События, которые адресованы отдельному объекту. Сюда включены события косания или столкновения (например, то, что мы использовали ранее).

В нашем случае мы создали функцию столкновения, функцию pCollision. Мы закреприли слушателя события за игроком, так что когда игрок сталкивается с другим объектом, этот объект будет вызываться. Функция имеет два параметра – объект self, в данном случае это игрок, и объект события. Объект события создан и содержит информацию о типе события столкновения.

Разные слушатели события имеют разные объекты события, которые предоставляют разную информацию. Например, есть тип события “postCollision”, который отвечает за силу столкновения. Обычное событие столкновения не имеет такой информации.

Для получения более развернутой информации о типах событий в Corona взгляните на этот документ (англ.).


Теперь, когда белые облака работают, можно заняться синими и серыми облаками. Синие облака фактически не требуют никакого дополнительного кода. Они совместно с белыми облаками используют тег CLOUD и являются статическими телами (подразумевается, что вы должны пройти вокруг них, а не через них, как в случае с белыми облаками).

Перейдите снова к функции pCollision и добавьте код показанный ниже:

Если тег BCLOUD, то нужно чтобы облако (серое) исчезло, поэтому мы вызываем loader:removeSpriteWithUniqueName и передаем имя объекта с которым столкнулись. Помните, что в нашем коде “object” это переменная где мы сохранили event.other.


Любовь витает в воздухе, а скоро полетят и стрелы.

Во-первых, давайте создадим анимацию стрельбы в LevelHelper.

Переключитесь назад в LevelHelper, выберите вкладку анимации справа и нажмите кнопку “New”, чтобы создать новую анимацию. Откроется окно “Animation Builder”. Добавьте спрайты под названием front_arm, arm_front_shoot1, arm_front_shoot2, и еще раз front_arm. Выделите указанные спрайты и нажмите кнопку “+”. Снимите галочку с “Loop Forever”. Остальные дефолтные настройки нам подходят.


Нажмите “Create Animation” для сохранения. Переименуйте анимацию в “shoot”.

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

После того как вы перетащили ее на уровень, выделите объект анимации и установите тип физики на “No Physic”, чтобы избежать странного поведения физики, когда мы прикрепим это к игроку.


Вернитесь к списку спрайтов. Перетащите спрайт “back_arm” за пределы уровня. Установите новую анимацию (которая называется “front_arm” потому что это первый спрайт в сете) и в “back_arm” установите “No Physic”.


Измените код в функции newPlayer как показано ниже:

Здесь мы просто получаем переменные для каждой части игрока. В LevelHelper’е эти вызовы метода дают нам переменные, которые мы можем использовать, чтобы обратиться к этим объектам. Объекты созданы автоматически и добавлены за уровень LevelHelper, но нам нужна пересенная, чтобы обратиться к ним.

Строка Loader:pauseAnimationOnSprite (frontarm) не дает работать анимации, когда мы запускаем игру. Мы будем вызывать анимацию каждый раз, когда необходимо стрелять, но по умолчанию, анимация запускаеся автоматически при старте игры.

Игрок будет внутри вида, а вот руки нет. Чтобы поправить это мы создадим функцию enterFrame. enterFrame срабатывает всякий раз, когда отрисовывается экран. Эта функция буде перемещать руки и лук с нашим игроком каждый кадр. Так же, это заставит игрока смотреть в направлении движения.

Добавьте следующий код в конец функции newPlayer () перед строкой “return p”:

Большая часть этого когда должна быть понятна.

Мы декларируем функции с префикстом p:. Когда мы создаем слушателя enterFrame для конкретного объекта, он должен называться “enterFrame” и он чувствителен к регистру.

Последний блок записывает линейную скорость игрока в переменных px и py. Затем, мы используем эту информацию для установки свойства XScale для всех трех.

Теперь мы должны добавть слушателя события enterFrame к объекту Runtime:

Если вы все сохраните и запустите, то увидите, что игрок вооружен и опасен!



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