Создание плавных переходов освещения с использованием плиток в игре HTML5 / JavaScript

Question

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

1. Прямо сейчас у меня есть фоновая карта, к которой применена таблица плиток PNG со спектром света / тени - от самой темной плитки до полностью прозрачной. По умолчанию самая темная плитка рисуется по всему уровню при запуске, покрывая все другие слои и т. Д.
2. Я использую мои заранее определенные размеры плиток (40 x 40 пикселей), чтобы вычислить положение каждой плитки и сохранить ее координаты x и y в массиве.
3. Затем я создаю прозрачную сущность размером 40 х 40 пикселей в «блоке сетки» в каждой позиции массива
4. Движок, который я использую ([ImpactJS] [1]), затем позволяет мне рассчитать расстояние от объекта источника света до каждого экземпляра этого объекта блока сетки.
5. Затем я могу заменить плитку под каждой из этих плиток блока сетки плиткой соответствующей прозрачности.

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

var dist = this.distanceTo( ig.game.player );

var percentage = 100 * dist / 960;

if (percentage < 2) {
    // Spawns tile 64 of the shadow spectrum tilesheet at the specified position
    ig.game.backgroundMaps[2].setTile( this.pos.x, this.pos.y, 64 ); 
} else if (percentage < 4) {
    ig.game.backgroundMaps[2].setTile( this.pos.x, this.pos.y, 63 );
} else if (percentage < 6) {
    ig.game.backgroundMaps[2].setTile( this.pos.x, this.pos.y, 62 );
}       

(извините за странный интервал, я до сих пор не понял, как правильно вставить сюда код)

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

Answer 1

var size = 32;
var a = [size];

for (i = 0; i < size; i++) {
    a[i] = [size];
    for (y = 0; y < size; y++) {
        a[i][y] = 1;
    }
}

function display(arr) {
    h = "";
    for (y = 0; y < size; y++) {
        for (x = 0; x < size; x++) {
            h += "<span style='background-color:rgba(255,255,255," + (arr[x][y] / 10) + ")'></span>";
            if (x == size - 1) {
                h += "<br/>";
            }
        }
    }
    $("#h").html(h);
}

function LightSource(x, y, l) {
    this.x = x;
    this.y = y;
    this.l = l;
}

var ls = [];
ls.push(new LightSource(6, 6, 4));
ls.push(new LightSource(2, 2, 3));
ls.push(new LightSource(9, 9, 5));
ls.push(new LightSource(20, 14, 8));
ls.push(new LightSource(20, 19, 8));

for (z = 0; z < ls.length; z++) {
    for (x = 0; x < size; x++) {
        for (y = 0; y < size; y++) {
            xd = x - ls[z].x;
            yd = y - ls[z].y;
            dist = Math.sqrt(xd * xd + yd * yd);
            if (ls[z].l - dist > 0) {
                a[x][y] += ((10 - a[x][y]) / 10) * (ls[z].l - dist);
            }
        }
    }
}

display(a);​

https://gamedev.stackexchange.com/questions/23454/grid-cell-based-light-system

http://jsfiddle.net/ZmPqL/

http://jsfiddle.net/vCgeM/