diff --git a/examples/retro_term/retro_term.tscn b/examples/retro_term/retro_term.tscn new file mode 100644 index 0000000..417691d --- /dev/null +++ b/examples/retro_term/retro_term.tscn @@ -0,0 +1,301 @@ +[gd_scene load_steps=6 format=2] + +[ext_resource path="res://examples/menu/menu.tscn" type="PackedScene" id=1] +[ext_resource path="res://themes/retro_green.tres" type="Theme" id=2] + +[sub_resource type="Shader" id=1] +code = "/* +Shader from Godot Shaders - the free shader library. +godotshaders.com/shader/VHS-and-CRT-monitor-effect + +This shader is under CC0 license. Feel free to use, improve and +change this shader according to your needs and consider sharing +the modified result to godotshaders.com. +*/ + +shader_type canvas_item; + +//*** IMPORTANT! ***/ +// - If you are using this shader to affect the node it is applied to set 'overlay' to false (unchecked in the instepctor). +// - If you are using this shader as an overlay, and want the shader to affect the nodes below in the Scene hierarchy, +// set 'overlay' to true (checked in the inspector). +// On Mac there is potentially a bug causing this to not work properly. If that is the case and you want to use the shader as an overlay +// change all \"overlay ? SCREEN_TEXTURE : TEXTURE\" to only \"SCREEN_TEXTURE\" on lines 129-140, and \"vec2 uv = overlay ? warp(SCREEN_UV) : warp(UV);\" +// to \"vec2 uv = warp(SCREEN_UV);\" on line 98. +uniform bool overlay = false; + +uniform float scanlines_opacity : hint_range(0.0, 1.0) = 0.4; +uniform float scanlines_width : hint_range(0.0, 0.5) = 0.25; +uniform float grille_opacity : hint_range(0.0, 1.0) = 0.3; +uniform vec2 resolution = vec2(640.0, 480.0); // Set the number of rows and columns the texture will be divided in. Scanlines and grille will make a square based on these values + +uniform bool pixelate = true; // Fill each square (\"pixel\") with a sampled color, creating a pixel look and a more accurate representation of how a CRT monitor would work. + +uniform bool roll = true; +uniform float roll_speed = 8.0; // Positive values are down, negative are up +uniform float roll_size : hint_range(0.0, 100.0) = 15.0; +uniform float roll_variation : hint_range(0.1, 5.0) = 1.8; // This valie is not an exact science. You have to play around with the value to find a look you like. How this works is explained in the code below. +uniform float distort_intensity : hint_range(0.0, 0.2) = 0.05; // The distortion created by the rolling effect. + +uniform float noise_opacity : hint_range(0.0, 1.0) = 0.4; +uniform float noise_speed = 5.0; // There is a movement in the noise pattern that can be hard to see first. This sets the speed of that movement. + +uniform float static_noise_intensity : hint_range(0.0, 1.0) = 0.06; + +uniform float aberration : hint_range(-1.0, 1.0) = 0.03; // Chromatic aberration, a distortion on each color channel. +uniform float brightness = 1.4; // When adding scanline gaps and grille the image can get very dark. Brightness tries to compensate for that. +uniform bool discolor = true; // Add a discolor effect simulating a VHS + +uniform float warp_amount :hint_range(0.0, 5.0) = 1.0; // Warp the texture edges simulating the curved glass of a CRT monitor or old TV. +uniform bool clip_warp = false; + +uniform float vignette_intensity = 0.4; // Size of the vignette, how far towards the middle it should go. +uniform float vignette_opacity : hint_range(0.0, 1.0) = 0.5; + +// Used by the noise functin to generate a pseudo random value between 0.0 and 1.0 +vec2 random(vec2 uv){ + uv = vec2( dot(uv, vec2(127.1,311.7) ), + dot(uv, vec2(269.5,183.3) ) ); + return -1.0 + 2.0 * fract(sin(uv) * 43758.5453123); +} + +// Generate a Perlin noise used by the distortion effects +float noise(vec2 uv) { + vec2 uv_index = floor(uv); + vec2 uv_fract = fract(uv); + + vec2 blur = smoothstep(0.0, 1.0, uv_fract); + + return mix( mix( dot( random(uv_index + vec2(0.0,0.0) ), uv_fract - vec2(0.0,0.0) ), + dot( random(uv_index + vec2(1.0,0.0) ), uv_fract - vec2(1.0,0.0) ), blur.x), + mix( dot( random(uv_index + vec2(0.0,1.0) ), uv_fract - vec2(0.0,1.0) ), + dot( random(uv_index + vec2(1.0,1.0) ), uv_fract - vec2(1.0,1.0) ), blur.x), blur.y) * 0.5 + 0.5; +} + +// Takes in the UV and warps the edges, creating the spherized effect +vec2 warp(vec2 uv){ + vec2 delta = uv - 0.5; + float delta2 = dot(delta.xy, delta.xy); + float delta4 = delta2 * delta2; + float delta_offset = delta4 * warp_amount; + + return uv + delta * delta_offset; +} + +// Adds a black border to hide stretched pixel created by the warp effect +float border (vec2 uv){ + float radius = min(warp_amount, 0.08); + radius = max(min(min(abs(radius * 2.0), abs(1.0)), abs(1.0)), 1e-5); + vec2 abs_uv = abs(uv * 2.0 - 1.0) - vec2(1.0, 1.0) + radius; + float dist = length(max(vec2(0.0), abs_uv)) / radius; + float square = smoothstep(0.96, 1.0, dist); + return clamp(1.0 - square, 0.0, 1.0); +} + +// Adds a vignette shadow to the edges of the image +float vignette(vec2 uv){ + uv *= 1.0 - uv.xy; + float vignette = uv.x * uv.y * 15.0; + return pow(vignette, vignette_intensity * vignette_opacity); +} + +void fragment() +{ + vec2 uv = overlay ? warp(SCREEN_UV) : warp(UV); // Warp the uv. uv will be used in most cases instead of UV to keep the warping + vec2 text_uv = uv; + vec2 roll_uv = vec2(0.0); + float time = roll ? TIME : 0.0; + + + // Pixelate the texture based on the given resolution. + if (pixelate) + { + text_uv = ceil(uv * resolution) / resolution; + } + + // Create the rolling effect. We need roll_line a bit later to make the noise effect. + // That is why this runs if roll is true OR noise_opacity is over 0. + float roll_line = 0.0; + if (roll || noise_opacity > 0.0) + { + // Create the areas/lines where the texture will be distorted. + roll_line = smoothstep(0.3, 0.9, sin(uv.y * roll_size - (time * roll_speed) ) ); + // Create more lines of a different size and apply to the first set of lines. This creates a bit of variation. + roll_line *= roll_line * smoothstep(0.3, 0.9, sin(uv.y * roll_size * roll_variation - (time * roll_speed * roll_variation) ) ); + // Distort the UV where where the lines are + roll_uv = vec2(( roll_line * distort_intensity * (1.-UV.x)), 0.0); + } + + vec4 text; + if (roll) + { + // If roll is true distort the texture with roll_uv. The texture is split up into RGB to + // make some chromatic aberration. We apply the aberration to the red and green channels accorging to the aberration parameter + // and intensify it a bit in the roll distortion. + text.r = texture(SCREEN_TEXTURE, text_uv + roll_uv * 0.8 + vec2(aberration, 0.0) * .1).r; + text.g = texture(SCREEN_TEXTURE, text_uv + roll_uv * 1.2 - vec2(aberration, 0.0) * .1 ).g; + text.b = texture(SCREEN_TEXTURE, text_uv + roll_uv).b; + text.a = 1.0; + } + else + { + // If roll is false only apply the aberration without any distorion. The aberration values are very small so the .1 is only + // to make the slider in the Inspector less sensitive. + text.r = texture(SCREEN_TEXTURE, text_uv + vec2(aberration, 0.0) * .1).r; + text.g = texture(SCREEN_TEXTURE, text_uv - vec2(aberration, 0.0) * .1).g; + text.b = texture(SCREEN_TEXTURE, text_uv).b; + text.a = 1.0; + } + + float r = text.r; + float g = text.g; + float b = text.b; + + uv = warp(UV); + + // CRT monitors don't have pixels but groups of red, green and blue dots or lines, called grille. We isolate the texture's color channels + // and divide it up in 3 offsetted lines to show the red, green and blue colors next to each other, with a small black gap between. + if (grille_opacity > 0.0){ + + float g_r = smoothstep(0.85, 0.95, abs(sin(uv.x * (resolution.x * 3.14159265)))); + r = mix(r, r * g_r, grille_opacity); + + float g_g = smoothstep(0.85, 0.95, abs(sin(1.05 + uv.x * (resolution.x * 3.14159265)))); + g = mix(g, g * g_g, grille_opacity); + + float b_b = smoothstep(0.85, 0.95, abs(sin(2.1 + uv.x * (resolution.x * 3.14159265)))); + b = mix(b, b * b_b, grille_opacity); + + } + + // Apply the grille to the texture's color channels and apply Brightness. Since the grille and the scanlines (below) make the image very dark you + // can compensate by increasing the brightness. + text.r = clamp(r * brightness, 0.0, 1.0); + text.g = clamp(g * brightness, 0.0, 1.0); + text.b = clamp(b * brightness, 0.0, 1.0); + + // Scanlines are the horizontal lines that make up the image on a CRT monitor. + // Here we are actual setting the black gap between each line, which I guess is not the right definition of the word, but you get the idea + float scanlines = 0.5; + if (scanlines_opacity > 0.0) + { + // Same technique as above, create lines with sine and applying it to the texture. Smoothstep to allow setting the line size. + scanlines = smoothstep(scanlines_width, scanlines_width + 0.5, abs(sin(uv.y * (resolution.y * 3.14159265)))); + text.rgb = mix(text.rgb, text.rgb * vec3(scanlines), scanlines_opacity); + } + + // Apply the banded noise. + if (noise_opacity > 0.0) + { + // Generate a noise pattern that is very stretched horizontally, and animate it with noise_speed + float noise = smoothstep(0.4, 0.5, noise(uv * vec2(2.0, 200.0) + vec2(10.0, (TIME * (noise_speed))) ) ); + + // We use roll_line (set above) to define how big the noise should be vertically (multiplying cuts off all black parts). + // We also add in some basic noise with random() to break up the noise pattern above. The noise is sized according to + // the resolution value set in the inspector. If you don't like this look you can + // change \"ceil(uv * resolution) / resolution\" to only \"uv\" to make it less pixelated. Or multiply resolution with som value + // greater than 1.0 to make them smaller. + roll_line *= noise * scanlines * clamp(random((ceil(uv * resolution) / resolution) + vec2(TIME * 0.8, 0.0)).x + 0.8, 0.0, 1.0); + // Add it to the texture based on noise_opacity + text.rgb = clamp(mix(text.rgb, text.rgb + roll_line, noise_opacity), vec3(0.0), vec3(1.0)); + } + + // Apply static noise by generating it over the whole screen in the same way as above + if (static_noise_intensity > 0.0) + { + text.rgb += clamp(random((ceil(uv * resolution) / resolution) + fract(TIME)).x, 0.0, 1.0) * static_noise_intensity; + } + + // Apply a black border to hide imperfections caused by the warping. + // Also apply the vignette + text.rgb *= border(uv); + text.rgb *= vignette(uv); + // Hides the black border and make that area transparent. Good if you want to add the the texture on top an image of a TV or monitor. + if (clip_warp) + { + text.a = border(uv); + } + + // Apply discoloration to get a VHS look (lower saturation and higher contrast) + // You can play with the values below or expose them in the Inspector. + float saturation = 0.5; + float contrast = 1.2; + if (discolor) + { + // Saturation + vec3 greyscale = vec3(text.r + text.g + text.b) / 3.; + text.rgb = mix(text.rgb, greyscale, saturation); + + // Contrast + float midpoint = pow(0.5, 2.2); + text.rgb = (text.rgb - vec3(midpoint)) * contrast + midpoint; + } + + COLOR = text; +}" + +[sub_resource type="ShaderMaterial" id=2] +shader = SubResource( 1 ) +shader_param/overlay = true +shader_param/scanlines_opacity = 0.4 +shader_param/scanlines_width = 0.25 +shader_param/grille_opacity = 0.3 +shader_param/resolution = Vector2( 768, 240 ) +shader_param/pixelate = false +shader_param/roll = true +shader_param/roll_speed = 8.0 +shader_param/roll_size = 15.0 +shader_param/roll_variation = 1.8 +shader_param/distort_intensity = 0.05 +shader_param/noise_opacity = 0.4 +shader_param/noise_speed = 5.0 +shader_param/static_noise_intensity = 0.06 +shader_param/aberration = 0.0 +shader_param/brightness = 2.5 +shader_param/discolor = true +shader_param/warp_amount = 1.0 +shader_param/clip_warp = false +shader_param/vignette_intensity = 0.4 +shader_param/vignette_opacity = 0.5 + +[sub_resource type="Environment" id=3] +background_mode = 4 +glow_enabled = true +glow_intensity = 1.0 +glow_strength = 1.15 +glow_blend_mode = 0 + +[node name="RetroTerm" type="Control"] +anchor_right = 1.0 +anchor_bottom = 1.0 +theme = ExtResource( 2 ) +__meta__ = { +"_edit_use_anchors_": false +} + +[node name="ColorRect" type="ColorRect" parent="."] +show_behind_parent = true +anchor_right = 1.0 +anchor_bottom = 1.0 +color = Color( 0.156863, 0.156863, 0.156863, 1 ) +__meta__ = { +"_edit_use_anchors_": false +} + +[node name="Menu" parent="." instance=ExtResource( 1 )] +margin_left = 30.0 +margin_top = 30.0 + +[node name="CanvasLayer" type="CanvasLayer" parent="."] + +[node name="ColorRect" type="ColorRect" parent="CanvasLayer"] +modulate = Color( 0, 1, 0.4, 1 ) +material = SubResource( 2 ) +anchor_right = 1.0 +anchor_bottom = 1.0 +__meta__ = { +"_edit_use_anchors_": false +} + +[node name="WorldEnvironment" type="WorldEnvironment" parent="."] +environment = SubResource( 3 ) diff --git a/themes/retro_green.tres b/themes/retro_green.tres new file mode 100644 index 0000000..f786a5d --- /dev/null +++ b/themes/retro_green.tres @@ -0,0 +1,35 @@ +[gd_resource type="Theme" load_steps=4 format=2] + +[ext_resource path="res://addons/godot_xterm/resources/xrdb_theme.gd" type="Script" id=1] +[ext_resource path="res://addons/godot_xterm/themes/fonts/hack/hack_regular-3.003.ttf" type="DynamicFontData" id=2] + +[sub_resource type="DynamicFont" id=1] +size = 39 +extra_spacing_bottom = 1 +font_data = ExtResource( 2 ) + +[resource] +Terminal/colors/Background = Color( 0.156863, 0.156863, 0.156863, 1 ) +Terminal/colors/Black = Color( 0, 1, 0.4, 1 ) +Terminal/colors/Blue = Color( 0, 1, 0.4, 1 ) +Terminal/colors/Cursor = Color( 0, 1, 0.4, 1 ) +Terminal/colors/Cyan = Color( 0, 1, 0.4, 1 ) +"Terminal/colors/Dark Grey" = Color( 0, 1, 0.4, 1 ) +Terminal/colors/Foreground = Color( 0, 1, 0.4, 1 ) +Terminal/colors/Green = Color( 0, 1, 0.4, 1 ) +"Terminal/colors/Light Blue" = Color( 0, 1, 0.4, 1 ) +"Terminal/colors/Light Cyan" = Color( 0, 1, 0.4, 1 ) +"Terminal/colors/Light Green" = Color( 0, 1, 0.4, 1 ) +"Terminal/colors/Light Grey" = Color( 0, 1, 0.4, 1 ) +"Terminal/colors/Light Magenta" = Color( 0, 1, 0.4, 1 ) +"Terminal/colors/Light Red" = Color( 0, 1, 0.4, 1 ) +"Terminal/colors/Light Yellow" = Color( 0, 1, 0.4, 1 ) +Terminal/colors/Magenta = Color( 0, 1, 0.4, 1 ) +Terminal/colors/Red = Color( 0, 1, 0.4, 1 ) +Terminal/colors/White = Color( 0, 1, 0.4, 1 ) +Terminal/colors/Yellow = Color( 0, 1, 0.4, 1 ) +Terminal/fonts/Bold = null +"Terminal/fonts/Bold Italic" = null +Terminal/fonts/Italic = null +Terminal/fonts/Regular = SubResource( 1 ) +script = ExtResource( 1 ) diff --git a/themes/retro_green.xresources b/themes/retro_green.xresources new file mode 100644 index 0000000..73eb3ee --- /dev/null +++ b/themes/retro_green.xresources @@ -0,0 +1,36 @@ +! special +*.foreground: #00ff66 +*.background: #282828 +*.cursorColor: #00ff66 + +! black +*.color0: #00ff66 +*.color8: #00ff66 + +! red +*.color1: #00ff66 +*.color9: #00ff66 + +! green +*.color2: #00ff66 +*.color10: #00ff66 + +! yellow +*.color3: #00ff66 +*.color11: #00ff66 + +! blue +*.color4: #00ff66 +*.color12: #00ff66 + +! magenta +*.color5: #00ff66 +*.color13: #00ff66 + +! cyan +*.color6: #00ff66 +*.color14: #00ff66 + +! white +*.color7: #00ff66 +*.color15: #00ff66 diff --git a/themes/retro_green.xresources.import b/themes/retro_green.xresources.import new file mode 100644 index 0000000..0282da4 --- /dev/null +++ b/themes/retro_green.xresources.import @@ -0,0 +1,13 @@ +[remap] + +importer="godot_xterm_xrdb_importer" +type="Theme" +path="res://.import/retro_green.xresources-3110df277701da17f502f808acb29c51.res" + +[deps] + +source_file="res://themes/retro_green.xresources" +dest_files=[ "res://.import/retro_green.xresources-3110df277701da17f502f808acb29c51.res" ] + +[params] +