godotengine / godot

Godot Engine – Multi-platform 2D and 3D game engine
https://godotengine.org
MIT License
91.2k stars 21.21k forks source link

Theme with alpha value is drawn below inferior CanvasLayer #47773

Open abraaofilho10 opened 3 years ago

abraaofilho10 commented 3 years ago

Godot version:

Godot Mono 3.2.2 x64 Godot 3.3 rc8 x64

OS/device including version:

Windows 10 Pro 20H2 Build: 19042.928 x64 GeForce GTX1050 Ti Driver 465.89

Issue description:

I'm using a Node2D with a draw function to draw a grid on the screen. The Node2D is inside a CanvasLayer with a layer property set to 0. The GUI is inside a CanvasLayer with the layer set to 1. I intend to draw the grid in the background but when I play, the grid is drawn always above the GUI. I found that the problem occurs only when the Control nodes have a theme and a style with an alpha value below 255.

Steps to reproduce: Run the minimal reproduction project or follow the steps below:

1 - Create a scene with the following structure:

Spatial
    MeshInstance
    Camera
    CanvasLayer1
        Button
    CanvasLayer2
       Node2D

2 - The CanvasLayer1 layer is set to 1 and the CanvasLayer2 layer is set to 0. 3 - Create a new theme with a button class item, set the normal style to StyleBoxFlat, and set some color with an alpha value less than 255.

4 - Add the following script to Node2D https://github.com/GDQuest/godot-demos MIT License

extends Node2D

var cell_quadrant_size: int
export var grid_size: Vector2 = Vector2(10, 10)
export var cell_size: Vector2 = Vector2(64, 64)

func _ready():
    modulate = Color( 1, 0.2, 0, 0.2 )
    grid_size = get_viewport_rect().size / 64
    cell_quadrant_size = int(round(grid_size.x))

func _draw():
    var LINE_COLOR = Color(255, 255, 255)
    var LINE_WIDTH = 2
#   var window_size = OS.get_window_size()

    for x in range(cell_quadrant_size + 1):
        var col_pos = x * cell_size.x
        var limit = grid_size.y * cell_size.y
        draw_line(Vector2(col_pos, 0), Vector2(col_pos, limit), LINE_COLOR, LINE_WIDTH)
    for y in range(cell_quadrant_size + 1):
        var row_pos = y * cell_size.y
        var limit = grid_size.x * cell_size.x
        draw_line(Vector2(0, row_pos), Vector2(limit, row_pos), LINE_COLOR, LINE_WIDTH)

Minimal reproduction project:

CanvasLayer bug.zip

abraaofilho10 commented 3 years ago

I tested in the new stable 3.3 and the bug still happens.

Calinou commented 3 years ago

@chalcosoma Can you reproduce this after disabling batching in the Project Settings? Also, try switching to the GLES2 renderer and see if the problem persists.

abraaofilho10 commented 3 years ago

@Calinou I tested now and the result was that the problem only occurs in GLES3, both with and without batching. In GLES2 the problem doesn't occur.

abraaofilho10 commented 3 years ago

The problem persists in Godot 3.4 stable.