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

Тэг audio

Тэг audio ровным счётом как и тэг video поддерживается Андроидом также как и большинство фич HTML 5. И качество и стабильность работы вроде бы не должна вызывать противоречий... Вроде бы...

Казалось бы HTML5 и все дела должны присутствовать и работать стабильно, но к сожалению HTML 5 audio и video были реализованы несколько криво в WebView Андроида.

Дело в том что эти два HTML5 тэга работают безукоризненно с удалёнными данными. Например:

А вот только речь заходит за использование локальных данных тут уже всё, неизвестно по каким причинам, но данные с HTML страницы в тэгах audio и video не обнаруживаются на локальном устройстве. Иными словами, поместили вы страницу в папку assets вашего проекта и рядом с ним файл sound mp3, то такой код:

Работать не будет. Вот такая вот беда с относительными путями. Какой пусть поставить чтобы всё нормальзовалось, что и как сделать я сам не знаю, но запустить на нативном HTML локальный звук, к сожалению так и не удалось.

Также стоит отметить что автостарт аудио на Андроиде также не работает.

Насколько я знаю embed и object с аудио в андроид тоже не работают.

Однако расстраиваться не стоит и есть альтернативные пути запуска звуков из вашего HTML5 приложения.

Свистопляски

1. Использование кодированного в base64 файла самого звука.

Если кто-то не знал, то браузерами и в том числе мобильными (и WebView) поддерживается использования кодированной base64 строки с содержанием самого звука.

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

Грубо говоря мы просто даём данные обработчику браузера немного в другом виде. Все параметры естественно также работают. Можно яваскриптом создавать файл и удалять его по окончании:

var Sound = (function () {
var df = document.createDocumentFragment();
return function Sound(src) {
var snd = new Audio(src);
df.appendChild(snd); // keep in fragment until finished playing
snd.addEventListener("ended", function () {df.removeChild(snd);});
snd.play();
return snd;
}
}());
// Используем
var snd = Sound("data:audio/wav;base64," + base64string);

