Released Post-Processing FX 🔸 Beautify your game! 🔸 v4.0! - SHADERS: Bloom, VHS, Glitch, Shockwaves, Motion Blur, DOF, and more. (dev-log)

FoxyOfJungle

Kazan Games


Description:

Welcome to the Post-Processing FX (PPFX) asset devlog thread! Post-Processing FX is a project that aims to make your game look beautiful!
Here you can follow the development and give your feedback regarding this asset that is already on Marketplace:


RELEASED!

Get it here:

Play the DEMO clicking here!

Motion Blur (one of several effects):




ROADMAP:

  • HDR (High Dynamic Range) support; (ADDED)
Effects that will be added in future updates (no order):
  • SSAO (Screen Space Ambient Occlusion);
  • Fish-eye distortion;
  • VHS (retro TV effect); (ADDED)
  • Infrared;
  • Anamorphic Flares;
  • HQ4x; (ADDED)
  • Slow Motion (Drunk Effect). (ADDED)


Compatibility:

Cross-platform:
Windows, Mac, Ubuntu, Android, iOS, HTML5, OperaGX, UWP, Playstation 4, Playstation 5, Xbox One, Xbox Series X | S and Nintendo Switch.

Works on:
x64 and x86 runner. With YYC and VM.

Pipeline:
OpenGL ES 1.0 (default).
Works on 2D and 3D.


How to use it:

Its implementation is currently quite simple, you can take a look at this quick tutorial:




----------------------------------------------------------------------
Important: All information below is from a VERY old pre-release version:

What I plan:

My goal is to make a compact and powerful asset, where you can apply all the effects together in your game!


(Note: The latest version has a lot more stuff)

It will support profiles, which are presets of the effects that will be used, so you can create various patterns and change the mood of your game in real-time using the appropriate functions.

Look at this example:



This can be really cool for when, for example, in a spaceship game, you enter some secret or dark area and apply some effects on the screen, like the grayscale with VHS/Scanlines.

You can also apply the effects to any sprite or surface:



Bokeh effect with hexagonal blur:



Edit: you can see the final version of it here:


Many effects together!



Edit:
New Bloom effect of the latest version:




Want to receive notifications and be in the know? Join my Discord server:
Kazan Games

Thanks for reading this far! Stay tuned, we will have a lot more to show. If you want, give suggestions. 😉
 
Last edited:

FoxyOfJungle

Kazan Games
#Devlog 1

"Dirt lens" effect added to "Bloom" effect!
You can use any texture that is a dirt len.



Edit:
Please note, this is a very old version of Bloom, you can check the DEMO with the new effects.

 
Last edited:

Mert

Member
3D LUT Cube (Look-up Table)
If I may ask, how did you achieve this one. Would be really good if you'd share it with me process of how it goes 😅
(I kinda tried this some years ago, had it working but also remember having some issues)
 

FoxyOfJungle

Kazan Games
If I may ask, how did you achieve this one. Would be really good if you'd share it with me process of how it goes 😅
(I kinda tried this some years ago, had it working but also remember having some issues)
By looking deep between the RGB channels, you can get different combinations, which together form the colors. So, you need to do some calculations to replace the colors of the original sampler.
You need to separate the RGB channels:

=>

You can choose to use "horizontal" luts as well. See this article.
 
Last edited:

FoxyOfJungle

Kazan Games
#Devlog 2

All effects worked on Android! Except "Bloom"... I need to investigate. Probably precision issues.



Edit: Fixed on Android.
 
Last edited:

Old2DGuy

Member
Looks great! But.....with that FPS you're displaying, I hope you also benchmark on much less capable hardware. I would suggest creating a benchmark demo yyz, exe, apk, etc, that we can install and run on our own devices to see how things are running. Thanks!
 

FoxyOfJungle

Kazan Games
Looks great! But.....with that FPS you're displaying, I hope you also benchmark on much less capable hardware. I would suggest creating a benchmark demo yyz, exe, apk, etc, that we can install and run on our own devices to see how things are running. Thanks!
Thanks for the suggestion!

I'm going to do several tests on different computers to see how it behaves. If it works well on the 2008/2010 computers, then I think it will work for any game/project of yours. :)

These are the devices that I will test:

- 2008 notebook:
Intel Atom 2.13Ghz. Cores: 2.
GPU: Integrated: 128 MB VRAM.
4GB DDR3 RAM.
HDD 320 GB. 5400 RPM.
8-bit display, 1366x768, 60 Hz.
Charger: 19v.

- 2010 computer:
Intel Celeron E3300, 2.5Ghz. Cores: 2.
GPU: Dedicated: GT 420, 2GB GDDR3, 128-bit.
8 GB DDR3 RAM.
HDD 1 TB Toshiba, 7200 RPM. (This computer has changed HDD 5 times, LOL)
8-bit display, 1366x768, 60 Hz.
Energy: 200w, simple ATX.

- 2020 notebook:
AMD Ryzen 5 3500U, 3.2Ghz. Cores: 4, Threads: 8.
Integrated GPU: 2GB VRAM.
8GB DDR4 RAM. (6 Used).
SSD Nvme ADATA XPG 6800.
6-bit display, 1366x768, 60 Hz.
Charger: 20v.

