Как играть в HTML-игры на Android

Обновлено: 30.11.2022

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Puffin Cloud Browser НЕ является веб-браузером.

Puffin Cloud Browser — это клиентское приложение, которое обращается к облачному серверу, на котором работает веб-браузер. Клиентское приложение Puffin и облачный сервер Puffin не взаимодействуют по протоколу HTTP, а обмен данными осуществляется не в формате HTML. Клиентское приложение Puffin похоже на клиент удаленного рабочего стола, а облачный сервер Puffin — на сервер удаленного рабочего стола. Puffin Cloud Browser дает аудитории иллюзию веб-браузера, но на самом деле это не веб-браузер. Облачный браузер Puffin может только «отображать» веб-контент, отображаемый на облачных серверах, но не может «рендерить» сам веб-контент на клиентских устройствах.

==== Отличительные особенности ====
* Изоляция браузера
* Облачное ускорение
* Сохранение данных
* Загрузка в облако
* Flash-игра< br />* Режим полного рабочего стола
* Защита доступа в Интернет
* Виртуальный геймпад/мышь/трекпад

==== Важные ограничения ====
* Работает только с общедоступными веб-сайтами из США.
-- Не работает с частными IP-адресами, корпоративной интрасетью и веб-сайтами с географическим ограничением.
* Работает только в странах с не слишком жесткой цензурой
-- Не работает в Китае, Иране, Саудовской Аравии и Объединенных Арабских Эмиратах
* Для некоторых веб-сайтов требуется блокировка IP-адресов сервера Puffin. быть в белом списке
-- Puffin может вызвать чрезмерную нагрузку на некоторые веб-сайты

Что нового

<р>1. Предлагайте больше возможностей для покупок в приложении.

Оценки и обзоры

Amazing App- Furious о своей судьбе

Грустно видеть, что вы уходите.

Когда я впервые получил свой iPhone и iPad почти 2 года назад, я счел чистым безумием то, что продукты Apple до сих пор не поддерживают Flash. Я искал в разных браузерах, но ни один из них не поддерживал его. Те немногие, что были, были неуклюжими, стоили денег и были полусырыми. Когда я скачал Puffin, я был очень доволен.

Использование браузера было интуитивно понятным. Мне не нужно было переключаться между функциями, чтобы включить вспышку. Я мог свободно просматривать и делать то, что хотел, без необходимости бороться с приложением. Теперь, за последний год, у Puffin были проблемы и икота. Он больше не работает на моем iPad, а совсем недавно нам сообщили, что они закрывают сервис для продуктов Apple. Это позор, когда конкуренция может намного превосходить существующую систему, а единственная реакция этих систем — блокировать прогресс конкуренции. Можно было бы подумать, что это довольно отстало. Не лучше ли улучшиться так сильно, чтобы конкуренция по сравнению с ней выглядела глупо? К сожалению, это редкий случай.

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

Этот браузер меня погубил!

Я начал использовать Puffin, потому что хотел получить доступ к Flash-играм на своем iPad. Я ни в коем случае не фанат Flash, и я с нетерпением жду, когда он станет ненужным, но на данный момент все еще есть несколько вещей, которые просто не могут быть сделаны без него, многие игры для меня. Я пробовал несколько разных браузеров, прежде чем остановился на Puffin, как на лучшем, который я нашел для использования Flash на iOS. Когда я начал использовать его, я понятия не имел, насколько быстрым он был на самом деле. Но я начал замечать, насколько нетерпеливым я стал, пытаясь сделать что-нибудь с любым другим браузером. Я обычно использовал Chrome, Firefox или Opera (и Safari, когда это было необходимо) и заметил, что начал несколько раз нажимать на одну и ту же ссылку или кнопку, пытаясь заставить что-то произойти. В конце концов, я обнаружил, что громко ругаюсь на свой iPad каждый раз, когда мне приходилось использовать какой-либо браузер, кроме Puffin. Теперь я пользуюсь Puffin, а другими пользуюсь редко. Я до сих пор использую их, когда мне нужны определенные функции, но я делаю это все реже и реже и ожидаю, что в конечном итоге я буду редко использовать что-либо, кроме Puffin, на своем iPad. Я только хочу, чтобы это было доступно на моем iMac. Возможно, это не идеальный браузер для всех, и если это так, я советую вам не использовать его слишком долго, иначе вы не сможете вернуться к тому, что использовали раньше.