vw.setWebViewClient(new WebViewClient() {
public MediaPlayer mp;
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if(url.endsWith(".mp3")){
//url = url.replace("file:///android_asset/webpages/";, "");
try {
AssetFileDescriptor afd = getAssets().openFd(url);
mp = new MediaPlayer();
mp.setDataSource(afd.getFileDescriptor(), afd.getStartOffset(), afd.getLength());
afd.close();
mp.prepare();
mp.start();
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
else if (url.indexOf("tel:") > -1) {
startActivity(new Intent(Intent.ACTION_DIAL, Uri.parse(url)));
} else {
view.loadUrl(url);
}
return true;
}
});

Также можете почитать комментарии к этому вопросу.

Некоторым ещё помогает метод webview loadDataWithBaseURL() . Его сть указать базовый адрес. Не смог применить его в этом плане. У кого получится - отпишитесь в комментариях.

Как бы не было грустно, но я пока нашёл единственный хороший способ воспроизводить звук из WebView - Javescript мост.

Java-Javascript мост

Мы уже писали о создании моста в , поэтому сразу к делу:

Обозначаем переменную:

MediaPlayer mp = new MediaPlayer();

А затем пишем функцию:

@JavascriptInterface
public void playBeep(String url) {
try {
if (mp.isPlaying()) {
mp.stop();
mp.release();
mp = new MediaPlayer();
}
else{
AssetFileDescriptor descriptor = mContext.getAssets().openFd(url);
mp.setDataSource(descriptor.getFileDescriptor(), descriptor.getStartOffset(), descriptor.getLength());
descriptor.close();
mp.prepare();
mp.setVolume(1f, 1f);
mp.setLooping(true);
mp.start();
}
} catch (Exception e) {
e.printStackTrace();
}
}

Теперь вам осталось только прикрутить это к вашему проекту и всё будет нормально.

Если у вас есть что добавить - обязательно пишите в комментариях.

Стратегия Брайана Мак Харга по успешной разработке кросс-браузерных, кросс-платформенных игр на HTML5.

HTML5: законный наследник престола флеш игр. По-настоящему кросс-платформенная разработка позволяет однажды написанную программу запустить и на ПК, и на планшете и смартфоне, она также будет работать и на Smart TV, и на настольных и мобильных устройствах, и в том числе на игровых консолях типа Xbox360 или PlayStation 3 через встроенные в них браузеры. Понятное дело, что это – очень привлекательно для тех, кто хочет разрабатывать игры для как можно большего количества устройств и платформ.

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

Для разработчиков это – коллективное существительное для множества различных технологий: JavaScript, WebSockets, WebAudio, Canvas, CSS3 и WebGL – это лишь некоторые из них, каждая с собственными стандартами, сильными слабыми ограничениями от платформы к платформе.

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

ПК против мобильноq кросс-платформенности

Сейчас всем нам известны фантастические примеры игр на HTML5, которые запускаются в браузерах ПК. Часто они создаются авторами браузеров, чтобы продемонстрировать особенно сильные стороны собственного программного обеспечения, или для конкретных API, которые им хотелось бы видеть ратифицированными в спецификации HTML5.

Такие игры, как Cutthe Rope и Contre Jour для Internet Explorer или некоторые из превосходных экспериментов для браузера Chrome, как Jam или Racer, – отличные тому примеры. Если вас интересует потенциал на будущее, посмотрите такие библиотеки, как three.js, недавно выпущенный опен-сорс Turbulenz, или Epic HTML5 на движке Unreal Engine.

Тем не менее, попробуйте взглянуть на один из этих примеров на Android с установленной OS2.3 (Gingerbread), и вы увидите совершенно другую картинку, а в некоторых случаях не увидите совершенно ничего. Да, этой операционной системе почти три года, но она до сих пор установлена на трети всех устройств на базе Android, и эта цифра может быть даже выше в зависимости от вашей целевой аудитории. И так происходит не только на старой версии Android. То же самое вы можете увидеть на устройствах Apple, работающих с системой iOS 5, или на менее мощных устройствах типа Kindle Fire. В самом деле, сейчас вы не найдете ни одного мобильного устройства, на котором будет корректно отображаться любая из вышеупомянутых программ.

Как уже упоминалось ранее, большинство клиентов выбирают HTML 5 для того, чтобы их браузерная игра была по-настоящему кросс-платформенной. Если вы разрабатываете игры только для ПК, то Unity и Flash – отличные варианты, на которые стоит обратить внимание. У обоих – отличная поддержка браузеров и возможность экспорта на устройства в виде отдельных приложений, благодаря чему они могут быть перенесены на смартфон или планшет с тем самым кодом, который вам необходим.

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

Чтобы получить представление о том, сколько существует вариантов, просто запустите один из многих тестов JavaScript для тестирования производительности устройства. К примеру, передача 100 кадров через Canvas будет воспроизводиться относительно хорошо на 60 кадрах в секунду на таких устройствах, как iPhone 4S или 5, Galaxy S3, Nexus 7 или Lumia 820. Но попробуйте тот же самый код на других устройствах типа HTC Desire (19 fps), Galaxy Ace (7 кадров) или IPad 1 (9 fps), и вам придется очень постараться, чтобы получить хоть что-то наподобие жизнеспособной игры.

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

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

Выберите свои битвы

В Чанк вот уже два года разрабатывает кросс-платформенные игры на HTML5 для вещательных компаний и брендов, и создали на основе браузера мобильные игры для клиентов типа BBC и Disney, которые запускаются на всех устройствах, от HTC Desire до iPad4, от Nexus 7 до Xbox 360.


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

И что же они вынесли из этого опыта? Ну, если бы надо было составить список из 10 лучших советов для разработчиков игр на HTML5, он выглядел бы следующим образом:

1. Определитесь с аудиторией

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

2. Определяйтесь с дизайном с точки зрения технологии

Да, это всегда должно быть так, но ограничения и фрагментация в HTML5 делают это еще более актуальным. WebGL позволит вам сделать превосходный 3D шутер от первого лица, но вряд ли (читайте – вообще не) это сработает на планшетах, если они находятся в списке ваших целевых платформ.

3. Подружитесь с caniuse.com

Это отличный способ быстро проверить поддержку любой функции HTML5, которые вы хотели бы использовать в своих разработках – практически для всех браузеров и устройств.

4. Используйте устройства, а не только симуляторы

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

5. Будьте в курсе изменений

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

6. Будьте гибкими в течение всего времени развития

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

7. Масштабируйте функциональность

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

8. KISS (Keep It Simple, Stupid) – Не усложняйте себе жизнь, глупенькие

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

9. Определитесь с продолжительностью жизни ваших разработок

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

Ах да. Проверяйте свои игры на всех доступных устройствах как можно чаще!

Гладиатор, ты поедешь по моему второму сигналу

HTML5, похоже, будет неофициальной основной технологией для разработки кросс-платформенных игр для разных браузеров, в этом нет ни малейшего сомнения. В данный момент – это не самое надежное пространство, но это нормально для технологий в зачаточном состоянии. Чтобы проверить возможности браузеров, стоит ознакомиться с сайтами типа caniuse.com. Регулярно проверяйте свои игры на как можно большем количестве доступных вам устройств, и будьте прагматичны с игровым дизайном. Это поможет вам избежать проблем не только сейчас, но и оказаться в более выигрышном положении, когда улучшится поддержка устройств, что неизбежно.

Вместо вступления.
Потратив несколько суток подряд (без перерыва на сон) на изучение поддержки HTML5 всеми любимыми Android-гаджетами, решил, что данной теме стоит уделить внимание. В статье постараюсь раскрыть по шагам все этапы (конечно же базовые/ключевые/основные) создания HTML5 Игрового приложения для Android от идеи до релиза самого APK файла.
Возможно, ничего нового я и не открою маститым разработчикам, но для новичков постараюсь описать все как можно проще, со скриншотами и пояснениями.

Желающих узнать подробнее приглашаю под кат.

Идея
Вообще много можно говорить о потенциале Android, о развитии HTML5 и об их взаимодействии. Я этого делать не буду. Так что, сразу к делу.

Идея создания игры под Android наверняка заседает в разумах десятков сотен разработчиков, и тех, кто себя таковыми считает. Я не исключение.

Почему HTML5? - Нативность. Пишешь игру на JS, а затем для абсолютно любой ОС создаешь обертку в удобном виде и на любом Языке.

Весь процесс будет разбит на несколько шагов а итоговое приложение будет состоять из двух частей:
- Обертка (в данном случае для Android)
- Игра

Шаг 1. Написание самой игры
Еще одним плюсом написания игры на HTML5 является тот факт, что для тестирования не требуется куча запущенных программ, IDE, эмуляторов и так далее. Нужен лишь браузер (в моем случае это Chromium) и текстовый редактор (BlueFish)

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

Для разработки игры буду использовать J2ds (игровой движок)

Код готовой игры:

index.html

Demo Game on J2ds v.0
// Инициализируем устройство ввода initInput("gameBody"); // Создаем сцену scene= createScene("iCanvas", "#aeeaae"); // Стартуем в полноэкранном режиме scene.fullScreen(true); post= createPost(scene); score= 5; // Создаем прямоугольники blue= createRect(vec2di(100, 100), vec2di(30, 30), "blue"); green= createRect(vec2di(300, 200), vec2di(30, 30), "green"); green.dX= -1; green.dY= 1; red= createRect(vec2di(16, 200), vec2di(30, 30), "red"); red.dX= 1; red.dY= -1; restart= createRect(vec2di(430, 10), vec2di(60, 60), "#ad21ad"); GameOver= function() { // Обрабатываем позицию касания / мыши input.upd(scene); // Выводим текст scene.drawText(vec2di(5,5), "Score: "+score); // Выводим текст scene.drawTextOpt(vec2df(140, 100), "Проиграл!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw(scene); } Success= function() { // Обрабатываем позицию касания / мыши input.upd(scene); // Выводим текст scene.drawText(vec2di(5,5), "Score: "+score); // Выводим текст scene.drawTextOpt(vec2df(140, 100), "Победа!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw(scene); } // Описываем игровое состояние Game Game= function() { // Обрабатываем позицию касания / мыши input.upd(scene); // Выводим текст scene.drawText(vec2di(5,5), "Score: "+score); blue.color= input.lClick?"yellow" : "blue"; if (input.lClick) { red.move(vec2di(red.dX, red.dY)); green.move(vec2di(green.dX, green.dY)); blue.move(vec2df(blue.getPosition().x > input.pos.x ? -1*score/2: 1*score/2, blue.getPosition().y > input.pos.y ? -1*score/2: 1*score/2)) ; if (green.collisionScene(scene).x != 0) green.dX= -green.dX; if (green.collisionScene(scene).y != 0) green.dY= -green.dY; if (red.collisionScene(scene).x != 0) red.dX= -red.dX; if (red.collisionScene(scene).y != 0) red.dY= -red.dY; } if (blue.collision(red)) { input.cancel(); score-= 1; setActivEngine(GameOver); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)); } if (blue.collision(green)) { input.cancel(); score+= 1; setActivEngine(Success); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)); blue.setPosition(vec2di(Random(0, 450), Random(0, 250))); } // Вращаем прямоугольники blue.turn(1); green.turn(720/blue.getDistance(green)); red.turn(Random(1, 5)); // Отрисовываем объекты green.draw(scene); blue.draw(scene); red.draw(scene); //post.motionBlur(4); } // Стартуем игру с игровым состоянием Game и FPS 25 startGame(Game, 30);

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

Шаг 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» для настройки эмулятора.

Тут, если ничего нет, жмем «Cereate Virtual Device», если есть, можете не создавать новый, у меня уже был, т.к. я «натыкал» его, пока разбирался. Если же вам нужно создать новый эмулятор, то там все просто:
1. Выбираем размер экрана и модель телефона
2. Выбираем версию андроида (у меня 4.4.2)
3. Настраиваем устройство.

На третьем шаге подробнее:

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

Когда все настройки введены, жмем на зеленый треугольник и запускаем эмулятор. После запуска ждем, когда устройство полностью загрузится и запустится ОС:

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

Можно запускать! Вот теперь точно можно.
Если появится запрос на выбор эмулятора - то можно поставить галочку внизу:

Мои поздравления! Все работает, проверено!

Сворачиваем наш эмулятор (Но не закрываем!) и переходим в редактор, Там все немного сложнее (чуть-чуть).
Переключиться нужно в режим «Text». У вас в activity_main описаны все элементы, которые есть на форме. Включая саму форму. Да и не форма это вовсе =).

