Question

我正在尝试使用磁贴替换在HTML5 / JavaScript游戏中实现照明效果。我现在拥有的是一种工作方式，但是当光源移动时，过渡看起来不够平滑/自然。这就是我现在的位置：

现在我有一个背景地图，它有一个光/阴影光谱PNG瓷砖应用于它 - 从最暗的瓷砖到完全透明。默认情况下，最暗的图块在启动时绘制在整个层面上，覆盖所有其他图层等。
我使用预定的瓷砖尺寸（40 x 40px）来计算每个瓷砖的位置，并将其x和y坐标存储在一个数组中。
然后我在阵列的每个位置产生一个透明的40 x 40px“网格块”实体
我正在使用的引擎（[ImpactJS] [1]）然后允许我计算从我的光源实体到该网格块实体的每个实例的距离。
然后，我可以使用适当透明度的图块替换每个网格块图块下方的图块。

目前，我正在地图中生成的网格块实体的每个实例中进行这样的计算：

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/

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

1 个答案: