Как создать мобильную игру по дешевке

Как создать мобильную игру по дешевке

Разработка игр с использованием Phaser, Cordova и Intel XDK

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

В этом году одной из своих целей я поставил создание мобильной видеоигры. Я занимаюсь разработкой программного обеспечения более десяти лет, создавая бизнес-приложения и платформы. Все это время я записывал идеи для игр. Недавно я выпустил Clear the Zombies! на iOS и Android.

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

1. Кроссплатформенность (чтобы я эффективно тратил свое время и мне не приходилось изучать несколько языков и создавать игру более одного раза).
2. Бесплатное использование
3. Легко тестировать и строить
4. Отличная документация и поддержка сообщества

Инструменты, которые я выбрал, и почему

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

Game Framework: Phaser
Phaser - отличная среда для 2D-игр на основе JavaScript / Canvas. Его можно использовать бесплатно, с отличной документацией и множеством примеров, разработанных сообществом.

Межплатформенный мобильный фреймворк: Cordova
Cordova - золотой стандарт кроссплатформенных мобильных приложений. Я ранее использовал его с Ionic Framework, когда создавал бизнес-приложение. Это бесплатно и управляется Apache Software Foundation.

Эмуляция, тестирование, сборка, конфигурация: Intel XDK
Мне жаль, что я не открыл для себя этот инструмент, когда я работал с Ionic. У него есть отличный эмулятор, который отображает множество устройств (iPhone, iPad, Android-устройства и т. Д.) И имитирует основные возможности телефона, такие как геолокация и состояние сети. У него также есть приложение для предварительного просмотра, которое вы можете установить на свой телефон. Приложение для предварительного просмотра позволяет загружать игру на устройство без необходимости каждый раз создавать и устанавливать игру. Лучше всего то, что Intel XDK заботится об управлении конфигурациями сборки, сертификатами и процессами сборки.

Контроль версий: Bitbucket и SourceTree
Bitbucket может бесплатно использовать частные размещенные репозитории. SourceTree - лучший графический интерфейс git, который я когда-либо использовал. Чтобы привыкнуть к этому инструменту, нужно время, потому что в нем много наворотов, но оно того стоит. Кроме того, мой друг Джон Грегорович подсадил меня на Gitflow Workflow, а в SourceTree встроено управление Gitflow.

Создание объектов изображения: Inkscape и Piskel
Создание моих собственных спрайтов и изображений было, безусловно, самой устрашающей частью этого проекта. Я подумывал об использовании бесплатных спрайтов и изображений, но очень быстро понял, что будут большие несоответствия в стиле, размерах и масштабировании, которые сделают мою игру похожей на монстра Франкенштейна. Я смирился с тем, что буду делать все свои собственные изображения и спрайты, и обнаружил, что мне это не только очень понравилось, но и оказалось не так сложно, как я думал.
Inkscape и Piskel упрощают этот процесс. . Анил Бенивал познакомил меня с Inkscape, бесплатным инструментом svg. В основном я использовал его для масштабирования и эффектов. Он имеет отличные функции, которые упрощают преобразование png в svg (векторную графику) и упрощают добавление масок и фильтров. Piskel - простой, но эффективный инструмент для создания таблиц спрайтов. Я использовал этот инструмент для создания всего, от фона до спрайтов и кнопок.

Аналитика: Google Analytics:
Вы неизбежно захотите узнать, как пользователи используют вашу игру. Google Analytics - это простой и бесплатный способ начать отслеживать, сколько у вас пользователей, какие экраны они используют и каких уровней достигли.

Какую игру я должен сделать?

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

1. Простая основная игровая механика, которую можно разработать за несколько дней и продолжать совершенствовать, чтобы сделать игру более увлекательной и сложной.
2. Простое управление.
3. Экран игры статичен и ограничен заданным пространством. Это позволило мне избежать сложностей с камерой и упростило логику масштабирования для разных устройств.

С чего мне начать?

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

