Локальное тестирование Facebook Instant Games

Facebook Instant Games Для тестирования игры для платформы Facebook Instant Games есть несколько вариантов:
– Создание тестовой версии продукта в контрольной панели.
– Тестирование локально, без необходимости загрузки игры на сервер Facebook.

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

Подробности и иструкция на официальной странице – Testing, Publishing, and Sharing an Instant Game.

JavaScript string length

В веб-версии моего http-загрузчика обнаружилась проблема – длина responseText отличается от реального размера файла. Оказалось, что файл содержал русскую строку текста в utf-8. А я размер получал как responseText.length – длина строки в символах, но не байтах.

Проблема решилась просто – используем Blob:

let size = new Blob([this.responseText]).size;

MySQL: Insert or Update

Есть отличный проект Nakama https://heroiclabs.com но я продолжаю использовать свою реализацию Leaderboards и Profile Storage.

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

'INSERT INTO `some_table`' +
' (`user_id`, `timestamp`, `user_name`, `score`)' +
' VALUES(?, NOW(), ?, ?)' +
' ON DUPLICATE KEY UPDATE' +
' `timestamp`=NOW(), `user_name`=?,' +
' `score`=GREATEST(`score`, VALUES(`score`))';

Для работы этого запроса поле `user_id` должно быть UNIQUE.

Android NDK native APIs

Постоянно забываю какой API level какому Android относится.
Сводня табличка по стабильным версиям API NDK.
И что бы два раза не вставать – заметки по SDK platform, а заодно и ассеты Android.
Долгое время я использовал API 16, что соответствует Android 4.1 и Android 4.1.1. Сегодня решил в одной игре перейти на API 21. Перед публикацией посмотрю статистику количества отвалившихся пользователей этой игры из-за переходя на новую версию API.

Книга «Шаблоны игрового программирования»

Шаблоны игрового программирования Перевод книги Game Programming Patterns by Robert Nystrom. Книга была создана для удобного чтения на русском языке в формате электронной книги.

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

Краткий список шаблонов, которые рассмотрены в книге: Command, Flyweight, Observer, Prototype, Singleton, State, Component, Event Queue и прочее.

На сайте автора http://gameprogrammingpatterns.com/ можно заказать печатную или электронную версию книги на английском языке.

Загрузка и кодирование в base64 на JavaScript

Для шаринга и инвайта в Facebook / Instant Games нужно в качестве параметра image передать картинку, закодированную в base64. Можно сделать это в offline, но это увеличит размер дистрибутива и увеличит время загрузки игры. Значит это не наш метод.

Я делаю это в рантайме с помощью XMLHttpRequest и FileReader:

function toDataURL(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

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

Conan – менеджер пакетов C/C++

Conan C/C++ package manager Благодаря LORу узнал о менеджере пакетов Conan C/C++ package manager. Это консольныя, децентрализованаая и кроссплатформенная (заявлена поддержка Windows, Linux, OSX, FreeBSD, и SunOS) утилита предназначенная для упрощения жизни разработчика.
Поддеживаются различные билд-системы – Visual Studio MSBuild, CMake, Makefiles, SCons, и многие другие. Как сказано в документации, Conan’у вообще монопенисуально, какую били-систему вы используете.

И все это под лицензией MIT. То, чего так давно ждут разрабочики от “нового” стандарта C++.

Emscripten initialization

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

По-умолчанию этот параметр установлен в TRUE. И сегодня я получил слайд-шоу, установив его в значение по-умолчанию.

EmscriptenWebGLContextAttributes attr;
emscripten_webgl_init_context_attributes(&attr);

attr.alpha = EM_FALSE;
attr.depth = EM_FALSE;
attr.stencil = EM_FALSE;
attr.antialias = EM_FALSE; // <-- this should be set to FALSE!
attr.preserveDrawingBuffer = EM_FALSE;
attr.preferLowPowerToHighPerformance = EM_FALSE;
attr.failIfMajorPerformanceCaveat = EM_FALSE;
attr.enableExtensionsByDefault = EM_TRUE;
attr.premultipliedAlpha = EM_TRUE;
attr.majorVersion = 1;
attr.minorVersion = 0;

EMSCRIPTEN_WEBGL_CONTEXT_HANDLE ctx = emscripten_webgl_create_context(nullptr, &attr);
emscripten_webgl_make_context_current(ctx);

Emscripten HiDPI

На HiDPI мониторах downscaled текстуры выглядят мягко говоря не очень красиво. Искал способ решить эту проблему. В итоге мои исследования привели к такому не самому легковесному решению.

  1. Получить device pixel ratio для настройки размров canvas.
  2. Получить размер canvas и разрешение css.
  3. На их основе вычислить отношение.
  4. Использовать это отношение для расчета координат мыши и тача.

После этого все будет выглядеть красиво на HiDPI мониторах. Но есть одна “особенность” – увеличенный (в зависимости от отношения размеров css и canvas) в несколько раз фреймбуфер. При отношении равном 2, получаем размер фреймбуфера в четыре раза больший, со всеми вытекающими.

Немного кода

CSS

canvas {
    width: 100vw;
    height: 100vh;
    display: block;
}

JavaScript

window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
    var realToCSSPixels = window.devicePixelRatio;

    var displayWidth  = Math.floor(canvas.clientWidth  * realToCSSPixels);
    var displayHeight = Math.floor(canvas.clientHeight * realToCSSPixels);

    if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
        canvas.width  = displayWidth;
        canvas.height = displayHeight;
    }
}

resizeCanvas();

C++

int width, height;
emscripten_get_canvas_element_size(nullptr, &width, &height);

double cssWidth, cssHeight;
emscripten_get_element_css_size(nullptr, &cssWidth, &cssHeight);

const auto ratiox = (float)(width / cssWidth);
const auto ration = (float)(height / cssHeight);

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

1 2 3 11