Конфиденциальность приложения

Разработчик, CloudMosa, Inc., указал, что методы обеспечения конфиденциальности приложения могут включать обработку данных, как описано ниже. Дополнительную информацию см. в политике конфиденциальности разработчика.

Данные, не связанные с вами

Могут быть собраны следующие данные, но они не связаны с вашей личностью:

Методы конфиденциальности могут различаться, например, в зависимости от используемых вами функций или вашего возраста. Узнать больше

Информация

Совместимость iPhone Требуется iOS 8.0 или более поздней версии. iPad Требуется iPadOS 8.0 или более поздней версии. iPod touch Требуется iOS 8.0 или более поздняя версия. Mac Требуется macOS 11.0 или более поздней версии и компьютер Mac с чипом Apple M1.

Английский, бенгальский, датский, голландский, французский, немецкий, хинди, индонезийский, итальянский, японский, корейский, малайский, маратхи, норвежский букмол, норвежский нюнорск, польский, португальский, русский, упрощенный китайский, испанский, шведский, тамильский, телугу, тайский, китайский (традиционный), турецкий, украинский, вьетнамский

Возрастной рейтинг 17+ Нечасто/Умеренно Имитация азартных игр Нечасто/Умеренно Употребление алкоголя, табака или наркотиков или ссылки или грубый юмор, частые/интенсивные сцены сексуального характера или нагота, нечастые/умеренные сцены, карикатуры или фэнтези с насилием

Если видео на YouTube, игра в Facebook или другой медиафайл не работают, попробуйте исправить это, выполнив следующие действия.

Эти шаги могут помочь:

  • Видео или игра не загружаются
  • Пустое видео или игра
  • Серое поле вместо видео или игры.
  • Chrome зависает или аварийно завершает работу при загрузке видео или игры.

Важно! С 2021 г. компания Adobe прекратила поддержку подключаемого модуля Flash Player. Flash-контент, включая аудио и видео, больше не будет воспроизводиться ни в одной версии Chrome.

Посетите блог Chrome, чтобы узнать больше.

Шаг 1. Включите JavaScript

Для некоторых медиа требуется JavaScript. Видео YouTube, например, не будут работать без JavaScript.

  1. Откройте Chrome на компьютере.
  2. В правом верхнем углу нажмите "Дополнительные настройки".
  3. Нажмите "Конфиденциальность и безопасность" Настройки сайта.
  4. Нажмите JavascriptСайты могут использовать Javascript.
  5. Вернитесь на сайт с видео или игрой. В левом верхнем углу нажмите "Обновить" .

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

  1. Откройте Chrome на компьютере.
  2. В правом верхнем углу нажмите "Ещё" Новое окно в режиме инкогнито.
  3. В окне инкогнито перейдите на сайт с видео или игрой.
  1. Закройте окно в режиме инкогнито и вернитесь в обычное окно Chrome.
  2. Нажмите "Дополнительно" Дополнительные инструменты Расширения.
  3. Отключите все расширения.
  4. Перейдите на сайт с видео или игрой. В левом верхнем углу нажмите "Обновить" .

Если видео или игра работают, протестируйте каждое расширение по отдельности:

  1. Включите одно расширение.
  2. Перейдите на сайт с видео или игрой. В левом верхнем углу нажмите "Обновить" .
  3. Если видео или игра воспроизводится, попробуйте следующее расширение.
  4. Когда вы обнаружите расширение, вызывающее проблему, нажмите "Удалить".

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

Эоин МакГрат

Краткий обзор ↬ Хотите создать кроссплатформенную мобильную игру на HTML5? Не нужно баловаться с Java или Objective-C? Обойти магазины приложений? Звучит как мгновенная победа! В настоящее время несколько разработчиков игр расширяют границы мобильных HTML5-игр. Взгляните на такие яркие примеры, как Мускатный орех и Обед-жук.

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

Начало работы

Прежде чем вы приступите к наброску следующего Temple Run или Angry Birds, вы должны знать о нескольких вещах, которые могут ослабить ваше волнение:

Познакомьтесь с сенсорным дизайном для мобильных интерфейсов – совершенно новым руководством Стивена Хубера по дизайну для мобильных устройств с проверенными, универсальными и ориентированными на человека рекомендациями. 400 страниц, заполненных подробными исследованиями пользователей и рекомендациями.

  • Производительность. Мобильные браузеры традиционно не славятся своими блестящими движками JavaScript. Однако с iOS 6 и бета-версией Chrome для Android ситуация быстро улучшается.
  • Разрешение. Настоящий рог изобилия Android-устройств поддерживает широкий диапазон разрешений. Не говоря уже о повышенном разрешении и плотности пикселей iPhone 4 и iPad 3.
  • Аудио. Надеюсь, вам понравится звук тишины. Поддержка аудио в мобильных браузерах, мягко говоря, оставляет желать лучшего. Задержка является серьезной проблемой, как и тот факт, что большинство устройств предлагают только один канал. iOS даже не загрузит звук, пока пользователь не инициирует действие. Мой совет: держитесь крепко и подождите, пока поставщики браузеров разберутся с этим.

Теперь, будучи веб-разработчиком, вы привыкли иметь дело с особенностями некоторых браузеров, грациозно деградировать и иметь дело с фрагментированными платформами. Итак, несколько технических проблем не оттолкнут вас, верно? Более того, все эти проблемы с производительностью и звуком носят временный характер.Ситуация с мобильными браузерами меняется так быстро, что эти проблемы скоро станут далеким воспоминанием.

В этом руководстве мы создадим относительно простую игру, которая познакомит вас с основами и поможет избежать ловушек. Результат будет выглядеть так:

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

Мы разработаем это в несколько отдельных этапов:

  1. Обслуживайте множество областей просмотра и оптимизируйте для мобильных устройств;
  2. Кратко рассмотрите использование API холста для рисования на экране.
  3. Захват событий касания;
  4. Создайте базовый игровой цикл.
  5. Представьте спрайты или игровые «сущности»;
  6. Добавьте обнаружение столкновений и немного простых математических операций, чтобы оживить ситуацию;
  7. Добавьте немного блеска и несколько основных эффектов частиц.

1. Установка сцены

Хватит предыстории. Запустите свой любимый текстовый редактор, налейте крепкий кофе и приступайте к делу.

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

Давайте начнем с простой прокладки HTML:

Метатег viewport указывает мобильным браузерам отключить масштабирование пользователя и отображать страницу в полном размере, а не уменьшать ее. Последующие метатеги с префиксом Apple позволяют добавить игру в закладки. На iPhone приложения с закладками не отображают панель инструментов внизу страницы, что освобождает ценное пространство.

Взгляните на следующее:

Сначала мы создаем пространство имен POP для нашей игры. Будучи хорошими разработчиками, мы не хотим загрязнять глобальное пространство имен. В соответствии с хорошей практикой мы будем объявлять все переменные в начале программы. Большинство из них очевидны: canvas относится к элементу canvas в HTML, а ctx позволяет нам получить к нему доступ через API JavaScript canvas.

В POP.init мы берем ссылку на наш элемент холста, получаем его контекст и корректируем размеры элемента холста до 480 × 320. Функция изменения размера, которая запускается при изменении размера и загрузке, настраивает атрибут стиля холста. по ширине и высоте соответственно при сохранении соотношения. По сути, холст имеет те же размеры, но был увеличен с помощью CSS. Попробуйте изменить размер окна браузера, и вы увидите, что размер холста соответствует размеру.

Если вы попробовали это на своем телефоне, вы заметите, что адресная строка по-прежнему видна. Фу! Мы можем исправить это, добавив в документ несколько дополнительных пикселей, а затем прокрутив вниз, чтобы скрыть адресную строку, например:

Приведенный выше код анализирует пользовательский агент, помечая его для Android и iOS, если он есть. Добавьте его в конец POP.init перед вызовом POP.resize().

Затем в функции изменения размера, если для android или ios задано значение true , мы добавляем еще 50 пикселей к высоте документа, т. е. достаточно дополнительного пространства, чтобы иметь возможность прокручивать страницу за адресной строкой.

