Draw an outline to indicate selected building

Author: elektito

Building.gd

@@ -9,9 +9,16 @@ export(Texture) var texture : Texture = null setget set_texture, get_texture
 export(bool) var selected : bool = false setget set_selected, get_selected
 export(bool) var upgrade_available : bool = false setget set_upgrade_available
 
+var outline_material : ShaderMaterial
+
 func _ready():
 	if get_parent().decorative:
 		return
+	
+	outline_material = ShaderMaterial.new()
+	outline_material.shader = preload("res://Outline.gdshader")
+	outline_material.set_shader_param('line_thickness', 25)
+	
 	shake()
 
 
@@ -31,11 +38,16 @@ func get_texture():
 
 
 func set_selected(value : bool):
-	$selection.visible = value
+	if not is_inside_tree():
+		return
+	if value:
+		$texture.material = outline_material
+	else:
+		$texture.material = null
 
 
 func get_selected() -> bool:
-	return $selection.visible
+	return $texture.material == null
 
 
 func set_upgrade_available(value : bool):

Building.tscn

@@ -1,40 +1,27 @@
-[gd_scene load_steps=6 format=2]
+[gd_scene load_steps=5 format=2]
 
-[ext_resource path="res://assets/gfx/sprites/selection.png" type="Texture" id=1]
 [ext_resource path="res://Building.gd" type="Script" id=2]
 [ext_resource path="res://assets/fonts/Secuela-Bold.otf" type="DynamicFontData" id=3]
 
-[sub_resource type="DynamicFont" id=1]
+[sub_resource type="DynamicFont" id=3]
 size = 8
 outline_size = 1
 use_mipmaps = true
 use_filter = true
 font_data = ExtResource( 3 )
 
-[sub_resource type="RectangleShape2D" id=2]
+[sub_resource type="RectangleShape2D" id=4]
 extents = Vector2( 3, 22 )
 
 [node name="Building" type="Node2D"]
 script = ExtResource( 2 )
+selected = true
 
 [node name="texture" type="TextureRect" parent="."]
-margin_left = -16.0
-margin_top = -32.0
-margin_right = 16.0
-margin_bottom = 32.0
-expand = true
-__meta__ = {
-"_edit_use_anchors_": false
-}
-
-[node name="selection" type="TextureRect" parent="."]
-visible = false
-margin_left = -16.0
+margin_left = -24.0
 margin_top = -32.0
-margin_right = 16.0
+margin_right = 24.0
 margin_bottom = 32.0