Т.к. мы делаем игру в HTML5, а тут у нас только обертка для игры, удаляем весь текст и вставляем следующее:

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

Как видно, теперь вместо «Hello, World» во всю красуется растянутый на весь экран - WebView. Этот объект и является нашим «окном» в игровой мир.

Можете запустить даже, посмотреть, будет белый экран. Идем дальше.

А дальше нам нужно перейти в наш проект, для этого слева открываем поле «Project» и выбираем вкладку «Android», если не выбрана:

В этой вкладке представлена структура проекта и все его внутренние файлы и ресурсы.

Заголовок спойлера

Нам требуется найти файл «манифест» и дописать в определение «application» следующую строку:
android:hardwareAccelerated="true"

Пришло время поработать над функционалом нашего «браузера», ведь это именно он! Открываем класс «MainActivity.java» и удаляем все лишнее, оставив только основное:

Заголовок спойлера

Package com.soft.skaner.demogamehtml5; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }

Если не забыли, мы в файле activity_main добавили WebView, обратите внимание на выделенную жирным строчку:

Нам нужно объявить объект класса WebView.

Для этого к списку импортов дописываем:

Import android.webkit.WebView;

А затем объявляем наш объект myWeb внутри класса MainActivity:

Protected WebView myWeb;

Теперь, после строчки setContentView(R.layout.activity_main); вставляем следующий код:

