Change script icons throughout the editor to be consistent

[marcospb19]

Problematic:

Script icons are inconsistent in the editor.

When creating a folder or scene the icons shown match to what is shown in the FyleSystem Dock, but the script icon does not:

And in the Scene Dock (scene tree):

Edit: Also in the top of the editor

---

Suggestion:

Make the script icon unique through the editor.

[marcospb19]

I think that the paper icon (see images) should be the unified one.

The problem, of course, is that there are 3 different icons for each type of script, I'm also suggesting that this icons were to be changed.

.gd scripts going with the paper icon, and the other two with slight different icons or totally reworked ones.

For .gdns, .vs and .cs files, I would also like to see their icons differentiated in the Scene Dock (scene tree), currently, when you click on a script that appears attached to a Scene in the Scene Tree, you don't know what is it's type, until it opens up.

Would be nice to have a slight difference, to know what script is of each type without having to open them up.

[marcospb19]

We can already preview the changes for the .gd files (as other ones need changes).

Current:

New suggested:

[Error7Studios]

.gd scripts going with the paper icon, and the other two with slight different icons or totally reworked ones.

How about we just use the blank paper icon for a generic script, and write letters on the typed ones?

(From left to right: Script, GDScript, NativeScript, VisualScript, C#)

[marcospb19]

Here I'm trying to mix your idea with what is already present.

(new_script.cs was supposed to be CSharp.cs, my bad)

Original:

Inspired by the original:

Note that I changed bin to ns for NativeScript, as it makes more sense now that the project has vs and cs.

I did not liked how it looked, so I kept experimenting (trying to use the whole 16x16 space available).

Experimenting with subtle shadows (on the paper close to the letters, try looking closer to see the difference from the previous one).

And finally, I experimented with some colors.

With less saturation.

I think that the last 3 examples look way better than the original one, however, I did not tested with light themes (when a light theme is applied to the editor, the white icons turn black).

---

One last note, cs could be changed to c#

[marcospb19]

About the mention above:

I pretend to also make new icons for Discrete Scripts/Built-In Scripts with a somehow transparent or hollow look, something to differentiate it on the FileSystem Dock and if possible, as I mentioned here, make the differentiation also appear on the Scene Dock (scene tree) script icons.

[Calinou]

@marcospb19 Do you have the SVG files for the icons you made here?

As well as the C# one here:

It would be appreciated if you could upload them here 🙂

[marcospb19]

The demos are actually .png files, but I'll try to learn how to replicate the look for .svg (don't know how much time I'll take to do it).

I was thinking about replacing cs with c#, but reflecting about this, it looks like a bad idea, the character # looked good only because it was pixel-perfectly drawn, with .svg the scaling will totally ruin it (it'll be unreadable) .

EDIT: I did not went into the effort of learning it before and creating the .svg files because I wanted to know if this suggestion is worth taking my time to do it, I assume by your response that it is.

[Error7Studios]

@marcospb19 You can use Inkscape to convert a PNG into an SVG for you automatically.
Tutorial - https://www.youtube.com/watch?v=1PX3KrwgLNc

[Calinou]

@Error7Studios Automatic vectorization will create a very inefficient path. I wouldn't rely on it here.

[marcospb19]

Update on the SVG files (sorry for the time I'm taking to do this):

I managed to reproduce the .png demos, I'm taking the opportunity to experiment with the letters design, as it is possible to make it slightly more readable, I'm currently focusing on getting the best possible look I can come up with.

Additionally, I have been studying some code, hoping that I can make my first PR before 4.0 is out 🙏.

Including the feature to see specific script icon in the Scene Tree Dock, as I said in this comment:

For .gdns, .vs and .cs files, I would also like to see their icons differentiated in the Scene Dock (scene tree), currently, when you click on a script that appears attached to a Scene in the Scene Tree, you don't know what is it's type, until it opens up.

[marcospb19]

Here are the SVG files (finished??):

Looks nice?

I had a hard time replicating the colors from the first colored demo, rasterization isn't as trivial as editing PNG pixels, even if I set the saturation at maximum, the geometry itself influences a lot on the final result.

About the CSharp alternatives: the icon with C# will probably break if the .svg is scaled by some fraction (not by integer values), this is because the only way I could draw a decent # was by making a pixel perfect 5x5 in the vector, SO I suggest that IF we choose to use it, we save the CS alternative as a fallback in case someday it's decided to scale the icons.

---

@Calinou GitHub does not support uploading SVG here, but all files are uploaded in this repository.

I uploaded to this repository all icons that contain this gear symbol related to scripts, it's important to decide which ones should change.

EDIT: .zip of the repository (08/14):
godot-svg-icons-master.zip

[Calinou]

@Calinou GitHub does not support uploading SVG here, but all files are uploaded in this repository.

You could also pack them into a ZIP archive and upload it by drag-and-dropping it 🙂

the icon with C# will probably break if the .svg is scaled by some fraction (not by integer values), this is because the only way I could draw a decent # was by making a pixel perfect 5x5 in the vector, SO I suggest that IF we choose to use it, we save the CS alternative as a fallback in case someday it's decided to scale the icons.

Godot supports fractional scaling (see the Editor Settings), so it's best to use icons that still look correct when scaled by a non-integer factor.

[marcospb19]

Godot supports fractional scaling (see the Editor Settings).

I was unsure, okay, so then we should totally ignore the C# icon.

---

What about the other gear icons? I don't know if I should edit them, for example the PluginScript.svg file.

EDIT: my progress to try implementing a PR is frozen, I installed some drivers and now master I'm getting core dumped 🤦 🤕.

[goatchurchprime]

Very closely related (and simpler), I'd like to see a 'b' on that script icon if it has the gdns type. I waste a lot of time clicking on these in some projects, only to be disappointed when the editor shows nothing since it's not gdscript.

This would also visually highlight the fact that even if the node says it's type Skeleton, it's not because it's a derived class with extra functions that you won't find in the docs.