- 2021 Gaming Computer:
Intel Core i3 10100F, 4.2Ghz. Cores: 8, Threads: 8.
Dedicated GPU: GTX 1050 Ti, 4 GB VRAM GDDR5.
16GB DDR4 RAM.
SSD: Pichau Gaming 240 GB, 680 MB/s.
HDD: 1 TB Western Digital, 5400 RPM.
Pichau Gaming Monitor, 1080p, 75 Hz, HDR, GSync.
Energy: 500w 80 plus.

I can also ask my friend to test it. I'll also check the GPU usage, which is the most important, besides the FPS (as we've already seen, the asset is light on the CPU side).

Thanks!
 
Last edited:

FoxyOfJungle

Kazan Games
#Devlog 3

Chromatic Aberration
added!
This is special, you can customize the vector direction, intensity, only outer, center radius, enable blur and the blur radius.





LUT + Saturation + Contrast + Brightness + HSV Hue Shift + Bloom + Chromatic Aberration + Posterization + Dithering + Vignette
All together!
 
Last edited:

FoxyOfJungle

Kazan Games
#Devlog 5 (03/03/2022)

  • CRT TV texture overlay;
  • I also added scan lines;
  • Lens distortion: Barrel and Pincushion distortion.

 
Last edited:

FoxyOfJungle

Kazan Games
#Devlog 6 (04/03/2022)

  • Pixelize effect;
  • I finished the scan lines and lens distortion effects;
  • Fixed a noise intensity bug (in gif is disabled - it makes the GIF bigger);
  • I improved the TV texture and increased the sprite resolution for better quality.

 

FoxyOfJungle

Kazan Games
#Devlog 8 (04/22/2022)

# Palette Swap
added!
Here's an example, using a Gameboy palette and a Grayscale palette:



(Important: this feature is still in beta, so some palettes may not work properly).

# Screen Rotation added!



# Screen Zoom added!
(you can also change the zoom position, instead of center)



You can combine it with the "border overlay" effect to hide the corners:


 
Last edited:

FoxyOfJungle

Kazan Games
#Devlog 9 (04/23/2022)

Dithering 8x8, 4x4 and 2x2:




I will make some variations of this effect yet.
 
Last edited:

FoxyOfJungle

Kazan Games
#Devlog 10 (04/24/2022)

- Now the Vignette effect can be any color, so you can create blood effects on the screen.



- Fixed some bugs on the system.
- Now Post-Processing FX can be applied to the Draw Event, without relying on the Draw GUI Event! @KyleRansford



These squares and circles are simulating the GUI. In the example, I made something cool that will faithfully simulate the Draw GUI in Draw, without modifying anything (I'm using some matrix transformation)!



- Radial Blur fully added and you can custom the blur color:


(Enabling pixel interpolation makes the effect smoother!)

- Removed some redundant (and ugly names) functions: ppfx_application_render_set_drawbegin, ppfx_application_render_set_drawend
Now it's only: ppfx_application_render_draw();
 
Last edited:

FoxyOfJungle

Kazan Games
Hello!

Due to the QA process, in addition to the creation of the store page, which must be detailed, the beta launch of Asset may be delayed a bit, but it shouldn't take too long. Thank you for understanding.

Cheers.
 

FoxyOfJungle

Kazan Games
JUICE! I am honored to present the launch of "Post-Processing FX"! 🤩💫

Post-Processing FX is a project that aims to make your game look beautiful! Currently, there are 21 high quality effects and MANY features, check it out!

GET IT HERE:
(GM Marketplace soon...)

Current Effects:
Code:
3D LUT Cube (Look-up Table)
Palette Swap
Bloom
VHS CRT TV
Scan lines
Vignette
Posterization
Dithering
Chromatic Aberration
Pixelize
Dirt lens
Saturation
Contrast
Brightness
HSV Color Hue
Noise grain
Zoom
Image Rotation (with aspect ratio)
Fade to color
Lens Distortion (Barrel and Pincushion Distortion)
Border Overlay
All these effects can be used at the same time. It is also possible to apply the effect in the GUI.


Important things to be aware of:
  • This version can now be used for production.
  • The system and shader work perfectly.
  • It is still not possible to apply shader in layers yet, due to some problems with the layers, I need to investigate.
  • Only some effects are in beta as they can be improved (image processing, as is the case with Palette Swap). 90% is usable.
  • The project is super performant, but I will probably improve more.

Thanks for listening! :D
 
Last edited:

Slyddar

Member
Congrats mate on getting it released. It's always a massive investment of time and effort putting out a game or asset so well done.

Is a demo showing off the effects on the roadmap?
 

FoxyOfJungle

Kazan Games
Congrats mate on getting it released. It's always a massive investment of time and effort putting out a game or asset so well done.

Is a demo showing off the effects on the roadmap?
Thank you very much! 😄

80% of the things that are on the Roadmap I'm still going to do (I only have displacement maps and Bokeh "almost done").


oh man this effect right here


would look so cool on my game , i'm making a game where little monsters evolve
I agree! and you even gave me an idea now to make a sine wave effect too...
Added to Roadmap! :)
 

BeowuIf

Member
Thank you very much! 😄

80% of the things that are on the Roadmap I'm still going to do (I only have displacement maps and Bokeh "almost done").




I agree! and you even gave me an idea now to make a sine wave effect too...
Added to Roadmap! :)
ooooh make it and you will get another buyer!
great job!! 👏
 

