Var transparent mode (#444)

* allowed and enabled per_pixel_transparency

* Added a Transparency menu

* Added an Alternate screen for transparency

* Added transparency methods

Added the transparency methods plus modified fullscreen such that it resets transparency on toggling hence, Removing the issue of blackness

* Modified the shader to allow transparency

* Added a material to ViewportContainer

Fixed the bug that darkens image when decreasing opacity

* Update Global.gd

* Update Main.gd

* Update TopMenuContainer.gd

project.godot

@@ -138,6 +138,8 @@ gdscript/warnings/return_value_discarded=false
 
 window/size/width=1280
 window/size/height=720
+window/per_pixel_transparency/allowed=true
+window/per_pixel_transparency/enabled=true
 
 [importer_defaults]
 

src/Autoload/Global.gd

@@ -126,6 +126,7 @@ var zoom_level_label : Label
 
 var recent_projects_submenu : PopupMenu
 var tile_mode_submenu : PopupMenu
+var window_transparency_submenu : PopupMenu
 
 var new_image_dialog : ConfirmationDialog
 var open_sprites_dialog : FileDialog
@@ -239,6 +240,22 @@ func _ready() -> void:
 	tile_mode_submenu.add_radio_check_item("Tiled In Y Axis", TileMode.Y_AXIS)
 	tile_mode_submenu.hide_on_checkable_item_selection = false
 
+	window_transparency_submenu = PopupMenu.new()
+	window_transparency_submenu.set_name("set value")
+	window_transparency_submenu.add_radio_check_item("100%")
+	window_transparency_submenu.add_radio_check_item("90%")
+	window_transparency_submenu.add_radio_check_item("80%")
+	window_transparency_submenu.add_radio_check_item("70%")
+	window_transparency_submenu.add_radio_check_item("60%")
+	window_transparency_submenu.add_radio_check_item("50%")
+	window_transparency_submenu.add_radio_check_item("40%")
+	window_transparency_submenu.add_radio_check_item("30%")
+	window_transparency_submenu.add_radio_check_item("20%")
+	window_transparency_submenu.add_radio_check_item("10%")
+	window_transparency_submenu.add_radio_check_item("0%")
+	window_transparency_submenu.set_item_checked(10, true)
+	window_transparency_submenu.hide_on_checkable_item_selection = false
+
 	new_image_dialog = find_node_by_name(root, "CreateNewImage")
 	open_sprites_dialog = find_node_by_name(root, "OpenSprite")
 	save_sprites_dialog = find_node_by_name(root, "SaveSprite")

src/Main.gd

@@ -7,6 +7,16 @@ var is_quitting_on_save := false
 
 # Called when the node enters the scene tree for the first time.
 func _ready() -> void:
+	var alternate_transparent_background = ColorRect.new()
+	add_child(alternate_transparent_background)
+	move_child(alternate_transparent_background,0)
+	alternate_transparent_background.visible = false
+	alternate_transparent_background.name = "AlternateTransparentBackground"
+	alternate_transparent_background.anchor_left = ANCHOR_BEGIN
+	alternate_transparent_background.anchor_top = ANCHOR_BEGIN
+	alternate_transparent_background.anchor_right = ANCHOR_END
+	alternate_transparent_background.anchor_bottom = ANCHOR_END
+	
 	get_tree().set_auto_accept_quit(false)
 	setup_application_window_size()
 

src/Shaders/TransparentChecker.shader

@@ -2,6 +2,7 @@ shader_type canvas_item;
 render_mode unshaded;
 
 uniform float size = 10.0;
+uniform float alpha = 1.0;
 uniform vec4 color1 : hint_color = vec4(0.7, 0.7, 0.7, 1.0);
 uniform vec4 color2 : hint_color = vec4(1.0);
 uniform vec2 offset = vec2(0.0);
@@ -26,5 +27,5 @@ void fragment() {
 	bool c2 = any(greaterThanEqual(pos, vec2(size)));
 	float c = c1 && c2 ? 1.0: 0.0;
 	COLOR = mix(color1, color2, c);
-	COLOR.a = 1.0;
+	COLOR.a = alpha;
 }

src/UI/TopMenuContainer.gd

@@ -3,7 +3,7 @@ extends Panel
 
 enum FileMenuId {NEW, OPEN, OPEN_LAST_PROJECT, SAVE, SAVE_AS, EXPORT, EXPORT_AS, QUIT}
 enum EditMenuId {UNDO, REDO, COPY, CUT, PASTE, DELETE, CLEAR_SELECTION, PREFERENCES}
-enum ViewMenuId {TILE_MODE, MIRROR_VIEW, SHOW_GRID, SHOW_PIXEL_GRID, SHOW_RULERS, SHOW_GUIDES, SHOW_ANIMATION_TIMELINE, ZEN_MODE, FULLSCREEN_MODE}
+enum ViewMenuId {TILE_MODE, WINDOW_TRANSPARENCY, MIRROR_VIEW, SHOW_GRID, SHOW_PIXEL_GRID, SHOW_RULERS, SHOW_GUIDES, SHOW_ANIMATION_TIMELINE, ZEN_MODE, FULLSCREEN_MODE}
 enum ImageMenuId {SCALE_IMAGE,CENTRALIZE_IMAGE, CROP_IMAGE, RESIZE_CANVAS, FLIP, ROTATE, INVERT_COLORS, DESATURATION, OUTLINE, HSV, GRADIENT, SHADER}
 enum HelpMenuId {VIEW_SPLASH_SCREEN, ONLINE_DOCS, ISSUE_TRACKER, CHANGELOG, ABOUT_PIXELORAMA}
 
@@ -82,6 +82,7 @@ func setup_edit_menu() -> void:
 func setup_view_menu() -> void:
 	var view_menu_items := { # order as in ViewMenuId enum
 		"Tile Mode" : 0,
+		"Window Transparency" : 0,
 		"Mirror View" : InputMap.get_action_list("mirror_view")[0].get_scancode_with_modifiers(),
 		"Show Grid" : InputMap.get_action_list("show_grid")[0].get_scancode_with_modifiers(),
 		"Show Pixel Grid" : InputMap.get_action_list("show_pixel_grid")[0].get_scancode_with_modifiers(),
@@ -97,6 +98,8 @@ func setup_view_menu() -> void:
 	for item in view_menu_items.keys():
 		if item == "Tile Mode":
 			setup_tile_mode_submenu(item)
+		elif item == "Window Transparency":
+			setup_window_transparency_submenu(item)
 		else:
 			view_menu.add_check_item(item, i, view_menu_items[item])
 		i += 1
@@ -113,6 +116,12 @@ func setup_tile_mode_submenu(item : String):
 	view_menu.add_submenu_item(item, Global.tile_mode_submenu.get_name())
 
 
+func setup_window_transparency_submenu(item : String):
+	Global.window_transparency_submenu.connect("id_pressed", self, "window_transparency_submenu_id_pressed")
+	view_menu.add_child(Global.window_transparency_submenu)
+	view_menu.add_submenu_item(item, Global.window_transparency_submenu.get_name())
+
+
 func setup_image_menu() -> void:
 	var image_menu_items := { # order as in ImageMenuId enum
 		"Scale Image" : 0,
@@ -292,6 +301,29 @@ func tile_mode_submenu_id_pressed(id : int) -> void:
 	Global.canvas.grid.update()
 
 
+func window_transparency_submenu_id_pressed(id : float) -> void:
+	if OS.window_fullscreen:
+		for i in 11:
+			Global.window_transparency_submenu.set_item_checked(i, i == 10)
+		window_transparency(1)
+	else:
+		for i in 11:
+			Global.window_transparency_submenu.set_item_checked(i, i == id)
+		window_transparency(id/10)
+
+
+func window_transparency(value :float) -> void:
+	if value == 1:
+		get_node("../../AlternateTransparentBackground").visible = false
+	else:
+		get_node("../../AlternateTransparentBackground").visible = true
+	var checker :ColorRect = get_parent().get_node("UI/CanvasAndTimeline/ViewportAndRulers/HSplitContainer/ViewportandVerticalRuler/ViewportContainer/Viewport/TransparentChecker")
+	var color :Color = Global.control.theme.get_stylebox("panel", "PanelContainer").bg_color
+	color.a = value
+	get_node("../../AlternateTransparentBackground").color = color
+	checker.transparency(value)
+
+
 func toggle_mirror_view() -> void:
 	Global.mirror_view = !Global.mirror_view
 	view_menu.set_item_checked(ViewMenuId.MIRROR_VIEW, Global.mirror_view)
@@ -350,6 +382,9 @@ func toggle_zen_mode() -> void:
 func toggle_fullscreen() -> void:
 	OS.window_fullscreen = !OS.window_fullscreen
 	view_menu.set_item_checked(ViewMenuId.FULLSCREEN_MODE, OS.window_fullscreen)
+	# if window is fullscreen then reset transparency
+	if OS.window_fullscreen:
+		window_transparency_submenu_id_pressed(10)
 
 
 func image_menu_id_pressed(id : int) -> void:

src/UI/TransparentChecker.gd

@@ -26,3 +26,18 @@ func _on_TransparentChecker_resized() -> void:
 func fit_rect(rect : Rect2) -> void:
 	rect_position = rect.position
 	rect_size = rect.size
+
+
+func transparency(value :float) -> void:
+	# first make viewport transparent then background and then viewport
+	if value == 1:
+		get_parent().transparent_bg = false
+		get_tree().get_root().set_transparent_background(false)
+	else:
+		OS.window_per_pixel_transparency_enabled = true
+		get_parent().transparent_bg = true
+		get_tree().get_root().set_transparent_background(true)
+	
+	# this controls opacity 0 for transparent, 1 or a greater value than 1 is opaque
+	# i have set a minimum amount for the fade (We would'nt want the canvas to dissapear now would we?)
+	material.set("shader_param/alpha",clamp(value,0.1,1))

src/UI/ViewportContainer.gd

@@ -1,5 +1,8 @@
 extends ViewportContainer
 
+func _ready():
+	material = CanvasItemMaterial.new()
+	material.blend_mode = CanvasItemMaterial.BLEND_MODE_PREMULT_ALPHA
 
 func _on_ViewportContainer_mouse_entered() -> void:
 	Global.has_focus = true