Обратите внимание, что мы делаем это только для устройств Android и iOS; в противном случае появятся неприятные полосы прокрутки. Кроме того, нам нужно отложить запуск scrollTo, чтобы убедиться, что он не будет проигнорирован в мобильном Safari.

2. Чистый холст

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

Примечание. В этом уроке мы будем использовать базовые геометрические фигуры. iOS 5 и бета-версия Chrome для Android могут обрабатывать множество спрайтов изображений с высокой частотой кадров. Попробуйте это на Android 3.2 или ниже, и частота кадров упадет в геометрической прогрессии. К счастью, при рисовании кругов не так много накладных расходов, поэтому мы можем использовать много пузырьков в нашей игре, не снижая производительности на старых устройствах.

Ниже мы добавили базовый объект Draw, который позволяет очищать экран, рисовать прямоугольник и круг, а также добавлять текст. Пока ничего умопомрачительного. В Mozilla Developers Network, как всегда, есть отличные ресурсы, изобилующие примерами рисования на холсте.

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

Проверим:

Включите приведенный выше код в конец функции POP.init, и вы должны увидеть пару фигур, нарисованных на холсте.

3. Волшебное прикосновение

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

Интересными частями кода ниже являются события touchstart, touchmove и touchend. С помощью стандартного события клика мы можем получить координаты из e.pageX и e.pageY. События касания немного отличаются.Они содержат массив касаний, каждый элемент которого содержит координаты касания и другие данные. Нам нужно только первое касание, и мы получаем к нему доступ следующим образом: e.touches[0] .

Примечание. Android предоставляет JavaScript-доступ к действиям с несколькими касаниями только начиная с версии 4.

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

Добавьте следующий код в функцию POP.init.

Вы, наверное, заметили, что приведенный выше код передает данные события в объект ввода, который нам еще предстоит определить. Давайте сделаем это сейчас:

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

Во-первых, нам нужно вычесть смещение из координат.

Затем нам нужно принять во внимание коэффициент масштабирования холста, чтобы мы могли построить фактический холст (который по-прежнему составляет 320 × 480).

Если у вас начинает болеть голова, вам поможет практический пример. Представьте, что игрок нажимает на холст 500 × 750 выше с разрешением 400 400 . Нам нужно преобразовать это в 480 × 320, потому что с точки зрения JavaScript это размеры холста. Таким образом, фактическая координата x равна 400, деленная на масштаб; в данном случае 400 ÷ 1,56 = 320,5.

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

В нашей функции изменения размера после настройки ширины и высоты холста мы записываем текущий масштаб и смещение:

Теперь мы можем использовать их в методе set нашего класса POP.Input:

4. В цикле

Типичный игровой цикл выглядит примерно так:

  1. Опрос пользователей,
  2. Обновлять персонажей и обрабатывать коллизии,
  3. Визуализация символов на экране,
  4. Повторить.

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

Давайте добавим прокладку в начало нашей текущей базы кода.

И давайте создадим элементарный игровой цикл:

Мы вызываем цикл в конце POP.init. Функция POP.loop, в свою очередь, вызывает наши методы POP.update и POP.render. requestAnimFrame гарантирует повторный вызов цикла, желательно со скоростью 60 кадров в секунду. Обратите внимание, что нам не нужно беспокоиться о проверке ввода в нашем цикле, потому что мы уже прослушиваем события касания и клика, которые доступны через наш класс POP.Input.

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

5. Spritely сделает это

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

Давайте создадим класс Touch, который рисует круг в точке контакта, затемняет его, а затем удаляет.

При запуске класс Touch устанавливает ряд свойств. Координаты x и y передаются в качестве аргументов, и мы устанавливаем радиус this.r равным 5 пикселям. Мы также устанавливаем начальную непрозрачность на 1 и скорость, с которой прикосновение исчезает, на 0,05. Существует также флаг удаления, который сообщает основному игровому циклу, следует ли удалить это из массива сущностей.

Важно отметить, что у класса есть два основных метода: update и render . Мы будем вызывать их из соответствующей части нашего игрового цикла.

Затем мы можем создать новый экземпляр Touch в игровом цикле, а затем переместить его с помощью метода обновления:

