我应该如何渲染 2D 手电筒效果?

问题描述

我正在尝试在我的 2D 游戏中制作手电筒效果.我的手电筒表示为从实体以特定角度延伸的线段.手电筒可以指向任何方向.手电筒的强度也不同(手电筒光束的长度).

I'm trying to make a flashlight effect in my 2D game. My flashlight is represented as a line segment extending from the entity at a specific angle. The flashlight can point in any direction. The flashlight also varies in intensity (length of the flashlight beam).

我在试图找出渲染手电筒效果的最佳(最简单?)和最灵活的方法时遇到了问题.尤其是平铺地图.

I'm have a problem trying to figure out the best (easiest?) and most flexible way to render the flashlight effect. Particularly with the tiled map.

我可以想到两种方法.但我不知道要实现它们:

I can think of two methods. But I have no idea to implement them:

1. 仅绘制平铺地图的锥形/圆形部分
2. 用黑色纹理覆盖屏幕，并用代码在黑色纹理上打孔.这样我可以改变洞的属性.

我不知道从哪里开始/这些被称为什么/如果 libGDX 可以做到.

I'm clueless as to where to start with this/what these are called/if libGDX can do them.

推荐答案

一号称为模板缓冲区.但是你会发现很难达到柔和的效果.-- 简单.

Number one is called stencil buffer. But you'll find it difficult to achieve soft effects. -- Easy.

第二个:你只需要一个有光的纹理.可以绘制完全黑色的区域，在灯光精灵周围重复一个黑色精灵(左、右、上、下).或者您可以将它与模板缓冲区混合.或者您可以仔细计算纹理坐标并使用 GL.clamp_to_edge 传播所有黑色像素.根据渲染场景的方式，您可以先使用 alpha 信息渲染灯光，然后混合场景(根据 dst_alpha 变暗).-- 实现起来并不难.

Number two: You just need a texture with the light. The completely black areas can be drawn repeating a black sprite around the light sprite (left, right, up, down). Or you can mix it with the stencil buffer. Or you can carefully calculate your texture coordinates and use GL.clamp_to_edge to propagate all the black pixels. Depending on how you render your scene, you can render your light first with alpha information and then blend the scene (darkening according to the dst_alpha). -- Not that hard to implement.

第三个是对着色器的研究(GLES 2.0).您可以渲染网格以填充孔屏幕并通过一些着色器计算使其变暗.-- 这是最灵活的选择，也是最困难的(反正远非火箭科学).

Number three would be research on shaders (GLES 2.0). You can render a mesh to fill the hole screen and darken it with some shader calculations. -- This is the most flexible option, and the most difficult (far from rocket science anyway).

有些选项听起来比其他选项更好，但提供您提供的信息，我无法告诉您更多信息.你有一个很好的起点，可以从哪里开始研究.

Some options sound better than others, but providing the info you gave, there's nothing more I can tell you. You have a good start point from where to start to research on.

**如果您选择使用纹理，请考虑使用几种不同的纹理，具体取决于电池.您可以稍微缩放它们或给它们着色，但是使用不同的纹理更加灵活.

**If you choose working with textures, consider to have a couple of different textures depending on the battery. You can scale them a bit or tint them, but having different textures is way more flexible.

这篇关于我应该如何渲染 2D 手电筒效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！