One of the cool new features of Hexels 2.5 is the ability to import and use custom effects on your canvas. Effects are little downloadable extensions that enable you to add visual interest to your image. From subtle effects like hazy blur to more distinct ones like layers of animating snow, even fully dynamic lighting for your isometric scenes, effects provide the creative touch to make your image stand out.
Effects come in two flavors, layer post effects and blend modes:
- Post Effects modify the final appearance of a layer or group. They can change colors, blur the image, animate and jiggle things around.
- Blend Modes define how a layer or group is combined with the layers below it, e.g. additive, subtractive, dissolve and the like.
Hexels already comes bundled with a fair share of each: blurs, blobs, color curves, and dissolves are all built-in effects. Now you can download even more from our growing online collection of the odd, wonderful, and experimental.
Sharing is Caring
All effects listed here are distributed under the MIT License, feel free to copy, tinker, and profit from them greatly.
Effects are nothing more than short text files of GLSL shader code. They are open source, tweakable, and easy to share. If you’d like to learn more about creating your own effects, take a look at this tutorial: GLSL shaders for Hexels.
Dither is a new layer blend mode shader similar to Dissolve. The shader turns each hexel’s opacity into a discrete pattern of dots and offers 10 different patterns, from solid color at 100% opacity to sparse dots at 10% and below.
Dither patterns are often used in 8-bit pixel art, where the color palette is limited. A pixel of a single color drawn in various patterns can create a whole range of values. One color dithered over another creates a gradient of hues. Also, dithering looks neat!
Pro Tip: The dither shader always renders the pattern dots as single pixels. If you zoom in you’ll see more dots and a finer pattern. Images exported at higher resolutions will result in a finer dithering pattern, and lower resolution images will result in a coarser pattern.
The snow shader is a winter-themed layer post effect that makes your scenes a lot cooler. When animating, use whole numbers for the Speed, Wind and Wind Variation sliders for proper looping.
||Determines how scattered and random your snowflakes are.
||Determines how quickly the snow moves through your canvas. A small number gives you a calm snowfall and a higher number will result in a blizzard.
||The amount of frosty precipitation in the scene. High values tend to look uniform, so increase the value of Render Passes if you want a lot of snow.
||Determines how big or small the snowflakes are.
||Randomly varies the sizes of the snowflakes.
||Determines the general horizontal speed of the snowflakes.
||Determines the amount of layers of snowflakes. Each layer has random variation. Many render passes can cause Hexels to run slowly.
||Determines the wind variation between layers of snowflakes.
Chromatic aberration is a color-based blur layer post effect that mimics the varying focal distances of different wavelengths of light, typically seen in photography.
||Determines the amount of blur the colors get.
||Determines how greatly color affects blur distance.
||Determines what colors are blurred the most.
||Sharpens the final effect.
Thermal distortion is a layer post effect that replicates the dancing waves of heat distortion that appear above a roaring fire or on the horizon in the desert. This works best as an adjustment layer.
||Determines the overall size of distortion pattern.
||Determines how much the distortion pattern affects the image.
||Increases or decreases the amount of blur in the effect.
||Controls the rate of the shimmer.
||Controls the complexity of the distortion waves.
Normal Map Lighting
Normal Map Lighting is a layer post effect that treats the RGB colors in a layer as normal vectors and lights them like a 3D shape! Best used with isometric art, you define the direction each surface faces by painting red, green, and blue walls, set the light direction in the layer properties, and the shader does the rest.
Paint right-facing walls red (255,0,0), left-facing ones blue (0,0,255), floor planes as green (0,255,0), and any ramp a combination of those colors, e.g. a right-up ramp should be yellow (255,255,0). Set the blending mode of your normal map layer to “Multiply” to have the lighting “shade” layers below it.
||Sets the horizontal direction of the light source.
||Sets the vertical direction of the light source.
||Determines the amount of light cast on the layer.
||Determines the contrast between lit and shadowed areas.
||Determines the amount of indirect lighting cast on the scene. The color of the ambient light is controlled by the time of day (Sunset slider).
||A time of day slider that controls the color of direct and ambient light. 0 is white light and a bright blue sky, 1 is a deep orange sunset.
Pro tip #1: Animate the light direction and altitude sliders to move the sun from east to west, horizon to noon to horizon, then animate the sunset slider to match.
Pro tip #2: Make your backdrop in the normal map layer a gradient from red to green and watch the background pick up beautiful sky tones as the sun animates.
Every new effect comes bundled with a readme and a shader file with a .FRAG extension. These are GLSL 1.2 fragment shaders which can be imported in Hexels:
- Unzip the downloaded file and save the .FRAG file somewhere temporary
- Launch Hexels
- Go to the “Effects” drop-down menu and select “Import Effect…”
- Locate the shader file on your computer
- (Optional) You can also drag and drop shader files onto the Hexels window directly
- Try it out! Look for your effect by name in:
- “Effects->Add Layer Effect” list
- “Effects->Set Blend Mode” list
- The “Layer Properties” window
- (Optional) Delete any downloaded files. The shader has been copied the Hexels “User Shaders” folder and temp files can be deleted.
Post or Blend?
Shaders can be either post effects or blend modes, and are flagged as such in their source code. Hexels knows to treat them accordingly. Both post effects and blend modes are applied to individual layers or groups using the “Effects” menu or “Layer Properties” window.
Post effects modify the final appearance of a layer or group. They can change colors, blur the image, jiggle things around, etc. Post effects are added to a layer in the “Effects->Add Layer Effect” menu or through the + button drop-down menu in “Layer Properties”.
Blend modes define how a layer or group is combined with the layers below it, e.g. additive, subtractive, dissolve and the like. Blend modes are selected from the “Effects->Set Blend Mode” menu or the drop-down menu in the “Blending” section of “Layer Properties”.
Behind the Scenes
When a shader is imported, the .FRAG file is copied into a folder Hexels uses for storing all sorts of custom add-ons and user-specific stuff. It may be useful to know where this folder is located in case you ever want to browse or clear it. Developers can also work on their shaders directly in this folder, skipping the import process.
- Run Hexels
- Open the “Effects” drop-down menu
- Open the “Developers” sub-menu
- Select “Open User Shaders Folder …”.
Hexels should lead you to a folder with a path similar to…
Windows: C:/Users/Jane Doe/AppData/Roaming/Marmoset/Hexels2/Add-Ons/Shaders
OS X: /Users/Jane Doe/Library/Application Support/Hexels2/Add-Ons/Shaders