From c9dc31cc93030a994008049689e5f52b9d059eaf Mon Sep 17 00:00:00 2001 From: Henrique Alves Date: Mon, 20 Apr 2020 11:01:32 -0300 Subject: Tweak project settings --- ...racter.png-7a996d3b758d22c506b76a7c15391284.md5 | 3 + ...acter.png-7a996d3b758d22c506b76a7c15391284.stex | Bin 0 -> 5494 bytes ...erIcon.png-500a326ecb6c030754b5302e60a07b3b.md5 | 3 + ...rIcon.png-500a326ecb6c030754b5302e60a07b3b.stex | Bin 0 -> 260064 bytes CRTShader.shader | 65 +++++++ Character.gd | 22 +++ README.md | 26 ++- ShaderTestScreen.tscn | 188 ++++++++++++--------- character.png | Bin 0 -> 3657 bytes character.png.import | 34 ++++ project.godot | 4 +- shaderIcon.png | Bin 0 -> 273950 bytes shaderIcon.png.import | 34 ++++ 13 files changed, 281 insertions(+), 98 deletions(-) create mode 100644 .import/character.png-7a996d3b758d22c506b76a7c15391284.md5 create mode 100644 .import/character.png-7a996d3b758d22c506b76a7c15391284.stex create mode 100644 .import/shaderIcon.png-500a326ecb6c030754b5302e60a07b3b.md5 create mode 100644 .import/shaderIcon.png-500a326ecb6c030754b5302e60a07b3b.stex create mode 100644 CRTShader.shader create mode 100644 Character.gd create mode 100644 character.png create mode 100644 character.png.import create mode 100644 shaderIcon.png create mode 100644 shaderIcon.png.import diff --git a/.import/character.png-7a996d3b758d22c506b76a7c15391284.md5 b/.import/character.png-7a996d3b758d22c506b76a7c15391284.md5 new file mode 100644 index 0000000..cc614ee --- /dev/null +++ b/.import/character.png-7a996d3b758d22c506b76a7c15391284.md5 @@ -0,0 +1,3 @@ +source_md5="87fc463f554c58d9c9d508dcb315434b" +dest_md5="de4744bcb797287bdf157f9adfa40830" + diff --git a/.import/character.png-7a996d3b758d22c506b76a7c15391284.stex b/.import/character.png-7a996d3b758d22c506b76a7c15391284.stex new file mode 100644 index 0000000..adcc8b1 Binary files /dev/null and b/.import/character.png-7a996d3b758d22c506b76a7c15391284.stex differ diff --git a/.import/shaderIcon.png-500a326ecb6c030754b5302e60a07b3b.md5 b/.import/shaderIcon.png-500a326ecb6c030754b5302e60a07b3b.md5 new file mode 100644 index 0000000..93cdff4 --- /dev/null +++ b/.import/shaderIcon.png-500a326ecb6c030754b5302e60a07b3b.md5 @@ -0,0 +1,3 @@ +source_md5="d8ca914d6fa66d7f2d478c2065b644a3" +dest_md5="513137dc7b8d9b652b0263350579bd0a" + diff --git a/.import/shaderIcon.png-500a326ecb6c030754b5302e60a07b3b.stex b/.import/shaderIcon.png-500a326ecb6c030754b5302e60a07b3b.stex new file mode 100644 index 0000000..244a982 Binary files /dev/null and b/.import/shaderIcon.png-500a326ecb6c030754b5302e60a07b3b.stex differ diff --git a/CRTShader.shader b/CRTShader.shader new file mode 100644 index 0000000..d7e8afd --- /dev/null +++ b/CRTShader.shader @@ -0,0 +1,65 @@ +shader_type canvas_item; + +uniform float screen_width = 1024; +uniform float screen_height = 600; + +// Curvature +uniform float BarrelPower =1.1; +// Color bleeding +uniform float color_bleeding = 1.2; +uniform float bleeding_range_x = 3; +uniform float bleeding_range_y = 3; +// Scanline +uniform float lines_distance = 4.0; +uniform float scan_size = 2.0; +uniform float scanline_alpha = 0.9; +uniform float lines_velocity = 30.0; + +vec2 distort(vec2 p) +{ + float angle = p.y / p.x; + float theta = atan(p.y,p.x); + float radius = pow(length(p), BarrelPower); + + p.x = radius * cos(theta); + p.y = radius * sin(theta); + + return 0.5 * (p + vec2(1.0,1.0)); +} + +void get_color_bleeding(inout vec4 current_color,inout vec4 color_left){ + current_color = current_color*vec4(color_bleeding,0.5,1.0-color_bleeding,1); + color_left = color_left*vec4(1.0-color_bleeding,0.5,color_bleeding,1); +} + +void get_color_scanline(vec2 uv,inout vec4 c,float time){ + float line_row = floor((uv.y * screen_height/scan_size) + mod(time*lines_velocity, lines_distance)); + float n = 1.0 - ceil((mod(line_row,lines_distance)/lines_distance)); + c = c - n*c*(1.0 - scanline_alpha); + c.a = 1.0; +} + +void fragment() +{ + vec2 xy = SCREEN_UV * 2.0; + xy.x -= 1.0; + xy.y -= 1.0; + + float d = length(xy); + if(d < 1.5){ + xy = distort(xy); + } + else{ + xy = SCREEN_UV; + } + + float pixel_size_x = 1.0/screen_width*bleeding_range_x; + float pixel_size_y = 1.0/screen_height*bleeding_range_y; + vec4 color_left = texture(SCREEN_TEXTURE,xy - vec2(pixel_size_x, pixel_size_y)); + vec4 current_color = texture(SCREEN_TEXTURE,xy); + get_color_bleeding(current_color,color_left); + vec4 c = current_color+color_left; + get_color_scanline(xy,c,TIME); + COLOR = c; + +} diff --git a/Character.gd b/Character.gd new file mode 100644 index 0000000..ecd2314 --- /dev/null +++ b/Character.gd @@ -0,0 +1,22 @@ +extends AnimatedSprite + +var moving = 0 + +func _ready(): + playing = true + animation = "idle" + +func _process(delta): + if (Input.is_key_pressed(KEY_LEFT)): + moving = -1 + elif (Input.is_key_pressed(KEY_RIGHT)): + moving = 1 + else: + moving = 0 + + if (moving == 0): + animation = "idle" + else: + animation = "run" + scale = Vector2(moving, 1) * Vector2(abs(scale.x), scale.y) + position += Vector2(moving * 200 * delta, 0) diff --git a/README.md b/README.md index 754098c..4b328c1 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,22 @@ # SimpleGodotCRTShader -A simple Godot (v2.x) shader that simulates CRT Displays. +A simple Godot shader that simulates CRT Displays. + ![Without Shader](sample.png) ![With Shader](withshader.png) +## How to install -# How to install - -**Compatibility**: Thank you MohabMohamed for porting the Shader to Godot 3.x! Both projects can be found on their respective folders. To test, remember to change the variable values on the shader script. - -## For Godot 2.x +You can copy simply copy the CRTShader.shader -You can use the shader by just copying the "CRTDisplayShader.shd" to your project (it's the Shader raw code). But if you don't know how to setup the shader material, you can just use the CRTViewportDisplay: +A tutorial on how to install the Shader on Godot 2.x (YouTube): [https://www.youtube.com/watch?v=ydrC-3Uy-aY&feature=youtu.be](https://www.youtube.com/watch?v=ydrC-3Uy-aY&feature=youtu.be) -1. Copy-paste the "CRTViewportDisplay" folder to your project. -2. Open the "CRT.scn" on Godot Editor, and set the correct size of the viewport and the frames for your project display size. -3. Add the main scene of your project as a child of the Viewport node. +## For Godot 3.x -The viewport will than render your project using the CRT Shader. +You can simply copy the CRTShader.shader code to use on your project; to set it up, just use it in a an TextureRect with a white texture. Your game must be running 'under' the node for the CRT Shader to have any effect. You can modify the values of the Shader using the Uniform Variables. -A tutorial on how to install the Shader (YouTube): [https://www.youtube.com/watch?v=ydrC-3Uy-aY&feature=youtu.be](https://www.youtube.com/watch?v=ydrC-3Uy-aY&feature=youtu.be) - -# How the Shader works +## How the Shader works This Shader is made of 3 main components: * Distortion: It is the effect that causes the '3D'-like monitor effect. @@ -36,6 +30,8 @@ The effects are based on these articles: * Distortion: http://www.geeks3d.com/20140213/glsl-shader-library-fish-eye-and-dome-and-barrel-distortion-post-processing-filters/2/ * Color Bleeding and Scanlines: http://www.magneticrealms.com/posts/2014/02/03/a-crt-filter-without-shaders/ -A shoutout for the Godot developpers group on facebook! I would be completely lost without you guys, haha. +## Credits The screen sample was made by 'ansimuz' - the art is in public domain (CC0), and can be found in: http://opengameart.org/content/country-side-platform-tiles. + +Character was made by EdwoodNigma - the spritesheet is in public domain (CC0), and can be found in: https://opengameart.org/content/platformer-character-0 diff --git a/ShaderTestScreen.tscn b/ShaderTestScreen.tscn index 85f1019..4154bc2 100644 --- a/ShaderTestScreen.tscn +++ b/ShaderTestScreen.tscn @@ -1,8 +1,94 @@ -[gd_scene load_steps=12 format=2] +[gd_scene load_steps=29 format=2] [ext_resource path="res://sample.png" type="Texture" id=1] [ext_resource path="res://white.png" type="Texture" id=2] [ext_resource path="res://CRTFrame.png" type="Texture" id=3] +[ext_resource path="res://character.png" type="Texture" id=4] +[ext_resource path="res://Character.gd" type="Script" id=5] +[ext_resource path="res://CRTShader.shader" type="Shader" id=6] + +[sub_resource type="AtlasTexture" id=9] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 120, 0, 20, 24 ) + +[sub_resource type="AtlasTexture" id=10] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 140, 0, 20, 24 ) + +[sub_resource type="AtlasTexture" id=11] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 160, 0, 20, 24 ) + +[sub_resource type="AtlasTexture" id=12] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 180, 0, 20, 24 ) + +[sub_resource type="AtlasTexture" id=13] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 200, 0, 20, 24 ) + +[sub_resource type="AtlasTexture" id=14] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 220, 0, 20, 24 ) + +[sub_resource type="AtlasTexture" id=15] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 240, 0, 20, 24 ) + +[sub_resource type="AtlasTexture" id=16] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 260, 0, 20, 24 ) + +[sub_resource type="AtlasTexture" id=17] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 0, 0, 20, 24 ) + +[sub_resource type="AtlasTexture" id=18] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 20, 0, 20, 24 ) + +[sub_resource type="AtlasTexture" id=19] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 40, 0, 20, 24 ) + +[sub_resource type="AtlasTexture" id=20] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 60, 0, 20, 24 ) + +[sub_resource type="AtlasTexture" id=21] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 80, 0, 20, 24 ) + +[sub_resource type="AtlasTexture" id=22] +flags = 4 +atlas = ExtResource( 4 ) +region = Rect2( 100, 0, 20, 24 ) + +[sub_resource type="SpriteFrames" id=23] +animations = [ { +"frames": [ SubResource( 9 ), SubResource( 10 ), SubResource( 11 ), SubResource( 12 ), SubResource( 13 ), SubResource( 14 ), SubResource( 15 ), SubResource( 16 ) ], +"loop": true, +"name": "idle", +"speed": 5.0 +}, { +"frames": [ SubResource( 17 ), SubResource( 18 ), SubResource( 19 ), SubResource( 20 ), SubResource( 21 ), SubResource( 22 ) ], +"loop": true, +"name": "run", +"speed": 5.0 +} ] [sub_resource type="Shader" id=1] code = "shader_type canvas_item; @@ -97,91 +183,18 @@ shader_param/size_screen = 600.0 shader_param/scanline_alpha = 0.9 shader_param/lines_velocity = 30.0 -[sub_resource type="Shader" id=7] -code = "shader_type canvas_item; - -uniform float screen_width = 1024; -uniform float screen_height = 600; - -// Curvature -uniform float BarrelPower =1.1; -// Color bleeding -uniform float color_bleeding = 1.2; -uniform float bleeding_range_x = 3; -uniform float bleeding_range_y = 3; -// Scanline -uniform float lines_distance = 4.0; -uniform float scan_size = 2.0; -uniform float scanline_alpha = 0.9; -uniform float lines_velocity = 30.0; -vec2 distort(vec2 p) -{ - - float angle = p.y / p.x; - float theta = atan(p.y,p.x); - float radius = pow(length(p), BarrelPower); - - p.x = radius * cos(theta); - p.y = radius * sin(theta); - - return 0.5 * (p + vec2(1.0,1.0)); -} - -void get_color_bleeding(inout vec4 current_color,inout vec4 color_left){ - - current_color = current_color*vec4(color_bleeding,0.5,0.25,1); - color_left = color_left*vec4(0.25,0.5,color_bleeding,1); -} - -void get_color_scanline(vec2 uv,inout vec4 c,float time){ - float line_row = floor((uv.y * screen_height/scan_size) + mod(time*lines_velocity, lines_distance)); - - float n = 1.0 - ceil((mod(line_row,lines_distance)/lines_distance)); - - c = c - n*c*(1.0 - scanline_alpha); - c.a = 1.0; - -} - -void fragment() -{ - -vec2 xy = SCREEN_UV * 2.0; -xy.x -= 1.0; -xy.y -= 1.0; - -float d = length(xy); -if(d < 1.5){ - xy = distort(xy); -} -else{ - xy = SCREEN_UV; -} - -float pixel_size_x = 1.0/screen_width*bleeding_range_x; -float pixel_size_y = 1.0/screen_height*bleeding_range_y; -vec4 color_left = texture(SCREEN_TEXTURE,xy - vec2(pixel_size_x, pixel_size_y)); -vec4 current_color = texture(SCREEN_TEXTURE,xy); -get_color_bleeding(current_color,color_left); -vec4 c = current_color+color_left; -get_color_scanline(xy,c,TIME); -COLOR = c; - -} -" - [sub_resource type="ShaderMaterial" id=8] -shader = SubResource( 7 ) +shader = ExtResource( 6 ) shader_param/screen_width = 1024.0 shader_param/screen_height = 600.0 -shader_param/BarrelPower = 1.1 -shader_param/color_bleeding = 1.0 -shader_param/bleeding_range_x = 1.0 -shader_param/bleeding_range_y = 1.0 -shader_param/lines_distance = 4.0 +shader_param/BarrelPower = 1.12 +shader_param/color_bleeding = 2.0 +shader_param/bleeding_range_x = 2.0 +shader_param/bleeding_range_y = 2.0 +shader_param/lines_distance = 3.0 shader_param/scan_size = 2.0 shader_param/scanline_alpha = 0.9 -shader_param/lines_velocity = 30.0 +shader_param/lines_velocity = 40.0 [node name="Control" type="Control"] margin_right = 40.0 @@ -191,9 +204,19 @@ margin_bottom = 40.0 texture = ExtResource( 1 ) centered = false +[node name="Character" type="AnimatedSprite" parent="."] +position = Vector2( 95.038, 473.203 ) +scale = Vector2( 3.77667, 3.77667 ) +frames = SubResource( 23 ) +animation = "idle" +script = ExtResource( 5 ) + [node name="Shaders" type="Control" parent="."] margin_right = 40.0 margin_bottom = 40.0 +__meta__ = { +"_edit_use_anchors_": false +} [node name="Curvature" type="TextureRect" parent="Shaders"] visible = false @@ -234,3 +257,6 @@ margin_right = 1082.0 margin_bottom = 812.0 rect_scale = Vector2( 0.946396, 0.738916 ) texture = ExtResource( 3 ) +__meta__ = { +"_edit_use_anchors_": false +} diff --git a/character.png b/character.png new file mode 100644 index 0000000..bcb6cb0 Binary files /dev/null and b/character.png differ diff --git a/character.png.import b/character.png.import new file mode 100644 index 0000000..a43cd0d --- /dev/null +++ b/character.png.import @@ -0,0 +1,34 @@ +[remap] + +importer="texture" +type="StreamTexture" +path="res://.import/character.png-7a996d3b758d22c506b76a7c15391284.stex" +metadata={ +"vram_texture": false +} + +[deps] + +source_file="res://character.png" +dest_files=[ "res://.import/character.png-7a996d3b758d22c506b76a7c15391284.stex" ] + +[params] + +compress/mode=0 +compress/lossy_quality=0.7 +compress/hdr_mode=0 +compress/bptc_ldr=0 +compress/normal_map=0 +flags/repeat=0 +flags/filter=true +flags/mipmaps=false +flags/anisotropic=false +flags/srgb=2 +process/fix_alpha_border=true +process/premult_alpha=false +process/HDR_as_SRGB=false +process/invert_color=false +stream=false +size_limit=0 +detect_3d=true +svg/scale=1.0 diff --git a/project.godot b/project.godot index 78aa4cf..ddfcecb 100644 --- a/project.godot +++ b/project.godot @@ -15,9 +15,9 @@ _global_script_class_icons={ [application] -config/name="ShaderTest" +config/name="CRTShader" run/main_scene="res://ShaderTestScreen.tscn" -config/icon="res://icon.png" +config/icon="res://shaderIcon.png" [rendering] diff --git a/shaderIcon.png b/shaderIcon.png new file mode 100644 index 0000000..a39bb38 Binary files /dev/null and b/shaderIcon.png differ diff --git a/shaderIcon.png.import b/shaderIcon.png.import new file mode 100644 index 0000000..763f604 --- /dev/null +++ b/shaderIcon.png.import @@ -0,0 +1,34 @@ +[remap] + +importer="texture" +type="StreamTexture" +path="res://.import/shaderIcon.png-500a326ecb6c030754b5302e60a07b3b.stex" +metadata={ +"vram_texture": false +} + +[deps] + +source_file="res://shaderIcon.png" +dest_files=[ "res://.import/shaderIcon.png-500a326ecb6c030754b5302e60a07b3b.stex" ] + +[params] + +compress/mode=0 +compress/lossy_quality=0.7 +compress/hdr_mode=0 +compress/bptc_ldr=0 +compress/normal_map=0 +flags/repeat=0 +flags/filter=true +flags/mipmaps=false +flags/anisotropic=false +flags/srgb=2 +process/fix_alpha_border=true +process/premult_alpha=false +process/HDR_as_SRGB=false +process/invert_color=false +stream=false +size_limit=0 +detect_3d=true +svg/scale=1.0 -- cgit v1.2.3