Разработка кроссплатформенной игры HTML5: часть 1

Улучшение FPS с помощью субканваз

В нашей самой последней игре Word Wars FPS в мобильном Safari поначалу был ужасным.

Поскольку каждая плитка в нашей игре имеет градиенты и что-то, что не должно выглядеть хорошо, перерисовка этих градиентов 60 раз в секунду действительно сильно загружает процессор. Word Wars имеет четыре типа плиток: серый (невыбранный), синий (выбранный), зеленый (правильный), красный (неправильный). Решением нашей низкой частоты кадров было то, что для каждого типа, когда мы изначально загружаем страницу, мы рисуем их и сохраняем их в подканале и используем эту подкану в drawImage (). Вот посмотрите, как мы это делаем:

var insetCircle = document.createElement('canvas');
var redCircle   = document.createElement('canvas');
var blueCircle  = document.createElement('canvas');
var greenCircle = document.createElement('canvas');
var renderTile = function(circle, color1, color2, outglow1, outglow2, strokeColor)
{
    circle.width = size; // size is something we set elsewhere for fluid width & height
    circle.height = size;
    var innerGlow = ctx.createRadialGradient(0, 0, size/2-4, 0, 0, size/2); // Gradient for looks
    innerGlow.addColorStop(0, 'rgba(255,255,255,0)');
    innerGlow.addColorStop(1, 'rgba(255,255,255,.2)');
    var cctx = circle.getContext('2d');
    cctx.translate(size/2, size/2); // center of circle
    var grdRedLin  = cctx.createLinearGradient(0, -size/2, 0, size/2);
    grdRedLin.addColorStop(0, color1);
    grdRedLin.addColorStop(1, color2);
    cctx.save();
    outerGlow(outglow1, outglow2, cctx);
    cctx.beginPath();
    cctx.arc(0, 0, size/2, 0, 2*Math.PI);
    cctx.strokeStyle = strokeColor;
    cctx.lineWidth = 4;
    cctx.stroke();   
    cctx.fillStyle = grdRedLin;
    cctx.fill();
    cctx.fillStyle = innerGlow;
    cctx.fill();
}
var renderAllTiles = function() {
    // Render each tile in its own canvas
    renderTile(redCircle, '#a52222', '#7e0101', '#a52222', 'rgba(165, 34, 34, 0)', '#520101');
    renderTile(blueCircle, '#1d97c9', '#0a7cab', '#7bb5c5', 'rgba(123, 181, 197, 0)', '#105a78');
    renderTile(greenCircle, '#1dc924', '#0faf15', '#1dc924', 'rgba(29, 201, 36, 0)', '#107814');
    insetCircle.width = size;
    insetCircle.height = size;
    var cctx = insetCircle.getContext('2d');
    cctx.translate(size/2+50, size/2+50);
    cctx.lineWidth = Math.floor(size * 0.1);
    cctx.strokeStyle = 'rgba(255,255,255,.25)';
    // draw the rest of the tile
    cctx.beginPath();
    cctx.arc(0, 0, size/2, 0, 2*Math.PI);   
    cctx.stroke();
    var grd = ctx.createRadialGradient(0, 0, 10, 0, 0, size/2);
    grd.addColorStop(0, 'rgba(255,255,255,.1)');
    grd.addColorStop(1, '#a1aaae');
    cctx.fillStyle = grd;
    cctx.fill();
}
renderAllTiles();

// Actually rendering them (render() is called with requestAnimationFrame())
var circles = [insetCircle, blueCircle, greenCircle, redCircle]; // These correspond to tile states
var render = function()
{
    // ...
    ctx.drawImage(circles[tiles[i].state], Math.floor(-size/2), Math.floor(-size/2), size, size);
    // ...
}

Приведенный выше код визуализирует каждый из 4 типов плиток на своем собственном холсте, и когда нам нужно отобразить его на главном холсте, мы ссылаемся на субканву в ctx.drawImage (). Затем мы добавляем что-нибудь динамическое поверх плиток (в нашем случае это буквы).

Вот и все к части 1. Часто проверяйте части 2 и 3, где я расскажу об обработке различных типов ввода, а также о безопасности для игр с JavaScript и бэкэндом.

Если вы заинтересованы в разработке игр на HTML5, посмотрите API разработчика clay.io
где мы заботимся о достижениях, списках лидеров, обработке платежей, социальной интеграции, входе пользователей в систему, многопользовательских комнатах, скриншотах и ​​нескольких вещах, которые я упомянул в этом посте. Если у вас есть какие-либо отзывы об API или идеи о том, как мы можем сделать вашу жизнь проще, дайте мне знать в комментариях!