使用HTML5/JavaScript游戏中的瓦片创建平滑的光照过渡

Question

我正在尝试在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 );
}       

问题在于，如我所述，这种计算方法不能使光源看起来非常自然。平铺切换的效果太过突兀，理想情况下，它们应该使用颜色谱瓷砖表（我从另一个游戏复制了该瓷砖表，该游戏能够做到这一点，因此我知道瓷砖阴影不是问题，但我不确定其他游戏是如何做到的）。我考虑，也许我使用百分比切换瓷砖的方法可以被更好/更动态的接近公式所取代，以实现更平滑的转换？是否有人有什么想法来改善这里的视觉效果，或者更好的计算每个瓷砖收集到的信息的接近度的方法？

- spectralbat

---

自然光强度与光源距离的平方成反比。顺便说一句，这似乎是一个适合在http://gamedev.stackexchange.com/上提问的问题。 - default locale

你有现在所拥有的示例吗？可以是简化版的，也可以在jsfiddle上展示吗？ - user1276209

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/

- Rakka Rage