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

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

  1. Прямо сейчас у меня есть фоновая карта, к которой применен тайловый лист PNG со спектром света/тени — переходя от самой темной плитки к полностью прозрачной. По умолчанию самая темная плитка рисуется по всему уровню при запуске, закрывая все остальные слои и т. д.
  2. Я использую предопределенные размеры плитки (40 x 40 пикселей) для вычисления положения каждой плитки и сохранения ее координат x и y в массиве.
  3. Затем я создаю прозрачный объект «сетка» размером 40 x 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 );
}

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

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


javascript html proximity lighting
person spectralbat    schedule 27.03.2012    source источник
comment
Естественно, интенсивность света обратно пропорциональна квадрату расстояния от источника света. Кстати, это звучит как вопрос для gamedev.stackexchange.com.   -  person default locale    schedule 27.03.2012
comment
У вас есть пример того, что у вас есть прямо сейчас? Может быть, упрощенно, может быть, на jsfiddle?   -  person    schedule 29.03.2012

Ответы (1)


arrow_upward
0
arrow_downward 

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/

person Rakka Rage    schedule 29.03.2012