/* Находим наш браузер */ myWeb= (WebView) findViewById(R.id.webView); /* Настраиваем наш браузер */ myWeb.getSettings().setUseWideViewPort(true); myWeb.setInitialScale(1); myWeb.getSettings().setJavaScriptEnabled(true); /* Загружаем страничку */ myWeb.loadUrl("file:///android_asset/index.html");

Вот что получилось у меня в редакторе:

А вот, что в эмуляторе:

Если у вас так же - мы на верном пути!

Осталось дело за небольшим:
Там, где мы подгружаем страницу нашему браузеру, путь к файлу выглядит так: «file:///android_asset/index.html»
Следует учесть, что любые файлы мы можем хранить внутри нашей игры, имея к ним доступ.

В нашем случае ключевая папка: «android_asset», давайте ее создадим (да, по умолчанию ее нет в проекте):
«File -> New -> Folder -> Assets folder», откроется окно где достаточно просто согласиться с IDE.
Заметили? В проекте появилась новая папка:

Жмем по ней правой кнопкой мыши -> «Show in Files», откроется системный проводник (в моем случае Nautilus), обратите внимание на путь к папке. Имейте так же ввиду, что папка называется «assets», но доступ к ней идет через «android_asset».

Дальше все совсем просто - копируем нашу игру в папку assets:

Файл index.html - это тот самый index из начала этой статьи. Ну что, пробуем запустить!

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

Шаг 3. Android Studio. Сборка приложения и его подписывание

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

Для создания ключей в этой IDE есть специальная утилита «KeyTool».

Переходим к созданию исполняемого файла приложения («Build -> Generate Signed APK»):

Если ранее ключей и алиасов вы не создавали, нажимайте «Create New»
Заполнить поля можете на свое усмотрение, достоверность данных целиком лежит на вас.

Первое поле - это путь к папке, в которую будет сохранен ключ.
Форма после нажатия Ok заполнится автоматически:

Для последующих приложений создавать новые ключи не обязательно, вы можете подписывать вашим ключем и другие приложения, именно для этого и есть кнопка «Choose Existing»
На следующем шаге IDE попросит у вас еще раз ввести пароль, а затем указать папку для сохранения APK файла.
admin в рубрике Без рубрики. Добавьте в закладки .

The underlying technology that makes HTML5 games possible is a combination of HTML and JavaScript. Hypertext Markup Language (HTML) was part of the early Internet superhighway as they called it back then and has continued to be used to serve every website today. JavaScript code was added to second version browsers like Netscape 2.0 in 1995 and has evolved over the years to become more pleasant to read and write. In the early days, it was referred to as DHTML or dynamic HTML because it allowed for interactive content without a page refresh. However, it was difficult to learn and use in the early web era. Over time, Javascript with the help of the Google Chrome developers became one of the fastest scripting languages. It also has more freely available modules, libraries, and scripts than any other coding language.

The early DHTML games were very simple. Some examples of the games back then were Tic-Tac-Toe and . As games made with this technology use the open standard of HTML5, these relatively ancient games are still playable today in a modern web browser. These technologies have moved to the forefront of browser games because they don"t require plugins and are safer to play than older technologies. HTML5 games also support and the capability has improved to support complex 2D and