Nocturne

Friendly Tyrant
Forum Staff
Admin
Can the retro TV effect be applied without the TV overlay texture? If NOT then may I make a humble suggestion to make it optional? This kind oif effect is very sought-after, but having that TV texture I think would put a lot of people off using it. While making my current game, I wanted a TV texture and found a couple that I really liked, but they both used an old TV texture as an overlay which I hated... so I had to get my hands dirty and basically remake them in my own way so they didn't use that, and I suspect that 99.9% of games that want a retro TV effect don't want a literal retro TV!

Also... This is an incredible pack, and the work you've put into it is fantastic. When I've finished my current WIP it's a 100% definite purchase for me, as I think I could find many uses for almost all the effects it so far contains.
(I'd buy it now, but I don't want to get distracted from my current project 😅😅😅).

I hope it sells well for you!!!
 

FoxyOfJungle

Kazan Games
Can the retro TV effect be applied without the TV overlay texture? If NOT then may I make a humble suggestion to make it optional? This kind oif effect is very sought-after, but having that TV texture I think would put a lot of people off using it. While making my current game, I wanted a TV texture and found a couple that I really liked, but they both used an old TV texture as an overlay which I hated... so I had to get my hands dirty and basically remake them in my own way so they didn't use that, and I suspect that 99.9% of games that want a retro TV effect don't want a literal retro TV!

Also... This is an incredible pack, and the work you've put into it is fantastic. When I've finished my current WIP it's a 100% definite purchase for me, as I think I could find many uses for almost all the effects it so far contains.
(I'd buy it now, but I don't want to get distracted from my current project 😅😅😅).

I hope it sells well for you!!!
Thank you so much for the kind words, Mark! 😁
All the effects are actually separate (there will be an exception explained below), I usually show them together because they combine XD. These are the currently available effects (some not released yet):



Maybe I suppose I got the names mixed up here, as the border overlay is actually where I can use the TV texture (or any texture).... 🤔
However, currently I need to disable the texture to only show the border... So you gave me the idea to actually separate the two. So I think I'll go by these names:
- BORDER
- TEXTURE_OVERLAY (for blood and TV texture)

I can currently use a blood texture instead of the TV texture, like in Dead Cells:


Basically you can have the same effect as above: Blood overlay with intensity + blur in the background (the Gaussian blur I will add soon).
Blood can be made without texture, however, using "Vignette" effect.

The "Lens Distortion" is what makes the TV distortion, note that it is separate as well. That is, I can enable individually:



However, note that the UVs around it looks kind of weird:



That's why there is another effect that covers these edges (currently, "border overlay" effect), note:



So:




Demonstrating with and without blood texture:
(Lens distortion disabled too)



The "Scanlines" effect is also something separate from the others:



The next update will have several bug fixes and new effects. Spoiler:


Again, thank you so much! :D

Best regards,
Mozart.
 
Last edited:

FoxyOfJungle

Kazan Games


VERSION 1.1.0 IS NOW AVAILABLE!
(On Itch.io and now on YYG Marketplace!)

It is with great pleasure that I come to announce the version 1.1.0 of Post-Processing FX!


RELEASE NOTES:


[ADDED] Day Night Cycle example
[ADDED] Displacement Maps - For underwater, rain, drips effects. Using normal map
[ADDED] NES Fade - Fade effect exactly like NES (Famicom, 8-bit Console from Nintendo, 1983)
[ADDED] Sine Wave - Horizontal, vertical or both wave effect. Useful for simulating water and others
[ADDED] Color blindness correction effect (Protanopia, Deutanopia, Tritanopia)
[ADDED] Colorize effect
[ADDED] Channels - Effect to control individual colors (RGB: 0 ~ 1 each)
[ADDED] Invert Colors effect
[ADDED] Now you can change the texture of "texture overlay" in-game/real-time
[ADDED] Original "Game Boy" color palette
[ADDED] NES (Famicom) color Palette
[ADDED] Normal map water texture
[ADDED] Blood texture
[ADDED] Color Blindness correction example
[ADDED] Texture Overlay now supports intensity, allowing to use a blood texture on the screen, for example
[ADDED] Texture overlay zoom
[ADDED] ppfx_profile_get_name() function
[ADDED] ppfx_effect_set_parameter() function - MUCH faster way to control a single parameter!
[ADDED] ppfx_effect_get_parameter() function

[FIXED] Now the scanlines effect is not affected by others, only by "Lens Distortion".
[FIXED] All angles are now measured in degrees and not radians by default
[FIXED] Performance improvements (some redundant math and array usage removed)
[FIXED] Shader: Luminance from: Bloom, Palette Swap and Dithering
[FIXED] ppfx_exists() now has more checking accuracy
[FIXED] Many small bugs fixed
[FIXED] MANY improvements to the shader
[FIXED] Asset folder more organized

[CHANGED] To create effects it is now necessary to use "new" instead of "PPFX_PROFILE."
[CHANGED] All effect functions now start with "pp_" (example: pp_saturation, pp_lut, pp_fade...)
So, now you can do:
new pp_saturation(true, 1)
[CHANGED] "Border Overlay" has now been separated into two effects: "Border" and "Texture Overlay"
[CHANGED] In-shader: all effects suffix renamed from "color" to "fx"
[CHANGED] Chromatic Aberration intensity parameter now comes first than direction as it will default to 180, not 0

