Godot: Very common and wildly spread functionality in editing software require to write shaders

[golddotasksquestions]

Godot version:
3.1

I suppose for people coming into Godot who already have a coding background, this is less of a problem.
For me, having to learn another language in order to do things like overlaying with a color, shear a Node, adding an outline or a blurred shadow is a huge problem.
These things are literally a one or two click operations in editors of all kind, be it text editors, image editors, video or animation or presentation editors.
I really wish Godot would offer a these with the same intuitive simplicity as it does with Modulate/Visibility.

If adding a shadow was just a checkbox (with slider for the blur, and float for the angle),
if adding an outline was just a checkbox (with slider for the thickness),
if adding a solid color overlay was just a checkbox (in the modulate popup for instance),
if shearing was part of the transformations,

prototyping would be so much faster and Godot as a whole so much more accessible.

Is it not possible to have a couple shaders build into the engine?

Edit: yes, 2D, but also for things like control nodes like buttons, labels, texturerect ect.

[Zylann]

I assume you are referring to 2D?
Maybe we could add some features to CanvasItemMaterial? Just like SpatialMaterial has many of them, it looks weird that 2D doesn't have any simple effect to offer past blend mode. Although, it can't solve 100% of them.

• Shadow: need to draw geometry a second time behind with the same texture as uniform color and blurred with shader, maybe also scaled up due to this. Shader can't generate such geometry, or could make it in-place by stretching the geometry while keeping original UVs intact.
  Note: anything requiring to blur the texture is going to be very expensive if mipmaps or smooth filters are not enabled, because then the shader has no choice but to average itself ALL pixels in the area.

• Outline: similarly to above, doing it per-object in shader requires some blank space around visible pixels. If there isn't, geometry needs to be padded a bit to increase the draw area with some UV trickery. Can become a bit complicated with atlased textures?

• Solid color overlay: this is very broad. I assume you mean fading the entire texture to an uniform color?

• Shearing: that can be done either by whatever draws the geometry or by shader. May need extra information depending on which kind of thing you are drawing.

Note 1: all these effects have many ways to be accomplished, some more efficient than others. Here I listed only those for non-destructive, per-object ones which don't involve new renderer features, which makes it doable even now and ease quick prototyping.

Note 2: I know people might not like when I say this, but all of these things can be provided through extensions such as plugins. "Bloat" and "executable engine size" has been discussed to great lengths, although I believe there might be a point to at least improve CanvasItemMaterial.
Funnily enough, even the Unity Engine does not come with fancy effects included, these are a separate package "Standard Assets" (which is bundled on install I believe).

Note 3: this is a game engine, not an image editor. Even if some effects get implemented, they might not look as good because compromises should sometimes be taken so that it can run decently in realtime even on low-end, while still supporting the millions of features everyone else wanted in the engine.

[golddotasksquestions]

Note 2: I know people might not like when I say this, but all of these things can be provided through extensions such as plugins.

Yes, I don't like that indeed. :)
Mesh deformations, 2D skeletons and bones, pseudo 3D, CSG Mesh ... these could all be provided as plugins and have vastly narrower use cases than those simple shader effects above.

Funnily enough, even the Unity Engine does not come with fancy effects included, these are a separate package "Standard Assets" (which is bundled on install I believe).

I don't think the lack of a feature in Unity or their total dependency on their asset store is an argument for not including a feature in Godot.

Note 3: this is a game engine, not an image editor. Even if some effects get implemented, they might not look as good because compromises should sometimes be taken so that it can run decently in realtime even on low-end.

Yes of course. But these already work and exist as shaders. And for basic purposes look good.
In my nativity I imagine if I would hit that checkbox, Godot would just add this shader code to the node and remove it if I uncheck it. Would be great if it would be stackable (so Godot would insert the code at the right places if I hit more than one of those checkboxes)

[bojidar-bg]

Note that you can already do shear transformations, but not directly from the editor. They are affine transformations and thus can be handled by Transform2D.

[bojidar-bg]

Another note: most of the requested features can be implemented with something similar to CSS's box-shadow, which is basically an underlay with replaced color, offset, and blur. It can be used for outlines of certain (simple) shapes, shadows, and blurred shadows.

[golddotasksquestions]

Note that you can already do shear transformations, but not directly from the editor. They are affine transformations and thus can be handled by Transform2D

Is this explained anywhere? I looked through documentation and performed online searches and asked on Discord and Duriel meant I need to have a shader for that.
I went through https://docs.godotengine.org/en/3.1/classes/class_transform2d.html#class-transform2d-method-basis-xform at least 5 times already, trying to figure out which one of these could perform a skew and how I would use it. If it's in there, it was not written for people with a pitiable intellect like mine.

Another note: most of the requested features can be implemented with something similar to CSS's box-shadow, which is basically an underlay with replaced color, offset, and blur. It can be used for outlines of certain (simple) shapes, shadows, and blurred shadows.

Yes, but the point I am trying to make here, is that it's not available from within the editor/inspector even though these are super basic features of any editor of any kind that has a minimum of design ability.

Godot is a tool for Game _Design_ after all.

Imagine how fast I could prototype a UI element or pickup-able gameobject if all I would need is to click a checkbox to add a shadow.
Or with the same speed write for a hover effect:

func _on_Area2D_mouse_entered():
    $Button.outline(true, outlinewidth)

Or use $Sprite.color_overlay(Color(1, 0.5, 0.7, 1)) to color - not tint - gameplay elements of various kind.
Or $Sprite.color_overlay(Color(1, 1, 1, 1)) to get a solid white overlay over any texture, without interfering with the WorldEnvironment glow threshhold like Modulate would.
Or animate my text using skew as it swiftly moves into my menu. Or skew some texture or text or sprite or node in any isometric game to make it seem like it's part of the world, do basic animations and make it seem almost 3D ...

I can think of nearly endless use cases for this. It's for a reason this is something so common in editors of any kind that need to use visual design to communicate something to it's reader/player/consumer quickly and easily. I believe they also need to be easily accessible to the designer/creator for that reason and not require much beyond basic knowledge of editor navigation.

[avencherus]

Is this explained anywhere? I looked through documentation and performed online searches and asked on Discord and Duriel meant I need to have a shader for that.

@golddotasksquestions

No I don't think it is, but what he was meaning was to manipulate the matrix directly. As you say though, one has to have some experience with matrix transforms to know how these effects are achieved. The documentation assumes pre-requisite knowledge, which isn't unreasonable, but it could benefit from pointing out which elements deal with scaling and which handle skewing.

It is possible in script at least to manipulate the components on the Transform2D's x and y properties. The x.y and y.x will add shearing, the others should be related to XY scaling. Here's an example:

extends Node2D

export var shear_x = 1.0
export var shear_y = 2.0


func _ready():


    var s = Sprite.new()
    add_child(s)

    s.texture  = preload("res://icon.png")
    s.position = Vector2(100, 100)

    s.transform.y.x = shear_x
    s.transform.x.y = shear_y

That said, I quite agree, it would be nice if the transformation handles in the editor allowed more interesting kinds of manipulations.

Shearing is useful for faking perspective, and would be a lot easier to animate if it could be handled visually with drag handles. It isn't so easy to get desired results attempting this blindly with code, but the above script could probably provide a less ideal work-around to problem.

You also might have better luck attracting attention to some of these features by breaking them up into individual discussions.

[golddotasksquestions]

$Sprite.transform.y.x = 2.0

Holy Crap! One line? That easy?!? I really can't believe this isn't mentioned anywhere I looked. Thank you so much!
I still wish this was already build into the Inspector. .... along with the other features which require shaders.

You also might have better luck attracting attention to some of these features by breaking them up into individual discussions.

Probably, but these are like the five fingers on the designers hand not necessarily to make things pretty, but to visually communicate simple but important things:

Drop Shadow:

• Is this shape picked-up and moveable, or is it "on the table"?
• Are these shapes touching each other?
• How many layers are there and which relation are they to each other?
• Do these shapes belong in the hierarchy of importance?
• Are these HUD elements or game elements?
• Can I move one shape behind another, or do I have to make another action before (like pickup or drop)?
• ...

Outline:

• "This is your current selection"
• "This thing is more relevant that that thing right now" (thicker vs thinner outline)
• "You can't see this thing, but it is still there"
• "This thing is foreground"
• ...

Solid Color (Coloring something in a solid color you need basically everywhere for everything):

• Take any graphic and make it a specific color (tinting aka modulate does not work as well as you cannot modulate any texture to a solid color)
• Unmistakably inform my users about gamestates like this thing bad, this thing good, this thing heathy, this thing hit, these things belong together ....
• Fade texture without making the graphic transparent

...

I feel like they belong together, because as a game designer I need all of them daily to quickly and directly communicate an endless amount of things to my players.

If I had these at the tip of my fingers by just clicking a checkbox, I could test things out many times as fast. But as it is right now, game designers without a technical background have a hard time getting there.
Designers opening up Godot for the first time may wonder "Why can't I just make this thing red/white/green/blue?" 🙁

[avencherus]

Holy Crap! One line? That easy?!? I really can't believe this isn't mentioned anywhere I looked. Thank you so much!

No problem. X)

I feel like they belong together.

Those ones yeah, I think you can bundle them as "style options", but adding Shearing editor functionality seems like a different category.

[Calinou]

Someone published an outline shader to the Asset Library :slightly_smiling_face:

https://godotengine.org/asset-library/asset/394

[golddotasksquestions]

The point of this issue is that users (especially new users) need to hassle with shaders for these simple effects in the first place. See this comment.

[rcorre]

FWIW there are also visual shaders, which are getting an overhaul in 3.2. Sure, it isn't as easy as a checkbox, but it might be more intuitive than writing shader code.

I came to godot with 0 shader experience, and found the visual editor to be a nice starting point (in my case mainly the blender node tree, but same idea).

[golddotasksquestions]

I tried my luck with visual shaders multiple times without any success. To use them you need to know syntax and meaning of every component just as much as if you are writing the shader in shader language. Which I find looks a lot cleaner and more concise than visual shaders.
I read the article and surely will try again sometime with 3.2, but this has very little to do with the issue here.

[madmiraal]

Feature and improvement proposals for the Godot Engine are now being discussed and reviewed in a dedicated Godot Improvement Proposals (GIP) (godotengine/godot-proposals) issue tracker. The GIP tracker has a detailed issue template designed so that proposals include all the relevant information to start a productive discussion and help the community assess the validity of the proposal for the engine.

The main (godotengine/godot) tracker is now solely dedicated to bug reports and Pull Requests, enabling contributors to have a better focus on bug fixing work. Therefore, we are now closing all older feature proposals on the main issue tracker.

If you are interested in this feature proposal, please open a new proposal on the GIP tracker following the given issue template (after checking that it doesn't exist already). Be sure to reference this closed issue if it includes any relevant discussion (which you are also encouraged to summarize in the new proposal). Thanks in advance!