Бесплатные игры на Андроид. Сделаны на html5, поэтому в них можно играть на телефоне и планшете. Кроме системы Android поддерживается Windows, Linux, Mac и мобильные аппараты от Apple. Главное, чтобы браузер был современным и система новой. Управление мышкой или тачскрином.

Игры на Андроиде – идеальный вариант. В них можно играть на компьютере и телефоне. Их можно скачать (установить) для быстрого доступа.

Как скачать HTML5 игру на телефон

Зайдите на страницу игры на нашем сайте. Откройте игру во весь экран в современном браузере типа Chrome. Щелкните в браузере на кнопке с тремя точками, которая скрывает команды меню для работы со страницей. Прокрутите список вниз и выберите “Добавить игру на главный экран” (Add to Main Screen – если у вас не русифицированный Хром). После этого игра появится на экране вашего телефона и ее можно будет запускать прямым запуском, без запуска браузера.

Эта операция доступна для телефонов и планшетов Android и Apple, но у последних команда может находиться в другом месте – в нижнем меню Safari.

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

Установить как нормальную игру на Android

Практически у каждой HTML5 игры есть ее версия под операционную систему Android или iOS. Если установка HTML5 игры на главный экран вам не подходит – скажем, вам хочется играть постоянно, а не только когда есть интернет – то ищите в заставках игр значок Google Play и AppStore. Хотя под яблочные устройства игры выпускаются реже, и чаще можно увидеть именно только андроидные кнопки, вроде такой:

Кнопка установки – ищите ее в играх

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

Любителям игры на Андроиде посвящается…

Когда мне только рассказали, что такое существует – я и особого внимания не обратил, так как вообще не являюсь большим поклонником всех этих новомодных веяний. Однако потом я понял, что игры на Андроид являются чем-то наподобие «приставочных» игрушек – сразу же захотелось попробовать, что это такое. До сих пор помню, насколько мне казались увлекательными игры для «восьмибитной» приставке Денди или Сега. А тут вот цивилизация до чего докатилась – подумать только, телефон без кнопочек и с функцией, позволяющей в игры играть. Заманчиво, ничего не скажешь!

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

Очевидные преимущества HTML5

Ни для кого не является секретом тот факт, что HTML5 вытесняет Флеш и является базовым средством для современного Web. Именно по этой причине, созданные на его основе игры стали функционировать и в пределах Интернета – более того, на сегодняшний день игры, дающие возможность конкурировать с другими пользователями, все чаще предоставляют интерес для клиентов (особенно в том случае, если же ее не надо будет скачивать и устанавливать у себя на компьютере). Эта особенность, в свою очередь, помогает избавиться от многих вредоносных программ, которые не дают возможности работать за своим ПК.

Все эти игры на Андроид и ПК созданы под современные браузеры и для своего успешного функционирования они требуют только лишь JavaScript, Canvas и HTML5. В зависимости от того, какие задачи надо будет выполнять во время этой игры, принято выделять некоторые разновидности:

• Аркадные
• Логические
• Стратегии
• Леталки
• Приключения
• Гонки
• Скачиваемые
• Браузерные

Примеры онлайн игр на Aндроид

Раньше меня игры на телефон не интересовали вообще, но все изменилось после того, как я попал на сайт сайт. Там я ознакомился с тем, что такое онлайн игры на Aндроид, перепробовал огромное количество самых разных «игрушек». Как по мне, лучшие игры на Aндроид, представленные на этом сайте (да и не только на этом) – маджонг и .

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

Больше всего мне понравился этот сайт по тому, что на нем представлены самые разные виды онлайновых игр, а кроме того – действительно, они все требуют самую малость в плане программного обеспечения (реально, кроме JavaScript, Canvas и HTML5 ничего не потребуется для их работы).

Бесплатные игры для Андроид

Благодаря модели Free2Play, все представленные на этом сайте игры на Aндроид бесплатны. В них можно играть во весь экран и на компьютере, и на планшете. Но главное, что отличает их от флеш-игр – это то, что в них наконец-то можно играть на телефоне.