高效的基于2D瓷砖的照明系统

时间:2013-08-30 04:55:12

标签: java 2d tile lighting

在Java中为基于磁贴的引擎进行照明的最有效方法是什么? 它会在瓷砖后面放置黑色背景并更改瓷砖的alpha吗? 或者把黑色前景改成那个?还是其他什么?

这是我想要的那种照明的一个例子:
http://i.stack.imgur.com/F5Lzo.png

3 个答案:

答案 0 :(得分:19)

有很多方法可以实现这一目标。花一些时间做出最终决定。我将简要总结一些您可以选择使用的技术并最终提供一些代码。


硬照明

如果要创建硬边照明效果(如示例图像), 我想到了一些方法:

hard light example

快速而肮脏(如您所知)

  • 使用黑色背景
  • 根据黑暗
  • 设置切片的alpha值
  

问题是,你既不能使瓷砖比之前更亮(高光),也不能改变光的颜色。这些都是通常使游戏中的灯光看起来很好的方面。

第二组瓷砖

  • 使用第二组(黑色/彩色)瓷砖
  • 将这些放在主要瓷砖上
  • 根据新颜色的强度来设置新切片的alpha值。
  

这种方法与第一种方法具有相同的效果,现在您可以使用另一种颜色而不是黑色对覆盖图块进行着色,这样就可以同时使用彩色灯光和高光。

实施例: hard light with black tiles example

  

即使这很容易,但问题是,这确实是一种非常无效的方式。 (每个图块有两个渲染的图块,不断的重新着色,许多渲染操作等。)


更有效的方法(硬和/或软照明)

在查看你的例子时,我想光总是来自特定的源瓦(角色,火炬等)

  • 对于每种类型的灯光(大火炬,小火炬,人物照明)你 创建一个图像,表示相对于源图块(光罩)的特定光照行为。火炬可能是这样的(白色是阿尔法):

centered light mask

  • 对于每个作为光源的图块,您将此图像作为叠加层在源位置渲染。
  • 要添加一些浅色,您可以使用例如10%不透明的橙色而不是完整的alpha。

结果

image mask hard light result

添加柔和的光线

现在柔和的灯光没什么大不了的,只需在灯罩上使用更多的细节。通过在通常的黑色区域中仅使用15%的alpha,您可以在瓷砖未点亮时添加低视效:

soft light

  

只需更改遮罩图像,您甚至可以轻松实现更复杂的照明形式(视锥细胞等)。

多个光源

组合多个光源时,这种方法会导致问题: 绘制两个相互交叉的面具可能会自行取消:

mask cancellation

我们想要的是他们添加灯光而不是减去灯光。 避免问题:

  • 反转所有光线遮罩(alpha为暗区,不透明为浅色区域)
  • 将所有这些光罩渲染为与视口尺寸相同的临时图像
  • 在整个场景中反转并渲染新图像(就好像它是唯一的光罩)。

这会产生类似于此的东西: result image

掩码反转方法的代码

假设您首先渲染BufferedImage中的所有图块, 我将提供一些类似于最后显示的方法的指导代码(仅灰度支持)。

多个光掩模,例如火炬和球员可以像这样组合:

public BufferedImage combineMasks(BufferedImage[] images)
{
    // create the new image, canvas size is the max. of all image sizes
    int w, h;

    for (BufferedImage img : images)
    {
        w = img.getWidth() > w ? img.getWidth() : w;
        h = img.getHeight() > h ? img.getHeight() : h;
    }

    BufferedImage combined = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);

    // paint all images, preserving the alpha channels
    Graphics g = combined.getGraphics();

    for (BufferedImage img : images)
        g.drawImage(img, 0, 0, null);

    return combined;
}

使用此方法创建并应用最终蒙版:

public void applyGrayscaleMaskToAlpha(BufferedImage image, BufferedImage mask)
{
    int width = image.getWidth();
    int height = image.getHeight();

    int[] imagePixels = image.getRGB(0, 0, width, height, null, 0, width);
    int[] maskPixels = mask.getRGB(0, 0, width, height, null, 0, width);

    for (int i = 0; i < imagePixels.length; i++)
    {
        int color = imagePixels[i] & 0x00ffffff; // Mask preexisting alpha

        // get alpha from color int
        // be careful, an alpha mask works the other way round, so we have to subtract this from 255
        int alpha = (maskPixels[i] >> 24) & 0xff;
        imagePixels[i] = color | alpha;
    }

    image.setRGB(0, 0, width, height, imagePixels, 0, width);
}

如上所述,这是一个原始的例子。实现颜色混合可能需要更多的工作。

答案 1 :(得分:9)

光线追踪可能是最简单的方法。

  • 你可以存储哪些瓷砖已经被看到(用于自动化,用于'在被蒙蔽时记住你的地图',也许用于迷你地图等)。
  • 你只展示你所看到的东西 - 也许是墙上或山上的怪物阻挡了你的视线,然后光线追踪就此停止了
  • 可以看到遥远的'发光物体'或其他光源(火炬熔岩),即使你自己的光源没有到达很远的地方。
  • 光线的长度将用于检查光量(褪色光)
  • 也许您有一个特殊的传感器(ESP,黄金/食物检测),用于查找不在您视野中的物体?光线跟踪可能也有帮助^^