[REMOVED] "__pp_vec_direction" function, since the shader itself will do the angle conversion
[REMOVED] Unused "test" uniform from PPFX shader

NEW EFFECTS:

● Colorize:
- Useful for old-time effects like using an orange color and noise together.
- Preserves the white color.




● Displacement Maps:
- Useful for underwater effects, rain, raindrops, shockwave and many others!




● NES Fade:
- Exact imitation of NES fade transition (Famicom 8-bit console)



● Sine Wave:
- Wave effect, horizontal, vertical or both.



● Color blindness correction.
- Protanopia, Deutanopia and Tritanopia.



● Channels
- Control RGB channels individually:

● Invert Colors:




Bonus:
- Many together:



Day & Night Cycle example!


Get it on:

 
Last edited:

FoxyOfJungle

Kazan Games
#Devlog 13 (06/02/2022) - June

Added Lift, Gamma and Gain effect.
- Lift controls shadows, Gamma controls midtones and Gain controls highlights.

Added Night Vision example.
- The above effects are part of the night vision effect.

There are a lot more things added and improved, but I'll leave it as a mystery for now. ;)
 
Last edited:

FoxyOfJungle

Kazan Games
#Devlog 14 (06/10/2022) - June

Debug UI System:
New UI system to test all effects of PPFX, work in progress...
They support unlimited range and value auto update.

Performance:
Post-Processing FX currently uses 0.14ms on average. The UI is using 0.12ms.


3/4 of the batch break is coming from the UI (draw_* functions)

And many other things added, but I'm still developing/fixing some bugs.
 

FoxyOfJungle

Kazan Games


VERSION 1.2 IS NOW AVAILABLE!
(On Itch.io and now on YYG Marketplace!)

After a long hard work, I'm happy to announce the most awaited update, version 1.2 of Post-Processing FX!
This release includes many new effects, changes, performance improvements as well as many bug fixes.

Please read carefully what has been changed as it will cause syntax errors if you have already added it to your game and want to use the new version.
The changes were necessary for the improvement of the product. You can replace any code with CTRL + SHIFT + F.

The price of the asset has increased $5 due to the various improvements and new features it has obtained (from $19.95 to $24.95).


RELEASE NOTES:

[ADDED] ACES (Academy Color Encoding System) Tone Mapping (Film mode)
[ADDED] Motion Blur effect
[ADDED] Glitch effect
[ADDED] Shake Screen effect
[ADDED] Speed Lines effect
[ADDED] Lift, Gamma and Gain effect
[ADDED] Shadow, Midtone, Highlight effect
[ADDED] Exposure effect
[ADDED] Shockwaves example
[ADDED] Nightvision example (is a real effect that increases visibility of dark colors too)
[ADDED] New Noise Grain effect
[ADDED] New Radial Blur effect
[ADDED] New Pixelize effect
[ADDED] JSDocs to script functions for better understanding
[ADDED] Default normal map texture
[ADDED] Camera delta motion
[ADDED] Linear interpolation on "Sine Wave", "Pixelize", "Lens Distortion"
and "Displacement Map" effects when changing global intensity
[ADDED] Script error checking (for fatal exception)
[ADDED] Border "color" parameter
[ADDED] Scanlines mask
[ADDED] New 4 parameters to scanlines: color, mask power, mask scale and mask smoothness
[ADDED] Settings script and new option to disable trace (debug messages) and exceptions (error messages) and others
[ADDED] Basic UI System for the example (not part of PPFX itself, useful for fiddling with parameters only)
[ADDED] ppfx_profile_set_name() function
[ADDED] ppfx_effect_toggle(): change if effect will draw;
[ADDED] ppfx_toggle(): change if post-processing will draw;
[ADDED] ppfx_application_render_redraw(): to reset the drawing of the inner surface (useful if you change the render resolution)
[ADDED] PP_DITHERING_BAYER_TEXTURE and PP_DITHERING_BAYER_SIZE macro parameters to Dithering effect
[ADDED] PP_NES_FADE_LEVELS macro parameter to the "Nes Fade" effect
[ADDED] PP_TEXTURE_OVERLAY_IS_OUTSIDE macro parameter to the "Texture Overlay" effect
[ADDED] Some new default parameters for effect constructors
[ADDED] "Dirt Lens Scale" parameter to the Bloom

[CHANGED] Shader: replaced random hash function
[CHANGED] Shader: some effects reordered
[CHANGED] Noise grain effect now no longer uses a texture slot, making it possible to use it in Motion Blur
[CHANGED] PP_BLUR_RADIAL_FALLOFF is now PP_BLUR_RADIAL_INNER
[CHANGED] pp_blur_radial now it does not have the color parameter, since it was removed
[CHANGED] Improved PPFX system timer
[CHANGED] "Color HSV" is now "Hue Shift"
[CHANGED] Dithering "luma" parameter is now set from 0 to 1, with 1 being the maximum value
[CHANGED] Renamed parameter "profiles_array" to "effects_array", for better coherence
[CHANGED] Renamed parameter "type" to "mode" (also for PP_COLOR_BLINDNESS_MODE) in color blindness effect
[CHANGED] Renamed parameter "luma" to "threshold" in Dithering effect
[CHANGED] Renamed parameter "var_name" and "vars_array" to "macro_var" and "macro_vars_array" in the ppfx_effect_set_parameter/s

[FIXED] Great performance improvement to the system: a giant array is no longer passed in real time to the shader
[FIXED] Shader: Pixelize effect now can work normally if rotation and zoom are active
[FIXED] Shader: Radial Blur center position didn't work properly without being in the middle
[FIXED] Shader: Chromatic Aberration blur performance
[FIXED] Shader: Some other performance improvements
[FIXED] Shader: Vignette now is based on resolution
[FIXED] Shader: Vignette disappear if the curvature is 0
[FIXED] Shader: Noise grain effect now blends colors correctly instead of being additive
[FIXED] Shader: Improved Bloom emission (you will need to reconfigure your bloom profile)
[FIXED] Shader: Scanlines are now drawn above the vignette
[FIXED] Shader: Border effect now may or may not be affected by sine wave and displacement maps
[FIXED] Shader: Chromatic Aberration: the blur now matches the intensity of the effect
[FIXED] Shader: Contrast now has normalized curve, preventing conflicts with tone mapping
[FIXED] Shader: Improved Dirt Lens from Bloom effect
[FIXED] PP_DISPLACEMAP_AMOUNT wasn't working, because of the incorrect variable name
[FIXED] Profile example hue test
[FIXED] Compatibility check between devices
[FIXED] Camera logic now is running on Step Event instead of End Step
[FIXED] Some default values of the effects
Bloom performance will be improved in the next update
[FIXED] Vignette speed parameter is now normalized between 0 and 1
[FIXED] Some examples in the project improved
[FIXED] Example texts

[REMOVED] Old noise grain effect
[REMOVED] Color parameter from Radial Blur, since it doesn't make sense
[REMOVED] "dots" parameter from Dithering, since it will not be useful anymore
[REMOVED] "burst" parameter from Bloom, because no one will use

NEW EFFECTS:

ACES (Academy Color Encoding System) Tone Mapping (Film mode):
(before / after)



Motion Blur:



Glitch:



Shockwaves:


Shake Screen:


Speed Lines:


Lift, Gamma, Gain:


Shadow, Midtone, Highlight:


Exposure:



Night Vision:



CONTINUE BELOW....
 

FoxyOfJungle

Kazan Games
New Radial Blur:


Improved Bloom quality (and dirt lens!):


Linear interpolation on "Sine Wave", "Pixelize", "Lens Distortion" and "Displacement Map" effects when changing global intensity:


And much more! Check out the full Release Notes.

Overview video:
Shockwave and Motion blur were not shown in practice, but I will make another video later:


Get it on:

 
Last edited:

FoxyOfJungle

Kazan Games
View attachment 49185

Hi! I was just wondering, is this supposed to say 10 seconds?
Oops! Time is in seconds, not frames. 😆 It's 10 minutes in fact, it was just the information in the comment that was wrong. You can leave it at -1 too. 10 minutes is ok in my tests.
This will be fixed in the next update.

If you find something different in other things, let me know too.

Thanks!

Best regards,
Mozart.
 
Last edited:

FoxyOfJungle

Kazan Games
#Devlog 17 (29/07/2022) - July

I come to show you that I added 2 more new effects: Cinema Bars and White Balance:


White Balance:
The White Balance component applies a white balance effect that removes unrealistic color casts, so that items that would appear white in real life render as white in your final image. You can also use white balance to create an overall colder or warmer feel in the final render.



Cinema Bars:
A nice effect for cutscenes, you can have both vertical and horizontal bars, change the color and amount. You can also use both at the same time.





 

FoxyOfJungle

Kazan Games
#Devlog 18 (11/08/2022) - August

Area system:
Render the final surface of a post-processing system, inside a sprite, that uses a shader, to do the cut using a sprite as a mask.
This makes it possible to make cool glass effects and countless things:

 

FoxyOfJungle

Kazan Games
#Devlog 19 (12/08/2022) - August

Post-Processing FX
now works on layers! (you can select a range of layers, from top to bottom):



For a range:
GML:
var layer_index = ppfx_layer_create();
ppfx_layer_apply(ppfx_test_id, layer_index, layer_get_id("Props"), layer_get_id("Ground"));
Just run it on Create Event.
 

FoxyOfJungle

Kazan Games


VERSION 2.0 IS NOW AVAILABLE!
(Both Itch.io and YYG Marketplace!)

I'm happy to announce the most awaited update of the year, version 2.0, major release of Post-Processing FX!

Please read carefully what has been changed as it will cause syntax errors if you have already added it to your game and want to use the new version.
The changes were necessary for the improvement of the product. You can replace any code with CTRL + SHIFT + F.

This update brings HTML5 compatibility. Post-Processing FX is now finally cross-platform! Several internal modifications were made, focusing on
performance, quality, flexibility and documentation (Feather). Also new effects added. More on the documentation will be coming soon.


RELEASE NOTES:

