Fix tiling opacity by drawing currently visible frame to a separate Viewport (#417)

- Now the current frame is drawn to a separate Viewport (with transparent background) taking into account only per layer opacity,
- Tiling is drawn by drawing current frame's ViewportTexture with tile mode opacity applied (using premultiply alpha blending).

Co-authored-by: kleonc <kleonc@users.noreply.github.com>

src/UI/Canvas/Canvas.gd

@@ -9,6 +9,8 @@ var can_undo := true
 var cursor_image_has_changed := false
 var sprite_changed_this_frame := false # for optimization purposes
 
+onready var currently_visible_frame : Viewport = $CurrentlyVisibleFrame
+onready var current_frame_drawer = $CurrentlyVisibleFrame/CurrentFrameDrawer
 onready var grid = $Grid
 onready var tile_mode = $TileMode
 onready var indicators = $Indicators
@@ -42,6 +44,8 @@ func _draw() -> void:
 
 	if Global.onion_skinning:
 		onion_skinning()
+	currently_visible_frame.size = Global.current_project.size
+	current_frame_drawer.update()
 	tile_mode.update()
 	draw_set_transform(position, rotation, scale)
 

src/UI/Canvas/Canvas.tscn

@@ -1,17 +1,34 @@
-[gd_scene load_steps=5 format=2]
+[gd_scene load_steps=7 format=2]
 
 [ext_resource path="res://src/UI/Canvas/Canvas.gd" type="Script" id=1]
 [ext_resource path="res://src/UI/Canvas/Grid.gd" type="Script" id=2]
 [ext_resource path="res://src/UI/Canvas/Indicators.gd" type="Script" id=3]
 [ext_resource path="res://src/UI/Canvas/TileMode.gd" type="Script" id=4]
+[ext_resource path="res://src/UI/Canvas/CurrentFrameDrawer.gd" type="Script" id=5]
+
+[sub_resource type="CanvasItemMaterial" id=1]
+blend_mode = 4
 
 [node name="Canvas" type="Node2D"]
 script = ExtResource( 1 )
 
+[node name="CurrentlyVisibleFrame" type="Viewport" parent="."]
+transparent_bg = true
+handle_input_locally = false
+hdr = false
+disable_3d = true
+usage = 0
+render_target_v_flip = true
+render_target_update_mode = 3
+
+[node name="CurrentFrameDrawer" type="Node2D" parent="CurrentlyVisibleFrame"]
+script = ExtResource( 5 )
+
 [node name="Grid" type="Node2D" parent="."]
 script = ExtResource( 2 )
 
 [node name="TileMode" type="Node2D" parent="."]
+material = SubResource( 1 )
 script = ExtResource( 4 )
 
 [node name="Indicators" type="Node2D" parent="."]

src/UI/Canvas/CurrentFrameDrawer.gd

@@ -0,0 +1,9 @@
+extends Node2D
+
+
+func _draw() -> void:
+	var current_cels : Array = Global.current_project.frames[Global.current_project.current_frame].cels
+	for i in range(Global.current_project.layers.size()):
+		if Global.current_project.layers[i].visible and current_cels[i].opacity > 0:
+			var modulate_color := Color(1, 1, 1, current_cels[i].opacity)
+			draw_texture(current_cels[i].image_texture, Vector2.ZERO, modulate_color)

src/UI/Canvas/TileMode.gd

@@ -5,7 +5,6 @@ var location := Vector2.ZERO
 
 
 func _draw() -> void:
-	var current_cels : Array = Global.current_project.frames[Global.current_project.current_frame].cels
 	var size : Vector2 = Global.current_project.size
 	var positions : Array = get_tile_positions(size)
 	var tilemode_opacity := Global.tilemode_opacity
@@ -17,12 +16,10 @@ func _draw() -> void:
 		_scale.x = -1
 	draw_set_transform(_position, rotation, _scale)
 
-	for i in range(Global.current_project.layers.size()):
-		var modulate_color := Color(1, 1, 1, current_cels[i].opacity * tilemode_opacity)
-		if Global.current_project.layers[i].visible: # if it's visible
-			if Global.current_project.tile_mode:
-				for pos in positions:
-					draw_texture(current_cels[i].image_texture, pos, modulate_color)
+	var modulate_color := Color(tilemode_opacity, tilemode_opacity, tilemode_opacity, tilemode_opacity) # premultiply alpha blending is applied
+	var current_frame_texture: Texture = Global.canvas.currently_visible_frame.get_texture()
+	for pos in positions:
+		draw_texture(current_frame_texture, pos, modulate_color)
 
 	draw_set_transform(position, rotation, scale)