По сути, если POP.Input.tapped имеет значение true , мы добавляем новый экземпляр POP.Touch в наш массив сущностей. Затем мы просматриваем массив сущностей, вызывая метод обновления для каждой сущности. Наконец, если объект помечен для удаления, мы удаляем его из массива.

Затем мы визуализируем их в функции POP.render.

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

Пока все хорошо. Теперь мы добавим класс Bubble, который создаст всплывающий пузырь, который пользователь может лопнуть.

Класс POP.Bubble очень похож на класс Touch, главное отличие состоит в том, что он не исчезает, а перемещается вверх. Движение достигается путем обновления позиции y this.y в функции обновления. Здесь мы также проверяем, находится ли пузырь за пределами экрана; если это так, мы помечаем его для удаления.

Примечание. Мы могли бы создать базовый класс Entity, от которого наследуются Touch и Bubble.Но я бы не хотел сейчас открывать еще одну банку червей о прототипном наследовании JavaScript по сравнению с классическим.

Выше мы добавили в игровой цикл случайный таймер, который будет создавать экземпляр Bubble в случайном месте. В начале игры мы устанавливаем nextBubble со значением 100. Это значение вычитается на каждом игровом тике, и когда оно достигает 0, мы создаем пузырь и сбрасываем счетчик nextBubble.

6. Собираем вместе

Во-первых, пока еще нет понятия обнаружения столкновений. Мы можем добавить это с помощью простой функции. За этим стоит базовая математика, которую вы можете освежить в Wolfram MathWorld.

Пузыри довольно скучны; все они движутся с одинаковой скоростью по очень предсказуемой траектории. Заставить пузыри двигаться со случайной скоростью — простая задача:

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

Опять же, для достижения этого эффекта мы используем некоторую базовую геометрию; в данном случае синусоида. Хотя вам не нужно быть гением математики, чтобы создавать игры, базовое понимание имеет большое значение. Статья «Краткий обзор анимаций с помощью JavaScript» поможет вам начать работу.

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

Поместите следующий код вместе со всеми остальными объявлениями переменных в начало программы.

Теперь в классе Bubble мы можем отслеживать POP.score.escaped, когда всплывающее окно исчезает с экрана.

В основном цикле обновления мы соответствующим образом увеличиваем POP.score.hit:

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

Точность получается путем деления количества обращений на количество нажатий, умноженного на 100, что дает хороший процент. Обратите внимание, что ~~(POP.score.accuracy) — это быстрый способ (т. е. хак) округлить число с плавающей запятой до целых чисел.

Наконец, мы используем наш POP.Draw.text для отображения результатов в основной функции обновления.

7. Коса и полировка

Принято считать, что игровую демоверсию можно сделать за пару часов, а на доработанную игру уходят дни, недели, месяцы или даже годы!

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

Эффекты частиц

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

Взгляните на наш класс Particle:

Совершенно очевидно, что здесь происходит. Использование некоторого базового ускорения, чтобы частицы ускорялись по мере достижения поверхности, является приятным штрихом. Опять же, эта математика и физика выходят за рамки этой статьи, но для тех, кто заинтересован, Skookum Digital Works подробно объясняет это.

Чтобы создать эффект частиц, мы помещаем несколько частиц в наш массив сущностей при каждом попадании в пузырек:

Волны

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

Добавьте приведенный выше код в функцию POP.init. POP.wave имеет ряд значений, которые нам понадобятся для рисования волн.

Добавьте следующее в основную функцию обновления. Он использует синусоиду, чтобы настроить положение волн и создать иллюзию движения.

Все, что осталось сделать, это нарисовать волны, которые входят в функцию рендеринга.

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

Заключительные мысли

Фу! Это было весело. Надеюсь, вам понравился этот краткий обзор приемов и методов создания HTML5-игры. Нам удалось создать очень простую игру, которая работает как на большинстве смартфонов, так и в современных браузерах. Вот несколько вещей, которые вы могли бы сделать:

  • Храните рекорды в локальном хранилище.
  • Добавьте заставку и экран "Игра окончена".
  • Включить бонусы.
  • Добавить звук. Вопреки тому, что я сказал в начале этой статьи, это не невозможно, просто немного головная боль. Один из методов заключается в использовании звуковых спрайтов (вроде спрайтов изображений CSS); Реми Шарп объясняет это.
  • Дайте волю своему воображению!