[ADDED] HTML5 target compatibility. Post-Processing FX is now finally Cross-Platform
[ADDED] Area Masks! This is a new feature that allows you to draw masks using sprites and post-processing (example included)
[ADDED] Layer System! - Experimental. Now you can apply layered post-processing effects!
[ADDED] New high performance and quality HDR Bloom effect (with much better dirt lens)
[ADDED] New robust render stack system that enables new internal features, with more texture slots, effects blending, and overall pipeline control
It may seem simple, but it was necessary to rewrite ~60% of the internal system
[ADDED] FXAA (Fast Approximate Anti-Aliasing) effect
[ADDED] Panorama distortion effect (a.k.a FNAF 3D view)
[ADDED] Gaussian Blur effect
[ADDED] Kawase Blur effect
[ADDED] White Balance effect
[ADDED] Cinema Bars effect
[ADDED] New Noise Grain effect. It is now possible again to use a custom texture, thanks to the new internal system
[ADDED] New Chromatic Aberration: now with pincushion distortion and custom LUT. The default angle is now 35.
[ADDED] Speed Lines effect can now use a custom noise texture, for more cool effects
[ADDED] 16x16 Dithering bayer texture
[ADDED] Motion Blur now supports a render texture, which can be used to draw isolated things
[ADDED] "speed" parameter in "Glitch" effect
[ADDED] New default noise texture
[ADDED] Full PPFX functions JSDocs documentation
[ADDED] PP_BLOOM_ITERATIONS parameter to Bloom effect
[ADDED] ppfx_set_render_enable(): It is now possible to render to a surface even if ppfx is not drawing
[ADDED] New better-quality dirty lens texture
[ADDED] "contrast" paramter to "Speed Lines" effect
[ADDED] Extra warning indicating where post-processing can be drawn. This will avoid unknown black screens

[FIXED] You can now use Radial Blur, Chromatic Aberration and Motion Blur together at the same time, with all the other effects
[FIXED] Small redundant reference of parent struct, inside ppfx_set_target()
[FIXED] Speedlines: "mask_smoothness" struct variable was written as "smoothness"
[FIXED] Sine Wave freezes after a while on mobile platform (Android/iOS)
[FIXED] Finally Noise Grain is now fully mobile compatible (Android/iOS)
[FIXED] Speed Lines effect now works correctly on mobile platform (Android/iOS)
[FIXED] Glitch effect now works correctly on mobile platform (Android/iOS)
[FIXED] System: Small other performance improvements
[FIXED] System: Small fixes
[FIXED] Shader: Small fixes
[FIXED] Bloom color parameter was not working
[FIXED] Example screen/display resolution
[FIXED] "block_size" parameter of Glitch effect now it's inverse, to match the name. Close to 0: small, close to 1: large
[FIXED] When using palette swap, bloom didn't use the same colors as the palette
[FIXED] Channels shader optimized
[FIXED] Missing "center" variable from Zoom effect constructor
[FIXED] Missing "zoom" variable from Texture Overlay effect constructor
[FIXED] Missing "color" variable from Vignette effect constructor
[FIXED] Big difference in intensity between radial and linear distortion in Chromatic Aberration effect
[FIXED] More organized project files and code
[FIXED] Improved Shockwave example: Added a function that creates the shockwaves (part of the example only)
[FIXED] Easier to view examples font

[CHANGED] PPFX now focuses on full screen effects only (beyond the system of layers and areas).
So it is no longer possible to apply the post-processing to individual sprites unless you place them on a surface.
In the future, Kazan Games will build a project with various effects for this purpose, which is a much bigger performance gain than using a giant system just for that
[CHANGED] Shader: some effects internally reordered
[CHANGED] Tonemapping is now applied before Lift/Gamma/Gain
[CHANGED] The internal system has now been split into different scripts for better organization
[CHANGED] ppfx_toggle()/ppfx_set_enable() is now ppfx_set_draw_enable() (now it is possible to toggle in the same function)
[CHANGED] ppfx_effect_toggle() is now ppfx_effect_set_enable() (now it is possible to toggle in the same function)
[CHANGED] Renamed parameter "macro_name" to "param" in ppfx_effect_set_parameter(), for better coherence
[CHANGED] Renamed parameter "macro_vars_array" and "values_array" to "params_array" and "values_array" in ppfx_effect_set_parameters(), for better coherence
[CHANGED] Renamed macro PP_PALETTE_SWAP_HEIGHT to PP_PALETTE_SWAP_PAL_HEIGHT
[CHANGED] Renamed macro PP_DISPLACEMAP_DIRECTION to PP_DISPLACEMAP_ANGLE
[CHANGED] Renamed macro PP_MOTION_BLUR_DIRECTION to PP_MOTION_BLUR_ANGLE
[CHANGED] Renamed macro PP_CHROMABER_DIRECTION to PP_CHROMABER_ANGLE
[CHANGED] Renamed macro PP_HUE_SHIFT to PP_HUE_SHIFT_COLOR
Note: these changes served to avoid conflicts with built-in variables in the internal system
[CHANGED] Internally modified how PPFX is rendered, look at the examples
[CHANGED] ppfx_application_render_draw() is now ppfx_draw(). An easier, modular and stackable way of drawing