1. Начните с загрузки и установки Intel XDK. Здесь вы создадите новый проект и выберите шаблон XDK Phaser в разделе шаблоны- ›игры.
2. Чтобы начать понимать Phaser и Cordova, прочтите этот учебник Пабло Фариаса Наварро. Отлично подходит для новичков.
3. Создайте свой основной игровой движок, используя имитирующие изображения или бесплатные спрайты. Это должен быть минимальный объем кода, который можно написать для получения рабочей версии вашей игры.
4. Повторять, повторять, повторять. Составьте для себя список задач и снимайте предметы по одному, чтобы улучшить свою игру.
5. Как только у вас появится что-то интересное, начните думать о замене фиктивных изображений настоящими.
6. Когда у вас будет рабочая версия с хорошими изображениями, зарегистрируйтесь, чтобы стать разработчиком apple и android. С каждым из них связана определенная стоимость. К сожалению, это единственная деталь, за которую вам придется заплатить реальные деньги.
7. Создайте свой значок и заставку.
8. Получите сертификаты Apple, следуя документации от Intel XDK.
9. Создавайте маркетинговые материалы для игрового магазина и магазина приложений. Это включает в себя создание ваших собственных значков и баннеров.
10. Создайте файлы apk и ipa и отправьте их в Play Store и iTunes Connect соответственно.
11. Рынок, рынок, рынок.

Дьявол кроется в деталях

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

Использование Intel XDK

Как я сказал ранее, Intel XDK стал моим любимым новым инструментом. Вы можете использовать его для написания кода, эмуляции устройств, тестирования и сборки. Лично я продолжал использовать Sublime для редактирования кода, потому что привык к этому.

Эмулятор XDK великолепен, потому что в отличие от разработки с использованием браузера Chrome, он позволяет вам тестировать плагины Cordova и код вокруг них без необходимости установки на устройство.

Вкладка Тест в сочетании с приложением Intel’s App Preview отлично работает на ранних этапах игры. Это поможет вам увидеть, как ваша игра выглядит в реальном приложении, без необходимости сборки и установки. Однако он работает только с подмножеством плагинов Cordova. Когда вы начнете добавлять больше, вам нужно будет делать полные сборки.

Возможности сборки - лучшее, что я когда-либо видел бесплатно. Это делает процесс очень простым и предоставляет полностью подписанное приложение, готовое для каждого магазина. Для iOS вам нужно будет загрузить сертификат из Apple Developer Console. Вам нужно сделать это только один раз. Пошаговое руководство можно найти здесь.

При создании для Android всегда используйте Crosswalk! Это браузер, который Intel XDK может встроить в ваш apk для единообразия. Некоторое время пробовал использовать прямую сборку Android. Однако моя игра была медленной и непоследовательной.

Начало разработки с Phaser

Phaser - один из лучших фреймворков, которые я когда-либо использовал. За последние несколько лет я много занимался веб-разработкой, и мне приходилось полагаться на множество различных сторонних пакетов. Обычно этот процесс сопровождается как минимум одной или двумя головными болями. Однако Phaser очень прост, он делает именно то, что вам нужно, и работает точно так, как указано в документации.

Масштабирование
Одна большая проблема - масштабирование. У мобильных устройств много экранов разных размеров и соотношений плотности пикселей. Кодировать и проверять это может быть кошмаром. Вот два ресурса, которые помогли мне понять, как это обойти:

1. Первый ресурс масштабирования
2. Второй ресурс масштабирования

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

var w = window.innerWidth * window.devicePixelRatio,
    h = window.innerHeight * window.devicePixelRatio;
if(h > 800) {
    var div = h / 800; //800 is target
    w = w / div;
    h = 800;
}
var game = new Phaser.Game(w, h, Phaser.AUTO, ‘game’);

Даже с этим кодом у вас все равно будут разные размеры экрана. Это может привести к тому, что вы разместите спрайт слишком близко к краю экрана, что подвергнет его опасности обрезания на некоторых устройствах. Чтобы противодействовать этому, я создал стандартную «безопасную зону» на экране, которая, как я мог гарантировать, не будет отключена. Затем я бы использовал эту зону как ссылку при размещении всего контента. Код этой безопасной зоны выглядит так:

this.scaleFactor = window.devicePixelRatio / 3;
//determine the safe zone
this.safeZone = {
    width: this.game.width,
    height: this.game.height,
    x: 0,
    y: 0,
};
var heightWidthRatio = 1.9;
var currentHeightWidthRatio = this.game.height / this.game.width;
if (currentHeightWidthRatio > heightWidthRatio) {
    this.safeZone.height = this.game.width * heightWidthRatio;
    this.safeZone.y = (this.game.height — this.safeZone.height) / 2;
}
else {
    this.safeZone.width = this.game.height / heightWidthRatio;
    this.safeZone.x = (this.game.width — this.safeZone.width) / 2;
}

При размещении элементов (спрайтов, кнопок, текста и т. Д.) На экране я всегда делаю 3 вещи. Я помещаю их в x: 0, y: 0, чтобы получить их естественный размер. Затем я масштабирую их до процентного размера безопасной зоны, используя ширину или высоту (используя% sizes, вы гарантируете, что экран будет выглядеть одинаково на всех устройствах). Наконец, я перемещаю предмет туда, где он должен быть.

Пример добавления спрайта:

//Step 1 - place
var sprite = this.game.add.sprite(0, 0, "ZombieSprite");
//Step 2 - scale
sprite.height = this.safeZone.height * .10 //10% of safeZone
sprite.scale.x = sprite.scale.y; //scale width same as height
//Step 3 - relocate
//In this example I will place the sprite in the center of the safeZone
sprite.x = (this.safeZone.width - sprite.width) / 2;
sprite.y = (this.safeZone.height- sprite.height) / 2;

На изображениях моей игры ниже вы можете увидеть эффект безопасной зоны в левой и правой частях экрана. Желоб на iphone меньше, чем на Nexus 6P. Я всегда использую iPhone 4, потому что у него самый маленький экран. Если он работает на iPhone 4, он будет работать где угодно.

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

Создание спрайтов

Я никогда не создавал спрайтов до создания этой игры. Первое, что я сделал, - это поискал статьи о передовых методах работы. Я нашел эту статью Дерека Ю достаточно простой и эффективной. Не волнуйтесь, если ваши спрайты поначалу выглядят ужасно. Применение техники затенения Дерека во многом поможет им выглядеть великолепно.

Я использовал Пискель для создания всех своих спрайтов. Это здорово, потому что вы можете создавать спрайты в браузере, не загружая никакого программного обеспечения. Это позволяет легко вносить изменения по пикселям. Он также позволяет вам создавать каждый кадр вашего листа спрайтов, чтобы вы могли анимировать своих персонажей и кнопки. В целях стандартизации я сделал всех своих персонажей на холсте размером 64 x 64.

Inkscape пригодился, когда мне нужно было векторизовать png, масштабировать его, добавлять эффекты или комбинировать изображения. Это было бесценно, когда я создавал свои маркетинговые материалы. Самой важной функцией, которую я научился использовать, была функция Path- ›Trace Bitmap, которая позволила мне преобразовать png в svg.

Заставки

Экраны-заставки отлично подходят для демонстрации вашего бренда во время загрузки игры. Однако они не так просты, потому что, как я обсуждал ранее, устройства имеют много разных размеров экрана.

Для iOS количество размеров экрана ограничено. Вы можете использовать inkscape для обрезки и изменения размера экрана-заставки и загрузки его в XDK на вкладке проектов.

Android немного сложнее, потому что устройств очень много. Чтобы обойти это, Google рекомендует создать изображение с 9 патчами. Изображения с 9 патчами - это изображения с зонами растяжения, которые сообщают устройству, что можно растягивать, а что нет. Я попытался найти сайт, который бы генерировал их автоматически, но мне это надоело, и я использовал рекомендованный Google инструмент, чтобы вручную настроить их. Документация к этому инструменту находится здесь.

Использование Google Analytics

Как только вы опубликуете свою игру, вы захотите узнать, сколько людей ее используют и как они ее используют. Магазины приложений и игр предоставляют некоторую высокоуровневую информацию, но часто это происходит с большой задержкой. Google Analytics - отличный бесплатный инструмент, который поможет вам получить подробную информацию об использовании ваших ресурсов пользователями и о том, сколько времени они проводят за игрой.

Я использовал GAPlugin (com.adobe.plugins.GAPlugin) для кордовы. В основном я использовал API событий и экрана в этом плагине. Я использовал события, чтобы отслеживать нажатия кнопок и покупки, и я использовал экраны, чтобы отслеживать, какие уровни получают игроки и с какими уровнями у них возникают проблемы.

Кроме того, я добавил на свой веб-сайт аналитику Google, чтобы отслеживать, как люди открывают для себя мою игру.

Маркетинг

Ваша игра не будет продаваться. Вам придется выйти и продать это. Два самых важных бесплатных инструмента для маркетинга - это Facebook и Twitter. Создайте определенную страницу в Facebook и Twitter и начните публиковать сообщения. В этой статье от Soomla было несколько отличных идей.

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