Дополнительная литература на SmashingMag:

Если вы заинтересованы в дальнейшем изучении возможностей мобильных игр HTML5, я рекомендую протестировать несколько фреймворков, чтобы увидеть, что вам подходит. Юхо Вепсяляйнен предлагает полезный обзор большинства игровых движков. Если вы готовы вложить немного денег, то Impact — отличная отправная точка с подробной документацией и живыми полезными форумами. И впечатляющий X-Type демонстрирует, что возможно. Неплохо, правда?

Недавно я хотел перенести некоторые из своих игр PixiJS в отдельные приложения для Android и не смог найти руководства, как это сделать.Сам процесс не сложен, но требует определенных знаний Android, которые есть не у каждого разработчика HTML-игр. Итак, это моя попытка задокументировать, как я портирую свою игру, в надежде, что это поможет другим.

Это предполагает, что у вас есть отдельная сборка игры (созданная с помощью чего-то вроде веб-пакета) и не зависит от каких-либо внешних зависимостей или ссылок.

Шаг 1. Настройка Android Studio

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

Шаг 2. Создание нового проекта

Начнем с создания нового проекта в Android Studio и выбора шаблона Empty Activity


Дайте ему имя и выберите «Java» в качестве языка:


Теперь вы сможете запустить свое приложение на устройстве или эмуляторе и увидеть простой экран "Hello world".

Шаг 3. Добавление веб-просмотра

Нам нужно добавить Webview для отображения HTML-игры. В Android Studio откройте файл app/res/layout/activity_main.xml, и вы должны увидеть графический редактор, в котором вы можете редактировать действие.

Удалить существующий TextView

И перетащите в WebView


И обязательно укажите идентификатор. Я назвал свой «webView».


Далее мы отредактируем файл MainActivity.java и загрузим HTML-код в наш WebView, чтобы проверить его работу:

Шаг 4. Загрузка HTML-игры

После создания моей игры с помощью Webpack у меня есть файлы игры в виде аккуратного каталога с index.html, скриптом, содержащим мои зависимости Javascript и PixiJS, и каталогом ресурсов, содержащим изображения и звуки, используемые в игре.

Создайте каталог «assets» на том же уровне, что и каталог «res» в вашем проекте Android (например, «app/src/main/assets»), и скопируйте в него файлы игры.


Далее мы добавим код для загрузки этой игры из нашего WebView.

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


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

Шаг 5. Настройка масштаба, полноэкранного режима и ориентации экрана

Полный экран

Это так же просто, как скопировать код из документации в класс MainActivity.

Ориентация экрана

Для этого нам нужно отредактировать файл AndroidManifest.xml, расположенный в разделе «манифесты». Нам нужно добавить android:screenOrientation="landscape" внутри тега. Это должно выглядеть примерно так:

Масштаб

С этим было немного сложнее. Включив полноэкранный режим и изменив ориентацию экрана на альбомную, я заметил, что размеры моей игры не совсем соответствуют размеру экрана моего устройства:


Разрешение моей игры – 800 x 600, что даже немного не соответствует соотношению сторон моего устройства.

Чтобы исправить это, я написал небольшую вспомогательную функцию, которая будет вычислять масштаб, который должен быть установлен для WebView, учитывая желаемую ширину и высоту (это должен быть размер представления вашей игры).

Это следует использовать в коде следующим образом:


Леттербоксинг немного уродлив, и это действительно моя вина за то, что я не выбрал более удобное для мобильных устройств соотношение сторон или не позволил легко изменить размер игры. Но теперь он полностью виден в веб-просмотре и воспроизводим на 100 %.

Фу! Были сделаны! Весь этот процесс занял у меня около получаса, так что на самом деле не так уж сложно включить HTML-игру в собственное приложение. Я еще не проверял производительность на чем-то особенно интенсивном, но в приложении игра идет так же хорошо, как и в браузере Android.

Если вы зашли так далеко, я очень надеюсь, что это помогло вам. Если у вас возникнут какие-либо проблемы, сообщите мне!

Читайте также: