Emscripten: события клавиатуры в iframe

Столкнулся с проблемой на itch.io, когда приложение запущенной внутри iframe не получает события клавиатуры. Придумал вот такой workaround:

postRun: (function() {
                window.addEventListener('mousedown', function(evt) {
                    window.focus();
                    evt.preventDefault();
                    evt.stopPropagation();
                    evt.target.style.cursor = 'default';
                }, false);
            })(),

К событию postRun добавляем установку листенера на событие mousedown. Теперь при клике мышью на канавасе с игрой события от клавиатуры будут передаваться в наше приложение.

Way of Tanks

Way of Tanks Way of Tanks – это танковый ранер с бесконечным геймплеем и разнообразной трассой. Игрок свайпами (или кнопками клавиатуры, или жестами на пульте Apple TV) управляет танком. Задача игрока преодолеть как можно большую дистанцию не столкнувшись с препятствиями и не погибнув в бою с боссами. Так может перемещаться с дорожки на дорожку, стрелять и перепрыгивать рвы (да, вот такой современный танк). В игре есть различные поверапы, которые временно улучшают характеристики танка – маневренность, супер-снаряд, удвоение собранных денег, способность пробивать препятствия. Так же игрок может приобрести, за собранные во время гонки деньги, новый улучшенный танк. Всего в игре четыре танка, которые отличаются по характеристикам и возможностям.
» Read more

Road Fighter

Road Fighter Road Fighter — видеоигра в жанре аркадных автогонок, разработанная компанией Konami и выпущенная в виде игрового автомата 7 декабря 1984 года. Позднее были выпущены версии для компьютеров стандарта MSX1 (1985) и для игровой консоли Nintendo Entertainment System (1985 в Японии и 1991 в Европе).
» Read more

Texture Packer

Texture Packer для Linux и macOS – утилита, которая упаковывает набор входных изображений в один большой атлас. Утилита консольная, что удобно для автоматизации.

Из возможностей:

  • Достаточно шустрая. Сравнивал с “обычным платным” (с) пакером.
  • Умеет создавать Power of Two атлас.
  • Можно ограничить максимальный размер атласа.
  • Умеет отрезать “лишние” пиксели (trim) у входных изображений.
  • Может добавить бордюр нужного размера вокруг изображений при размещении в атласе.

Утилита делалась для себя, а теперь доступна на Bitbucket – Texture Packer.

Emscripten + OS X El Capitan

Emscripten Emscripten is an LLVM-based project that compiles C and C++ into highly-optimizable JavaScript in asm.js format. This lets you run C and C++ on the web at near-native speed, without plugins.

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

Правильный способ установки Emscripten с помощью brew:

# устанавливаем emscripten как обычно:
$ brew install emscripten

# запускаем emcc, что бы он создал файл ~/.emscripten
$ emcc

# исправляем LLVM_ROOT:
$ vim ~/.emscripten

Должно получиться как-то так:

LLVM_ROOT = '/usr/local/opt/emscripten/libexec/llvm/bin'

К сожалению с помощью brew правильно установить emscripten под OS X El Capitan мне не удалось.
Я не смог найти какую-либо информацию по правильной установке emscripten с помощью brew, поэтому получилась вот такая магическая инструкция.

Список шагов для установки emscripten из-под OS X:

  • С официального сайта качаем портабельную версию emscripten – http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html#sdk-download-and-install
  • Распаковываем и запускаем ./emsdk update.
  • С помощью команды ./emsdk list можно посмотреть список доступных пакетов, утилит и sdk.
  • С помощью комады ./emsdk install latest устанавливаем самые последние версии.
  • Командой ./emsdk activate активируем переменные окружения emscripten.
  • Теперь при необходимости сборки проекта инициализируем переменные окружения с помощью команды source ./emsdk_env.sh.
  • По желанию можно прописать путь к директории с emsdk.

Gradle, Lint: [MissingTranslation]

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

Если нужно полностью подавить сообщение об ошибке, то в build.gradle достаточно добавить такие параметры:

lintOptions
{
   disable 'MissingTranslation'
}

Если нужно подавить сообщение об ошибке только для определенных файлов, то добавляются такие атрибуты в каждый файл:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools" tools:ignore="MissingTranslation">

GLSL: Clock style bar

Clock (GLSL) Написал GLES шейдер, который имитирует круговое заполнение энергии (прогресса, маны, etc.). Код шейдера и демонстрация работы доступна на сайте ShaderToy.

#define M_PI 3.1415926535897932384626433832795

vec4 col = vec4(0.0, 0.0, 0.0, 0.0);

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    float angle = mod(iGlobalTime, M_PI * 2.0);

    vec2 p = (iResolution.xy - 2.0 * fragCoord.xy) / iResolution.y;

    float q = atan(-p.x, p.y);
    float f = step(0.0, cos((q + angle) * 0.5));

    // mix with texture
    vec2 uv = fragCoord.xy / iResolution.xy;
    vec4 tc = texture2D(iChannel0, uv);
    fragColor = mix(tc, col, f);
}

Android: завершение приложения

Для “завершения” приложения на Android я раньше делал finish() из Activity и exit() из NDK.
Это далеко не лучший, хотя и кардинально чистящий вариант.

После некоторых раздумий решил завершать apploop и дергать из Activity “хоум скрин”:

Intent startMain = new Intent(Intent.ACTION_MAIN);
startMain.addCategory(Intent.CATEGORY_HOME);
startMain.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startMain.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(startMain);