发布于 2025-01-21 23:28:33 字数 8 浏览 0 评论 0原文

continue

So I'm looking to create an effect of having a bubble around my player which, when he enters a hidden area (hidden by tilemaps) the bubble activates and it essentially has an xray effect. So I can see the background, the ground and all the items inside the area I just can't see the blocks themselves.

So pretty much going from this

To this enter image description here

And as I go further in the more gets revealed

I have no idea what to even begin searching for this. So any direction would be greatly appreciated

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

内心旳酸楚 2025-01-28 23:28:33

首先,我想弄清楚一些东西:在玩家附近的事物很容易,您使用灯和着色器时,让事物出现。 中不可能通过该方法在播放器附近时消失(3D具有flags_use_shadow_to_opacity)。


在2D 为了显示什么和不显示什么。然后,我们将使用着色器使用该纹理掩码来制作一种选择性消失的材料。要创建该纹理,我们将使用viewport,因此我们可以从中获得viewPortTexture

fiewport设置是这样的:

Viewport
├ ColorRect
└ Sprite

设置viewport带有以下属性:

  • size:给它窗口大小(默认为1024 x 600)
  • HDR:禁用
  • 禁用3D:启用
  • 用法:2D
  • 更新模式:始终

Sprite您想要灰度纹理,也许具有透明度。这将是您想在玩家周围揭示的形状。

对于colorrect,您想将背景颜色设置为黑色或白色。 sprite上颜色的相反。

接下来,您将将脚本附加到fiewport。它必须处理两个问题:

  • 移动Sprite以匹配玩家的位置。看起来这样:

     扩展了视口
    
    导出var target_path:nodepath
    
    func _process(_delta:float) - >空白:
        var target:= get_node_or_null(target_path)作为node2d
        如果目标== null:
            返回
    
        $ sprite.position = target.get_viewport()。get_canvas_transform()。origin
     

    您将设置target_path以引用玩家avatar。

    在此代码中target.get_viewport()。get_canvas_transform()。Origin将使我们在屏幕上为我们提供目标节点(player avatar)的位置。我们将sprite匹配。

  • 处理窗口大小。看起来这样:

      func _ready():
        #警告 - 符号:return_value_discarded
        get_tree()。​​get_root()。连接(“ size_changed”,self,“ _on_size_changed”)
    
    func _on_size_changed():
        size = get_tree()。​​get_root()。大小
     

    在此代码中,我们连接到“ size_changed” root devieport (与窗口关联的一个),然后更改此fiewport的大小匹配。

接下来是着色器。转到您的tilemap或您想消失的任何东西并添加着色器材料。这是它的代码:

shader_type canvas_item;
uniform sampler2D mask;

void fragment()
{
    COLOR.rgb = texture(TEXTURE, UV).rgb;
    COLOR.a = texture(mask, SCREEN_UV).r;
}

如您所见,第一行将设置红色,绿色和蓝色通道以匹配节点已经具有的纹理。但是,Alpha通道将设置为掩模纹理的一个通道(在这种情况下为红色)。

注意:上面的代码将使黑色部分中的任何内容完全不可见,而白色部分中的任何内容都完全可见。如果要倒置,请更改color.a = texture(bask,screen_uv).r; to color.a = 1.0-纹理(mask,screen_uv).r; 。

当然,我们需要设置掩盖纹理。设置该代码后,在着色器材料“蒙版”的着色器材料下应该有一个着色器参数,将其设置为新的viewPortTexture,然后将fiewport设置为我们设置的前。

我们完成了。


我从 ”

plus plus plus plus plus 一些瓷砖来自。当然,它们都是公共领域。

这就是:

“结果”

尝试不同的纹理以获得不同的结果。另外,您可以在sprite中添加一个着色器,以获得额外的效果。例如,通过像这样的代码给sprite给予着色器材料来添加一些涟漪:

shader_type canvas_item;

void fragment()
{
    float width = SCREEN_PIXEL_SIZE.x * 16.0;
    COLOR = texture(TEXTURE, vec2(UV.x + sin(UV.y * 32.0 + TIME * 2.0) * width, UV.y));
}

因此,您可以得到此结果:

”

