как на телефоне создавать игры
Разработка HTML5 игры под Android с нуля и до релиза
Вместо вступления
Потратив несколько суток подряд (без перерыва на сон) на изучение поддержки HTML5 всеми любимыми Android-гаджетами, решил, что данной теме стоит уделить внимание. В статье постараюсь раскрыть по шагам все этапы (конечно же базовые/ключевые/основные) создания HTML5 Игрового приложения для Android от идеи до релиза самого APK файла. Возможно, ничего нового я и не открою маститым разработчикам, но для новичков постараюсь описать все как можно проще, со скриншотами и пояснениями.
Желающих узнать подробнее приглашаю под кат.
Вообще много можно говорить о потенциале Android, о развитии HTML5 и об их взаимодействии. Я этого делать не буду. Так что, сразу к делу.
Идея создания игры под Android наверняка заседает в разумах десятков сотен разработчиков, и тех, кто себя таковыми считает. Я не исключение.
Весь процесс будет разбит на несколько шагов а итоговое приложение будет состоять из двух частей:
— Обертка (в данном случае для Android)
— Игра
Шаг 1. Написание самой игры
Еще одним плюсом написания игры на HTML5 является тот факт, что для тестирования не требуется куча запущенных программ, IDE, эмуляторов и так далее. Нужен лишь браузер (в моем случае это Chromium) и текстовый редактор (BlueFish)
Игра будет несложной: есть синий прямоугольник и есть зеленый прямоугольник. Задача игрока — перетащить синий прямоугольник на зеленый в обход красного, который перемещается по игровому полю в произвольном направлении.
Для разработки игры буду использовать J2ds (игровой движок).
На качество кода игры внимания можно не обращать, ибо не это цель статьи. Хотя конечно, можно оптимизировать сколько угодно, этот процесс вообще наверное бесконечен.
Шаг 2. Android Studio. Создание обертки для игры
Я не собираюсь ни с кем мериться крутостью той или иной IDE для разработки под Android, а покажу на примере Android Studio. Для работы нам потребуется:
— Java машина (под мою Linux подходит OpenJDK);
— Дистрибутив Android Studio.
Как только все установите (Этих двух программ достаточно), запускайте Android Studio.
Откроется стартовое окно (если первый запуск), если не первый — то откроется сама IDE, но сути не меняет, пройдем в SDK Manager:
Тут нужно галочками отметить необходимые вам версии Android, с которыми вы будете работать, в моем случае это Android 4.4.2, вы можете выбрать хоть все сразу.
Главное — выберете обязательно «Tools» и «Extras» и нажимайте «install packages».
Как только у вас все скачалось, запустится IDE с унылым серым фоном и несколькими кнопками, жмем первую и создаем новый проект. Если IDE запустилась сразу в рабочем состоянии, то: «File->New->New Project»
Заполняем необходимые поля, и жмем Next
Выбираем нужную версию андроида и Next
Тут выбираем Blank Activity (пустой шаблон с Hello, World!)
В следующем окне заполняем данные для создания классов, я менять не буду для наглядности:
Торжественно жмем Finich и ждем, пока IDE все сконфигурирует и подготовит для работы.
Откроется окно с дизайнером форм. Оно не такое, как в Lazarus, Delphi, но что-то схожее все равно имеется:
Не спешите ничего менять или что-то щелкать, настройка еще не окончена. Открываем «Tolls->Android->AVD Manager» для настройки эмулятора.
Тут, если ничего нет, жмем «Create Virtual Device», если есть, можете не создавать новый, у меня уже был, т.к. я «натыкал» его, пока разбирался. Если же вам нужно создать новый эмулятор, то там все просто:
1. Выбираем размер экрана и модель телефона
2. Выбираем версию андроида (у меня 4.4.2)
3. Настраиваем устройство.
На третьем шаге подробнее:
Т.К. игра у нас вытянута по горизонтали, выбрать нужно ландшафтный режим.
Когда все настройки введены, жмем на зеленый треугольник и запускаем эмулятор. После запуска ждем, когда устройство полностью загрузится и запустится ОС:
Это окно не закрывайте, в нем будет происходить эмуляция. Теперь можно вернуться в редактор, и изменить ориентацию в дизайнере форм:
Можно запускать! Вот теперь точно можно.
Если появится запрос на выбор эмулятора — то можно поставить галочку внизу:
Мои поздравления! Все работает, проверено!
Сворачиваем наш эмулятор (Но не закрываем!) и переходим в редактор, Там все немного сложнее (чуть-чуть).
Переключиться нужно в режим «Text». У вас в activity_main описаны все элементы, которые есть на форме. Включая саму форму. Да и не форма это вовсе.
Т.к. мы делаем игру в HTML5, а тут у нас только обертка для игры, удаляем весь текст и вставляем следующее:
Теперь, если опять переключиться на дизайн, то выглядеть будет иначе:
Как видно, теперь вместо «Hello, World» во всю красуется растянутый на весь экран — WebView. Этот объект и является нашим «окном» в игровой мир.
Можете запустить даже, посмотреть, будет белый экран. Идем дальше.
А дальше нам нужно перейти в наш проект, для этого слева открываем поле «Project» и выбираем вкладку «Android», если не выбрана:
В этой вкладке представлена структура проекта и все его внутренние файлы и ресурсы.
Пришло время поработать над функционалом нашего «браузера», ведь это именно он! Открываем класс «MainActivity.java» и удаляем все лишнее, оставив только основное:
Если не забыли, мы в файле activity_main добавили WebView, обратите внимание на выделенную жирным строчку:
Нам нужно объявить объект класса WebView.
Для этого к списку импортов дописываем:
А затем объявляем наш объект myWeb внутри класса MainActivity:
Теперь, после строчки setContentView(R.layout.activity_main); вставляем следующий код:
Вот что получилось у меня в редакторе:
А вот, что в эмуляторе:
Если у вас так же — мы на верном пути!
Осталось дело за небольшим:
Там, где мы подгружаем страницу нашему браузеру, путь к файлу выглядит так: «file:///android_asset/index.html»
Следует учесть, что любые файлы мы можем хранить внутри нашей игры, имея к ним доступ.
Дальше все совсем просто — копируем нашу игру в папку assets:
Файл index.html — это тот самый index из начала этой статьи. Ну что, пробуем запустить!
Небольшой совет: тестировать лучше всего на реальном устройстве посредством USB, так результаты теста будут нагляднее, да и управлять мышью не самый удобный вариант, не говоря уже о множественном нажатии.
Шаг 3. Android Studio. Сборка приложения и его подписывание
Когда игра вами полностью отлажена (в браузере или на эмуляторе), обертка полностью готова и все этапы разработки позади, можно собирать приложение. Android Studio позволяет собирать приложения и подписывать их вашими ключами.
Для создания ключей в этой IDE есть специальная утилита «KeyTool».
Если ранее ключей и алиасов вы не создавали, нажимайте «Create New». Заполнить поля можете на свое усмотрение, достоверность данных целиком лежит на вас.
Первое поле — это путь к папке, в которую будет сохранен ключ. Форма после нажатия Ok заполнится автоматически:
Для последующих приложений создавать новые ключи не обязательно, вы можете подписывать вашим ключем и другие приложения, именно для этого и есть кнопка «Choose Existing».
На следующем шаге IDE попросит у вас еще раз ввести пароль, а затем указать папку для сохранения APK файла.
Теперь можете расслабиться и попить, к примеру, кофе.Система начала компиляцию, результат в статусбаре:
После того, как компиляция завершится, система вам об этом сообщит.
Теперь достаточно переместить файл на телефон / планшет и установить, как обычное приложение.
Создавайте качественные приложения и игры
Хотите добиться долгосрочного успеха? Повышайте производительность приложения, а также качество контента, интерфейса и улучшайте функции.
Уникальное предложение для широкой аудитории
Расширяйте аудиторию своего приложения – для этого вам нужно правильно выбрать контент.
Выделяйтесь среди конкурентов уникальным или инновационным решением, примером использования, а также интерфейсом и функциями приложения.
Учитывайте культурные нормы разных стран – ознакомьтесь с нашими рекомендациями по успешному запуску приложений во всем мире и подумайте об использовании стратегии регионального ценообразования.
Предоставляйте пользователям возможность общаться и взаимодействовать друг с другом – для этого создавайте и расширяйте сообщества, а также поощряйте самостоятельное создание пользователями контента.
Разрабатывайте новые функции с учетом пользовательских отзывов – в этом вам поможет инфраструктура закрытого и открытого тестирования в Google Play.
Повышайте интерес к своему приложению у пользователей со всего мира – локализуйте его интерфейс и страницу в Google Play с помощью наших сервисов перевода.
Привлечение интереса пользователей
Чтобы удерживать интерес пользователей, регулярно выпускайте обновления приложения и его контента.
Регулярно выпускайте обновления контента и функций приложения – это позволит вам надолго удержать интерес пользователей.
Если в вашем приложении есть реклама, следите, чтобы она привлекала внимание пользователей, а не вызывала негативную реакцию.
Описание приложения должно быть понятным и увлекательным. Расскажите об основных функциях и интерфейсе. Чтобы выбрать лучшее описание, воспользуйтесь экспериментами со страницей приложения.
Улучшайте параметры видимости приложения, оптимизируя графические объекты, скриншоты и видео на его странице в Google Play. Это позволит пользователям понять, как приложение работает.
Хорошие технические характеристики
Создайте приложение, которое будет вызывать у пользователей положительные впечатления, интуитивно понятное, с высокой производительностью и стабильностью.
Приложение должно иметь интуитивно понятный интерфейс – cоздать его вам помогут стандартные шаблоны визуального дизайна и взаимодействия для Android.
Добавляйте в приложение основные функции, связанные с воспроизведением и записью медиафайлов, распространением контента и фоновыми службами.
Оптимизируйте производительность, стабильность и совместимость приложения – это позволит вам удовлетворить ожидания пользователей.
Туториал: Создание простейшей 2D игры на андроид
Этот туториал предназначен в первую очередь для новичков в разработке под андроид, но может быть будет полезен и более опытным разработчикам. Тут рассказано как создать простейшую 2D игру на анроиде без использования каких-либо игровых движков. Для этого я использовал Android Studio, но можно использовать любую другую соответствующее настроенную среду разработки.
Шаг 1. Придумываем идею игры
Для примера возьмём довольно простую идею:
Внизу экрана — космический корабль. Он может двигаться влево и вправо по нажатию соответствующих кнопок. Сверху вертикально вниз движутся астероиды. Они появляются по всей ширине экрана и двигаются с разной скоростью. Корабль должен уворачиваться от метеоритов как можно дольше. Если метеорит попадает в него — игра окончена.
Шаг 2. Создаём проект
В Android Studio в верхнем меню выбираем File → New → New Project.
Тут вводим название приложения, домен и путь. Нажимаем Next.
Тут можно ввести версию андроид. Также можно выбрать андроид часы и телевизор. Но я не уверен что наше приложение на всём этом будет работать. Так что лучше введите всё как на скриншоте. Нажимаем Next.
Тут обязательно выбираем Empty Activity. И жмём Next.
Тут оставляем всё как есть и жмём Finish. Итак проект создан. Переходим ко третьему шагу.
Шаг 3. Добавляем картинки
Скачиваем архив с картинками и распаковываем его.
Находим папку drawable и копируем туда картинки.
Позже они нам понадобятся.
Шаг 4. Создаём layout
Находим activity_main.xml, открываем вкладку Text и вставляем туда это:
На вкладке Design видно как наш layout будет выглядеть.
Сверху поле в котором будет сама игра, а снизу кнопки управления Left и Right. Про layout можно написать отдельную статью, и не одну. Я не буду на этом подробно останавливаться. Про это можно почитать тут.
Шаг 5. Редактируем MainActivity класс
В первую очередь в определение класса добавляем implements View.OnTouchListener. Определение класса теперь будет таким:
Добавим в класс нужные нам статические переменные (переменные класса):
В процедуру protected void onCreate(Bundle savedInstanceState) <
добавляем строки:
Классы LinearLayout, Button и т.д. подсвечены красным потому что ещё не добавлены в Import.
Чтобы добавить в Import и убрать красную подсветку нужно для каждого нажать Alt+Enter.
GameView будет подсвечено красным потому-что этого класса ещё нет. Мы создадим его позже.
Теперь добавляем процедуру:
Если кто-то запутался ― вот так в результате должен выглядеть MainActivity класс:
Итак, класс MainActivity готов! В нём инициирован ещё не созданный класс GameView. И когда нажата левая кнопка — статическая переменная isLeftPressed = true, а когда правая — isRightPressed = true. Это в общем то и всё что он делает.
Для начала сделаем чтобы на экране отображался космический корабль, и чтобы он двигался по нажатию управляющих кнопок. Астероиды оставим на потом.
Шаг 6. Создаём класс GameView
Теперь наконец-то создадим тот самый недостающий класс GameView. Итак приступим. В определение класса добавим extends SurfaceView implements Runnable. Мобильные устройства имею разные разрешения экрана. Это может быть старенький маленький телефон с разрешением 480×800, или большой планшет 1800×2560. Для того чтобы игра выглядела на всех устройствах одинаково я поделил экран на 20 частей по горизонтали и 28 по вертикали. Полученную единицу измерения я назвал юнит. Можно выбрать и другие числа. Главное чтобы отношение между ними примерно сохранялось, иначе изображение будет вытянутым или сжатым.
unitW и unitW мы вычислим позже. Также нам понадобятся и другие переменные:
Конструктор будет таким:
Метод run() будет содержать бесконечный цикл. В начале цикла выполняется метод update()
который будет вычислять новые координаты корабля. Потом метод draw() рисует корабль на экране. И в конце метод control() сделает паузу на 17 миллисекунд. Через 17 миллисекунд run() запустится снова. И так до пока переменная gameRunning == true. Вот эти методы:
Обратите внимание на инициализацию при первом запуске. Там мы вычисляем количество пикселей в юните и добавляем корабль. Корабль мы ещё не создали. Но прежде мы создадим его родительский класс.
Шаг 7. Создаём класс SpaceBody
Он будет родительским для класса Ship (космический корабль) и Asteroid (астероид). В нём будут содержаться все переменные и методы общие для этих двух классов. Добавляем переменные:
Шаг 8. Создаём класс Ship
Теперь создадим класс Ship (космический корабль). Он наследует класс SpaceBody поэтому в определение класа добавим extends SpaceBody.
и переопределим метод update()
На этом космический корабль готов! Всё компилируем и запускаем. На экране должен появиться космический корабль. При нажатии на кнопки он должен двигаться вправо и влево. Теперь добавляем сыплющиеся сверху астероиды. При столкновении с кораблём игра заканчивается.
Шаг 9. Создаём класс Asteroid
Добавим класс Asteroid (астероид). Он тоже наследует класс SpaceBody поэтому в определение класса добавим extends SpaceBody.
Добавим нужные нам переменные:
Астероид должен появляться в случайной точке вверху экрана и лететь вниз с случайной скоростью. Для этого x и speed задаются при помощи генератора случайных чисел в его конструкторе.
Астероид должен двигаться с определённой скорость вертикально вниз. Поэтому в методе update() прибавляем к координате x скорость.
Так же нам нужен будет метод определяющий столкнулся ли астероид с кораблём.
Рассмотрим его поподробнее. Для простоты считаем корабль и астероид квадратами. Тут я пошёл от противного. То есть определяю когда квадраты НЕ пересекаются.
((x+size) (shipX+shipSize)) — корабль справа от астероида.
((y+size) (shipY+shipSize)) — корабль снизу астероида.
Между этими четырьмя выражениями стоит || (или). То есть если хоть одно выражение правдиво (а это значит что квадраты НЕ пересекаются) — результирующие тоже правдиво.
Всё это выражение я инвертирую знаком!. В результате метод возвращает true когда квадраты пересекаются. Что нам и надо.
Про определение пересечения более сложных фигур можно почитать тут.
Шаг 10. Добавляем астероиды в GameView
В GameView добавляем переменные:
также добавляем 2 метода:
И в методе run() добавляем вызовы этих методов перед вызовоом control().
Далее в методе update() добавляем цикл который перебирает все астероиды и вызывает у них метод update().
Такой же цикл добавляем и в метод draw().
Вот и всё! Простейшая 2D игра готова. Компилируем, запускаем и смотрим что получилось!
Если кто-то запутался или что-то не работает можно скачать исходник.
На этом всё. Пишите отзывы, вопросы, интересующие вас темы для продолжения.
📱 Как начать разрабатывать мобильные игры для Android?
Перспективы и направления
Популярные жанры
На рынке мобильных игр представлено множество жанров на любой вкус. Новые появляются каждый день – невозможно перечислить каждую нишевую категорию, поэтому выделим самые популярные.
Multiplayer Battle Arenas представляет собой смесь стратегии в реальном времени и экшена. Игроку предоставляется контроль над одним персонажем, известным как «чемпион» или «герой», которого можно выбрать из большого списка. Нужно собрать команду и разрушить базу противников, защищая собственную.
Battle Royale
MMORPG
Многопользовательские ролевые онлайн-игры – это онлайн-RPG, в которой игроки повышают уровень персонажей и приобретают новые способности. При этом сотни аккаунтов одновременно взаимодействуют друг с другом в одном мире и в режиме реального времени.
Головоломки
Более половины пользователей смартфонов и планшетов играют в головоломки. Candy Crush и Tetris популярны даже среди аудитории, которая не идентифицируют себя как геймеров. Логические игры сосредоточены на простых для понимания, но сложных в освоении механиках и требуют использования быстрого мышления.
Казуальные игры
Эта категория доминирует на рынке игр для мобильных устройств. Казуальные игры являются наиболее популярным жанром среди пользователей Android. Их можно легко начать и отложить в любой момент, что позволяет использовать потенциально короткие периоды игры.
Выбор движка
Unity
Unreal
В новом движке Unreal Engine 4 много изменений по сравнению с предыдущими версиями. В качестве языка сценариев используется C++, который полностью заменил популярный некогда UnrealScript, а Kismet заменен более удобной системой Blueprint. Из-за этих перемен даже опытным дизайнерам игр придется пройти обучение, чтобы освоить обновленную версию.
Unreal поставляется с инструментами для использования технологий виртуальной и дополненной реальности для разработки мобильных игр. В «Библиотеке программиста» вы найдете подробный туториал по созданию первого объекта и освоению Unreal Engine 4.
Solar2D
Это далеко не полный список игровых движков, но одна из популярных платформ может стать вашим счастливым билетом в мир геймдева.
Основные этапы разработки
Чтобы создать мобильную игру под Android, нужно пройти определенные этапы. Предлагаем вашему вниманию пошаговый план для начинающих:
Идея и план
Идея – самый сложный и ответственный шаг к созданию успешной мобильной игры. Ключ к поиску идеи – придумать что-то новаторское и увлекательное. Идея должна понравиться массовой аудитории.
Правильное планирование или его отсутствие могут обеспечить успех или провал проекта. Найдите время, чтобы записать идеи, придумать уникальных персонажей, поиграть с разными стилями и подумать о типе игрового процесса, который сделает вашу игру увлекательной. Раскрыть потенциал проекта поможет история: в игровом мире она имеет огромное значение. Чтобы пройти путь до конца, пользователю нужна цель, а для этого понадобится история, какой бы простой та ни была.
Выбор языка и инструментов
Графика
Создание игрового дизайна намного сложнее создания дизайна обычного приложения. Приходится учитывать множество факторов: историю, персонажей и финальный внешний вид. В первую очередь именно дизайн отличает вашу игру от конкурентов, однако обсчет сложных деталей требует вычислительной мощности – нужно соблюдать баланс между хорошей графикой и производительностью, учитывая возможности мобильных устройств под Android. Далеко не у всех пользователей будут крутые флагманы.
Работа в команде
Небольшие проекты можно делать в одиночку, но для реализации более амбициозных стоит обзавестись командой единомышленников. Вне зависимости от бюджета и сложности, выбор программистов, менеджеров и дизайнеров для совместной работы является важным фактором успеха.
Тестирование, запуск и монетизация
Перед запуском игры ее стоит всесторонне протестировать, но не стоит на этом зацикливаться. Многие начинающие разработчики чересчур усердно пытаются сделать программу идеальной, все время задерживая выпуск. Это серьезная ошибка – лучше быстрее выпустить релиз без критичных багов. Если игра понравится аудитории, ее можно будет улучшить.
Стоит подумать и о монетизации проекта. Существует несколько распространенных способов о ней позаботиться:
Развитие проекта
Если ваша игра собрала значительную аудиторию, не стоит останавливаться на достигнутом. Обновления и улучшения позволят сделать ее лучше и привлечь большее количество довольных геймеров.
Стремительное развитие смартфонов за 10 лет изменило игровую индустрию кардинально. От простых карманных консолей Game Boy мобильные игры эволюционировали до многопользовательских платформ со сложной механикой и интересной визуальной составляющей. Это не должно вас пугать: даже простые проекты в стиле платформеров и казуальных игр могут найти свою аудиторию благодаря доступности и простому управлению.