Делаем игру в тетрадке — Construct 2. Часть I.
Здравствуйте. Сегодня мы будем клепать игру на Construct 2. Дабы вы могли понять, интересно ли вам это — я предлагаю посмотреть на игру: https://www.scirra.com/arcade/shooting-games/pikabu-copybook.
Ссылка на исходник .capx на rghost — 6SfwkZYs5
Если вы новичок или хотите узнать немного приколов в разработке на Construct 2 — прошу.
Ну, начнем.
Первым делом нам нужен Construct 2: скачаете вы ее и крякнете или купите за N-нную сумму — дело ваше, но я советую не тратить попусту деньги 🙂
Далее запускаем, создаем новый проект качеством 1080p, Фулл ашди так сказать. Это 16:9, а значит картинка будет удобно смотреться на 95% мониторов.
После этого нам нужен фон. К слову, он может быть разного типа, кубиками или цельный. В разных ситуациях применяется разный, и в угоду оптимизации и минимализму на этот раз мы используем первый тип. Создаем квадрат 64×64/128×128/и т.п. На нем рисуем произвольную бесшовную текстуру, в данном случае — тетрадную клетку.
Добавляем правой кнопкой мыши Tiled Background, нажимаем OK в открывшемся окне изображения.
Растягиваем фон до пунктирной линии — это границы видимости для игрока. Также в Layout Properties в поле Layout Size укажите размер больше видимых границ.
В предпросмотре это будет выглядеть примерно так. Далее я делаю скриншот экрана при включенном F11, чтобы перенести игровой фон и начать рисовать детали.
Я долго выбирал между ручкой и карандашом, и решил остановиться на последнем. Нарисовал порталы, пушку, детали UI и вражину. По моей задумке, из порталов будут лезть ужасные твари, а игрок должен их мочить пока не сдохнет. После этого я перенес каждую деталь в отдельное изображение, кадрировал и сохранил в png. Особо заморачиваться не стал, меню-шменю — просто сделал иконку звука и счет.
Заметка: пушку рисуйте ОБЯЗАТЕЛЬНО дулом вправо. Сам остов турели я сделал отдельно от пушки, чтобы она круто вертелась.
Также я нарисовал spritesheet — это изображение, ровно поделенное на N кусков, которое при экспорте образует анимацию. Это — взрыв вражины.
Теперь аккуратно переносим все файлы в проект. Вражин выделите вместе и перенесите — так они сразу влезут в одну картинку, но с кучей фреймов. Это нужно будет потом.
Можно еще и добавлять спрайты через саму прогу, но так название изображения будет сбиваться. Заметьте игру со слоями: фон должен быть на самом нижнем и заблокирован для мыши, UI на самом верхнем, а остальное по усмотрению.
Расставляем все так, как это было «на бумаге», не обращайте внимания на кучу вражин, это я сам протупил в начале.
Вот так происходит импорт фреймов для изображения. Мы не будем заливать два изображения звука, а сделаем одно и добавим к нему второй кадр.
Обратите внимание на image point. Это условный центр для изображения, и, так как иконки включения/выключения разного размера, мы дадим им центр в одной точке, где есть видимость на обоих изображениях. Это делается для того, чтобы когда иконка меняет кадр, она не скакала. Также мы щелкаем на анимацию Default и снижаем скорость до 0, чтобы регулировать вручную смену кадров.
Теперь нам необходимо добавить текст счета убийств. Можно было конечно сделать стилизованный Sprite font, но это те еще игры разума, поэтому обойдемся обычным Arial’ом серого цвета.
Здесь вы выставляем все, как на картинке, и соблюдаем размер.
Теперь пушка. Создаем image point и суем у дула — это место спавна пуль. Нулевой поинт мы естественно перетаскиваем по центру круга, это будет ось
Пока это выглядит вот так.
Теперь даем нашей пуле поведение(Behavior) Bullet.
Добавляем мышку для управлению турелью. Есть еще клавиатура и тач(для смартов/планшетов).
Создаем первое наше событие во вкладке Event Sheet. System — Every X seconds. Пушка — set angle toward Mouse.X Mouse.Y
Эвенты в Construct 2 работают по простейшей схеме программирования: Если, то, иначе(If, Then, Else). То есть мы создаем триггер, по которому срабатывает событие. На этом примере каждые 0.01 секунд пушка меняет свое направление касательно координат указателя мыши.
Таким образом можно заставить пушку следить за чем-то другим. Если вы уже тертый калач в Construct, то слышали об Every Tick и наверняка задаетесь вопросом — а почему бы не использовать его? Все дело в том, что этот триггер запускает событие каждый кадр. Но если начнет лагать, фпс снизится — следовательно снизится и частота, а за ней и плавность. А тут универсальный вариант, скажем так.
Теперь мы настроим стрельбу из пухи. Поведение нашей пули имеет свои настройки, приведите их так, как на скриншоте(за исключением скорости, это ваше решение).
Мы создали событие, что при щелканье левой кнопки мыши объект пушки создает пулю в заданной точке на слое 2 из дула(наш image point). Далее создавшейся пуле дается угол направления относительно угла пушки. Чтобы пушка не охеревала от скорости стрельбы, мы сделаем кулдаун, и он будет равен 0.5 секундам. В настройках пушки мы создаем Instance Variable, то есть локальную переменную, имеющую 0 и 1. При выстреле кулдаун вешается, через 0.5 секунды сбрасывается. В триггере стрелять нельзя, пока висит кулдаун.
Для тех, кто не любит кликодрочество, можно поменять триггер On Clicked на On down. Теперь стрельба будет происходить и при зажатой кнопке мыши.
Самой пуле мы присобачим поведение DestroyOutsideLayout. Это поведение будет уничтожать всякую пулю, вылетевшую за границы экрана. Оптимизация не дремлет. Никогда про нее не забывайте, особенно в этой программе.
Так как в пост нельзя добавлять больше 26 изображений, я опубликую вторую часть.
Part 1- Make a Jigsaw Puzzle game (construct 2)
.capx project file, screenshots, and gif demos Provided
I was recently commissioned to make a jigsaw puzzle game for a client and I faced a hard time finding the resources necessary to build it. The tutorials out there are either incomplete or too intricate for a game as simple as this, so I created this to show you the easiest way to get around it.
prerequisites
Construct 2 or Construct 3 game engine — Get the free version here.
Familiarity with the construct interface( you should be fine if you follow along).
Difficulty: EASY.
Enough said, let’s start building!
First of all, we need to prepare our project.
1.Create a new project with a layout and window size of 1080,720 pixels
2. Check snap to and show grid boxes, and set the grid size to 50 by 50
Your layout should look like this.
To the fun part!
Click on the layout to add four instances of the sprite font plugin as shown in the gif below.
Open the spritefont window and import an image that you want to use as the background for the puzzle, then set the image size to 200 by 200, do this for all spritefont instances. — we use 200 by 200 because our grid is 50 by 50 and we have 4 images. Hence, a square puzzle grid of 2 by 2.
Select one of the spritefonts then go to the properties window and set it’s parameters as shown in the image below, for the text parameter, label them as A, B, C, and D (in CAPS) respectively, and arrange them as shown in the gif below. don't forget to set the…
Как сделать игру в Construct 2? Создание проекта и первого уровня игры
В этой серии статей я на примере расскажу, как сделать игру с помощью конструктора игр Construct 2. Из этих строк вы узнаете, как создать простую кроссплатформенную игру по шагам, начиная с создания пустого проекта до публикации игры на своём сайте и на некоторых других онлайн сервисах.
Для тех, кто не знает, что такое конструктор игр Construct 2, сначала стоит прочитать статью «Конструктор игр — Construct 2». Сразу замечу, что в статье я буду описывать создание игры с помощью платной версии Construct 2, хотя и буду стараться обходиться бесплатными возможностями.
В качестве примера я выбрал физическую игру с простой задачей и простой реализацией. Игроку предстоит убрать с поля лишние черные блоки так, чтобы круглые синий и красный кружочки докатились друг до друга. Такую игру будет делать просто, т.к. поддержка двумерных физических объектов уже есть в Construct 2.
Создание проекта
Итак, начнём с создания проекта. Запустите Construct 2 и выберите пункт меню «File -> New». Сделаем пустой проект с расчётом на экраны с большим расширением. Выберите шаблон «New empty HD portrait 1080p project» (игра будет работать в портретной ориентации) и нажмите кнопку «Open».
В панели свойств задайте данные о проекте: название, версию, описание, автора (название компании или имя и фамилия разработчика), адрес электронной почты и адрес вебсайта. В поле ID нужно указать уникальный идентификатор программы. Чтобы этот идентификатор был уникальным, за основу берут доменное имя без www и записывают его наоборот, например, для сайта www.proghouse.ru, начало идентификатора будет ru.proghouse. Затем через точку приписывают название программы. У меня получилось так: ru.proghouse.red-n-blue. В дальнейшем этот идентификатор можно будет использовать для добавления игры в Google Play или App Store.
Сохранить созданный проект вы можете в один единственный файл (пункт меню «File -> Save As Single File…») или в папку (пункт меню «File -> Save As Project…»). В папку сохранять проект будет полезным, если вы работаете в команде или для хранения версий вы будете использовать систему управления версиями, например, SVN или Git.
Делаем первый уровень игры
После создания проекта у нас появилось 2 закладки «Layout 1» и «Event sheet 1». Первая закладка – это макет экрана или сцены, который будет видеть игрок, на второй закладке – страница событий. Я решил использовать для каждого уровня игры отдельный макет и одну для всех страницу событий. Ну, что ж, раз макет «Layout 1» уже создан будем использовать его для первого уровня.
Для начала переименуем макет «Layout 1». Чтобы открыть свойства макета, щелкните по нему на панели «Projects».
Я назову макет первого уровня «Level1» и сделаю размер макета таким же, как и размер окна (в моём случае – это 1080х1920).
Узнать размер окна и поменять его в случае необходимости можно в свойствах проекта. Для этого щёлкните по названию проекта в панели «Projects» и найдите свойство «Window Size».
Теперь нарисуем объекты. В игре я решил использовать прямоугольники и квадраты чёрного цвета, поэтому мне рисовать ничего сложного не придётся. На закладке «Level1» щёлкните правой клавишей мышки по макету и в появившемся меню выберите «Insert new object».
В диалоге «Insert new object» выберите объект «Sprite» (объект-картинка), введите имя для нового объекта «BlackBlock» и нажмите «Insert».
После этого указатель мыши превратится в крестик и вам нужно будет щёлкнуть в то место, где нужно создать новый объект. Щёлкните посередине макета. После щелчка сразу открывается четыре окна: окно «Edit image» для рисования нашего объекта, окно «Image points» для указания ключевых точек на объекте, например, центра объекта, и окна «Animations» и «Animation frames» для управления анимацией.
Для того, чтобы изобразить черные прямоугольники и квадраты, мне не нужна такая большая картинка, поэтому я сделаю её меньше. Для этого нажмите на кнопку со стрелкой, направленной в обе стороны и укажите новый размер в диалоговом окне.
Теперь выбираем инструмент заливку, выбираем чёрный цвет и заливаем прямоугольник, чёрным цветом.
Всё готово, можно закрыть окно «Edit image». После закрытия окна вы увидите объект на макете. Можно увеличить его до нужного размера и передвинуть в нужное место.
После добавления объекта на макет, он появился и в проекте на панели «Projects». Чтобы теперь добавить на макет ещё один экземпляр объекта «BlackBlock» перетащите его мышкой из панели «Projects» на макет «Level1». После перетаскивания на макете будет два чёрных блока одинакового размера. Сделаем нижний блок шире. Таким же образом можно сделать любое количество чёрных блоков любого размера.
Теперь добавим героев нашей игры – красный и синий кружки. Сначала сделаем красный кружок. Для этого вставим спрайт, так же как вставляли спрайт для черного блока, с помощью пункта меню «Insert new object». Назовём его «Red».
Чтобы нарисовать красный круг, воспользуемся инструментом кистью. Выберем красный цвет, размер кисти меньший, чем размер картинки (я сделал 199) и почти максимальную жесткость (я выбрал на 1 меньше — 199), чтобы края были четь размытыми. Теперь установите указатель мыши примерно посередине картинки и щёлкните один раз. Так мы получим ровный круг.
Теперь нужно подрезать картинку по размеру круга. Для этого щёлкните по пиктограмме подрезки. Как видите, картинка после этого стала размером 201×201.
Теперь нужно выровнять исходную точку вокруг, которой кружок будет крутиться в будущем. Для этого нажмите на пиктограмму «Set origin and image points», в появившемся диалоге щёлкните правой клавишей мыши по исходной точке и выберите пункт меню «Quick assign -> Middle». После этого исходная точка будет установлена строго в центре.
Точно так же сделаем синий круг. После этого уменьшим круги, задав им размеры 101×101 на панели «Properties» и разместим на чёрных панелях друг под другом (координата x должна быть равна 540).
Теперь нужно задать нашим объектам поведение «Physics» (физика), чтобы на них действовало притяжение, и они могли сталкиваться друг с другом. Для этого выберите объект Red и на панели свойств щёлкните по ссылке «Behaviors». В появившемся диалоге «Behaviors» щёлкните по плюсику и в очередном диалоге «Add behavior» выберите поведение «Physics» и нажмите на кнопку «Add».
Добавленное поведение теперь будет отображаться в диалоге «Behaviors».
Закройте этот диалог и посмотрите на панель «Properties». Теперь здесь появились свойства поведения «Physics». В свойствах поведения для кружка нужно выставить для свойства «Collision mask» (контур столкновения) значение «Circle» (окружность). Только выделите объект на панели «Projects», а не экземпляр объекта на макете «Level1», так вы выставите это свойство для всех будущих экземпляров на всех уровнях. Этим самым мы даём знать движку Box2D, который двигает объекты и обрабатывает столкновения, что красный и синий объекты – круглые. Тоже самое проделайте с объектом Blue.
Теперь выполните макет, для этого нажмите на кнопку «Run layout», сверху в заголовке окна или нажмите на клавишу F5.
При этом откроется браузер, который используется на вашем компьютере по умолчанию (к слову, выбрать другой браузер для отладки можно в свойствах проекта) и в нём отобразится наш макет, на котором красный и синий кружки начнут падать вниз.
Теперь вы видите, что поведение работает, но наши кружочки не сталкиваются с чёрными прямоугольниками, а пролетают как бы над ними. Чтобы сделать столкновения, нужно к чёрным прямоугольникам тоже добавить поведение «Physics», как мы это делали для объектов Red и Blue. Только в свойствах поведения выставите свойству «Immovable» (неподвижность) значение «Yes», чтобы объекты были неподвижны и не падали вниз. А свойству «Collision mask» выставьте значение «Bounding box» (обрамляющая рамка), — это означает, что границы объекта совпадают с границами картинки, т.е. это прямоугольники. При изменении свойств выберите объект на панели «Projects», а не экземпляр объекта на макете «Level1»! Так вы поменяете эти свойства для всех существующих и для всех будущих экземпляров объекта.
Запустите макет теперь и вы увидите, что красный и синий кружочки лежат на чёрных прямоугольниках. Теперь нужно сделать, чтобы прикасаясь к чёрным прямоугольникам их можно было убрать. Чтобы обрабатывать прикосновения к сенсорному экрану или события с мышкой, добавьте в проект объект «Touch». Для этого, так же как мы добавляли предыдущие объекты, добавляем объект «Touch» на наш макет.
После нажатия на кнопку «Insert» на несколько секунд появится предупреждение, что объект «Touch» доступен для всего проекта. Т.е. добавляя этот объект к макету, добавление происходит для всего проекта. Это нормально.
Теперь, чтобы обработать прикосновения к сенсорному экрану и щёлканья мышкой, откройте закладку «Event sheet 1», нажмите на ссылку «Add event» (добавить событие) и в появившемся диалоге «Add event» выберите объект «Touch» и нажмите на кнопку «Next».
На следующем шаге выберите событие, которое вы хотите обработать. В нашем случае – это событие «On tap object» (если тапнули по объекту). Нажмите на кнопку «Next».
На следующем шаге выберите объект, по которому должны тапнуть. В нашем случае – это объект «BlackBlock». Нажмите на кнопку «Done».
После закрытия диалога мы видим, что на странице событий появилось наше первое событие, которое будет возникать, если игрок тапнул по сенсорному экрану или щёлкнул мышкой по объекту «BlackBlock».
Теперь по событию нам что-то нужно сделать. В нашем случае мы должны удалить экземпляр объекта «BlackBlock», по которому тапнули или щёлкнули. Чтобы добавить действие по событию, щёлкните по ссылке «Add action» (добавить действие). В диалоге «Add action» выберите объект, с которым нужно совершить действие. В нашем случае – это объект «BlackBlock». Нажмите «Next».
На следующем этапе нужно выбрать действие с выбранным объектом. Нас интересует удаление объекта, поэтому выберем «Destroy» и нажмём копку «Done».
Теперь на странице событий появилось наше действие.
Запустим макет теперь и посмотрим, работает ли событие. После запуска мы видим два чёрных прямоугольника и на них лежат кружочки. Щёлкнем по верхнему прямоугольнику, он исчез, и красный кружок начал падать вниз. Всё прекрасно.
Теперь нужно сделать надпись, которая будет появляться, когда уровень пройден. Для отображения текста с результатом прохождения уровня добавим на макет объект «Sprite font» с именем «ResultText».
После добавления объекта на макет поднимется уже известный нам диалог «Edit image», на котором вы увидите картинку с изображением букв.
Дело в том, что в объекте «Sprite font» для отображения текста используются нарисованные на этой картинке буквы. Конечно, можно было использовать объект «Text» и шрифты TrueType, но эти шрифты работают некорректно в некоторых случаях, например, при экспорте проекта под платформу Android с помощью сервиса CocoonJS. Поэтому, чтобы игра выглядела одинаково на всех платформах, лучше сразу использовать объект «Sprite font» для вывода текста. Кроме того вы сможете нарисовать шрифты на свой вкус.
В примере я не буду использовать предложенный по умолчанию пиксельный шрифт, а возьму специально заготовленный шрифт с русскими и латинскими буквами (файл шрифта см. в конце статьи). Чтобы подгрузить картинку, нажмите на кнопку «Load an image from a file». После загрузки картинки это окно можно закрыть.
Теперь, в свойствах объекта «Sprite font» нужно выставить размеры одной буквы (свойства «Character width» и «Character height») и набор символов (свойство «Character set»). В наборе символов перечисляются все символы, которые есть на картинке. На картинке, которую я использовал символы следующие:
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,;. -_
Писать будем посередине макета, поэтому выравнивание текста сделайте по центру (свойства «Horizontal alignment» и «Vertical alignment»).
Подравнять сам объект по центру макета вы можете, щёлкнув по нему правой клавишей мышки, и выбрав в меню пункты «Align -> Layout -> Center horizontal» и «Align -> Layout -> Center vertical».
Чтобы надпись в начале уровня была спрятана, установите в свойство «Initial visibility» значение «Invisible».
Теперь можно сделать анализ результата, с которым пройден уровень и выдача результата. Для начала нам нужно отследить столкновение красного кружочка с синим, чтобы закончить прохождение уровня. Для этого будем отслеживать событие о столкновении от красного кружочка. На странице событий щёлкните по ссылке «Add event», выберите красный кружок, нажмите «Next», выберите событие «On collision with another object» (при столкновении с другим объектом) и нажмите «Next».
На следующем этапе выберите объект, с которым ожидается столкновение. В нашем случае – это объект «Blue».
После того как событие добавлено, нужно добавить обработчик этого события. Нажмём на ссылку «Add action» справа от события и выберем объект «ResultText». Нажмите «Next».
На этом этапе выберите действие «Set visible» и нажмите «Next».
В следующем диалоге выберите значение «Visible».
Кроме того, что нужно показать текст ещё нужно написать поздравления. Поэтому для события добавляем ещё одно действие. Нажмите «Add action», выберите объект «ResultText» и найдите действие «Set text». Нажмите «Next».
В следующем диалоге введите текст поздравления. Здесь ключевое слово newline обозначает переход на новую строку, а символы & сцепление строк в одну.
Теперь страница событий будет содержать два события.
Теперь нужно узнать о том, что игрок не прошёл уровень. Это случается, если кружки вылетели за границу макета. Чтобы это узнать добавляем новое событие для объектов Red «Is outside layout».
И делаем такие же обработчики, как и для предыдущего события, только текст будет сообщать о поражении. Для синего кружка события будут такие же, поэтому щёлкните правой клавишей мышки по событию «Is outside layout» с красным кружком и выберите пункт меню «Add another conditions» и аналогично добавьте событие для синего кружка.
Теперь чтобы действия выполнялись по любому событию, щёлкните по общему пространству чуть левее событий правой кнопкой мыши и выберите пункт меню «Make ‘Or’ block» (сделать блок ‘или’).
Результат будет выглядеть так.
Теперь можно запустить игру и попробовать разные варианты: убрать верхний чёрный блок – будет победа или убрать нижний блок – будет проигрыш.
Добавим ещё один небольшой штрих. После того как прохождение уровня завершено, подождём несколько секунд и начнём уровень сначала. Для этого добавьте в каждое событие о завершении действие «Wait» и действие «Go to layout», см. картинки.
И установим количество секунд – 3.
Должно получиться вот так.
Теперь можно проверить, как работает первый уровень игры в действии. Вот результат:
А вот и файл проекта и шрифт:
Проект игры Red and Blue и файл со шрифтом для объекта Sprite Font для статьи «Как сделать игру в Construct 2? Создание проекта и первого уровня игры».
Создание мобильной игры в Construct 2. Путь неопытного
В данной статье я опишу процесс создания мобильной игры с нуля, от зарождения в голове этой мысли до публикации приложения и работы с рекламой. Статья подойдет для людей, у которых отсутствует даже намек на опыт и знания в области разработки мобильных игр (а также программирования), так как именно таким человеком являлся автор в момент начала работы над этим проектом. 
Основные и важные моменты:
— Приложение разработано с помощью Construct 2 – игровом движке на HTML5, позволяющем портировать приложение на все популярные мобильные (и не только) платформы;
— Навыки программирования для реализации подобным функционалом не требуются вовсе;
— Повторюсь: статья описывает путь человека неопытного, поэтому если вы хотите начать – эта статья может показаться полезной и вам;
— Описаны следующие этапы создания приложения: разработка, портирование на мобильную платформу Android, интеграция с рекламными сетями, публикация приложения, продвижение (некоторое бесплатное подобие этой активности).
— Все сроки по данным активностям указаны с учетом того, что в данный момент я не занят на основной работе, поэтому мог посвящать этому целые дни.
Начало, Идея, основная концепция
Начало было заложено после прочтения статьи о самом инструменте Construct 2, после чего было принято решение посмотреть на возможности этой программы. Несколько недель ушло на изучение функционала Construct 2. Бесплатной версии Free Edition для этого вполне достаточно. В ней существуют ограничения на количество эффектов, слоев и пр., но для изучения программы это не сильно мешает. Вот портировать на мобильные платформы с бесплатной версией уже нельзя.
Пробы с различным поведением спрайтов и физическим движком помогли неплохо освоиться в программе, а заодно послужили источником вдохновения для нескольких идей. На одной из них я решил остановиться – было решено делать игру, главный герой которой мог бы передвигаться по городу с помощью веревки – по принципу spiderman.
При беглом просмотре в GooglePlay аналогов найдено не было, что и послужило решающим толчком к началу разработки. Впоследствии оказалось, что с изучением уже существующих приложений поторопился. При поиске я ориентировался только на словосочетание spiderman и его вариации, что было ошибкой. Позже по другим ключевым словам нашел с десяток подобных приложений и несколько из них были очень популярные.
При более детальном построении логики игры я старался не отходить от основного принципа: игра должна быть простой и быстрой в реализации — чтобы не тратить много времени на первый ком и набрать весь минимально необходимый опыт для последующих проектов. С учетом того, что по характеру игра напоминает runner, хотелось обойтись без головной боли в виде построения десятков разных уровней и сделать один бесконечный.
Создание игры
Для дальнейшей работы потребовалась расширенная лицензия Personal License. Иначе недоступен экспорт на мобильные платформы, а также запрещено использование в коммерческих целях.
Сделал набросок в один экран, продолжил прорабатывать физику главного Героя. В результате получилось следующее: при движении Героя вправо случайным образом генерируются разные по фасаду и размеру здания. При нажатии на здании создается условная веревка, соединяющая Героя и упомянутую точку касания. Остальное делает встроенный в Construct 2 физический движок. При нажатии на свободное от строений пространство условная веревка исчезает, Герой вылетает по касательной. Конец игры при падении на землю.
Впоследствии убогая палка, на которой качался Герой, была заменена на менее убогое подобие веревки (состоящей из последовательно соединенных мелких палок).
После реализации задуманной физики движения (т.е. осознания того, что задуманную игру действительно можно сделать посредством Construct 2) я приступил к внедрению некоторых деталей – необходимого минимума для любой мобильной игры:
— Нормальная графика (в качестве редактора использовал бесплатный Inkscape – очень приятный векторный редактор, работал с ним впервые и с удовольствием);
— Экран меню;
— Кнопки с рестартом уровня, паузой, выходом из приложения и всего такого;
— Экран с информацией об игре;
— Счет и локальное хранение лучшего результата на телефоне;
— Оптимизация «кода»;
— Доработка геймплея, создание препятствий (фонари, рвущие веревку и сбивающие героя голуби);
— Усложнение игры с каждым новым уровнем (голуби становятся быстрей и встречаются чаще, фонарей также становится больше, здания – реже);
— Сделал корректным отображение элементов HUD на устройствах с различным разрешением.
Одной из значительных трудностей была реализация одного бесконечного уровня на всю игру. Проблема заключалась в том, что layout сделать бесконечным нельзя. Игры типа infinite runners делаются по принципу движения космического корабля из небезызвестного сериала Futurama: не герой двигается относительно всего остального, а все окружающее пространство движется относительно героя, а герой стоит на месте. В таких играх физика как таковая отсутствует, поэтому в моем случае это было фактически нереализуемо. В итоге я пошел по пути наименьшего сопротивления – длина layout’а считается одним уровнем, при его достижении с героя снимаются все данные о его движении, спрайт с Героем удаляется, в начале layout создается новый с теми же характеристиками движения, и это считается следующим уровнем.
Вставил музыку, брал с источника freesound.org. На нем много всего бесплатно, но надо обращать на тип лицензии (всего их три). Для некоторых из них требуется спросить разрешения автора перед использованием, или обязательно указать ссылку на него в своем продукте. Я использовал звуки с лицензией, при которой не нужно делать ничего, только скачать и использовать. Впоследствии большую часть звуковых эффектов пришлось убрать – они сильно притормаживают игру, и эту проблему с наскока решить не получилось, пришлось отложить до лучших времен.
Большая часть всего перечисленного была сделана за полторы недели (напомню, я делал это не по вечерам, а по 10-12 часов каждый день с перерывами на чай/кофе/потанцуем). Остальное допиливалось на последующих этапах.
Ниже представлены иллюстрации эволюции игры:
Экспорт
Игру, созданную на Construct 2, можно портировать на Android, iOS, Windows Phone. Это помимо не интересующих меня в данный момент Facebook Games, Chrome Web Store и пр.
Выбор мобильной платформы для портирования, разумеется, был сделан в соответствии с используемым мной в быту телефоне, поэтому это оказался Android.
Для экспорта есть несколько альтернатив, мой выбор пал на Intel XDK. Удобный и понятный XDK, быстрое тестирование на телефоне без необходимости переустанавливать приложение после каждого изменения.
Однако в моем случае результат оказался весьма плачевным – игра жутко тормозила, играть в нее было очень грустно, прорисовка графики также оставляла желать лучшего. Протестировал то же приложение на iphone брата – результат отличался колоссально.
Очень много времени я потратил на изучение форумов, пытаясь решить проблему с производительностью, по максимуму оптимизировал и упростил «код», на эту тему написано немало статей – открыл для себя множество интересных мелочей. Например, что отображение постоянно изменяющегося текущего результата (score) посредством текста очень сильно грузит приложение, и вместо текста нужно обязательно использовать Fonts.
В результате оказалось, что Intel XDK ведет себя так только в случае использования физического движка Box2D web. Для решения этой проблемы они создали отдельный движок Box2D asm.js, однако мое приложение с этим движком упорно отказывалось запускаться. В результате в качестве инструмента экспорта я переключился на CocoonJS. Construct 2, насколько я понял, уже не особо с ними сотрудничает (в самом конструкторе в перечне инструментов экспорта CocoonJS скрыт как deprecated exporter). Однако в случае использования физики это единственный работающий (хорошо работающий) вариант. Да и со стороны CocoonJS плагины для Construct 2 все еще создаются и обновляются.
Отдельно отмечу, что для подключения рекламы при экспорте через CocoonJS Вам потребуется премиум аккаунт. Он бесплатный, однако, для его получения потребуется написать им заявку с указанием описания Ваших текущих проектов, планов на будущее, а также обоснованием того, зачем Вам потребовался премиум аккаунт. Поэтому советую заранее озаботиться этим вопросом – на получение аккаунта уходит некоторое время. В моем случае это заняло около суток.
На поиски и изучение способов экспорта, оптимизацию “кода”, внесение доработок в приложение после тестирования на телефоне, а также адаптацию под различные возможные разрешения ушло около двух недель.
Надеюсь, моя статья сэкономит некоторым из вас это время.
Монетизация
В качестве способа монетизации я решил использовать наименее простой, на мой взгляд, способ – рекламу.
Я решил, что рекламу обязательно подключить сразу. Было бы подло выкладывать впоследствии обновление бесплатного приложения, после установки которого у пользователя появляется отсутствующая ранее реклама.
Единственный способ подключения рекламы к созданной в Construct 2 игре под Android и экспортируемой через CocoonJS – это связка рекламных сетей Mopub + Admob и остальные. Реклама MoPub подключается к приложению при экспорте в CocoonJS. Однако эта рекламная сеть, помимо своих объявлений (которых у нее мало, и оплата за них небольшая), может служить посредником между другими сетями, выставляя при этом для каждой сети минимальную стоимость за показ. Таким образом, можно в одном приложении показывать рекламу нескольких рекламных сетей, и для показа будет выбрана одна из наиболее дорогих. Admob, безусловно, является фаворитом среди рекламных сетей для Android, поэтому в качестве дополнительной я остановился на ней.
Сразу отмечу, что для тестирования рекламы публикация в App Store не нужна, можно встраивать и тестировать рекламу на любом удобном этапе разработки приложения.
Мой выбор формата показа рекламы пал на Full screen ads в момент нажатия кнопки Back или Restart, но не чаще чем раз в 2 минуты. Использование баннеров на экранах меню бессмысленно, ибо никто там надолго не задерживается; баннер на экране с уровнем в случае с динамичной аркадной игрой еще более бесполезен.
При подключении рекламы по данной схеме следует отметить несколько особенностей.
1. Интегрировав рекламу в приложение – не стоит волноваться первые минуты/часы при тестировании. Первое время реклама не будет показываться вовсе, потом будет показываться очень редко – нужно некоторое время, чтобы объявления начали подгружаться в полную силу.
2. Admob имеет один из самых высоких показателей Fill Rate, однако в случае с реализацией по данной схеме с использованием MoPub в качестве посредника FillRate сети Admob падает до 30-80%. Эта проблема существует, о ней известно, и разработчики обещали ее исправить. Однако когда это произойдет – неизвестно.
По данной причине я решил не ждать и выйти из сложившейся ситуации достаточно простым способом. Очевидно, никто не будет показывать рекламу в приложении каждые 10 секунд. Независимо от реализованного вами способа выбора момента показа рекламы (будь то нажатие определенной кнопки, или показ каждые n минут), между двумя показами проходить сколько-нибудь существенное время. Допустим, 2 минуты. В Construct 2 при подключении рекламы делаем следующую вещь: заводим переменную AdsLoadTrigger, обозначающую, была ли подгружена реклама, и, если нет – каждые 10-20 секунд пробуем загрузить снова, вплоть до удачной попытки. Таким образом, при фактическом Fill Rate в 20% можно без труда достичь близкой к 100% вероятности показа рекламы в нужный вам момент.
На подключение рекламы я потратил уйму времени. Анализ множества различных рекламных сетей, регистрация и освоение в каждой из них, интеграция рекламы в приложение, ее тестирование и настройка оптимальных мест и частоты показа занимают очень много времени. Однако если вы сразу пойдете по указанному выше пути – справитесь за несколько дней.
Публикация
Напомню, что портирование производил на устройство под Android: разумеется, самой популярной площадкой для распространения мобильных приложений является Google Play, однако существует немало альтернатив, про которые не стоит забывать. Таким образом, помимо очевидного выбора в пользу Google Play, я использовал также одни из наиболее популярных альтернативных магазинов: SlideMe и GetJar.
Учитывая, что для продвижения в наиболее перспективном Google Play очень важен мощный уверенный старт (для попадания в топы разделов) – альтернативные площадки можно использовать для обкатки приложения на пользователях, устранения основных замечаний и сбора данных для аналитики (конечно, если такая возможность была учтена в приложении).
Несколько слов о локализации: как минимум описание игры следует перевести на 4 языка – японский, английский, корейский и китайский. Таким образом, Вы охватите больше половины всех потенциальных пользователей Вашего продукта.
Еще один очень важный момент — это подпись вашего продукта. Не уверен насчет других площадок, но для Google Play наличие подписи обязательно. При выполнении этой операции рекомендую использовать Java Development Kit версии 1.6. Я, по незнанию, использовал следующую версию 1.7 — в результате при установке приложения из Google Play выдавалось сообщение о неверной подписи пакета, и фактически с первых минут публикации игры никто не мог ее установить. Что неприятно. Единственное найденное мной решение: залить новый apk, подписанный уже версией JDK 1.6, так что лучше сразу пользоваться этой версией.
Продвижение
Как водится, я решил не тратить деньги на продвижение вовсе. Учитывая, что это первый опыт публикации мобильного приложения – я бы не стал возлагать особые надежды на финансовый успех этого предприятия, и потому деньги тратить посчитал бессмысленной затеей. Главное – набраться опыта.
Таким образом, в качестве инструментов продвижения были выбраны бесплатные обзоры. Был подобран перечень тематических сайтов и блогов, и разосланы предложения с обзором моей игры. К сожалению, на данный момент я не смогу сказать, каков результат этих действий, и сколько процентов обращений увенчались успехом – обзоры рассылались сразу с публикацией приложения, произошедшей на днях.
В качестве примера приведу полезную, на мой взгляд, ссылку на перечень платных и бесплатных сайтов-ревьюверов приложений для Android, iOS и Windows Mobile.
К описанию игры во всех магазинах приложений была указана ссылка на необоснованно-патетический промо ролик игры с изображением основных моментов геймплея. При создании промо ролика использовался видеоредактор «Camtasia Studio 8». Его возможностей более чем достаточно для создания подобного материала, при этом в программе можно очень быстро и самостоятельно разобраться. Для меня приятной особенностью является то, что в ней возможна запись экрана компьютера (я делал запись геймплея, запуская созданную игру в браузере) с возможностью удаления курсора. К сожалению, программа не бесплатна, однако 30 суток на пробу этого продукта вы имеете.