diff options
| -rw-r--r-- | .import/character.png-7a996d3b758d22c506b76a7c15391284.md5 | 3 | ||||
| -rw-r--r-- | .import/character.png-7a996d3b758d22c506b76a7c15391284.stex | bin | 0 -> 5494 bytes | |||
| -rw-r--r-- | .import/shaderIcon.png-500a326ecb6c030754b5302e60a07b3b.md5 | 3 | ||||
| -rw-r--r-- | .import/shaderIcon.png-500a326ecb6c030754b5302e60a07b3b.stex | bin | 0 -> 260064 bytes | |||
| -rw-r--r-- | CRTShader.shader | 65 | ||||
| -rw-r--r-- | Character.gd | 22 | ||||
| -rw-r--r-- | README.md | 26 | ||||
| -rw-r--r-- | ShaderTestScreen.tscn | 188 | ||||
| -rw-r--r-- | character.png | bin | 0 -> 3657 bytes | |||
| -rw-r--r-- | character.png.import | 34 | ||||
| -rw-r--r-- | project.godot | 4 | ||||
| -rw-r--r-- | shaderIcon.png | bin | 0 -> 273950 bytes | |||
| -rw-r--r-- | shaderIcon.png.import | 34 |
13 files changed, 281 insertions, 98 deletions
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 Binary files differnew file mode 100644 index 0000000..adcc8b1 --- /dev/null +++ b/.import/character.png-7a996d3b758d22c506b76a7c15391284.stex 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 Binary files differnew file mode 100644 index 0000000..244a982 --- /dev/null +++ b/.import/shaderIcon.png-500a326ecb6c030754b5302e60a07b3b.stex 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) @@ -1,28 +1,22 @@ # SimpleGodotCRTShader -A simple Godot (v2.x) shader that simulates CRT Displays. +A simple Godot shader that simulates CRT Displays. +   +## 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 Binary files differnew file mode 100644 index 0000000..bcb6cb0 --- /dev/null +++ b/character.png 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 Binary files differnew file mode 100644 index 0000000..a39bb38 --- /dev/null +++ b/shaderIcon.png 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 |
