CRT retro shader

Features
1

Hi !

What about adding to Aseprite a kind of retro CRT shaders while editing? (or at last for preview)

See here for example (Web GL demo):
https://b005t3r.github.io/UltimateCRT/screenshots/index.html

For a closer look, see this image (comparison of the Famicom version of Wizardry (1987), on a CRT screen vs current HD monitor):

And imagine you draw with that old CRT preview directly in Aseprite (including “zooming in the shader” like in the image above).

All the best,
-lonestarr

PS: full article including this image:

2 Likes
2

came here to post basically the same thing, word for word. it would be great to have a custom shader preview window

is this possibly something an extension could do? or a script?

edit: found a tool that takes a portion of the screen and applies the CRT sim from Super Win The Game SuperCRT by J. Kyle Pittman

The code is also there, might be a straightforward thing to implement

2 Likes
3

I did also found SuperCRT, but its resolution is limited. Here is another similar post where I compare some results:

The following CRT shaders are mentionned too:

4

A useful CRT shader would be quite a complex feature, as decent CRT emulation is not as simple as slapping a texture on top of the artwork. On top of needing a UI to handle all the parameters it needs, it would need to generate shadow masks, curvature math, and colour remapping on the fly according to the parameters (avoiding the complexity of that work is likely why SuperCRT has a fixed screen size that it targets), possibly with its own set of presets.

This seems like a feature best suited to either an external program like SuperCRT, or, more conveniently, a plug-in that adds an additional preview window to Aseprite. I don’t think this should be a core feature, as it’s a very large amount of work (and eventual file size) for something that is at best a curiosity for most users.

2 Likes
5

I found a couple of interesting shaders on shadertoy, like Shader - Shadertoy BETA

That one was made explicitly for pixel art.

6

Registered just to give my two cents on this. I, too, am interested in a feature like this. When working on pixel art meant for blurry display, I’d like to see how it will actually end up looking while I’m working. The pixel art techniques are different.
I looked into the extensions API and couldn’t really find anything useful for this. Would be nice if someone more experienced in aseprite scripting could give us a hand. At least to say if it’s possible.

Honestly, doesn’t even need to be a full blown CRT shader, a simple blurred preview window would help!

1 Like
7

Just found ShaderGlass which is awesome (like SuperCRT but with all shaders from libretro):

1 Like
8

It would be really nice if there was an official implementation of this.
Pixel-art was made for CRT displays, back in the day they tried to make pixel-art look like real hand-drawn art and pixel-art was just a constraint.

https://twitter.com/BATTLE_ATHLETE/status/1817965316145647974
This would be an easy btu important addition for people who want to work with traditional pixel-art.
If anyone wants to implement it, Aseprite is open-source.

9

Here is a workflow to get a CRT shader preview with Aseprite on Windows.

It’s based on Squint + ShaderGlass, and it’s very experimental!
This is more a proof of concept, so please don’t blame me :slight_smile:
Anyway it works for me, for my own pixel art, so I hope other pixel artists could benefit from it.

1- Install my release of “Micro-Squint” from here:

The zip file contains:

NB: I just forked the Squint repo, using the existing “micro-squint” branch, and made a few changes.

2- Install the Microsoft Visual 2022 redist package if you don’t have it already:

This is required for micro-squint.exe to run (Squint 0.2.1 used the Visual 2015 redist)

3- Install the last release of ShaderGlass from here:

4- Launch micro-squint.exe, then in Aseprite open any image (no tilemaps) and select “File > Connect to Squint”.
You should see your image in the Micro-Squint window.
Every stroke in Aseprite is replicated in Micro-Squint. Warning: it can be slow on images with pixel ratio, so work with small resolutions in this case (github issue).
Let’s add the CRT Shader now with ShaderGlass.

5- Launch ShaderGlass, in the menu “Input” select “Window” then “Squint micro viewer”
ShaderGlass now shows your image with the default CRT filter, but it looks blurry so:

  • In the menu “Input”, select “Pixel Size” to 1.
  • In the menu “Output”, select “Scale” to 300% or above depending on how big is your screen resolution.
  • You may press ‘n’ multiple times to loop through all the different shaders and explore/tweak them.

Every stroke you make in Aseprite is now reflected with a CRT Shader in ShaderGlass!

And now the bad news: this is not a live preview, you have to release the left mouse button up to make the modification appears in Micro-Squint/ShaderGlass.
But at least we have something now.
And if anyone can tell me how to get the current drawing (while the mouse button is down) in the API, please let me know :slight_smile:

Enjoy!
-lonestarr

PS: Please report any issues here:

Here is the original Squint tool: squint by Eiyeron
My changes are available here:
GitHub - lonestarr/squint at micro-squint

1 Like
10

<3 Thank you omg