This crate has an assortment of effects for use with Bevy applications.
Here is a showcase made by adding some visual effects to Bevy's breakout example. Note that the game itself is not modified except visually.
breakout.mp4
The effects added in the above are:
- A raindrop effect (due to effects applied after this one it gives the impression of static noise across the screen).
- Chromatic aberration.
- Waves. This effect causes the general "waviness" seen as well as the collision shake effect.
- A CRT mask. This changes the edges of the screen to resemeble a CRT.
- Pixelation. This pixelates the image. The demo increases this effect slightly each time a collision happens, but it's a bit hard to notice due to the short length of the video.
- Color grading. A color lookup texture is applied, which changes the color output accordingly.
Scroll down to see videos of the examples in contained in this repo.
When adding this crate as a dependency in your project, the Bevy version you use will need to match up according to the following table:
| bevy-vfx-bag | bevy |
|---|---|
| 0.2.0 | 0.10.0 |
| 0.1.0 | 0.9.0 |
The general strategy is:
- Add the main plugin:
BevyVfxBagPlugin. - Add the post processing effect components on top of the camera(s) you want the effects to apply to.
- Add any systems to change effects at runtime.
// See the examples folder for fleshed out examples,
// this just shows the general strategy.
fn main(){
App::new()
.add_plugins(DefaultPlugins)
.add_plugin(BevyVfxBagPlugin::default()) // This needs to be added for any effect to work
.add_startup_system(setup)
.add_system(update)
.run();
}
fn setup(mut commands: Commands) {
commands.spawn((
Camera3dBundle { ... },
Blur::default()
));
}
fn update(mut blur: Query<&mut Blur>) {
// Here I can change the parameters of this effect at runtime.
}All videos below are captured from running the examples.
Do cargo r --example in this repository to get a list of examples you may run.
Some examples use keyboard/mouse input to change parameters at runtime as well.
Shows blurring an image.
The strength of the blur is changed, as well as the radius.
The radius refers to far away texels are sampled relative to the origin texel.
blur.mp4
Shows chromatic aberration. The red, green, and blue channels are offset from the original locations in the image.
The direction of these offsets as well as their magnitudes are controllable. The example has the directions animated over time at different speeds. The user controls the magnitudes.
chromatic-aberration.mp4
Allows flipping the input image horizontally, vertically, or both.
flip.mp4
Allows color grading via look-up textures.
There is also an example to generate the neutral LUT, cargo r --example make-neutral-lut.
This file can then be modified in any image editor in order to replicate the look/feeling you're after.
The plugin allows splitting the image vertically (shown in the video), which can be used to compare the look before and after color grading.
lut.mp4
Pixelate the screen. The user controls how big the block size of a "pixel" is.
pixelate.mp4
Shows raindrops on the screen. The users controls zooming of the raindrops, which affects how large they appear on screen.
The intensity determines how much a raindrop will distort sampling the original image. This in effect is "how much light bends" through the drop.
Some drops are animated. The speed of this repeating animation is controlled too.
raindrops.mp4
Shows the vignette effect.
The example shows changing the "feathering" of the effect. This means how large the smooth transition zone between original image and vignette is.
Not shown is changing the radius, and changing the color of the vignette.
vignette.mp4
Shows another use of the wave effect. By having a violent wave effect we can simulate something like the earth shaking due to something big approaching by toggling the effect in intervals.
trex.mp4
Underwater (ish) effect. Shoehorns most effects into one example, to show how they may be stacked.
underwater.mp4
Shows displacing original image sampling in waves over the screen.
The number of waves, how fast they travel (they are sinusoidal), and their amplitudes are controllable separately for the horizontal and vertical axes.
This is quite flexible and can create interesting effects.
A possibility not shown in the video is a camera shake effect, which might be achieved by having a high number of waves at high speed with low amplitude, and quickly dampening those parameters to zero so the effect ends.