Complete Godot 4 (2D) Shader Course: Visual Effects - Part 1

Create visually stunning 2D games using canvas Item shaders: Hands-on techniques to go from beginner to intermediate

What you'll learn

Gain a deep understanding of Godot 4 's shader language, enabling you to leverage its full potential for game development.

Learn the step-by-step process to create canvas_item shaders, laying the foundation for complex visual effects in 2D games.

Acquire the skills to design and implement captivating visual effects (VFX) using shaders, enhancing the aesthetic appeal of your games.

Become familiar with industry-standard best practices for efficient and effective shader programming within the Godot engine.

Discover how to integrate shaders with game logic using GDScript and GDShader language, allowing for dynamic and interactive game environments.

Through the Zombie project, apply your learning in a practical context, understanding how to use shaders in real game development scenarios.

You'll have a strong foundation to build upon. Being able to transfer this knowledge to learn 3D shaders or the more general GLSL shader language.

At the end of the course you'll easily gun down and blow up loads of angry zombies using shaders you created on your own

Requirements

Love for shaders and game development

Knowing the basics of a programming language would help

Being able to "read" gdscript would help but not required

Description

Welcome to the "Godot 4.x Canvas item Shaders" course on Udemy! This course will guide you through the fascinating world of 2D shaders, where you'll learn everything from the essentials to advanced techniques. That being said, the series is split up between a beginner and an intermediate course. You are now looking at the first part of the series, where we will go from absolutely or relatively new to shaders, to having a clear understanding of the basic fundamentals, being able to create and understand 2D shaders from scratch. It will take you from a beginner to intermediate in a matters of hours.The content of the course is up to date with godot 4.2In this part of the series we'll start by exploring canvas item shaders, Godot's unique shading language, and look into essential data types like floats, integers, arrays, vectors, matrices, etc. You'll learn concepts like color channels, texture mapping, uniforms, wrapping modes, formatting, built-in functions, hints, blend modes and UV coordinate system. And more advanced topics like pre-processing shaders, debugging-shaders & -techniques,  interaction with GDScript, randomness, animations, interpolation curves and the list goes on and on. We will explore these topics through a blend of theory and practical coding exercises.The course is structured to provide a comprehensive understanding of shader language, and we'll even tackle a fun "Zombie project." For those interested in the math behind the magic, we'll take a detailed look at every built-in shader function that we'll be using in our code. Every time a new functionality is introduced, We'll have a full explanation using coding examples, slides and follow up questions. Plus, it's important to know that the course follows community best practices.By the end of this course, you'll not only have a solid foundation in shader programming in Godot but also a fun, interactive project to showcase your new skills. So, let's start our journey into the colourful world of shaders! Im happy to welcome you to the course!Kind regards,SamAs a final note:At this point in time the second part of the series is still under development. I will be working on both this course to make sure it's up to date and the new course. This way you will be able to advance from intermediate to advance level once the second part is finished. Topics that will NOT be discussed in this course, but will be included in the upcoming part 2 are: applying matrices on vertices, screen & canvas space shaders, screen texture, post-processing shaders, advanced vector operations, global uniforms, coordinate space transformations using transform matrices (world to screen space), back buffer copy, advanced uv mapping, light function and other advanced topics. Those will be discussed in the upcoming course.

Overview

Section 1: Introductie

Lecture 1 Introduction

Section 2: First Shader: Theory

Lecture 2 Overview of section

Lecture 3 What canvas_item shaders are

Lecture 4 Godot's shading language

Lecture 5 Data-types: Floats, integers & vectors

Lecture 6 Vector 2 & coordinates

Lecture 7 Vector 3 & 4 & color channels

Lecture 8 Textures

Lecture 9 UV Coordinate system

Lecture 10 Normalising textures

Lecture 11 Texture mapping

Lecture 12 Texture space

Lecture 13 Challenge: Quiz & wrap up

Section 3: First Shader: Practical

Lecture 14 Overview of section

Lecture 15 Create project

Lecture 16 Setting up shader

Lecture 17 Fragment: RGB colors

Lecture 18 Fragment: Swizzling

Lecture 19 Fragment: Alpha

Lecture 20 Vertex: RGBA

Lecture 21 Fragment: Multiplying & dividing COLOR

Lecture 22 Fragment: UV Variable

Lecture 23 Challenge: Create your own zombie

Lecture 24 Vertex: UV

Lecture 25 Sampler2D: Texture Sampling & Uniforms

Lecture 26 UV Texture mapping