何时有一个瞬间上述动画斯托克。那是因为我没有完美地切开循环。游戏中不是问题。此外,动画的帧每秒比游戏要少得多。


Addendum 我想添加的几件事:

  • 您可以通过其他方式创建纹理。我还有其他答案,我涵盖了其中的一些
  • 我写了一个着色器,该着色器在此处的Alpha频道上输出。其他选项包括:
    • 使用Backbuffercopy
    • 丢弃 fragments。

First of all, I want to get something out of the way: Making things appear when they are nearby the player is easy, you use a light and a shader. Making things disappear when they are nearby the player by that approach is impossible in 2D (3D has flags_use_shadow_to_opacity).


This is the plan: We are going to create a texture that will work as mask for what to show and what not to show. Then we will use that texture mask with a shader to make a material that selectively disappears. To create that texture, we are going to use a Viewport, so we can get a ViewportTexture from it.

The Viewport setup is like this:

Viewport
├ ColorRect
└ Sprite

Set the Viewport with the following properties:

  • Size: give it the window size (the default is 1024 by 600)
  • Hdr: disable
  • Disable 3D: enable
  • Usage: 2D
  • Update mode: Always

For the Sprite you want a grayscale texture, perhaps with transparency. It will be the shape you want to reveal around the player.

And for the ColorRect you want to set the background color as either black or white. Whatever is the opposite of the color on the Sprite.

Next, you are going to attach a script to the Viewport. It has to deal with two concerns:

  • Move the Sprite to match the position of the player. That looks like this:

    extends Viewport
    
    export var target_path:NodePath
    
    func _process(_delta:float) -> void:
        var target := get_node_or_null(target_path) as Node2D
        if target == null:
            return
    
        $Sprite.position = target.get_viewport().get_canvas_transform().origin
    

    And you are going to set the target_path to reference the player avatar.

    In this code target.get_viewport().get_canvas_transform().origin will give us the position of the target node (the player avatar) on the screen. And we are placing the Sprite to match.

  • Handle window resizes. That looks like this:

    func _ready():
        # warning-ignore:return_value_discarded
        get_tree().get_root().connect("size_changed", self, "_on_size_changed")
    
    func _on_size_changed():
        size = get_tree().get_root().size
    

    In this code we connect to the "size_changed" of the root Viewport (the one associated with the Window), and change the size of this Viewport to match.

The next thing is the shader. Go to your TileMap or whatever you want to make disappear and add a shader material. This is the code for it:

shader_type canvas_item;
uniform sampler2D mask;

void fragment()
{
    COLOR.rgb = texture(TEXTURE, UV).rgb;
    COLOR.a = texture(mask, SCREEN_UV).r;
}

As you can see, the first line will be setting the red, green, and blue channels to match the texture the node already has. But the alpha channel will be set to one of the channels (the red one in this case) of the mask texture.

Note: The above code will make whatever is in the black parts fully invisible, and whatever is in the white parts fully visible. If you want to invert that, change COLOR.a = texture(mask, SCREEN_UV).r; to COLOR.a = 1.0 - texture(mask, SCREEN_UV).r;.

We, of course, need to set that mask texture. After you set that code, there should be a shader param under the shader material called "Mask", set it to a new ViewportTexture and set the Viewport to the one we set before.

And we are done.


I tested this with this texture from publicdomainvectors.org: halftone25.png

Plus some tiles from Kenney. They are all, of course, under public domain.

This is how it looks like:

Result in game

Experiment with different textures for different results. Also, you can add a shader to the Sprite for extra effect. For example add some ripples, by giving a shader material to the Sprite with code like this one:

shader_type canvas_item;

void fragment()
{
    float width = SCREEN_PIXEL_SIZE.x * 16.0;
    COLOR = texture(TEXTURE, vec2(UV.x + sin(UV.y * 32.0 + TIME * 2.0) * width, UV.y));
}

So you get this result:

Result in game, animated

There is an instant when the above animation stutters. That is because I didn't cut the loop perfectly. Not an issue in game. Also the animation has much less frames per second than the game would.


Addendum A couple things I want to add:

  • You can create a texture by other means. I have a couple other answer where I cover some of it
  • I wrote a shader that outputs on the alpha channel here. Other options include:
    • Using BackBufferCopy.
    • To discard fragments.
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文