[REMOVED] ppfx_toggle(): This function was merged with ppfx_set_enable()
[REMOVED] ppfx_effect_toggle(): This function was merged with ppfx_effect_set_enable()
[REMOVED] PP_BLOOM_BLUR_RADIUS: not used anymore. Use PP_BLOOM_ITERATIONS instead
[REMOVED] PP_GLITCH_ABERRATION, since it won't be useful anymore
[REMOVED] "is_on_top" parameter from Border effect. Because now it's not necessary anymore.
[REMOVED] "is_on_top" parameter from Texture Overlay effect. Because now it's not necessary anymore.
[REMOVED] "is_on_top" parameter from Colorize effect. Because now it's not necessary anymore.
[REMOVED] "blur_radius" parameter from Chromatic Aberration effect, because the intensity parameter already does that.


NEW EFFECTS:

New High performance Bloom:

- The new bloom has an absurdly better performance than the previous one. As well as much better quality.



Panorama distortion:
- Both horizontally and vertically. It is possible to adjust the depth:




Gaussian Blur & Kawase Blur:
- Effect to blur the screen (like a glass). This one has a softer fit and has a mask:
Kawase Blur is similar to the Gaussian, but it has an absurdly better performance, it runs well even on mobile XD. It also has a mask:



White Balance:
- White balance is used to adjust colors to match the color of the light source so that white objects appear white. You can control image temperature and tone:



New much better Chromatic Aberration:
- This new effect now has the correct distortion and you can change the prism/spectral color to any color!



Cinema bars:
- Add a cool more cinematic touch to the game:
Both horizontal and vertical.



New noise grain effect:
- Now supports custom textures and scale! The noise of film photography effect we already know:


Area masks:
- With this new effect, you can draw only parts of the effects on the screen, through a shader mask



Two new dithering methods:
- An even better feel from the NES/SNES era! I made new 2 dithering methods for the dithering effect. I also added a 16x16 bayer matrix:


Layers:
- It is now possible to apply effects on one or more layers!

 

FoxyOfJungle

Kazan Games


VERSION 2.1 IS NOW AVAILABLE!
(Both Itch.io and YYG Marketplace!)

I'm pleased to announce version 2.1 of Post-Processing FX!

In this big update, the focus is on fixing several bugs (mainly also Mobile platform) - Bloom's alpha blending issue is gone. We also have new effects and other cool things!


RELEASE NOTES:

[ADDED] Sun Shafts (godrays/volumetric lighting) effect
[ADDED] Mist effect
[ADDED] Twirl effect
[ADDED] Shockwaves system - It's now easier to create shockwaves!
[ADDED] Layer system can now be camera based for better performance (optional)
[ADDED] PPFX_CFG_SPEED config, used to change the speed of effects
[ADDED] Noise to the Motion Blur, which allows you to use less samples and get more performance
[ADDED] Noise to the Radial Blur, which allows you to use less samples and get more performance
[ADDED] Increased margin in layer rendering, avoiding showing tiles incorrectly
[ADDED] PP_SPEEDLINES_ROT_SPEED parameter to Speedlines effect
[ADDED] Shockwave sprites to asset folder
[ADDED] Additional Feather help of some functions

[FIXED] Alpha blending issues in the stack system (which are better noticed in non-pixel-art)
This also fixes Bloom's random color burst issue
[FIXED] Gaussian Blur mask alpha blending
[FIXED] Compatibility check with shaders
[FIXED] Error checking in some ppfx functions
[FIXED] Feather: some parameters missing from some functions
[FIXED] Shake effect precision on Mobile platform (Android/iOS), now works as expected
[FIXED] Glitch effect precision on Mobile platform (Android/iOS), now works as expected
[FIXED] Bloom noise on Mobile platform (Android/iOS)
[FIXED] Bloom's Dirt Lens now scales centrally
[FIXED] Noise Grain effect now scales centrally
[FIXED] Pixelize effect is affected by Panorama effect distortion
[FIXED] FXAA shader: removed some unused variables
[FIXED] Displacemap rotation, it is now centered
[FIXED] Displacemap zoom, it is now centered
[FIXED] Displacemap angle is now correct
[FIXED] Motion Blur and Radial Blur are now after the Bloom effect (so Bloom displays correctly now)
[FIXED] Chromatic Aberration is now after Color Grading, allowing additional cool stuff
[FIXED] Speedlines effect is now affected by the global intensity
[FIXED] HTML5, error "WebGL feedback loop formed between Framebuffer and active Texture" when using Gaussian Blur
[FIXED] Small optimizations in shaders
[FIXED] More optimization in general functions (YYC)
[FIXED] Some Feather help variable types

[CHANGED] Better categorized PPFX folders: Added Assets folder.
[CHANGED] Glitch effect now works after Displacemap

[REMOVED] Unused __PPF_SH_SPRMSK2 macro
[REMOVED] smooth_enable parameter from Bloom, we decided that it should always be smooth, for better quality

NEW EFFECTS:

Sunshafts (Godrays / Volumetric Light):
- The Sun Shafts image effect simulates the radial light scattering (also known as the “god ray” effect) that arises when a very bright light source is partly obscured.




Swirl distortion
- Radial distortion effect, useful for black hole effects and so on.



Mist
- A fog effect to give a gloomy look, which can be used in forests, imitate fire, and among others.

 

FoxyOfJungle

Kazan Games
Hello, @jon-mil-1992

Could you elaborate a little more please? I'm not sure if I understand your question correctly, but currently it is possible to render the effects in a mask using the area functions:
Example:

GML:
area_draw_sprite_ext_mask(spr_ppfx_icon, 0, 400, 400, 1, 1, rot, c_white, 1, ppfx_blur_id);
Note that I just indicate the post-processing system variable (ppfx_blur_id) and write the other parameters.



Note that I drew in Draw GUI, so automatically the sprite follows the view.
 
Hello, @jon-mil-1992

Could you elaborate a little more please? I'm not sure if I understand your question correctly, but currently it is possible to render the effects in a mask using the area functions:
Example:

GML:
area_draw_sprite_ext_mask(spr_ppfx_icon, 0, 400, 400, 1, 1, rot, c_white, 1, ppfx_blur_id);
Note that I just indicate the post-processing system variable (ppfx_blur_id) and write the other parameters.



Note that I drew in Draw GUI, so automatically the sprite follows the view.
Thank you for the response. What I mean is that I want the mask to hover above an enemy object that is in the camera's view. I want to simulate heat waves above an enemy while it is in a cooldown state.

If I put the following in the enemy object's draw event, then it will follow the enemy object; however, what is shown inside the area is zoomed in and moves around with the camera coordinates.
GML:
area_draw_sprite_ext_mask(spr_heatwave_mask, 0, x, y, mask_width, mask_height, c_white, 1, ppfx_heatwave_id);
UPDATE:
If anybody is interested, I was able to convert the enemy object's room coordinates to the GUI coordinates and successfully make the mask follow the object. However, I couldn't get a convincing heatwave effect to appear in the mask above the object. So, I'm going to scrap this idea.

Here is the code from the target object's Draw GUI event:
GML:
// Render system using main post-processing surface
ppfx_draw(ppfx_get_render_surface(obj_game_manager.ppfx_id), 0, 0, RES_W, RES_H, RES_W, RES_H, ppfx_heatwave_id);

var view_center_x = camera_get_view_x(view_camera[0]) + (camera_get_view_width(view_camera[0]) / 2);
var view_center_y = camera_get_view_y(view_camera[0]) + (camera_get_view_height(view_camera[0]) / 2);
var zoom = view_wport[0] / camera_get_view_width(view_camera[0]);

var distance_from_center = point_distance(view_center_x, view_center_y, x, y) * zoom;
var direction_from_center = point_direction(view_center_x, view_center_y, x, y) + camera_get_view_angle(view_camera[0]);

// Target object coordinates in the GUI layer.
gui_x = (view_wport[0] / 2) + lengthdir_x(distance_from_center, direction_from_center);
gui_y = (view_hport[0] / 2) + lengthdir_y(distance_from_center, direction_from_center);

// Only draw the heatwave ppfx above the target object.
area_draw_sprite_stretched_ext_mask(spr_ppfx_mask, 0, gui_x - (sprite_mask_width / 2), gui_y - (1.5 * sprite_mask_height), sprite_mask_width, sprite_mask_height, c_white, 1, ppfx_heatwave_id);
 
Last edited:

FoxyOfJungle

Kazan Games
Hello, @jon-mil-1992

Sorry, I didn't notice your message notification, I'm seeing it now. :)

Thank you for the response. What I mean is that I want the mask to hover above an enemy object that is in the camera's view. I want to simulate heat waves above an enemy while it is in a cooldown state.

If I put the following in the enemy object's draw event, then it will follow the enemy object; however, what is shown inside the area is zoomed in and moves around with the camera coordinates.
GML:
area_draw_sprite_ext_mask(spr_heatwave_mask, 0, x, y, mask_width, mask_height, c_white, 1, ppfx_heatwave_id);
UPDATE:
If anybody is interested, I was able to convert the enemy object's room coordinates to the GUI coordinates and successfully make the mask follow the object. However, I couldn't get a convincing heatwave effect to appear in the mask above the object. So, I'm going to scrap this idea.

Here is the code from the target object's Draw GUI event:
GML:
// Render system using main post-processing surface
ppfx_draw(ppfx_get_render_surface(obj_game_manager.ppfx_id), 0, 0, RES_W, RES_H, RES_W, RES_H, ppfx_heatwave_id);

var view_center_x = camera_get_view_x(view_camera[0]) + (camera_get_view_width(view_camera[0]) / 2);
var view_center_y = camera_get_view_y(view_camera[0]) + (camera_get_view_height(view_camera[0]) / 2);
var zoom = view_wport[0] / camera_get_view_width(view_camera[0]);

var distance_from_center = point_distance(view_center_x, view_center_y, x, y) * zoom;
var direction_from_center = point_direction(view_center_x, view_center_y, x, y) + camera_get_view_angle(view_camera[0]);

// Target object coordinates in the GUI layer.
gui_x = (view_wport[0] / 2) + lengthdir_x(distance_from_center, direction_from_center);
gui_y = (view_hport[0] / 2) + lengthdir_y(distance_from_center, direction_from_center);

// Only draw the heatwave ppfx above the target object.
area_draw_sprite_stretched_ext_mask(spr_ppfx_mask, 0, gui_x - (sprite_mask_width / 2), gui_y - (1.5 * sprite_mask_height), sprite_mask_width, sprite_mask_height, c_white, 1, ppfx_heatwave_id);
Yeah, the area system was initially designed for the GUI. It is possible to use conversion functions like the one you sent (thanks for sharing here!). I will include functions that do room-to-gui and gui-to-room conversion in the project as well. :)

Cheers!
 
Top