Lecture 27 Vertex: VERTEX Manipulation

Lecture 28 UV mapping vs VERTEX positioning

Lecture 29 Built-in function: Mix

Lecture 30 Challenge: Add a third texture

Section 4: Shader Essentials: Rendering pipeline

Lecture 31 Overview of section

Lecture 32 Rendering phase: Vertices

Lecture 33 Rendering phase: Vertex shader

Lecture 34 Rendering phase: Primitives generation

Lecture 35 Rendering phase: Rasterisation

Lecture 36 Rendering phase: Fragment shader

Lecture 37 Rendering phase: Testing blending

Lecture 38 Rendering phase: Framebuffer

Lecture 39 Importance CPU vs GPU

Lecture 40 Light function

Lecture 41 Rendering the end phase

Section 5: Shader Essentials: Data-types

Lecture 42 Overview of section

Lecture 43 Project setup

Lecture 44 Data types: Boolean

Lecture 45 Data types: Boolean vectors

Lecture 46 Data types: Integer vectors

Lecture 47 Data types: Unsigned integer

Lecture 48 Data types: Matrices

Lecture 49 Data types: Mat3

Lecture 50 Data types: Sampler2D

Lecture 51 Texels

Lecture 52 Data types: Sampler2D Array

Lecture 53 Outro

Section 6: Shader Essentials: GDShader language

Lecture 54 GDShader language: Overview of section

Lecture 55 GDShader language: Arrays

Lecture 56 GDShader language: Array length

Lecture 57 GDShader language: Arrays challenge

Lecture 58 GDShader language: Read & write to arrays

Lecture 59 GDShader language: Global arrays

Lecture 60 GDShader language: For Loops

Lecture 61 GDShader language: While Loops

Lecture 62 GDShader language: Do-While Loops

Lecture 63 GDShader language: Loops challenge

Lecture 64 GDShader language: Custom Functions

Lecture 65 GDShader language: Custom Functions Challenge

Lecture 66 GDShader language: IF statements & Branch divergence

Lecture 67 GDShader language: Step function

Lecture 68 GDShader language: Branchless techniques

Lecture 69 GDShader language: Switch

Lecture 70 GDShader language: Turnary operator

Lecture 71 GDShader language: IF section == over

Section 7: Shader Essentials: Debugging

Lecture 72 Debugging: Overview

Lecture 73 Debugging: Visual debugging

Lecture 74 Debugging: Visual debugging challenge

Lecture 75 Debugging: Challenge solution

Lecture 76 Debugging: Debugging textures

Lecture 77 Debugging: Frame rate monitoring

Lecture 78 Debugging: Modular workflow

Lecture 79 Debugging: Clean coding conventions

Lecture 80 Debugging: Line length

Lecture 81 Debugging: Magical numbers

Lecture 82 Debugging: Godot style guide

Lecture 83 Debugging: Preprocessors

Lecture 84 Debugging: Wrapping up

Lecture 85 Style guide godot

Section 8: Zombie Project: Intro

Lecture 86 Intro: Overview

Lecture 87 Intro: Scope

Lecture 88 Intro: File structure

Lecture 89 Intro: Project Walk through

Lecture 90 Intro: Add our zombie shader

Lecture 91 Intro: Kill them all!

Section 9: Zombie Project: Flash on Hit

Lecture 92 Flash on hit: Overview

Lecture 93 Flash on hit: Function setup

Lecture 94 Flash on hit: Outline Challenge

Lecture 95 Flash on hit: Outline Solution

Lecture 96 Flash on hit: Hint_range

Lecture 97 Flash on hit: Source_color Hint

Lecture 98 Flash on hit: Core logic

Lecture 99 Flash on hit: Limit range challenge

Lecture 100 Flash on hit: Multiplying

Lecture 101 Flash on hit: Built-in function Clamp

Lecture 102 Flash on hit: hint_range steps

Lecture 103 Flash on hit: AnimationPlayer

Lecture 104 Flash on hit: GDScript run animation

Lecture 105 Flash on hit: Testing the shader

Lecture 106 Flash on hit: Dedicated function

Lecture 107 Flash on hit: Custom function challenge

Lecture 108 Flash on hit: Custom function solution

Lecture 109 Flash on hit: Uniform (sub) groups

Lecture 110 Flash on hit: Finished in a flash

Section 10: Zombie Project: Breath

Lecture 111 Breath: Overview

Lecture 112 Breath: Vertex phase

Lecture 113 Breath: Scale challenge

Lecture 114 Breath: Scale solution