这怎么办容易?

  • 从您的播放器中绘制一条线到地图边界的每个点(使用Bresehhams算法http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm 沿着那条线(从你的角色到最后)走,直到你的视线被阻挡;在这一点上停止你的搜索(或者可能做最后一次最后的迭代,看看你做了什么)
  • 对于您线路上的每个点设置lighning(距离1可能为100%,距离2可能为70%,依此类推)并标记您将地图图块视为已访问

也许你不会沿着整个地图走路,也许只要你设置你的光线跟踪20x20视图就足够了? 注意:你真的必须沿着视口的边界走,它不需要跟踪每个点。

我正在添加行算法以简化您的工作:

public static ArrayList<Point> getLine(Point start, Point target) {
    ArrayList<Point> ret = new ArrayList<Point>();
    int x0 =  start.x;
    int y0 =  start.y;

    int x1 = target.x;
    int y1 = target.y;

    int sx = 0;
    int sy = 0;

    int dx =  Math.abs(x1-x0);
    sx = x0<x1 ? 1 : -1;
    int dy = -1*Math.abs(y1-y0);
    sy = y0<y1 ? 1 : -1; 
    int err = dx+dy, e2; /* error value e_xy */

    for(;;){  /* loop */
        ret.add( new Point(x0,y0) );
        if (x0==x1 && y0==y1) break;
        e2 = 2*err;
        if (e2 >= dy) { err += dy; x0 += sx; } /* e_xy+e_x > 0 */
        if (e2 <= dx) { err += dx; y0 += sy; } /* e_xy+e_y < 0 */
    }

    return ret;
}

前段时间我完成了这一闪电事件,* pathfindin随时可以提出进一步的问题

Appendum: 也许我可以简单地为光线追踪添加小算法^^

获得北方和北方南边境点只使用此片段:

for (int x = 0; x <map.WIDTH; x++){
    Point northBorderPoint = new Point(x,0);
    Point southBorderPoint = new Point(x,map.HEIGHT);

    rayTrace( getLine(player.getPos(), northBorderPoint), player.getLightRadius()) );
    rayTrace( getLine(player.getPos(), southBorderPoint, player.getLightRadius()) );
}

并且光线跟踪的工作原理如下:

private static void rayTrace(ArrayList<Point> line, WorldMap map, int radius) {

    //int radius = radius from light source     
    for (Point p: line){

        boolean doContinue = true;
        float d = distance(line.get(0), p);

        //caclulate light linear 100%...0% 
        float amountLight = (radius - d) / radius;  
        if (amountLight < 0 ){
            amountLight = 0;
        }

        map.setLight( p, amountLight );

        if ( ! map.isViewBlocked(p) ){ //can be blockeb dy wall, or monster  
            doContinue = false;
            break;
        }

    }
}

答案 2 :(得分:1)

我现在已经进入独立游戏开发大约三年了。我这样做的方法首先是使用OpenGL,这样你就可以获得GPU的图形计算能力的所有好处(希望你已经这样做了)。假设我们从VBO中的所有瓷砖开始,完全点亮。现在,有几种方法可以达到你想要的效果。根据您的照明系统的复杂程度,您可以选择不同的方法。

  • 如果您的灯光在玩家周围是圆形的,无论障碍物是否阻挡现实生活中的灯光,您都可以选择在顶点着色器中实现的灯光算法。在顶点着色器中,您可以计算顶点到播放器的距离,并应用一些函数来定义计算距离函数的亮度。不要使用alpha,而只是将纹理/ tile的颜色乘以光照值。

  • 如果你想使用自定义光照贴图(更有可能),我建议添加一个额外的顶点属性来指定平铺的亮度。如果需要,更新VBO。这里采用相同的方法:将纹理的像素乘以光值。如果你以玩家位置作为起点递归填充光线,那么每次玩家移动时你都会更新VBO。

  • 如果您的光照贴图取决于阳光照射到您的水平的位置,您可以结合使用两种照明技术。为太阳亮度创建一个顶点属性,为光点发出的光创建另一个顶点属性(如玩家持有的火炬)。现在,您可以在顶点着色器中组合这两个值。假设你的太阳升起并像白天和黑夜模式一样下降。假设太阳亮度为sun,这是介于0和1之间的值。此值可作为均匀值传递给顶点着色器。表示太阳亮度的顶点属性为s,光点发出的光点属性为l。然后你就可以像这样计算那块瓷砖的总光线:

    tileBrightness = max(s * sun, l + flicker);
    

    其中flicker(也是顶点着色器均匀)是某种挥动函数,表示光点亮度的微小变化。
    这种方法使场景动态,而无需不断重建VBO。我在一个概念验证项目中实现了这种方法。它很棒。您可以在这里查看它的外观:http://www.youtube.com/watch?v=jTcNitp_IIo。请注意视频中0:40的手电筒是如何闪烁的。这是我在这里解释的。