-mouse_filter = 2
-texture = ExtResource( 1 )
 expand = true
 __meta__ = {
 "_edit_use_anchors_": false
@@ -48,7 +35,7 @@ margin_left = -16.0
 margin_top = -51.8608
 margin_right = 13.0
 margin_bottom = -43.8608
-custom_fonts/font = SubResource( 1 )
+custom_fonts/font = SubResource( 3 )
 custom_colors/font_color = Color( 0, 0, 0, 1 )
 text = "UPGRADE"
 __meta__ = {
@@ -67,7 +54,7 @@ collision_mask = 8
 
 [node name="shape" type="CollisionShape2D" parent="area"]
 position = Vector2( 0, -18 )
-shape = SubResource( 2 )
+shape = SubResource( 4 )
 
 [connection signal="gui_input" from="texture" to="." method="_on_texture_gui_input"]
 [connection signal="mouse_entered" from="texture" to="." method="_on_texture_mouse_entered"]

Outline.gdshader

@@ -0,0 +1,52 @@
+/* 
+Shader edited from the one at: https://godotshaders.com/shader/rainbow-outline/
+
+Original credits:
+
+Rainbow outline by @Farfalk and @ThePadDev, July 2021
+
+Apply to canvas items with transparent backgrounds.
+Check that there is sufficient transparent background space for the outline!
+
+CC0 License (but citation is welcome <3)
+*/
+
+shader_type canvas_item;
+
+uniform float line_thickness : hint_range(0, 25) = 1.0;    // thickness of the line
+
+const float pi = 3.14159265;
+
+float sinx(float x) {
+	// a sine-like function with where the first half of the each sine wave 
+	// has a different period than the second one.
+	
+	const float light = 1.0;
+	const float dark = 0.1;
+	x = mod(x, pi*(light + dark));
+	if (x <= pi*light) {
+		return sin(x/light);
+	} else {
+		return -sin((x + light*pi)/dark);
+	}
+}
+
+void fragment() {
+	vec2 size = TEXTURE_PIXEL_SIZE * line_thickness;
+	
+	float outline = texture(TEXTURE, UV + vec2(-size.x, 0)).a;
+	outline += texture(TEXTURE, UV + vec2(0, size.y)).a;
+	outline += texture(TEXTURE, UV + vec2(size.x, 0)).a;
+	outline += texture(TEXTURE, UV + vec2(0, -size.y)).a;
+	outline += texture(TEXTURE, UV + vec2(-size.x, size.y)).a;
+	outline += texture(TEXTURE, UV + vec2(size.x, size.y)).a;
+	outline += texture(TEXTURE, UV + vec2(-size.x, -size.y)).a;
+	outline += texture(TEXTURE, UV + vec2(size.x, -size.y)).a;
+	outline = min(outline, 1.0);
+	
+	float value = (sinx(TIME) + 1.0) / 2.0;
+	vec4 animated_line_color = vec4(1.0, 1.0, 1.0 - value, 1.0);
+	
+	vec4 color = texture(TEXTURE, UV);
+	COLOR = mix(color, animated_line_color, outline - color.a);
+}

World.tscn

@@ -19,64 +19,64 @@
 [ext_resource path="res://assets/gfx/icons/settings.png" type="Texture" id=18]
 [ext_resource path="res://EndScreen.tscn" type="PackedScene" id=19]
 
-[sub_resource type="RectangleShape2D" id=15]
+[sub_resource type="RectangleShape2D" id=1]
 extents = Vector2( 5, 22 )
 
-[sub_resource type="CircleShape2D" id=1]
+[sub_resource type="CircleShape2D" id=2]
 radius = 276.474
 
-[sub_resource type="StyleBoxFlat" id=2]
+[sub_resource type="StyleBoxFlat" id=3]
 bg_color = Color( 0.215686, 0.580392, 0.431373, 1 )
 
-[sub_resource type="StreamTexture" id=3]
+[sub_resource type="StreamTexture" id=4]
 resource_local_to_scene = true
 flags = 5
 load_path = "res://.import/factory.png-511f58d2a3b3f08c311f8e6bbfc28779.stex"
 
-[sub_resource type="AtlasTexture" id=4]
+[sub_resource type="AtlasTexture" id=5]
 flags = 5
-atlas = SubResource( 3 )
-region = Rect2( 0, 300, 512, 600 )
+atlas = SubResource( 4 )
+region = Rect2( 128, 300, 512, 600 )
 
-[sub_resource type="StreamTexture" id=5]
+[sub_resource type="StreamTexture" id=6]
 flags = 5
 load_path = "res://.import/mine.png-6e597bfb5a7c7612bb55dc80efe8800f.stex"
 
-[sub_resource type="AtlasTexture" id=6]
+[sub_resource type="AtlasTexture" id=7]
 flags = 5
-atlas = SubResource( 5 )
-region = Rect2( 0, 320, 512, 600 )
+atlas = SubResource( 6 )
+region = Rect2( 128, 320, 512, 600 )
 
-[sub_resource type="AtlasTexture" id=7]
+[sub_resource type="AtlasTexture" id=8]
 flags = 5
 atlas = ExtResource( 1 )
-region = Rect2( 0, 320, 512, 600 )
+region = Rect2( 128, 320, 512, 600 )
 
-[sub_resource type="AtlasTexture" id=8]
+[sub_resource type="AtlasTexture" id=9]
 flags = 5
 atlas = ExtResource( 2 )
-region = Rect2( 0, 310, 512, 600 )
+region = Rect2( 128, 310, 512, 600 )
 
-[sub_resource type="AtlasTexture" id=9]
+[sub_resource type="AtlasTexture" id=10]
 flags = 5
 atlas = ExtResource( 5 )
-region = Rect2( 0, 310, 512, 600 )
+region = Rect2( 128, 310, 512, 600 )
 
-[sub_resource type="StyleBoxFlat" id=10]
+[sub_resource type="StyleBoxFlat" id=11]
 bg_color = Color( 0.6, 0.898039, 0.313726, 1 )
 
-[sub_resource type="DynamicFont" id=11]
+[sub_resource type="DynamicFont" id=12]
 use_filter = true
 font_data = ExtResource( 7 )
 
-[sub_resource type="DynamicFont" id=12]
+[sub_resource type="DynamicFont" id=13]
 use_filter = true
 font_data = ExtResource( 6 )
 
-[sub_resource type="StyleBoxFlat" id=13]
+[sub_resource type="StyleBoxFlat" id=14]
 bg_color = Color( 0.6, 0.6, 0.6, 0.501961 )
 
-[sub_resource type="StyleBoxFlat" id=14]
+[sub_resource type="StyleBoxFlat" id=15]
 bg_color = Color( 0.6, 0.6, 0.6, 0.501961 )
 
 [node name="World" type="Node2D"]
@@ -116,10 +116,10 @@ texture = ExtResource( 1 )
 
 [node name="shape" type="CollisionShape2D" parent="placing_area/preview_icon"]
 position = Vector2( 0, 12 )
-shape = SubResource( 15 )
+shape = SubResource( 1 )
 
 [node name="shape" type="CollisionShape2D" parent="placing_area"]
-shape = SubResource( 1 )
+shape = SubResource( 2 )
 
 [node name="planet" type="Sprite" parent="placing_area"]
 scale = Vector2( 0.4, 0.4 )
@@ -142,7 +142,7 @@ __meta__ = {
 [node name="toolbox" type="PanelContainer" parent="hud/hbox"]
 margin_right = 40.0
 margin_bottom = 720.0
-custom_styles/panel = SubResource( 2 )
+custom_styles/panel = SubResource( 3 )
 
 [node name="vbox" type="VBoxContainer" parent="hud/hbox/toolbox"]
 margin_right = 40.0
@@ -159,7 +159,7 @@ margin_bottom = 40.0
 rect_min_size = Vector2( 40, 40 )
 focus_mode = 0
 theme = ExtResource( 17 )
-icon = SubResource( 4 )
+icon = SubResource( 5 )
 flat = false
 expand_icon = true
 
@@ -170,7 +170,7 @@ margin_bottom = 80.0
 rect_min_size = Vector2( 40, 40 )
 focus_mode = 0
 theme = ExtResource( 17 )
-icon = SubResource( 6 )
+icon = SubResource( 7 )
 flat = false
 expand_icon = true
 
@@ -181,7 +181,7 @@ margin_bottom = 120.0
 rect_min_size = Vector2( 40, 40 )
 focus_mode = 0
 theme = ExtResource( 17 )
-icon = SubResource( 7 )
+icon = SubResource( 8 )
 flat = false
 expand_icon = true
 
@@ -192,7 +192,7 @@ margin_bottom = 160.0
 rect_min_size = Vector2( 40, 40 )
 focus_mode = 0
 theme = ExtResource( 17 )
-icon = SubResource( 8 )
+icon = SubResource( 9 )
 flat = false
 expand_icon = true
 
@@ -203,7 +203,7 @@ margin_bottom = 200.0
 rect_min_size = Vector2( 40, 40 )
 focus_mode = 0
 theme = ExtResource( 17 )
-icon = SubResource( 9 )
+icon = SubResource( 10 )
 flat = false
 expand_icon = true
 
@@ -230,7 +230,7 @@ margin_right = 190.0
 margin_bottom = 720.0
 rect_min_size = Vector2( 150, 0 )
 mouse_filter = 2
-custom_styles/panel = SubResource( 10 )
+custom_styles/panel = SubResource( 11 )
 __meta__ = {
 "_edit_use_anchors_": false
 }
@@ -257,8 +257,8 @@ mouse_filter = 2
 [node name="description" type="RichTextLabel" parent="hud/hbox/building_panel/MarginContainer/VBoxContainer"]
 margin_right = 142.0
 margin_bottom = 48.0
-custom_fonts/bold_font = SubResource( 11 )
-custom_fonts/normal_font = SubResource( 12 )
+custom_fonts/bold_font = SubResource( 12 )
+custom_fonts/normal_font = SubResource( 13 )
 custom_colors/default_color = Color( 0, 0, 0, 1 )
 bbcode_enabled = true
 bbcode_text = "[b]foobar[/b]
@@ -301,7 +301,7 @@ margin_bottom = 36.0
 rect_min_size = Vector2( 0, 36 )
 mouse_filter = 2
 size_flags_horizontal = 3
-custom_styles/panel = SubResource( 13 )
+custom_styles/panel = SubResource( 14 )
 
 [node name="margin" type="MarginContainer" parent="hud/hbox/vbox/resource_bar"]
 margin_right = 1090.0
@@ -404,7 +404,7 @@ margin_right = 1090.0
 margin_bottom = 720.0
 rect_min_size = Vector2( 0, 36 )
 mouse_filter = 2
-custom_styles/panel = SubResource( 14 )
+custom_styles/panel = SubResource( 15 )
 
 [node name="margin" type="MarginContainer" parent="hud/hbox/vbox/info_bar"]
 margin_right = 1090.0

assets/gfx/sprites/apartment.kra

@@ -3,3 +3,4 @@ Smoke Particles by Kenney - CC0 - https://www.kenney.nl/assets/smoke-particles
 UI Audio by Kenney - CC0 - https://www.kenney.nl/assets/ui-audio
 Big Eyes by Rafael Krux - CC0 - https://freepd.com/epic.php
 Rough Rumble (splash sound) - CC0 - https://freesound.org/people/TMPZ_1/sounds/440804/ - edited
+Rainbow Outline shader - CC0 - https://godotshaders.com/shader/rainbow-outline/ - edited