Lecture 115 Breath: Built-in TIME

Lecture 116 Breath: Reducing frequency

Lecture 117 Breath: Sin & Cos

Lecture 118 Breath: Applying sin

Lecture 119 Breath: Pre-processor Include

Lecture 120 Breath: Explain flipping vertices

Lecture 121 Breath: Challenge change magnitude

Lecture 122 Breath: Solution change magnitude

Lecture 123 Breath: Frequency

Lecture 124 Breath: Magnitude

Lecture 125 Breath: Custom function

Lecture 126 Breath: Shared function with include

Lecture 127 Breath: Share breath & flash

Lecture 128 Breath: Dynamic parameters

Lecture 129 Breath: Uniforms vs Constants

Lecture 130 Breath: Define breathing pace

Lecture 131 Breath: Out of breath

Section 11: Shader Essentials: Fragment function

Lecture 132 Fragment: Overview

Lecture 133 Fragment: Scaling UV

Lecture 134 Fragment: Setup shader

Lecture 135 Fragment: Challenge scaled uv

Lecture 136 Fragment: Challenge white color

Lecture 137 Fragment: Clamped Wrapping mode

Lecture 138 Fragment: Challenge bottom half

Lecture 139 Fragment: Solution bottom half

Lecture 140 Fragment: Texture Wrapping modes

Lecture 141 Fragment: Wrapping mode repeat

Lecture 142 Fragment: Wrapping Mode Mirror

Lecture 143 Fragment: Built-in mod function

Lecture 144 Fragment: Wrapping UV with mod

Lecture 145 Fragment: Challenge mod output

Lecture 146 Fragment: Coding example mod

Lecture 147 Fragment: UV Translations

Lecture 148 Fragment: Translate UV in code

Lecture 149 Fragment: Texture scrolling

Lecture 150 Fragment: Understanding the code

Lecture 151 Fragment: Animate with mod

Lecture 152 Fragment: Animate with CurveTexture

Lecture 153 Fragment: CurveTexture Theory

Lecture 154 Fragment: Anim graph inside editor

Lecture 155 Fragment: Noise texture

Lecture 156 Fragment: Apply randomish numbers

Lecture 157 Fragment: Wrapping up

Section 12: Shader Essentials: From idea to fire shader (workflow)

Lecture 158 Workflow: Overview

Lecture 159 Workflow: Conceptualisation

Lecture 160 Workflow: Sketching and design

Lecture 161 Workflow: Prototyping

Lecture 162 Workflow: Development

Lecture 163 Workflow: Refinement

Lecture 164 Workflow: Feedback

Lecture 165 Workflow: Final stage

Lecture 166 Workflow: Recap

Lecture 167 Fire shader: Setup scene

Lecture 168 Fire shader: Preview

Lecture 169 Fire shader: Shift texture to the left

Lecture 170 Fire shader: Texture shifting solution

Lecture 171 Fire shader: Noise

Lecture 172 Fire shader: Setup debugging texture

Lecture 173 Fire shader: White number

Lecture 174 Fire shader: Center align distortion

Lecture 175 Fire shader: Explain center alignment - Default

Lecture 176 Fire shader: Explain center alignment - Add noise

Lecture 177 Fire shader: Explain center alignment - Subtraction

Lecture 178 Fire shader: Explain center alignment - Conclusion

Lecture 179 Fire shader: Explain center alignment with uniform

Lecture 180 Fire shader: Clean up shimmer code

Lecture 181 Fire shader: Color gradients

Lecture 182 Fire shader: Fire gradient challenge

Lecture 183 Fire shader: Fire gradient solution

Lecture 184 Fire shader: Mix heat and fire challenge

Lecture 185 Fire shader: Mix heat and fire solution

Lecture 186 Fire shader: Fire range challenge

Lecture 187 Fire shader: Explore solutions

Lecture 188 Fire shader: Crop vertical fire range

Lecture 189 Fire shader: Test uniform to adjust range

Lecture 190 Fire shader: Challenge what to animate

Lecture 191 Fire shader: Texture repeat

Lecture 192 Fire shader: Seam lines

Lecture 193 Fire shader: Challenge why both animated

Lecture 194 Fire shader: TIME animation

Lecture 195 Fire shader: Challenge Improvements

Lecture 196 Fire shader: Improvement one

Lecture 197 Fire shader: Improvement two

Lecture 198 Fire shader: Improvement three

Lecture 199 Fire shader: When the fire died down

Section 13: Zombie Project: Hero taking damage

Lecture 200 Hero Damaged: Overview

Lecture 201 Hero Damaged: Shader setup

Lecture 202 Hero Damaged: Write outline challenge

Lecture 203 Hero Damaged: Write outline solution

Lecture 204 Hero Damaged: Uniforms

Lecture 205 Hero Damaged: Dedicated function

Lecture 206 Hero Damaged: Setup noise & gradient

Lecture 207 Hero Damaged: Logic outline challenge

Lecture 208 Hero Damaged: Logic outline solution

Lecture 209 Hero Damaged: Code the logic challenge

Lecture 210 Hero Damaged: Code the logic solution: step 1

Lecture 211 Hero Damaged: Code the logic solution: step 2

Lecture 212 Hero Damaged: Code the logic solution: step 3

Lecture 213 Hero Damaged: Increment effect on progress challenge

Lecture 214 Hero Damaged: Increment effect on progress solution

Lecture 215 Hero Damaged: Set uniform in GDScript

Lecture 216 Hero Damaged: Fix progress uniform challenge

Lecture 217 Hero Damaged: Fix progress uniform solution

Lecture 218 Hero Damaged: Improve outline

Lecture 219 Hero Damaged: Finetune noise

Lecture 220 Hero Damaged: Finetune gradient

Lecture 221 Hero Damaged: Progress with curveTexture

Lecture 222 Hero Damaged: Add red tint

Lecture 223 Hero Damaged: Built-in function smoothstep

Lecture 224 Hero Damaged: Apply smoothstep

Lecture 225 Hero Damaged: Code cleanup - Reduce datatype size

Lecture 226 Hero Damaged: Code cleanup - Merge mix functions

Lecture 227 Hero Damaged: Code cleanup - Red noise channel

Lecture 228 Hero Damaged: Code cleanup - Base texture

Lecture 229 Hero Damaged: Code cleanup - Magical number

Lecture 230 Hero Damaged: Code cleanup - Uniforms

Lecture 231 Hero Damaged: Code cleanup - Custom function

Lecture 232 Hero Damaged: Code cleanup - Red tint adjustment

Lecture 233 Hero Damaged: Conclusion

Section 14: Zombie Project: Zombie taking damage

Lecture 234 Zombie Damaged: Overview

Lecture 235 Zombie Damaged: Code preparation

Lecture 236 Zombie Damaged: Challenge dissect the effect

Lecture 237 Zombie Damaged: Solution dissect the effect

Lecture 238 Zombie Damaged: Sample the gradient

Lecture 239 Zombie Damaged: Sample red noise channel

Lecture 240 Zombie Damaged: Challenge alpha noise

Lecture 241 Zombie Damaged: Challenge base silhouette filled with noise

Lecture 242 Zombie Damaged: Add hitpoints uniform

Lecture 243 Zombie Damaged: Recap steps of the effect

Lecture 244 Zombie Damaged: Challenge black box uv mapping

Lecture 245 Zombie Damaged: Challenge top down transparency

Lecture 246 Zombie Damaged: Challenge variation top down transparency

Lecture 247 Zombie Damaged: Challenge X vs Y scrolling

Lecture 248 Zombie Damaged: Completing dissolve logic

Lecture 249 Zombie Damaged: VERTEX scaling at the end

Lecture 250 Zombie Damaged: Re-add rotation

Lecture 251 Zombie Damaged: Cleanup custom functions

Lecture 252 Zombie Damaged: Fine tune gradient

Lecture 253 Zombie Damaged: Disable debug shader

Lecture 254 Zombie Damaged: Bind Tween to shader uniform

Lecture 255 Zombie Damaged: Final adjustments

Lecture 256 Zombie Damaged: Burned up

Section 15: Completed the course

Lecture 257 Final words

Lecture 258 Where to go from here

Section 16: BONUS section

Lecture 259 Bonus lecture

Anyone wants to learn how to create and use shaders in godot 4,The scope of the course does not include 3D shader, that being said, the fundamentals you learn provide an excellent foundation for mastering 3D shaders,Game Developers and Designers interested in enhancing the visual appeal of their 2D games with custom shaders in Godot 4,Programmers looking to expand their skills in game development by mastering shader programming and visual effects (VFX),Artists and Animators who want to leverage shaders to bring their art to life in game environments.,Students and Hobbyists in game development seeking a comprehensive guide to utilizing GDShader language for creative expression.,Educators looking for resources to teach advanced game design and programming concepts.,indie Game Creators aiming to implement high-quality visuals with efficient use of resources in their projects.