Screaming Brain Studios – Free Game Assets

Textures with GIMP

ScreamingBrain — Fri, 19 Jan 2024 19:58:00 +0000

Introduction

While there are plenty of expensive tools out there for creating textures, you don’t need anything more than a copy of GIMP to get started making your own custom textures. A lot of textures are created using different types of noise and various image filters, many of which are readily available in GIMP.

In this tutorial, we will look at a number of different types of materials and textures that can be made using using nothing more than layers, filters, and blend modes without having access to expensive texture authoring software. Some rather convincing results are possible, and at the very least, you can easily create various materials to use while prototyping or testing different 3D objects in your projects in a matter of minutes.

Texture Tutorial: Brushed Metal

One of the simplest materials you can make with a tool like GIMP is a basic brushed metal. Start by creating a new canvas using a good 1:1 texture size for your project (1024×1024, 512×512, 256×256, etc.) As with the previous section of the tutorial, I am going to use 512×512 so I can fit everything within the width of this page. Make sure the canvas is black, or fill it with black if you created a blank white canvas. Now select Filters > Noise > RGB Noise to bring up the filter properties window. You can use the settings from the example image below or adjust the color value sliders to your liking.

RGB Noise

Press OK to apply the filter, which for now will look like a bunch of colored dots scattered around the canvas. Next, select Filters > Blur > Linear Motion Blur so we can stretch the noise into lines. Keep the angle set to 0 so the blur is applied horizontally.

Blurred Noise

It is still a little bit too colorful, and you can choose how you wish to do the next step, but there are multiple options to bring down the rainbow coloring of the texture. Select Colors > Desaturate to make the texture strictly black and white. Or if you prefer, you can use the Colors > Saturation option to bring down the level of color gradually. I prefer the second method personally, as I like to leave a little bit of the coloring in the texture to simulate lighting variances. Next, click on Colors > Colorize which allows you to change the overall color of the metal texture. I’ve gone ahead with a light steel blue color for the example.

Colorized Metal

You could stop here if you like, or you can play with the brightness and contrast values to adjust the color and shading in the texture, or you can adjust the Levels to bring certain parts out more. For the final step, create a new layer and select the Gradient tool. Drag a gradient across the canvas using white and a light gray color. Set the layer Blend Mode to Grain Merge. You can use the settings in the example image below or you can choose whatever works best for you. I have also turned down the opacity of the layer just a small amount so that it doesn’t affect the overall texture too much.

Gradient Layer

Using the Grain Merge blend mode gives us a sort of equalized lighting that is not quite as intense as the Multiply blend mode. You might notice that the center of the image is just a little bit too bright. To fix this, we can use another Motion Blur on our new gradient layer to spread it out a bit.

Blurred Gradient Layer

I’m going to leave the angle slider at 0 so the blur stays lined up horizontally, but feel free to make adjustments to the settings however you prefer, then press OK to apply the changes to the texture.

Final Brushed Metal Texture

That is all there is to making brushed metal textures using GIMP! Try using different colors in the colorizing step to produce things like gold, copper, or colored metals. You can even continue applying additional blend layers to add wear and tear or rust to your metal.

Texture Tutorial: Wood

Start by creating a new canvas using a good 1:1 texture size for your project (1024×1024, 512×512, 256×256, etc.) It doesn’t have to be square, but when editing the texture to produce seamless tiling, it may be easier if the texture is a square. For this tutorial, I am going to use a 512×512 canvas. Start by selecting Filters > Render > Clouds > Solid Noise to bring up the Solid Noise filter properties. Set the X value as high as it will go and lower the Y value to somewhere between 0.3 and 1.5 to produce a streaky, rippled image.

Solid Noise Streaks

You can mess with the Detail slider to add more graininess to the streaks or play with the Y size to increase or decrease the amount of variance in the banding. Make sure to select the Tileable tick box if you want the texture to be seamlessly tiled along the edges. You can also change the random seed value or press the New Seed button to produce different variations of the streaks.

Next, create a new layer over the existing one and select a nice base color for your wood texture. Once you have filled the layer with the color of your choice, switch the layer Blend Mode to Multiply and the color will mix with the light and dark areas of our streaky noise layer. Click on Colors > Levels to bring up the levels window, where you can make adjustments to the brightness levels of the image. You can use the settings in the example below or find what works best for you.

Adjusted Color Levels

To add a bit more grain to our wood texture, go to Filters > Noise > RGB Noise to bring up the RGB Noise filter properties. With Independent RGB unchecked, drag the Value slider to the right until you think it looks good and press OK.

RGB Noise Grain

Now to smooth out the grain just a little bit, go to Filters > Blur > Linear Motion Blur to bring up the filter properties window. The amount of blur you apply is up to your taste, but set the Angle slider to something vertical like 180 or 90 so the blur follows the direction of the streaks in the texture. The amount of blur is up to you, but press OK once you like what you have.

Wood with Motion Blur

Wood tends to have whorls and loops rather than straight lines, so the next step is to select the Warp Transform tool. This tool allows you to apply small warps and swirls to give the wood a more natural, knotted appearance.

Warped Wood Streaks

Create a new layer and this time, when using the Filter > Render > Noise > Solid Noise filter, make sure to check the Turbulence tick box and use settings similar to the first step of this tutorial. Drag the X value slider to the right and the Y value slider to the left so it is around 0.5 or so. This time, instead of using the Multiply blend mode, we are going to use something that lightens the texture a bit. Choose Screen or Grain Extract, whichever you think looks better and the new noise layer will be blended with the existing layers.

Wood with Screen or Grain Extract

There is another thing we can do here to add some more structure to the texture so it looks a bit more like wood. Create a new layer above the stripe noise layer and go to Filters > Render > Pattern > Sinus to bring up the Sinus filter. This produces a different type of noise that when stretched can resemble tree rings. Feel free to use the settings in the example below, or experiment to find something that you like! You can also press the New Seed button to generate a random seed and alter the noise variant.

Render Sinus Pattern

Press OK to accept and render the sinus pattern to the new layer. Now switch the layer’s Blend Mode to something more like Soft Light to make the rings blend in more with the wood texture. You can try different blend modes to see which you prefer. I also brought the layer Opacity down to about 50% so the brightness of the rings is a little less intense.

Wood with Rings

In order to apply some finishing touches to the texture, right click on the Color layer and select Merge Visible Layers so any more changes we make are applied to the entire image. Just to add a tiny bit more detail to the wood, go to Filters > Noise > CIE Ich Noise to bring up the filter options. This will apply a grainy colored noise to the texture so that the bands and colors look a little bit less smooth and unnatural. You can change the Chroma or Hue values to apply a coloring effect to the wood, which in some cases makes the wood look nicer. Press OK when you are happy with your color settings and the amount of grain.

Grainy Textured Wood

Now click on Edit and select Copy Visible to highlight and copy the entire image. There is one final thing we can do to make our wood texture a little bit more realistic. Create a new image the same size as the current texture (512×512 in this case) and paste the copy into the new document. Select Filters > Edge Detect > Image Gradient to bring up the filter properties window.

Grayscale Wood Mask

With the Output Mode set to Magnitude, press OK to apply the filter giving you a grayscale image mask that we can use to apply a bit of ‘bump’ to our wood texture. Switch back to the original wood texture and select Filters > Map > Bump Map to bring up the filter properties. Click on the square next to Aux Input to bring up a drop down menu where you can select the grayscale mask. This will now be used to apply an elevation bump to the wood texture.

Bumped Wood Texture

You can change the angle of the ‘bump’ by adjusting the Azimuth slider, or change the depth to your liking. You can see how it also applies shading not only to the stripes and rings, but also to the small grains we added to the wood. Press OK when you are happy with your settings.

Final Wood Texture

The results of the final texture are dependent on the random seed values you use, the level adjustments to the brightness/darkness of the texture, and the different settings you apply in each step, but you can achieve a relatively realistic usable wood texture in a matter of minutes using these simple filters! The final texture will not be seamless, so use the method you prefer most to fix the edges so they line up with one another when the texture is tiled. Thankfully, if you made sure the Tileable box was ticked in each of the steps outlined above, this will be a much easier task.

Texture Tutorial: Rough Stone

For this section of the tutorial, we are going to look at another filter that you can use to add depth and lighting to your textures. This can be combined with the other techniques and steps in this tutorial to produce different types of materials. Start by creating a new canvas using a good 1:1 textue size for your project (1024×1024, 512×512, 256×256, etc.) Then go to Filters > Render > Noise > Solid Noise to bring up the filter properties panel. You can use the settings in the example image below, or you can play with the values to find something you like. I have gone ahead and set the Detail slider to as high as it will go.

Render Solid Noise

Press OK when you are happy with your settings to apply the filter. Now duplicate the first layer so you have a copy of the solid noise. You can do this by right clicking on the current layer and selecting Duplicate Layer, or using the Layer menu at the top of the window. Go to Filters > Render > Noise > Difference Clouds to produce a new mask that has darker lines running through it.

Difference Clouds

Hide the difference clouds layer so you can see the original solid noise layer underneath. With the solid noise layer active, go to Filters > Light and Shadow > Lighting Effects to bring up the filter properties window. There are a lot of settings to mess around with here, so you can experiment to get different results. Make sure the light type in the Light tab is set to Directional, so the lighting is applied across the entire image. In the Bump Map tab, click on the Enable Bump Mapping tick box and select the difference clouds layer from the previous step.

Bumped Noise

The Material tab allows you to change various properties of the resulting texture, such as how rough or shiny it is, whether it is reflective or dull, or how bright the highlights are. Feel free to play with the settings until you find something you like, or you can use the settings in the example image.

Stone Material Settings

Once you are happy with your settings, press OK to apply the filter. You should now see the lighting and shadow settings applied to the solid noise layer in the form of ridges and bumps, giving a rather convincing stone appearance.

Final Stone Texture

You can experiment with different types of noise or grayscale bump maps to get different results, and changing the angle or distance of the light can produce all kinds of different types of stone or rocky structures. You can also use the Colorize option or blend a color layer with the texture to produce different colored stones and rocks. It is also possible to use the Bump Map filter for the same effect, though the highlights and shading will be a bit more uniform across the entire image.

Texture Tutorial: Stone Tiles

This next texture tutorial uses a few of the same techniques outlined in the previous sections, and you can combine or mix and match steps as you get more familiar with the different filters. Start by creating a blank canvas and fill it with a gray color. I tend to go with RGB (128, 128, 128) or (50,50,50) in GIMP’s color picker. Create a new empty layer above the gray layer, then select Filters > Render > Noise > Plasma to bring up the filter options. I have gone ahead and brought the Turbulence value as high as it will go and selected a New Seed value. You can use other types of noise for this step if you prefer, but I’m going to use Plasma for this tutorial.

Render Plasma Noise

Hide the plasma layer and select the original gray layer to make it active. Now go to Filters > Render > Bump Map to bring up the filter options and select the plasma layer as the bump map. This will give the gray layer a rough grainy appearance for our stone. With the plasma layer selected, go to Colors > Desaturate > Desaturate and make the plasma layer black and white. You can use this layer to give more roughness to the gray stone layer by changing the Blend Mode to something other than Normal. You can choose whichever Blend Mode you prefer, but for this tutorial I am going to use Soft Light and set the Opacity slider to about halfway (50.0) so the effect of the blend isn’t too strong.

Roughened Stone

Once again, duplicate the gray background layer. Now go to Filter > Distorts > Mosaic to bring up the options for the mosaic filter. Feel free to use whatever settings you like, or you can use the settings in the example image below.

Mosaic Tiles

If the tick box for Rough Tile Surface is selected, a grainy roughness effect will be applied across the entire surface of the image. You can change the lighting direction of the tiles, as well as the height or distortion values to get different variations. Change the layer Blend Mode to something other than Normal, so that the tiles layer is blended with the bottom gray background layer. I have chosen Grain Merge, but you can use any Blend Mode you feel looks best. The final step is to add a slight blur to the mosaic layer to smoothen out the lines in between the tiles just a little bit.

Blurred Stone Tiles

Select Filters > Blur > Gaussian Blur to bring up the filter options. I am using a very low value so the detail added by the grain isn’t entirely wiped out. Press OK when you are happy with your filter settings.

Final Stone Tile Texture

You can add other steps to produce more wear and tear on the stone, or you can apply color blends or colorizing to make different colored stone tiles. The resulting texture will not be seamless, but there are many different ways to convert or edit your textures to be seamless, which we will cover in another tutorial.

Texture Tutorial: Lava Rocks

This section of the tutorial starts off very similar to how we put together our rough stone texture, though we will look at a few other things you can do using the same types of filters and colorizing. Start with a blank canvas and select Filters > Render > Noise > Solid Noise to generate the base of our lava texture. I have set the detail to a lower value (4.0) instead of increasing it all the way like we did with the rough stone. I’ve also lowered the size to around 2.0 for both the X and the Y size values.

Solid Noise

Now go back to Filters > Render > Noise > Difference Clouds to render another noise layer on top of the current one. This will add dark ridges all across the texture.

Difference Clouds

Now duplicate the layer and set the new layer’s Blend Mode to Dodge, then hide the new layer. With the original background layer selected, use the Colors > Colorize menu to add some orange or red to the solid noise.

Colorized Lava

Now select and unhide the new layer we just created. Once again, I’m going to use the Filters > Light and Shadow > Lighting Effects filter to produce a bit of depth and brighten some of the areas in the texture. The upper layer being set to Dodge should now make some of the texture more yellow and orange than the rest wherever the grayscale noise is lightest.

Lava Lighting

I’m going to use the stone texture from the previous section of the tutorial, so feel free to save the image to use, or pick a nice grainy stone texture that you would like to use. Import the stone texture into a new layer above the other two. I have set the Blend Mode to Screen for the imported stone texture. With the stone layer active, go to Filters > Map > Bump Map to bring up the bump map window. Select the original orange background layer we made with the solid noise as the bump map. Feel free to use whatever settings you like, or use the ones from the example image below.

Bumped Lava Rocks

I’ve gone ahead and set the Blend Mode for the filter to Grain Merge which will lighten some areas more while leaving darker or mid gray areas alone. With a bit of adjusting, you can get different variants or shading effects on your lava rocks.

Final Lava Rocks Texture

You can experiment and combine the techniques from each of these smaller tutorials to produce more detailed version of your textures, or try adding more steps to produce additional features or wear and tear.

This tutorial is under construction and more Texture Tutorials will be added over time!

The post Textures with GIMP first appeared on Screaming Brain Studios - Free Game Assets.

G’MIC: Cartesian Transform

ScreamingBrain — Thu, 26 Oct 2023 05:01:49 +0000

Introduction

Our favorite free image editor, GIMP already comes with a ton of built-in filters, but today we will be taking a look at an incredibly useful filter called Cartesian Transform that is only available when you install the free filter suite, GREYC’S Magic for Image Computing, also known simply as G’MIC. In order to use G’MIC as easily as possible, you should have GIMP installed as well. This allows you to use the plug-in version called GMIC-qt that works using a graphical interface rather than a command line prompt. This is more of an information repository related to the Cartesian Transform filter than it is an actual tutorial, but the filter is capable of many different types of warps, distortions, translations, and perspective effects that are useful for making old school graphics and artwork.

The Cartesian Transform filter is a very specific type of filter that uses mathematical expressions to perform ‘pixel operations‘ in order to warp or displace an image. Once you have G’MIC installed, you can find it under Filters at the very bottom of the drop-down menu using the name G’MIC-qt. Type Cartesian Transform into the filter search bar to bring up the filter we are going to be using. You can also find it by expanding the Deformations category in the filter list. By default, whenever you first open the Cartesian Transform filter, there will be a simple example expression showing how the filter can be used to produce a wavy distortion.

X-Warping: (w+h)/20 * cos(y*20/h)
Y-Warping: (w+h)/20 * sin(x*20/w)

Looking at the example above, you can see a basic expression entered into both the X-Warping and Y-Warping fields of the filter settings. You can also see that the Relative Warping box has been checked. By ticking or unticking this box, you can produce different types of effects, as the math expressions will be applied in different ways. If the box is unticked, operations on the pixels will only take into account their original pixel coordinates in the image, while ticking the box means the defined warp is to be performed relative to any pixels that have been warped or displaced before the current step. Feel free to experiment with ticking and unticking the box to get different results. Really quickly, let’s break down that expression:

(w+h)/20 – The first part of each expression is essentially adding the width and the height of the image (w+h) and dividing the result by 20.
cos(y*20/h) – Applies a cosine function to the y coordinate of each pixel. The y coordinate is multiplied by (20/h) to control the frequency and wavelength of the cosine wave.
sin(x*20/w) – Applies a sine function to the x coordinate of each pixel. The x coordinate is multiplied by (20/w) to control the frequency and wavelength of the sine wave.

With Relative Warping turned on, you ensure that the expression is applied procedurally to each pixel in the image based on the previous displaced or transformed pixel coordinates, rather than each pixel’s original coordinates.

The main problem you will find is that there is not much documentation related to how to actually use this filter or what any of those expressions even mean, and it is even harder to find math expressions to use. But never fear, after weeks of testing and experimenting, I’m finally able to say: “I also don’t quite know what it all means, but I’m here to help!”

Variables and Constants

It doesn’t say this anywhere, but the Cartesian Transform filter is able to use most of the mathematical functions, constants, or variables that are listed in the main GMIC documentation (HERE) Not all of these constants or functions are available and some may actually cause an error message to pop up, so I have collected the most useful ones here! It is also good to note that the Cartesian Transform filter does not seem to be able to alter color information in the image, but it is possible to reference color channels or values in the image inside of expressions.

Cartesian Transform Settings

The settings panel for the Cartesian Transform filter has two important fields where you can enter expressions. These are the X-Warping and the Y-Warping expression fields, and each one affects how the current evaluated pixel is transformed. The X-Warping expression affects the pixel along the horizontal axis, while the Y-Warping expression affects the pixel along the vertical axis. By entering different mathematical expressions into these two fields, it is possible to produce a vast number of unique effects.

The way this filter works is that each pixel in the image is ‘evaluated,’ and the expression that has been entered into the X-Warping or Y-Warping fields will be applied to that pixel’s coordinates before moving on to the next one. This is a bit similar to how Convolution Filters work, but here we are working with mathematical expressions rather than ‘kernels.’

Constant Values:

w – Width of the image.
h – Height of the image.
wh – Quicker way to express ‘image width * image height’
x – Coordinate X of the currently processed pixel.
y – Coordinate Y of the currently processed pixel.
e – Euler’s Number. (2.71828..)
pi – The value of PI. (3.14159..)
u – Random value between 0 and 1.
g – Random gaussian value, meaning values follow a bell curve.
i – The currently processed pixel value.

Math Functions:

sin() – Mathematical sine function. (Typically used with the x-axis)
cos() – Mathematical cosine function. (Typically used with the y-axis)
tan() – Mathematical tangent function. (Can be used to stretch/shear)
atan() – Mathematical arctangent function. (The inverse of the ‘tan()’ function)
abs() – Absolute value. (Can be used to bring negative values to positive)
floor() – Round a value down. (Can be used for pixelation or mosaic effects)
sqrt() – Square root of a value. (Can also be used to normalize values.)

This is not necessarily every available constant or math function, but the majority of effects in the next few sections of this tutorial tend to use these the most. Another important aspect of the mathematical expressions you are able to enter into the X-Warping or Y-Warping fields is that they can also be comprised of multiple steps, separated by using a semi-colon (;) so you are not limited to simple expressions. In fact, you can even assign values to variables and use them later in the same expression. Take a look at the example expression below:

a = 1+1; x+a

The first step of the expression (a = 1+1) would set the variable ‘a‘ to a value of 2, and the second step (x+a) would then add the value of ‘x‘ to the value of ‘a‘ giving a final result. Several of the filters in the next few sections of the tutorial give examples of how these multi-part expressions can be used.

The Boundary setting allows you to determine what happens to any pixels that fall outside the boundary of the image itself. In some cases, the warp or displacement effect will cause parts of the image to extend past the borders of the image.

Transparent – Ignores any warped or transformed pixels outside the boundary of the image and leaves empty space or transparency where there are none. Useful in some cases when the warp or transform is producing a specific shape.
Periodic – Tiles or repeats the image along the edges in any direction wherever there would be empty space. This is useful for creating seamless tiling images.
Mirror – Similar to periodic, though instead of tiling from the edge, the image or texture is reflected along the seam. Useful for mirrored or kaleidoscopic effects.
Nearest – Uses and extends the color value of the nearest pixel at the seam.

The Interpolation setting determines how the pixels are smoothed in the final image. The Nearest Neighbor interpolation uses the closest pixel to determine the color of any intermediate pixels and has a more pixelated or blocky appearance, while the Linear interpolation setting tends to look smoother, but can lose some detail. Some filters look better with one or the other, so the choice is really up to you.

Each of these settings can have a different effect on how the filter transforms or outputs the final result. The examples in the following sections of the tutorial will indicate which Boundary or Interpolation setting works best for each filter.

Perspective Transforms

This first set of expressions affect the way the image is displayed by adjusting the perspective or the orientation, and tend to be useful for quick effects like tiling or de-tiling an image, flipping or mirroring an image along its axes, or shifting the image to produce different angles.

Image Shift – Moves the image along the x or y axis by a specific amount. You can use numbers, variables, or fixed amounts (Such as the image height / 8) to determine the amount of shift.

X-Warping: x + w/8

Y-Warping: y

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

X-Warping: x

Y-Warping: y – h/8

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

Image Flip – Causes the image to flip along the specified axis. Subtracts the current pixel coordinate (x or y) from the height or width (h or w) of the image.

X-Warping: w – x

Y-Warping: y

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Transparent/None

X-Warping: x

Y-Warping: h – y

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Transparent/None

Image Tile – Causes the image to tile along the specified axis (or both.) from the upper left corner of the image. This particular expression is multiplying the x and the y values by 2. Remove the ‘*2’ from the x-warping or y-warping expression to tile along one axis, or increase the value to multiply the tiling effect.

X-Warping: x * 2

Y-Warping: y * 2

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

X-Warping: x / 2 OR x * 0.5

Y-Warping: y / 2 OR y * 0.5

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Transparent/None

Image Tile from Center – Tiles the image by resizing around the center of the image instead of the upper left corner. Increase the ‘*2’ multiplier to increase the tiling effect. This be used to perfectly scale an image to the center of the canvas if the boundary mode is set to Transparent.

X-Warping: w / 2 + (x – w / 2) *2

Y-Warping: h / 2 + (y – h / 2) *2

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

Checker Tile – Tiles the upper left corner of the image across the entire canvas.

X-Warping: x – w/2 * floor(2 * x /w)

Y-Warping: y – h/2 * floor(2 * y/h)

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

Checker Rotate – Rotates sections of the image by dividing it into a grid. Change the value ‘4’ in the following expression to increase or decrease the number of squares.

X-Warping: (x – (x % (w/4)) + (y % (h/4))) % w

Y-Warping: (y – (y % (h/4)) + (x % (w/4))) % h

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

Mirror/Reflect – Reflects and tiles the image along the desired axis. Change the X-Warping expression to ‘x’ to mirror only along the x-axis, or change the Y-Warping expression to ‘y’ to mirror only along the y-axis.

X-Warping: (w/2) – abs(w/2-x)

Y-Warping: y

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

X-Warping: x

Y-Warping: (h/2) – abs(h/2-y)

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

X-Warping: (w/2) – (w/2-x)

Y-Warping: (h/2) – (h/2-y)

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

Radial Slice – Splits the image into slices and rotates them around the center of the image. Adjust the ‘(t-4) and ‘(pi/4)’ values to change the slice angles or amounts.

X-Warping: R=sqrt((x-w/2)^2+(y-h/2)^2);a=atan2(y-h/2,x-w/2);t=floor(a/(pi/4));R*cos(t*(pi/4)-a)

Y-Warping: R=sqrt((x-w/2)^2+(y-h/2)^2);a=atan2(y-h/2,x-w/2);t=floor(a/(pi/4));R*sin(t*(pi/4)-a)

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

X-Warping: R=sqrt((x-w/2)^2+(y-h/2)^2);a=atan2(y-h/2,x-w/2);t=floor(a/(pi/4));offset=1*(t-4)*(pi/4);R*cos(a+offset)

Y-Warping: R=sqrt((x-w/2)^2+(y-h/2)^2);a=atan2(y-h/2,x-w/2);t=floor(a/(pi/4));offset=1*(t-4)*(pi/4);R*sin(a+offset)

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

45-Degree Internal Rotation – Performs a 1:1 pixel shift causing the image to rotate by 45 degrees to the left or right. Useful for working with or creating isometric graphics.

X-Warping: (x-1)-(y-1)

Y-Warping: (y-1)+(x-1)

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

X-Warping: (x-1)+(y-1)

Y-Warping: (y-1)-(x-1)

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

Isometric Internal Rotation (Floors) – Shifts the pixels in the image over by 2 and up by 1, producing a 2:1 isometric rotation. Useful for working with or creating isometric floor tiles or textures.

X-Warping: (x-1)+(y-1)*2

Y-Warping: (y-1)*2-(x-1)

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

X-Warping: (x-1)-(y-1)*2

Y-Warping: (y-1)*2-(x-1)

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

Isometric Internal Rotation (Walls) – Shifts the pixels in the image over by 2 and up by 1, producing a 2:1 isometric rotation. Useful for working with or creating isometric wall tiles or textures.

X-Warping: x

Y-Warping: y+x/2

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

X-Warping: x

Y-Warping: y-x/2

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

Distortions and Warps

The next set of expressions deal with warping the image in various ways, including displacement, pixelation, or curving the image. Some of these expressions are a bit more complicated and I do not have a very deep understanding of exactly how some of them function, but I am keeping the expressions here for everyone to reference.

Sine Wave Ripple – Produces a sine wave distortion across the image by using the x coordinate of the pixel to determine how high or low the pixel is redrawn. The ‘0.1’ value controls the strength (amplitude) of the wave.

X-Warping: x

Y-Warping: y + h * 0.1 * sin(2 * pi * x / w)

Relative Warping: OFF

Interpolation: Either

Boundary: Periodic

X-Warping: x + w * 0.1 * sin(2 * pi * y / h)

Y-Warping: y

Relative Warping: OFF

Interpolation: Either

Boundary: Periodic

Sinus Warp – Warps the image along both the x-axis and the y-axis using a sine wave function.

X-Warping: x + (w/2) * sin(2*pi * y / h)

Y-Warping: y + (h/2) * sin(2*pi * x / w)

Relative Warping: OFF

Interpolation: Linear

Boundary: Periodic

Circular Ripple – Produces a round water drop effect with concentric rings. Increase or decrease the ‘0.2’ value to modify the ripple strength.

X-Warping: x + 0.1 * (x – w/2) * cos(0.1 * sqrt((x – w/2)^2 + (y – h/2)^2))

Y-Warping: y + 0.1 * (y – h/2) * sin(0.1 * sqrt((x – w/2)^2 + (y – h/2)^2))

Relative Warping: OFF

Interpolation: Linear

Boundary: Periodic

Spiral Ripple – Produces a spiral version of the water drop-style ripple. Increase or decrease the ‘/16’ at the end of the expression to increase or decrease the effect.

X-Warping: x + (w/2) * cos(atan2(y – h / 2, x – w / 2) + sqrt((x – w/2)^2 + (y – h/2)^2) / 16)

Y-Warping: y

Relative Warping: OFF

Interpolation: Linear

Boundary: Periodic

Glass Refract – Stretches and squashes the image in various locations producing a refracting glass type effect. Adjust the strength of the effect by changing any of the number values in the example expressions.

X-Warping: x + 5 * cos(x/20)

Y-Warping: y + 5 * sin(y/20)

Relative Warping: OFF

Interpolation: Linear

Boundary: Periodic

X-Warping: x + 3 * sin(x/12) * sin(y/5)

Y-Warping: y + 3 * cos(x/12) * cos(y/5)

Relative Warping: OFF

Interpolation: Linear

Boundary: Periodic

Cylinder Warp – Causes the texture to stretch along the top and bottom edges to produce a pseudo cylindrical projection.

X-Warping: w/2-(cos(asin(((h/2)-y) / (h/2)))*(w/2-x))

Y-Warping: y

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

Fuzzy Pixelate – Moves the pixels along the x and y axes to create a fuzzy, pixelated distortion effect.

X-Warping: w/2-(cos(asin(((h/2)-y) / (h/2)))*(w/2-x))

Y-Warping: y

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

Stair Displace – Divides the image into rows and shifts each row over to the right by an equal amount. Change the ‘8’ value to adjust how many rows there are or the amount of shifting.

X-Warping: x – (w / 8) * floor(y / (h / 8))

Y-Warping: y

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

Pixelate (Mosaic) – Quantizes the number of pixels in the image to produce a pixelation or mosaic effect. Adjust the ’48’ or the ’16’ values in the example expressions to adjust the amount of pixelation.

X-Warping: floor(x / (w/48)) * (w/48)

Y-Warping: floor(y / (h/48)) * (h/48)

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

X-Warping: x – x % 16

Y-Warping: y – y % 16

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

Circle Transform – Causes the pixels along the top and bottom edges and corners to pull inwards along the top row of pixels producing a circular image.

X-Warping: r=w/2; R=sqrt(r^2-(y-h/2)^2); (x-r)/R * r+r

Y-Warping: y

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Transparent/None

Spherize – Warps the image into a pseudo-sphere by converting the four corners into curves.

X-Warping: r=w/2; R=sqrt(r^2-(y-h/2)^2); (x-r)/R*r+r – 20*(floor(10*R/w)%2)/i

Y-Warping: r=h/2; R=sqrt(r^2-(x-w/2)^2); (y-r)/R*r+r – 20*(floor(10*R/h)%2)/i

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Transparent/None

Concave Warp – Warps the image so that it appears to have a concave depression in the center. Change the ’30’ or ‘100’ values in the example expressions to control how deep or how wide the concave depression is.

X-Warping: x+30*sin(2*pi*(x-w/2)/w) * exp(-((x-w/2)^2+(y-h/2)^2) / (2 * 100^2))

Y-Warping: y+30*sin(2*pi*(y-h/2) / h) * exp(-((x-w/2)^2+(y-h/2)^2) / (2 * 100^2))

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

Zoom Bulge – Causes the image to bulge outwards in the center the edges of the image tile and get smaller. Change the ‘0.003’ value to increase or decrease the strength of the zoom effect.

X-Warping: (x-w/2) / (1-0.003*sqrt((x-w/2)^2 + (y-h/2)^2)) + w/2

Y-Warping: (y-h/2) / (1-0.003*sqrt((x-w/2)^2 + (y-h/2)^2)) + h/2

Relative Warping: OFF

Interpolation: Nearest Neighbor

Boundary: Periodic

There are countless other effects that can be done using the Cartesian Transform filter, it is just a matter of experimenting or being really good with math (Which I am not.) But hopefully this gives you a better understanding of how to use the Cartesian Transform filter, or helps you to create your own unique effects!

This tutorial will be expanded over time with more expressions and effects!

The post G’MIC: Cartesian Transform first appeared on Screaming Brain Studios - Free Game Assets.

Planet Textures: Fault Formation

ScreamingBrain — Mon, 29 May 2023 00:14:41 +0000

Introduction

In some cases, you may not wish to manually assemble textures by hand, or you may not have the time to fumble around with layers and filters to make your planet surface textures. Thankfully, there are a few tools out there that make the process of creating textures for your planets even simpler! For this tutorial, we will be looking at one tool in particular: Textures for Planets

This tool is specialized in that its only use is for generating planet surface textures. It comes with handy built-in features that allow for the creation of randomly generated textures for both Rocky Planets and Gas Giants. These textures can sometimes look more realistic or detailed than those made through manual editing, though they also have a very particular old school style. The main downside to this tool is that it lacks certain customization options, so you are mostly limited in your ability to decide where anything is placed or how the terrain is generated.

Textures for Planets creates the appearance of terrain using a fractal algorithm that ‘fractures’ the image, or ‘subdivides’ regions, into smaller ones, through a process called fault formation. Once the image has been subdivided into triangles over and over, the end result begins to take on the appearance of mountains, valleys, coastlines, and landmasses. Take a look at the example below to get an idea how this process works:

Fractal Fault Formation

As you can see, each iteration of the fault formation process produces more and more defined contrast between the colors in the image, and various terrain features, landmasses, or bodies of water begin to appear. The algorithm it uses to generate textures are the same no matter which type of planet you are generating, so they can sometimes begin to look very similar after a while, requiring you to be particularly creative when creating colorizers for the software to use.

This particular tutorial serves an archival purpose: While the Textures for Planets website is still active and the software is still available for download, the tutorial sections related to creating custom planet colorizers or tools are inaccessible, so I have taken it upon myself to maintain this information on my site.

Nonetheless, it is a very useful and FREE tool that can assist in the creation of textures for both Rocky Planets and Gas Giants. In fact, both the 2D Planet Pack 1 and the Planet Surface Textures Pack from Screaming Brain Studios were created using this very tool!

TfP: The Interface

When you first launch the program, you will be presented with a selection window where you can choose from a number of preset planet types. There are several Rocky Planets, including some with cloud layers, as well as some presets for Gas Giants.

If you are ever working on something and you would like to create a new planet instead, simply select File from the menu bar at the top and click on New Project to bring up the planet preset selection window. For this section of the tutorial, I’m going to select the Dry planet preset.

Dry Planet Preset

Textures for Planets utilizes a list of steps, which can be seen along the left side of the screen, and follows them in order from top to bottom to generate multiple texture variations, add terrain features like craters and cracks, or produce different resolutions of the final textures.

Landscape Generation Steps

Right clicking on any step in the list will bring up a menu where you can change the order the steps are run by moving them up or down, edit the selected steps, or remove them from the list entirely. If you take a look at the list of steps, there is one in particular that we do not usually need, outlined in red in the example image below. This step will produce an icosahedral render, which is not the type of texture we are trying to make for this tutorial. Instead, we are simply making equirectangular renders, which are generated to be wrapped around a sphere.

Unnecessary Step

Unless you are planning to work with or have a way to utilize icosahedral textures, you can right click on this step and choose Remove from the list of options. This will mainly save on render time, since we only need to render equirectangular textures. If instead you would like to change the icosahedral render step into a different sized equirectangular texture, you can right click on the step and select Edit Step to bring up the Edit Step Properties menu. There are various settings available here to determine the output of your texture renders.

Edit Render Properties

You can change the size of your texture output by setting the Texture Width and Texture Height values to your desired size, though it is recommended that you use a 2:1 size that is twice as wide as it is tall for the best results. You can generate textures of any size if you like, but for this tutorial, I’m going to stick with 1024×512 for my textures. The Projection option allows you to choose between the icosahedral or the equirectangular projections.

The next two options, Render Ground Layer and Render Cloud Layer determine whether this particular render step should render just the planet terrain on its own, just the cloud layer on its own, or a combination of both with the clouds overlaid on top of the terrain. The last two options, Ground Coloring and Cloud Coloring, allow you to select from the list of preset planet and cloud types to be used as the ground layer and cloud layer respectively.

From here, if you choose File from the menu at the top of the window and Save your planet project, keep in mind that this is how you will be creating a new template file that can be accessed from any of your custom colorizer files. A template or project file in Textures for Planets saves the render list and all the settings related to how this type of planet will be generated. It can be a little confusing at first, since the way things work tend to be a little bit ‘circular’ and a template file may refer to certain colorizers, while certain colorizers may also refer to a specific template. We will go over how to make custom colorizers further on in the tutorial.

TfP: Rocky Planets

The first type of planet texture we are going to generate is best for terrestrial or rocky planets, and tends to be much more customizable in Textures for Planets than those used for gaseous planets. It is also possible to include additional terrain features, such as craters, when working with rocky planet textures.

Example Rocky Planet Texture

By default, the Create World step at the top of the generation list cannot be removed. By moving the slider in the properties panel for the Create World step, you can increase or decrease the number of times the texture is subdivided. The higher this number is, the longer the process will take, so it’s usually best to keep it somewhere in the middle between 5 and 7. In order to generate a Rocky planet type, you must also include the Landscape step in the list.

Landscape Step

This step generates ‘tectonic iterations’ that produce variations in the height values of the image. Without this step, you will end up with a texture better suited for Gas Giants (Which you can read about in the next section of the tutorial!) I’m going to continue to use the Dry planet preset that we loaded in the previous section, which should already have a Landscape step in the list by default. Right clicking on the Landscape step and selecting Edit Step Properties will bring up a slider that allows you to choose how many tectonic iterations you would like.

Landscape Properties – Tectonic Iterations

The same case holds true for the slider in the Landscape properties, where higher numbers will create more detail in the image, but tend to take far longer when rendering. I tend to keep the slider between 2000 and 3000 for most of my renders so it doesn’t take thirty minutes to render each texture. If you take a look at the next two steps in the list, you will see several Tools with two different types of features: canyon and crater.

Tool Steps

By including these in the list of generation steps, a series of additional details will be included as the terrain is being rendered. The Tool step in Textures for Planets works by randomly placing additional grayscale terrain features into the render so they blend into the landscape. Right clicking on either of the Tool steps to bring up another properties window.

Tool Properties Window

In the Edit Step Properties window for the Tools step, you can set the minimum and maximum size of the terrain feature, as well as the minimum and maximum number of times the terrain feature will be included in the texture as it is generated. Clicking on the large button next to Effect Tool will also bring up an entirely new preset menu that includes all the available terrain feature Tools that are currently in the tools folder.

Tools Preset Gallery

By default, Textures for Planets comes with three Tools: canyon, crater, and volcano. Each of these will add various details to the planet texture as it is being generated, so try experimenting with different combinations of Tools or different size values to see how they affect the texture. We will take a look at how to make your own custom Tools later in the tutorial.

Another useful step to include in your render list is the Cloud Layer, which adds randomly generated clouds as an overlay using a different type of colorizer.

Render Cloud Layer On

The cloud generation in Textures for Planets does not look incredibly realistic, but it can be very useful for adding an additional layer of depth or detail to your planet textures, as well as the ability to render just the clouds on their own to be used in other programs or wrapped to 3D spheres. Right clicking on the Cloud Layer step brings up a properties window with a lot of different settings.

Cloud Properties

The Cloud Type allows you to choose between Terrestrial Clouds and Gas Giant cloud bands, each with their own properties. For this section of the tutorial, we are going to use the Terrestrial Clouds as the Cloud Type and the settings from the example image above. The properties of the cloud colors themselves can be changed by changing the Cloud Coloring option in the step properties for your final render step.

The final step required in the list is the Render step, where you can set up the dimensions of the final textures as well as whether or not to include a cloud layer at all. You can also select the Cloud Coloring option to change the type of cloud colorizer that is used when generating the cloud layer. When you are satisfied with all of your terrain settings, press the large Generate Textures button at the top of the window (it looks like a Play button) to bring up one final window.

Run Planet Generation

Here you can tell Textures for Planets to generate up to 100 different variations of the planet texture in one go if you like. Make sure to select a folder to output your textures into. I’m going to keep the slider at a lower number and create about 25 different variations of my texture.

Generate Textures Window

Press the Generate Textures button to begin the rendering process. It may take a while depending on how high you have set the Number of Worlds slider, but it will generate appropriately named texture files in the folder you have selected using all of the steps and settings you have set up in your render list.

Final Rocky Planet Texture

You can use any of the methods outlined in the 2D Planet Sprites tutorial to convert your planet texture into static 2D images or even rotating animated spheres using GIMP, or you can import your texture into any 3D software for mapping to spheres. The textures generated with Textures for Planets are already correctly warped at the poles, so there is no additional editing required to make them work correctly with 3D models.

TfP: Gas Giants

Now we are going to take a look at one of the other types of planet textures that can be generated with Textures for Planets using the Gas Giant preset.

By default, the Create World step at the top of the render list cannot be removed, and changing the Subdivision value will only have an effect on the texture if it is the only step in the list. Also by default, the Gas Giant preset that comes with Textures for Planets uses a Cloud Layer step to produce the storm bands of the gas giant. Select File from the menu bar at the top and choose New Project if you are not already looking at the Planet Preset Gallery. I’m going to select the Gas Giant preset from the list.

Textures for Planets Presets

If you double click on Cloud Layer – Gas Giant Zones, it will bring up a properties window where you can tweak some settings. Instead of Terrestrial Clouds, our Cloud Type should be set to Gas Giant Zones instead. This will create a series of horizontal bands that stretch across the texture with the ability to add smaller swirls and turbulent storms to the bands.

Gas Giant Cloud Settings

You can set the minimum and maximum values for each setting, and the tool will randomly choose values in between when generating your textures. At the very bottom of the settings window, there is a setting called # of Iterations that determines how much detail or how many ‘passes’ the generator should take when creating the final texture. Higher values will take much longer to generate, so try to keep them between 200 and 600. Press OK when you are happy with your settings and Textures for Planets will generate a preview using the settings and texture size you have set in the Render step.

Preview Texture

This lets you apply changes or add multiple render steps to the generation chain if you prefer without rendering hundreds of images to your computer. In order to save or export your Gas Giant texture so it can be used, click on the triangular Generate Textures button at the top of the screen.

Run Planet Generation

The next window that pops up allows you to select how many variations of this particular texture you would like to generate and save. Should you actually want hundreds of different planets, you very much can do so by moving the slider to the right. Keep in mind, it will take a very long time to export multiple textures.

Final Generated Gas Giant Texture

TfP: Custom Colorizers

Each planet template in the preset gallery is based on a colorizer. The spelling in the case of this tool would be colourizer, or colours, so just to keep things consistent with the software, try to use this spelling whenever you are naming things. For this section of the tutorial, we will be creating the colorizer for a Toxic planet.

Example Toxic Planet

Each colorizer file contains one or more color gradients, a thumbnail image for the preset gallery, and a settings file that tells Textures for Planets which render steps to use or how to name the preset. By default, the colorizers and tools can be found in the C:\Users\YourUserame\TexturesForPlanets\ folder separated into Colourizers, Tools, and Templates, along with a sample colorizer image.

Tools and Colourizers Folder

If you open the sample colorizer image, you can get a quick and simple idea of how the colorizers are prepared. This is what provides the color palette that Textures for Planets will use to generate your planet.

Example Colorizer Gradient

By default, each colorizer is 200×200 pixels in size and follows a particular set of rules, as shown in the example below.

Gradient Color Map

Colors intended to be displayed at the highest altitudes (such as mountains) should be towards the top, whereas colors that should display near the lowest altitudes (such as oceans or valleys) should be towards the bottom. Just the same, the colors closest to the left side of the gradient will be applied to areas near the equator, while colors closest to the right side of the gradient will be applied to the planet poles. If you want a sharp change between areas that should be terrain and areas that should be water, use a straight line with no blurring between the colors.

The easiest way to create these is to use an image editor, like GIMP, to create the basic color zones. Then, using the Blur tool, Smudge tool, and a bit of Noise applied as a filter, you can get quite creative when it comes to producing different values of light and dark in your gradient. When you have made your gradient, export it as colours.png into a new folder somewhere on your hard drive.

In order to use this as a colourizer in Textures for Planets, we have to have several files in this folder:

colours.png
sample.png
colourizer.txt

Each file has a different function. The colours.png file is our gradient color palette, and it is important to note that you can have more than one color palette per colourizer. The sample.png file is intended to be used as the preview image or thumbnail in the preset gallery. To start with, you can simply copy colours.png and rename it to sample.png, as we won’t actually have a planet image to use as a thumbnail right away. The third file, colourizer.txt, is our settings file containing all the information we need to actually use the colourizer.

Start by creating a new text file and naming it colourizer.txt before opening the file. All we need to put inside are the following lines:

name=Toxic
template=plain
template_colourizer_surface=Toxic
template_colourizer_clouds=
show_in_start_gallery=true
author=Textures for Planets

It may be simple to figure out for some, but for those who might be confused by this, I’ll break it down into more detail.

The name entry tells Textures for Planets what to call our toxic planet preset. We have given it the name “Toxic,” which will show up when browsing the preset gallery.

The template property tells Textures for Planets which planet template to use for this particular preset. Planet templates are made by saving a planet project while working on any type of planet. This is basically a preset list of render steps that can be recalled for any planet type, as long as it is specified as the template in the colourizer.txt file.

The template_colorizer_surface property tells Textures for Planets which colorizer file to use (in this case, it will be loading the Toxic.col or Toxic.zip file from the Colourizers folder, depending on which file extension you choose to use) to color the surface of the planet. This would be the gradient we made earlier in this section.

The template_colorizer_clouds property tells Textures for Planets which colorizer file to use (in this case, we are not using clouds quite yet) to color the cloud layer.

The show_in_start_gallery property tells Textures for Planets whether to display this colorizer preset in the gallery when you launch the software. Set this value to false if you just wish to use the colorizer file to color other planets, or as a cloud layer, rather than as a whole planet type.

Finally, the author property allows you to include your name or a credit denoting you as the creator of this colorizer or planet preset.

Once you have saved your colourizer.txt file, grab all three files and zip them into an archive using WinZip or WinRAR. I am uncertain if the software can read *.rar files, but it definitely works with *.zip. I personally follow the same filename convention used by the default colourizers that come with Textures for Planets and rename them from *.zip to *.col which is considered a colourizer file for the software, but you can leave the file type as *.zip if you prefer. They will both be read by the program just the same.

Zipped Colourizer Files

It is also possible to include multiple colours gradients in your colorizer file, by simply adding consecutive letters of the alphabet to the end of the filename. For example, the first color gradient would be named colours.png, as shown earlier. Any additional gradient must follow the naming convention coloursb.png, coloursc.png, coloursd.png, etc. as in the example image below. When generating the planet textures, Textures for Planets will select randomly from the available color gradients.

Using Multiple Color Gradients

Once you have collected all your files into the *.zip archive, you can launch Textures for Planets to see your new preset show up in the preset gallery using the thumbnail image you saved as sample.png in the colorizer file. If we were to use the new Toxic colorizer from the examples above, the resulting planet texture would look like the example below:

Example Toxic Planet

Having multiple gradient color files in your colorizer causes Textures for Planets to randomly select between all the available color palettes, which can be very useful when you would like to create a large number of different variations of the same render settings or planet template. You can also open any of the existing *.col files using WinZip or WinRAR to view how each colorizer has been put together.

Continue to the next section of the tutorial to learn how to make custom Tools that add features like canyons or craters to your generated planet textures!

TfP: Custom Tools

In addition to colorizers, there is another built-in feature that allows you to add more detail to your planet textures called the Tool. By default, Textures for Planets comes with three types of tools: canyon, crater, and volcano. When you include the Tool step in your render list, a series of terrain features will also be applied to the generation process, such as the craters in the example image below.

Example Craters

The process for creating custom Tools to use in Textures for Planets is almost exactly the same as the process used to create Colorizers, with a few small differences. The image files we will be using to create our custom Tool are going to be 100×100 pixels, or half the size of our color gradient images. Each tool image uses a grayscale heightmap for determining areas that are raised or lowered in the final texture render. Areas with pixels brighter than 130 are raised, while pixels darker than 120 will be lowered. The darker the color of the heightmap, the lower the terrain will be, colored with low elevation colors. Each time the generator is run, each height map will be selected at random and applied to the final texture.

For this section of the tutorial, we will be creating an improved crater. I’m going to go ahead and use the improved crater images from the original inaccessible Textures for Planets tutorial to give you an example. Feel free to save these example images to use in your own crater tool!

Each of these image files must be named using the following naming convention: heightmap#.png, where the # is replaced by the consecutive image index numbers (ie. 0, 1, 2) so each file is named heightmap1.png, heightmap2.png, and so forth.

Once you have the heightmap images in the folder, create a new text file named tool.txt, like we did with the colorizer.txt file in the previous section of the tutorial. Inside this text file, we only need the following lines:

name=Improved Crater
defaultsize=5,25
defaultcount=50,150
author=

The name property stores the name you would like displayed when viewing the tool in the tool gallery. For this example, we will be naming it Improved Crater.

The defaultsize property contains two values: 5 and 25. These two numbers are a range determining the size (this is measured as ‘height in lattitude’ inside Textures for Planets, though I could not say whether this is pixel size or not.) between 5 and 25.

The defaultcount property works in a similar way, using two values to determine a range for how many craters (or instances of the tool being used) will be placed in the texture. For this example, we are using a range between 50 and 150.

Finally, the author property is for you to include an author or company name to tag the tool as your creation.

You will also need to include a sample.png image of 200×200 pixels in the folder to use as the gallery thumbnail when browsing the tools preset gallery. You can make one of your own, or use the example image below:

Improved Crater Thumbnail

Once you have all of the files together in a folder, they must be zipped up into an archive, much like we did with the colorizers in the previous section of the tutorial.

Final Tool Files

Once you have all the files inside a *.zip archive, rename the archive to improvedcrater.tool and launch Textures for Planets to try out the new crater tool! Simply add a Tool step to the render list and right click on it to edit the properties. You should now see the new crater tool included in the Tools preset gallery.

Completed Improved Crater Tool

Once you have created textures using the Generate Textures button at the top, you can use the methods outlined in the 2D Planet Sprites tutorial to convert them into 2d spherical planets, or you can apply them to 3D spheres and create 3D planets instead. One additional tip is to create a 3D render or a 2D planet sprite and use that to replace the sample.png image file in each of your colorizers so that you can see a preview of the finished planet inside the preset gallery.

TfP: Custom Clouds

The very last thing we need to take a look at is how to create custom cloud colorizers, for any planets we may want to use with a cloud layer. Almost all of the steps are exactly the same as the ones outlined in the section about custom colorizers, with a few small differences.

Much like the planet colorizer gradients, cloud layers use their own colorizer gradient of 200×200 pixels in size. The same rules apply to the cloud colorizer gradients that apply to the planet colorizers, in that colors to the left are going to affect the equator while colors towards the right will affect the poles, and colors towards the top of the gradient will affect the highest altitudes and colors towards the bottom of the gradient will affect the lowest elevations. This can be used to distribute clouds around certain areas of your texture. Since we are making a cloud layer this time, we also need to include a transparent color in our gradient, to determine where cloud layer will display transparency. Take a look at the example cloud colorizer below:

Cloud Colorizer

Much like the previous sections of the tutorial, we will need several files, including colours.png, sample.png, and colourizer.txt in our folder. You can save this cloud gradient and save it as both the colours.png and the sample.png files for now.

Inside the colours.txt file, we just need to include the following lines:

name=Toxic Clouds
template=plain
template_colourizer_surface=
template_colourizer_clouds=Toxic Clouds
show_in_start_gallery=false
author=Textures for Planets

Almost all of the parameters are going to be the same as you would have in any other colorizer file, only this time, we will be setting the show_in_start_gallery value to false. This will prevent the cloud layer from showing up in the planets preset gallery, since it isn’t a planet. Compress all three of the files into a *.zip file and name it toxicclouds.zip or toxicclouds.colto save the cloud colorizer.

Now all we need to do is go back to our toxic.col or toxic.zip file (depending on whether you decided to go with the *.col file extension or not) and modify the colorizer.txt file so that it includes our new cloud colorizer. Open the colorizer.txt file from the Toxic planet colorizer (toxic.zip or toxic.col) and change the lines so they look like this:

name=Toxic
template=terrestrialclouds
template_colourizer_surface=Toxic
template_colourizer_clouds=Toxic Clouds
show_in_start_gallery=true
author=Textures for Planets

First, we want to change the template value to use the terrestrialclouds template. This is a default template that has the render list set up for using a cloud layer. The second change is to set the template_colorizer_clouds value to Toxic Clouds, so that Textures for Planets knows to use the new Toxic Clouds colorizer we just made. Save your colorizer.txt file, re-zip all your files once more, and make sure your *.zip or *.col file is in the colourizers folder. Now when you run Textures for Planets and select the Toxic planet type, it will generate with the new Toxic Clouds layer!

Final Toxic Clouds Layer

Don’t be afraid to experiment with your color gradients when creating new colorizers, especially applying things like Noise, Grain, Blurs, Smudges, or even shapes. Using these techniques, you can combine different terrain Tools and custom terrain Colorizers to create all kinds of different planet surfaces.

Don’t forget, you can already grab a whole pack of premade fault formation planet textures from Screaming Brain Studios in the Planet Surface Textures Pack to save yourself some time!

The post Planet Textures: Fault Formation first appeared on Screaming Brain Studios - Free Game Assets.

Planet Textures: Procedural

ScreamingBrain — Tue, 23 May 2023 05:57:48 +0000

Introduction

In some cases, you may not want to use existing images to make your planet textures, or you may not wish to fumble around with layers and blend modes in GIMP or Photoshop. Thankfully, there is a fun method for creating planet textures that allows for complete control over just about every detail, from the size of coastlines to the color of your terrain.

In this tutorial, we will be taking a look at how to create procedurally generated planet textures using Blender and some camera tricks. The example planet texture below was created using material nodes, a simple sphere, and a camera to produce a texture with the correct polar warping so that it can be properly mapped to spheres.

Example Procedurally Generated Texture

By using material nodes in Blender, you can easily create procedural surface textures for your planet spheres, export your 3D models, and just stop right there if you like, but in this tutorial, we are going to look at how to set up your camera and materials so you can render a spherically mapped equirectangular texture that anyone can use to texture 3D spheres. Unfortunately, this method does not work to convert images into a spherically mapped equirectangular texture, but it can be used to create new textures for your planets.

Keep in mind, this tutorial is about making and rendering textures for 3D spheres, not for creating the 3D planets themselves, but the techniques outlined in the tutorial can be applied for the same purpose.

Blender: Preparing the Scene

The very first thing we want to do is set up our Blender scene. When you first open Blender, you will see the default cube mesh in the center of our scene. This cube is unnecessary, so press X to delete it from the scene. Now click on Add at the top of the window and select Mesh -> UV Sphere to create a new sphere.

Create UV Sphere

In the bottom left corner of the scene, you should see a small dialog box that allows you to input some initial settings when creating the UV Sphere. I usually increase the Segments and the Rings values so they are something closer to 96, but you can use whichever values you like. Just remember that the higher the number of segments and rings, the smoother the sphere will be. Now, right click on the sphere and select Shade Smooth so all the faces are smoothed out in the viewport.

We don’t actually need a light in the scene, unless you plan to do anything using lighting. For this tutorial, we want our final render to be exactly the same color that we see in the viewport, so I tend to remove the light from the scene. To do this, just select the Light object from the scene list on the right and press X to remove it. This should leave us with a nice simple scene containing nothing but a smooth sphere and a camera.

Prepared Sphere

For the first part of the tutorial, we are going to leave the camera alone so we can see what we are working on as we design the procedural surfaces using the material editor. This will allow us to make changes to our planet texture while still being able to rotate around the sphere and adjust things as needed.

Blender: Procedural Terrain

Most procedurally generated textures are made using a number of similar methods, such as blending random Noise and Gradients together, and the same holds true when making textures for planets. We will be using a few different types of Noise for our terrain generation, and blending a few different layers together using Gradients that we can adjust later to make different variations of our planet textures. The very first thing we need to do is create a material for our sphere by selecting the sphere in the scene and clicking on the Material Properties tab. Once the material properties tab is selected, click on +New to add a new material to the sphere.

Add New Material

This will add several nodes to the material editor, which you can switch to by clicking on Shading at the top of the viewport. You may also want to turn on Viewport Shading by selecting the solid sphere at the top right of the viewport, in order to see the texture as they would appear in a render.

Shading and Materials Editor

Right now, there is nothing to see if you switch Viewport Shading on since we don’t actually have any texture set up yet, but it can be helpful to turn on so you can see all the changes you are making. In the Shader editor section, click on Add -> Texture -> Noise Texture or type Noise Texture in the search bar to create a Noise Texture node. This will create the values that we want, but it won’t actually have any effect on the material until we give it some color, so click on Add -> Converter -> ColorRamp to create a gradient color ramp node. Connect the Factor output of the Noise Texture node to the Factor input of the ColorRamp node to connect them, and the ColorRamp’s Color ouput to the Base Color input of the BDSF node, as shown in the example below.

Material Settings

By dragging the black part of the ColorRamp towards the right, you can adjust where the light and dark areas are in your material. I’m going to go ahead and set mine to right around the middle at 0.5 so there is an even amount of both light and dark.

Since we don’t have a light in the scene, everything might seem a bit dark while you’re working on it. To fix this, every time we change the final Color output, simply drag and connect a copy of the wire to the Emission input of the BDSF node and you should see a true color version of the material.

Connect Output to Emission

Only do this if you have already removed the light from your scene and you can’t see what you are working on. This can also be used to produce glowing effects on the planet surface, such as magma pools or city lights, but for now we are just going to use it to display a true color version of the material we are working on. By adjusting the values in the Noise Texture node, we can change the size or detail of our major landmasses. I’m going to go ahead and use the settings in the example image below, but feel free to experiment and find something you like.

Noise-Based Land Masses

You can also adjust the Scale value to increase or decrease the size of the landmass ‘blobs’ until you have something that looks closer to what you want. Another handy tip is to rename your nodes so you can keep track of which nodes are doing what. To do this, just right click on the node and select Rename. To add just a little bit more detail to the way the noise is generated, create another Noise Texture node, or simply duplicate the one we have already by selecting it and pressing Shift+D. Then connect its Color output to the Vector input of the first node.

Additional Noise Texture Node

Now that we have the basic structure of our terrain, in order to color it and make it look more like land and oceans, we need to create another ColorRamp node and connect it between the BDSF node and our existing ColorRamp. Connect the Color output of the first node to the Factor input of the new node. If you are renaming your nodes, it might be helpful to change the name of the black and white ColorRamp to something like ‘Terrain/Ocean Ratio’ to keep things easier. Then change the name of the new ColorRamp node to something like ‘Terrain Color’ since we will be setting up the different colors of our elevation using this node. Click the + button several times to create a few new color zones in the new ‘Terrain Color’ node.

New ColorRamp Node

By changing the colors of each of the zones on the ColorRamp, you can control the overall appearance of the texture, such as the colors of the oceans, mountains, and coastlines. The black regions are going to be our oceans, so change the color furthest to the left from black to something closer to an ocean blue color. You can use whichever color you like for this, and we will probably be making more adjustments later. In the example image below, I’ve gone ahead and made a few changes to my ColorRamp to include some green shades for the land as well as some brown and yellows for the coastline.

Modified Color Ramp with Terrain Colors

That’s all there is to creating a simple procedural texture in Blender, but we don’t have to be finished just yet. In the next section of the tutorial, we will go over how to add some more detail to the material, such as ocean ripples or adding cloud layers to the texture. If you don’t need any additional details or don’t care about the reflectiveness of the material (which at this current stage does not affect the final texture output) then you can skip straight ahead to the Camera section of the tutorial to read about how to export the texture from this step.

Blender: Bumps and Clouds

Right now, our planet looks a bit flat all around. There is no real depth or dimension to the mountains or the coastlines, and it isn’t very realistic or interesting yet. Let’s add a little bit of bumpiness to our texture by adding a Bump node to our graph. We only need to connect the Normal output of the Bump node to the Normal input on the BDSF node. Then connect the Color ouput of the black and white ColorRamp to the Height input on the Bump node, as shown in the example image below.

Connected Bump Node

Immediately you will notice the terrain has been raised a bit, and the oceans remain flat. You can play around with the Distance value to increase or decrease the effect, though I’m going to set my Strength and Distance values to around 0.5. Now we just want to add one more ColorRamp node in between the black and white ColorRamp and our BDSF node so we can create a quick roughness map. This will allow for separation between the roughness of the terrain from the smooth oceans. Connect the original black and white ColorRamp node’s Color output to the new ColorRamp node’s Factor input, then connect the Color output of the new node to the Roughness input of the BDSF node, as in the example image below.

Connected Roughness ColorRamp

Set the slider to the left to a light gray color and add one more color to the ramp and set it to white. If you drag the white almost all the way over towards the left, it will separate the roughness of the land from the oceans. You can mess with the ColorRamp to get the appearance you like.

Now we are going to add a layer of clouds to our texture using yet another Noise Texture node. Add one to your graph along with another ColorRamp node. Connect the Factor output of the Noise Texture to the Factor input of the new ColorRamp. We are also going to need a MixRGB node, so add one and connect the Color output of the ColorRamp to the Color 1 input of the MixRGB node. Lastly, we need to connect the Color output of our Terrain Color ramp node to the Color 2 input of the MixRGB node. I am going to set the blend mode to Mix so the two inputs are combined.

Procedural Cloud Layer

By default, the Noise Texture settings will not look like clouds right out of the box, so you will have to play with the settings a little bit to get the desired appearance. I’ve gone ahead and bumped up the Distortion slightly to about 0.6, increased the Scale value to 6.9, set the Roughness to 0.742, and the Detail value to 4.5, which I think gives a pretty nice swirly cloud look. Be sure to connect the Color output of the MixRGB node to both the Color input and the Emission input of your BDSF node to see the full brightness of our texture.

Blender: Camera Setup

Now that we have a nice detailed procedural planet texture, all that remains is preparing our scene so we can render the texture that is now applied to our sphere. The setup for this is particularly simple, so this section will not be too long. The very first thing we need to do is make sure that our Render Engine is set to Cycles, and not Eevee. To do this, click on the Render Properties tab and change the Render Engine drop down menu to Cycles, if it isn’t already.

Cycles Render Engine

I’ve also gone ahead and changed the size of my render to something smaller than the default, since I don’t currently need huge textures. For this tutorial, I’m just going to change my render size to something like 512×256, but you can use whichever size you want for your project. Remember to use a 2:1 size that is twice as wide as it is tall, since we want the final image to be rectangular.

Render Resolution Settings

Select the camera that is currently in the scene and choose the Object Properties tab to bring up the position and rotation settings for the camera. Change the X, Y, and Z position of the camera to 0 so that it will be right in the center of the sphere. For the Rotation settings, simply set the X rotation to 90, and the Y and Z rotation to 0. This will point the camera outwards towards the equator of the sphere/planet.

Camera Position Settings

By default, the camera in our scene will be set to Perspective. Click on the Object Data Properties tab (this looks like a Camera icon) to bring up the camera properties. Change the Type from Perspective to Panorama and change the Panorama Type to Equirectangular. You should immediately see the viewport change to reflect the new camera properties. If you haven’t clicked on the Camera View Toggle button in the Viewport yet, you won’t see any change (I’ve circled the Camera View Toggle button with red in the example image below.)

Panoramic Camera Settings

Now when you go to render your scene, by selecting Render -> Render Image at the top of the window, instead of rendering the sphere, we get a render of the texture as it has been mapped on the sphere. The final texture is correctly stretched at the poles, which will appear perfectly with no pinching when used to texture a 3D sphere. Since the texture itself is procedural, you can go back to any step in your material graph and change settings to affect the final texture. This allows you to make all kinds of variations with different sized land masses, color schemes, and cloud layers.

Final Equirectangular Texture

There are a whole lot more things you can do to alter the texture, such as adding additional noise layers to increase the waves in the ocean, adding more color ramps to add snow to the poles or deserts around the equator, and even features like glowing lava. Don’t be too scared to experiment with different mixing modes, or feeding the output of one noise texture into the input of another, to produce different types of features for your textures.

*This tutorial will be expanded over time with additional techniques.

The post Planet Textures: Procedural first appeared on Screaming Brain Studios - Free Game Assets.

Isometric Pathways

ScreamingBrain — Tue, 14 Mar 2023 07:44:53 +0000

Introduction

In this tutorial, we are going to take a look at some ways to create Isometric Pathways or Roads to use in your tile-sets. Like many of the Isometric Tutorials from Screaming Brain Studios, we will be using some techniques from previous tutorials (Such as the Isometric Textures Tutorial or the Isometric Cropping Tutorial) so you may wish to familiarize yourself with the topics covered in those tutorials.

Example Isometric Pathways

In the image above, you can see a few examples of Isometric Pathways that have been created with a simple Masking trick that can be used to produce rough dirt pathways, solid paved roads, or even winding rivers made using your existing isometric tiles.

Pathway Masks

Before we even get started, the first thing we need to do is decide on the overall appearance of the pathways we would like to make. For this section of the tutorial, I am going to start by creating a series of masks for a dirt pathway with rough edges. I’m going to work with a smaller tile size of 128×64 so the masks will be slightly easier to create, but you can use whichever size you wish.

Your mask should be a 1:1 size with the same height and width values, typically using the height value of your desired tile size. For example, if you wish to produce a tile that is 128×64, you need a mask that is 128×128, and for a tile size of 64×32, you would need a mask that is 64×64. Start by creating an empty canvas in GIMP that is 128×128 (Or whichever size you wish your tile to be) and fill it with solid black. Next, using the Airbrush Tool or any brush you like, start by creating some simple white pathways, such as lines or intersections.

Basic Pathway Masks

The only important rule to follow here is to try your best to keep everything lined up along the edges. These pathways are meant to interlock and line up with one another along the top, bottom, left, or right sides of the tiles, so it might take a little bit of experimenting to get right. Turning on the grid can help you keep things lined up neatly. The example image above contains a Straight Horizontal Path, Straight Vertical Path, T-Intersection, and a Cross Intersection. To save yourself time, you can create a single T-Intersection and simply rotate it around the center to create the four directional tiles you are going to need, such as in the example below.

Rotated T-Intersection (Right, Down, Left, Up)

The same rule applies for Corner tiles, where you can create one and simply rotate it around the center to create all four corners you will need. However, you can also break up the repetition by creating 4 unique Corner tiles by creating a single image that is twice the width and height of your desired tile size. For example, since we are working with a 128×128 image, we want the canvas to be 256×256 so we can fit all four corners in one image, like the example image below.

Four Corner Tiles

This way, you can produce all four corner tiles and ensure that they all line up with one another correctly before splitting the image into four individual masks. This can be done any number of ways, so we won’t go into detail here. Simply split your large 256×256 mask into four smaller 128×128 masks to get the four Corner tiles you will need.

Split Pathway Corner Masks

By now you should have all the masks necessary to create a full series of Pathway Tiles. There should be 4 Corner masks, 4 T-Intersection masks, 2 Straight masks, and 1 Cross Intersection mask, for a total of 11 masks. Feel free to experiment with different styles or pathway shapes, including variants like rougher edges, slight curves, or extra blobs to add variation to your tiles. You are not limited to 11 masks, depending on how many different variations you wish to create.

Pathway Mask Set

You could also make several different sets of masks to use for each style of pathway you would like, but for this tutorial, we will only be making this one set. In order to use any of these masks, we will have to do a bit of Isometric Conversion in the next step. While it is absolutely possible to use these masks with unconverted textures before converting the result into an isometric tile, I’m going to go ahead and cover how to use them with existing isometric tiles instead.

Alpha Masking

Now that we have a full series of Masks for our pathway tiles, we need to convert them into Isometric versions of themselves. Following the techniques outlined in the Isometric Textures Tutorial, we are going to use GIMP and G’MIC to apply a Cartesian Transform filter to each mask. Using the formulas for the Iso-Floor Left or Iso-Floor Right transform, depending on your needs, convert each of the Masks into Isometric textures. Then follow the steps in the Isometric Cropping Tutorial to crop your masks into appropriately sized Isometric Tiles, as shown in the example image below.

Converted Pathway Mask

Each mask needs to be converted in this manner before we can make use of them properly. Once you have converted all of your masks, open or load the tile you would like to turn into a pathway in GIMP. For this tutorial, I will be using a dirt tile from the Isometric Floor Pack. First, right click on the background layer, or whichever layer the Tile is on, and select Add Alpha Channel if there isn’t one already. This will make sure the background remains transparent. Next, right click on the same layer once again and select Add Layer Mask. A small dialog window will pop up, but you don’t have to change anything, so just press OK to confirm adding the Layer Mask.

Add Layer Mask

This will immediately cause the tile to vanish from view, which is what we want. Tab over to the first Pathway Mask, which in the case of this tutorial will be a Straight Vertical Pathway, and with the Selection Tool active, press Ctrl+A to select the entire canvas. Then press Ctrl+C to copy the mask to the clipboard. Next, go back to the isometric tile again and press Ctrl+V to paste the mask into the Layer Mask channel. You will now see that the tile reappears, though only showing through the white area of the pathway mask we just pasted.

Final Masked Pathway

With the pathway mask pasted into the Layer Mask channel of the isometric tile, the edges of the tile are blocked out, or masked, by the black color in the mask, while the pathway in white is left behind. Now right click on the Floating Selection/Pasted Layer and select Anchor Layer to confirm the creation of the Layer Mask. Finally, right click on the isometric tile layer (This should now be the only layer remaining in the project) and select Apply Layer Mask to merge all the channels and masks together. Simply repeat this process for each of the 11 masks to create a set of pathway tiles that can be overlaid on top of any other isometric tile.

Finished Isometric Pathway Tile-Set

You can either combine and merge the path overlays with your existing tiles to create terrain blends, or you can export just the pathways with transparent backgrounds so they can be used as overlays in Tiled Map Editor or the game engine of your choice. You can even apply the masks before converting the pathways into Isometric tiles, but there is no real advantage to this. Creating a series of masks up front can make the process much easier when you are creating large numbers of tiles or pathways and helps to keep everything consistent across your tile-sets.

As usual, you can snag a huge pack of premade Isometric Pathways in the free Isometric Pathways Pack from Screaming Brain Studios to save yourself some time! This tutorial should help you create additions or expansions to the existing tile-sets using your own artwork or textures.

The post Isometric Pathways first appeared on Screaming Brain Studios - Free Game Assets.

Planet Textures: Gaseous

ScreamingBrain — Thu, 11 Aug 2022 09:17:49 +0000

Introduction

This tutorial is part of a series about creating textures that can be used as surfaces for planets. They can be converted into 2D planets using this 2D Planet Sprites tutorial or used as materials for texturing 3D spheres. This tutorial shows how to create the planet surface textures, while the Planet Sprites tutorial demonstrates how to use these textures to make 2D planets.

Textures for Gas Giants, much like textures for Terrestrial or Rocky Planets, are composed of multiple blended layers of noise and filters. The main difference is that everything is predominantly horizontal. This comes down to the type of Noise used to create the appearance of banded gases swirling around the planet. The process itself may seem a bit simpler, since you don’t have to use as many brushes or do as much manual editing as you would for a terrestrial or rocky planet, but the techniques are very similar.

Example Gas Giant Texture

As usual, the techniques covered in this tutorial are possible using just about any image editing software, but the names or features may differ depending on which one you choose. For the sake of this tutorial, I will be using our favorite free software, GIMP for most of the example images unless otherwise specified.

Hand Painted Textures

The quick and dirty method for creating Gas Giant textures is to do it by hand. It even sounds more complicated than it actually is, and you’ll find it is incredibly simple once you’ve done it a few times!

To start with, create a blank image at whichever size you need for your planet surface. For this tutorial, I will be using a 512×512 canvas rather than a 2:1 texture. Begin by selecting colors and using the Brush tool to fill your canvas with a number of horizontal lines. It helps to cycle between lighter and darker colors to create the different colored bands of gas.

Lines Drawn with the Brush Tool

Once you are happy with your lines, we need to blur the image, so the lines don’t look so horrible. Select Filters -> Blur -> Gaussian Blur from the menu to bring up the settings for the Gaussian Blur filter. Drag the X and Y sliders toward the right until you are satisfied with the amount of blurring. I have gone ahead and used a value of about 16.

Blurred Lines

Now create a new layer above the first one. We are going to do pretty much the same thing here, only this time we will leave some empty spaces so that the bottom layer can still be seen in some places. It helps to use a brush with soft edges so the colors can blend easier, but you can use whichever brush you like.

Additional Layer of Lines

Once again, we need to apply a Gaussian Blur to this layer as well. Simply repeat the previous steps to blur the top layer of lines. The next step is a matter of preference or experimentation, as each Blend Mode offers different variations or appearances. Change the Blend Mode to something more interesting so the two layers blend together. For this tutorial, I have selected the Addition blend mode.

Addition Blend Mode

It doesn’t quite look like a gas giant yet, but that’s because there are no storms! All we have so far are wispy bands of colored gas, and that’s not very interesting. Select the Warp tool or press the W key on the keyboard to make the Warp tool active. Starting with the top layer, use the cursor to make small circular motions around the edges of the colored bands.

Swirled Storm Clouds

Continue doing this swirling warp motion with the bottom layer to create another layer of swirls beneath the upper atmosphere. I am going to stop here with these two layers for now, but feel free to continue adding more layers of color and warp swirls to add more detail to your texture. That is where these techniques shine the most, especially when working on planet terrain or even space backgrounds. The more layers of detail the better!

Now we cannot simply apply GIMP‘s standard Seamless filter to this texture, since we do not need the top and bottom edges of the texture to line up. We only need the left and right edges to tile with each other. From the menu at the top of the screen, select Layer -> Transform -> Offset to bring up the Offset options.

Shift by 1/2 Width

The texture needs to be offset by 1/2 its width, so click on the By Width/2 button. This will shift the entire texture over by 50% while simultaneously wrapping around from the other side of the image. Now it is very easy to see the clear seam running down the center of the texture.

Texture Offset by 50%

The easiest way to fix this seam is to use either the Clone Stamp tool or the Healing Brush. My personal preference is the Healing Brush, but feel free to use whichever you are more comfortable with to remove the seam. From here, you can offset the image back to its original position, or you can simply save and export your texture as it is with the fixed seam in the center.

Final Manually Painted Gas Giant

You can use any of the methods outlined in the 2D Planet Sprites tutorial to convert your planet texture into static 2D images or even rotating animated spheres using GIMP, or you can import your texture into any 3D software for mapping to spheres. The key to adding detail is to continuously add more layers to your image with different elements you can blend into the previous layers. Just try experimenting a bit!

Noise Based Textures

Another great way to make textures for Gas Giants is to utilize Noise generation, a feature that comes with most image editing software. While you could manually paint every planet texture you need following the first section of the tutorial, you can save a lot of time and even get better looking results by using the Noise filters that come with your image editing software. Many of the steps are quite similar to those outlined already, with a few small differences.

To start with, create a blank image at whichever size you need for your planet surface. For this tutorial, I will be using a 512×512 canvas rather than a 2:1 texture. Gas giants are made up of different colored bands of gases, so we want to use a Noise generator to help us create the light and dark areas of our texture. Click on Filter -> Render -> Noise -> Solid Noise to bring up the Solid Noise filter options. If you are using Photoshop, you will want to use Render -> Fibers for this step instead.

Solid Noise Filter Settings

Set the X slider to 0.10, the Y slider to 16.0, and the Detail slider to 15.0 to create a streaky, banded texture. You can experiment with the X and Y sliders to your liking. Be sure to select the Tileable option to not only ensure the texture is seamless along the edges, but also to add a little bit more waviness and variation to the banding. You can also change the Random Seed value or press the New Seed button to get a different variation of noise. Press OK to confirm the settings and you should have something that looks similar to the example image below.

Bands of Varying Brightness

The next step is not necessarily required, but it does help add another layer of detail to the texture. Create a new blank layer and repeat the process from above using the same settings to generate another Solid Noise, only this time select a different Random Seed value, so the bands are different for the new layer. Now in order for the top layer to have any effect on the bottom layer, we need to change the Blend Mode by using the drop-down menu above the layers. I am going to use Overlay for this tutorial, but feel free to select any blending mode that looks good to you.

Blended Layers of Solid Noise

Now that we have the basis for our gas clouds, right click on the top layer and select Merge Down to combine the two layers. Now we need to make them look a little bit more like storm clouds on a gas giant. Much like we did in the first section of the tutorial, we can use the Warp tool. Simply press the W key to activate the Warp tool. You can change the settings of the brush using the panel to the left of the canvas.

Warped Storm Clouds

Use circular or up and down motions to create swirls and waves throughout the image. You may have to go over it several times to make it look more and more like swirling storm clouds. Now we could stop here, but there is another useful Filter we can take advantage of to give the texture a little bit more waviness. Select Filter -> Distort -> Ripple to bring up the options window. This filter will create a wavy distortion across the entire image, but there are a few settings to tweak first.

Ripple Filter Settings

For the first pass, set the Amplitude slider to 2.0, the Period slider to 150, and change the Abyss Policy setting to Loop. The Abyss Policy setting determines how the filter deals with areas of the image that go beyond the canvas or reveal transparency below them. By changing it to Loop, it ensures the texture wraps around the top and bottom edges so there are no seams.

Rippled Storm Clouds

We can do this one more time using slightly different settings in order to apply another layer of ripples to the texture. This time, change the Amplitude slider to 1.0, the Period slider to 60, and the Phase Shift slider to 0.5 to introduce a layer of smaller ripples to the texture.

Smaller Ripples

Now you can go back through and add more swirls and warping if you prefer. In order to add some color to our clouds, we need to create another new layer. For this layer, we are going to use the Gradient tool to create a multicolor gradient. Click and hold the Paint Bucket tool to bring up a drop-down menu where you can select the Gradient tool.

Gradient Settings

Using the settings panel on the left of the canvas, make sure the gradient Shape is set to Linear and choose a gradient color palette from the list of options. I have selected the palette called Browns since it already resembles the color of a gas giant. Once you have made sure the settings are correct, click somewhere near the top of the canvas, and while holding Ctrl, drag the cursor down to the bottom of the canvas and press Enter to confirm the gradient. It should look something similar to the example image below.

Brown Striped Gradient

Once again, we won’t be able to see any changes until we select a different Blend Mode from the list of options. I’ve gone ahead and selected Addition for this tutorial, but feel free to try out the different blend modes to get different types of results. This is also a useful way to make different variations of gas clouds, as the different modes sometimes alter the colors of the image as well.

Gradient Layer set to Addition

Using lower Y values when generating your Solid Noise layers will result in there being less gas bands. You can also repeat the first several steps multiple times, including manually warping each individual layer with storm swirls, to create more complex looking storm bands. Right click on the Gradient layer and select Merge Down to merge the layers together. All there is left is to save and export your finished Gas Planet texture. Be sure to do this before doing any additional work on the texture, just in case!

Final 2D Planet

Try to combine techniques from both sections of the tutorial to produce even more detailed custom Gas Giant textures. You can also use any of the methods outlined in the 2D Planet Sprites tutorial to convert your planet texture into static 2D images or even rotating animated spheres using GIMP, or you can import your texture into any 3D software for mapping to spheres. Textures for Gas Giants should be fine as they are for texture work, but you might want to take a peek at this Spherical Textures tutorial if you plan on working with 3D spheres!

*This tutorial will be expanded over time!

The post Planet Textures: Gaseous first appeared on Screaming Brain Studios - Free Game Assets.

Spherical Textures

ScreamingBrain — Tue, 09 Aug 2022 16:55:00 +0000

Introduction

If you have ever tried to apply a square or rectangular texture to a 3D sphere, you may have discovered that the areas around the north and south poles get distorted and pinched. This happens due to the way the top row of pixels in the texture are essentially all compressed into one single point at the top of the sphere. The same happens to each row of pixels along the top and bottom edges of the texture the further they are from the equator, creating a distinct pinching effect the closer you get to the poles. Just try rolling a square piece of paper into a sphere and you will see exactly what might make this process a bit difficult.

Texture Pinched at the Poles

There are times where all you may want to do is apply a simple texture to a 3D sphere, for tasks such as rendering 2D planet sprites or even creating simple 3D spinning planet animations. You may not want to learn how to use shaders and nodes to create a procedural texture inside Blender, or you just might not need anything other than a simple image-based texture. In this tutorial, we will go over several ways to prepare textures (like planet surface textures) to be properly wrapped around 3D spheres.

Fixing the Seams

If you are using a seamless texture, you can skip right past this section of the tutorial. If you have made your texture using filters and manual editing, there is a possibility that the texture is not seamless. The very first thing you need to do is open your texture in the image editor of your choice. For this tutorial, as usual I will be using GIMP since it is FREE and anyone can grab a copy. I’m going to be using a 512×512 texture so I can fit examples within the width of this page, but feel free to use any size you need.

Unedited Square Texture

This texture does not have seamless edges, so if you were to use it to texture a sphere, there would be a very clear seam running down the center somewhere. A quick and easy way to fix this is to Offset the texture by 1/2 its width and doing a tiny bit of manual editing. Click on Layer -> Transform -> Offset to bring up the Offset options.

Shift by 1/2 Width

Press the By Width/2 button to offset the texture and press OK to confirm the offset. You should now be able to see the seam clearly down the center of the texture.

Texture Offset by 50%

To easily remedy this, you can use the Clone Stamp tool or the Healing tool to blend existing areas of the texture over the seam. My personal preference is usually the Healing tool, but you can use whichever tool you are most comfortable with. It may even be necessary to combine both tools to really clear up the seam.

Seam Cleaned with Healing Tool

Use the Offset layer transform once more using the By Width/2 button to return the texture to its original position. The top and bottom edges do not have to be seamless, since the two poles of a sphere will never actually touch each other. They will actually be warped in the next part of the tutorial regardless, so you don’t have to waste any time making the top and bottom edges seamless.

Fixing the Pinch

Even though the edges of our texture are seamless, if it were applied to a 3D sphere, you would still see the ugly unwanted pinching at the top where the edge of the texture is compressed. The texture becomes more distorted the closer it gets to the poles. There is a useful technique for getting rid of that ugly pinching effect that doesn’t involve too many steps. First, open two copies of the texture you are going to be editing. I’ll explain why later on in the tutorial, but you will want to have a copy of the original texture set to the side while you are editing the other. From the menu bar at the top, select Filters -> Distorts -> Polar Coordinates to bring up the filter options.

Polar Coordinates Options

Occasionally there is a 1-pixel gap that can be fixed by selecting the Map Backwards option. If you don’t see the gap in your texture, you can leave that option turned off. Make sure to select both the Map From Top and To Polar options so the image is converted into what looks like a sphere.

Warped Texture

Right away you can see the distinct pinch at the center of the image. Just like we did in the previous section of the tutorial, choose either the Clone Stamp tool or the Healing tool using a soft brush to hide the pinch with some matching colors from the other parts of the image. With a tiny bit of work, you should be able to eliminate the most distinct parts of the pinched area.

Fixed Pole Pinch

Now we need to undo the Polar Coordinate distortion from the first step and return our texture to its original shape. Click on Filters -> Distorts -> Polar Coordinates once again to bring up the filter options window. This time, make sure to deselect the To Polar option to reverse the polar distortion. If you had to use the Map Backwards option earlier, make sure it is selected once again so the texture returns to its original orientation.

Top of Texture Warped

The same thing has to be done to the bottom half of the texture, so click on Layer -> Transform -> Flip Vertically to flip the image over. Using the Polar Coordinates filter once again, select the To Polar option and press OK to confirm the filter settings. Use the tool of your choice to blend, blur, or bury the pinched area at the center of the image. Run the Polar Coordinates filter one more time with the To Polar option deselected to return the texture to its original square or rectangular shape. Finally, flip the image vertically one last time to return it to its original orientation.

Final Warped Texture

The texture should now have the proper distortions along the top and bottom edges to prevent the pinching effect when it is used on a 3D sphere. You may notice that the main area of the texture has gotten a little bit blurrier than it was originally, and this is due to the warping and unwarping process. This is where the copy of our original texture is going to come in handy!

Fixing the Blur

With the original texture active, select the entire image (Ctrl+A) and copy it to a new layer above the warped texture. Select the Eraser tool from the toolbar, making sure to select a brush with soft edges, and lower the Hardness slider so the edges will be softened when using the Eraser. What you want to do is slowly erase the top and bottom edges so that the warped texture below becomes visible.

Erasing the Top and Bottom Edges

You can experiment using larger or smaller brush sizes, or even changing the softness of the brush to get finer details should you prefer. Once you have finished erasing the edges, right click on the top layer and select Merge Down to combine it with the bottom layer.

Final Merged Texture

It is recommended that you save and export your texture before doing any additional work on it. If you are using GIMP, you can use the built in Map to Object filter to test the texture, or you can save and export it to use in the 3D program of your choice.

Polar Pinching Eliminated

The poles of the sphere should now both be nice and smooth! While this technique is not entirely perfect for incredibly detailed textures, this works quite well for simple texture jobs and smaller projects.

The post Spherical Textures first appeared on Screaming Brain Studios - Free Game Assets.

Convolution Filters

ScreamingBrain — Fri, 05 Aug 2022 08:24:41 +0000

Introduction

This tutorial is about a unique Filter that comes with most image editing programs such as GIMP or Photoshop, but most users don’t even know where to begin when it comes to using it! While not necessarily restricted to the old school realm, this filter is super easy to customize, and experimenting can produce all kinds of unexpected results. The filter we are going to look at in this tutorial is called the Convolution Matrix.

Convolution Matrix

The Convolution Matrix allows you to ‘create’ your own custom filters by entering values into a grid, or matrix. When using a Convolution Matrix filter, most image editing programs will present you with either a 3×3 or a 5×5 grid where you can enter various numerical values. Typically, by default the grid will be filled with zeroes, which will not affect the image in any way. Some programs offer additional options, like the ability to affect certain RGB channels in an image, or even applying the filter using different blending modes, but the overall output is relatively the same.

Convolution Matrix in GIMP

For the most part, the main difference may be some naming conventions. For example, the Bias value in the first example image has the same effect as the Offset value in the second image, despite having different names. This is a rather fun filter to experiment with, once you’ve gained an idea of what is actually happening when you apply it.

Convolution Matrix

To start using the Convolution Matrix filter in GIMP, select Filters -> Generic -> Convolution Matrix to bring up the filter options window. You should see a grid of numbers, a Divisor value, and an Offset value, followed by some options to select certain RGB channels. The way this Filter works is by looking at each individual pixel in a source image one by one, then applying a mathematical operation to produce a new brightness value for each pixel. The grid itself is usually referred to as the Kernel Matrix. It is here that you can enter certain number values which will have an effect on the image, and these number values are called the Kernel. Let’s begin by attempting to break down exactly what happens when you enter values into the grid.

Example from GIMP Help Page

You can think of your image as a series of pixels arranged in a grid of rows and columns. Looking at the example above, taken directly from the GIMP documentation, the grid on the left represents the Source Image, and each of the numbers is a pixel value in that image. The grid in the center represents the Kernel that will be applied to the image, while the grid on the right represents the final calculated pixel value that is returned and applied to the image. The pixel value from the source image (left) is multiplied by the value from the corresponding square in the Kernel (center) which gives a resulting brightness value (right) The result is then divided by the Divisor and totaled with the Offset value.

We will refer to the value in the red box above as the Evaluated Pixel, and the value from the center grid as the Kernel Value. The green box represents the area that will be affected by the Kernel, and calculations are performed starting from the top left, working over to the right before moving down to the next row of pixels, much like reading a book from line to line.

40 42 46
46 50 55
52 57 58

Source Image

0 1 0
0 0 0
0 0 0

Kernel

If we use the values from the example image above, the value of the Evaluated Pixel (50) in the source image is multiplied by the Kernel Value (0). Subsequently, each of the pixels surrounding the Evaluated Pixel will be multiplied by their corresponding Matrix Values in the Kernel. Wherever there is no value at all, or a value of 0, no operation will be performed at all, and a result of 0 will be returned for that square in the grid.

(400) (421) (460)
(460) (500) (550)
(520) (560) (58*0)

As the calculations are performed on the values surrounding the Evaluated Pixel using the example Kernel, every result will be 0 except for the upper middle box, where there is a 1. This will give us a value of 42 (42×1=42) in the top row.

0 42 0
0 0 0
0 0 0

These values are then totaled up, divided by the Divisor value, and then the Offset value is added to the result. If we add up all the values from the example above (0+42+0+0+0+0+0+0+0) the result is 42, which is then divided by the Divisor value of 1. As a final step, the Bias or Offset value is added to the result in order to calculate new brightness values. Presuming our Divisor was set to 1 and the Offset was set to 0, our final result should still be 42. This final result becomes the new pixel value for the Evaluated Pixel at the center of the grid.

0 0 0
0 42 0
0 0 0

In GIMP, if you have the Normalize option selected, the software will do some calculations and attempt to retain the original brightness of the image. Otherwise, you may need to change the Divisor or Offset values to prevent the image from becoming too light. By using this particular Kernel, the source image would be shifted downward by 1 pixel. It would be next to impossible to see the changes in a static example image, so I have prepared a GIF animation to show you what actually happens.

Shifting Down by 1 Pixel

Another small set of handy functions to take note of (if you are using GIMP) are the Flip Matrix and Rotate Matrix buttons. These will do exactly what they say and flip or rotate the positions of all the values you have currently entered into the grid. This makes it easier to test directional effects at different angles, such as gradients, embossing, or motion blurs.

3×3 Kernels

While the math going on behind the scenes may not be simple to explain, it is much more helpful to see examples of different Kernels and how they would affect your final image. We have already looked at a Kernel that can be used to shift an image down by one pixel, so let’s take a look at a list of examples and see what types of operations you can perform with the Convolution Matrix filter, starting with Kernels for a 3×3 matrix. Keep in mind most of these examples also use a Divisor of 1 and Normalize turned on unless otherwise specified, but feel free to change the Divisor or Offset values as well as turning the Normalize setting off to get different results.

Shift Up – Shifts the entire image upwards by one pixel; this is the opposite of the example given in the section above. Moving the 1 to any other position around the Central Value will shift the image in that direction.

0 0 0
0 0 0
0 1 0

Box Blur – Produces a standard blur effect, where each pixel is set to be equal to the average of the pixels surrounding it. If Normalize is turned off, set the Divisor value to 9 for this effect. This produces a uniform blur in all directions.

1 1 1
1 1 1
1 1 1

Smooth w/ Blur – A less pronounced blur effect, this can make an image appear smoother without removing too much detail.

0 1 0
1 4 1
0 1 0

Sharpen – Increases the detail in an image by using a higher value in the center with lower values around the outside. The -1 values can be shifted around the edge of the Kernel.

0 -1 0
-1 5 -1
0 -1 0

Sharpen (Heavy) – Increases the detail in an image by using a higher value in the center with lower values around the outside. This version produces more pronounced edges.

-1 -2 -1
-2 13 -2
-1 -2 -1

Focus – Similar to sharpen, enhances the detail in the image using lower values around the outside edge. The -1 values can be shifted around the edge of the Kernel.

-1 0 -1
0 7 0
-1 0 -1

Edge Detect – Used to extract the structure or discontinuities between the light and dark areas of an image. If you are using GIMP, be sure to turn off the Normalize option.

-1 -1 -1
-1 8 -1
-1 -1 -1

Edge Detect (Light) – Produces an out of focus image with exaggerated edges.

0 1 0
1 -3 1
0 1 0

Edge Detect (Sobel) – An alternate method of edge detection, as well as being applied in an upward direction. The Kernel values can be rotated to change the angle. If you are using GIMP, be sure to turn off the Normalize option.

-1 -2 -1
0 0 0
1 2 1

Edge Enhance – Similar to Edge Detect, but darkens the image and shows only the lighter edges. The direction of the enhance operation is determined by the position of the -1 value in the grid.

0 0 0
-1 1 0
0 0 0

Emboss – Produces a raised relief of the source image. The values in the Kernel can be rotated to change the angle of the emboss effect.

-2 -1 0
-1 1 1
0 1 2

Emboss (Light) – Produces a less intense relief effect. The values in the Kernel can be rotated to change the angle of the emboss effect.

1 0 0
0 1 0
0 0 -1

Emboss (Dark) – Produces a darker relief effect. The Divisor value has been set to 6 for this effect. The values in the Kernel can be rotated to change the angle of the emboss effect.

3 2 0
2 1 -1
0 -1 -2

Bump Mask – Useful for producing bump masks for texture work. Set the Offset value to 1 and the Divisor to 0.5 for this effect. This can also be desaturated and converted into a black and white mask.

1 0 0
0 0 0
0 0 -1

Negative – Inverts the color in the image completely, producing a negative version of the image.

0 0 0
0 -1 0
0 0 0

There are lots of different techniques and filter types to be discovered simply by experimenting, and it is probably easier to experiment with the 3×3 Kernel grid to start with. Continue reading to learn about using more complex 5×5 Kernels!

5×5 Kernels

In most cases, you can simply use 3×3 Kernels to perform many basic filter operations and image adjustments, but sometimes you may wish to perform more complex operations. By enlarging the Kernel Matrix, operations can be applied to a wider range of pixels in the image allowing for some more complex effects. This is where the 5×5 Kernels come into play! Keep in mind, not every tool with a Convolution Matrix filter has a 5×5 grid, but all the tools mentioned in this tutorial is perfectly capable of using 5×5 Kernels.

Gradient Emboss – Shifts the colors of the image using a gradient value range, giving a colorful embossed effect. The gradient direction runs from the negative values to the positive values in the grid, and rotating the values in the grid will rotate the direction of the gradient.

-2 -2 -2 -2 -2
-1 -1 -1 -1 -1
0 0 0 0 0
1 1 1 1 1
2 2 2 2 2

Sharpen – Increases the detail and enhances the edges in an image.

-2 0 0 0 -2
0 -1 0 -1 0
0 0 13 0 0
0 -1 0 -1 0
-2 0 0 0 -2

Radial Blur – Blurs the image in both the horizontal and vertical directions producing a movement effect. This blurs the image in an outward diagonal direction.

9 0 3 0 9
0 0 0 0 0
3 0 1 0 3
0 0 0 0 0
9 0 3 0 9

Motion Blur – Blurs the image in the direction specified by the position of the values in the grid. Rotate the position of the values to change the angle of the blur.

3 0 0 0 0
0 2 0 0 0
0 0 1 0 0
0 0 0 2 0
0 0 0 0 3

Emboss – Embosses the image in the direction of the negative values to positive values in the kernel. Rotate the position of the values to change the angle of the emboss.

-2 -2 -1 0 0
-2 0 1 2 2
-1 1 2 2 2
0 2 2 2 2
0 2 2 2 2

Hopefully this helps you get started with your experiments using Convolution Matrix Filters, even if you only use this as a page to reference different Kernels for your own image editing. While many of these techniques can be found as existing filters in GIMP or Photoshop, the Convolution Matrix Filter allows you to experiment far more, and there are certain things (particular types of embossing, for example) that you cannot do with standard filters. Sometimes the results can have a bit of a grainy appearance, which tends to look great for old school graphics. There are also several Emboss filter types that are incredibly useful for making textures for 3D objects.

*This Tutorial will be expanded over time!

The post Convolution Filters first appeared on Screaming Brain Studios - Free Game Assets.

Space Backgrounds

ScreamingBrain — Wed, 03 Aug 2022 07:53:35 +0000

Introduction

Have you ever wanted to make your own Space Game but didn’t know where to begin when it came to making space graphics? In this tutorial, we will go over several techniques for making beautiful space backgrounds with stellar objects like stars, nebulae or gas clouds using nothing but free software. Many of the techniques and concepts covered in this tutorial can be done with most image editing software, but for the sake of this tutorial, we will be going over several techniques using our absolute favorite free image editor, GIMP.

Starfields

It only makes sense that we begin with the most basic of all backgrounds in an outer space environment: The Starfield. All you need to begin prototyping your first space game might be nothing more than a plain, black void filled with tiny stars. This is easy to describe, but here is an example just in case:

Example Starfield

You could absolutely make something like this by hand if you preferred, placing each white star one by one using the pencil tool. Or you can create countless variations in mere seconds by following this simple technique! The very first thing to do is create a blank image in GIMP and fill it with Black (Or set the background color to Black before creating a new image.) For the sake of this tutorial, I am going to use a 512×512 canvas.

Empty Black Canvas

There is a built in Filter we can take advantage of called CIE Ich Noise which will generate a grainy mess that looks like TV static. In the menu bar at the top, click on Filters -> Noise -> CIE Ich Noise to bring up the CIE Ich Noise window. We need to bring the Lightness slider all the way to the right (or a value of 100) while bringing the remaining sliders all the way to the left (or a value of 0) so the settings match the example image below.

CIE Ich Noise Settings

This is also where you can change the variation of the placement of your stars, by changing the Random Seed value or pressing the New Seed button. As of right now, the image doesn’t quite look much like a starfield at all. Press OK to confirm the noise filter and you should end up with something that looks similar to the next example image.

Generated Noise

The final step is to adjust the brightness levels of the image to remove most of the lighter areas, leaving just a few points scattered around the image. Go to the menu bar at the top and select Colors -> Levels to bring up the Adjust Color Levels dialog box. All we really need to do here is drag the Black triangle from the left all the way over to the right. This is where you may need to experiment a little, or enter different values, in order to get the correct number of stars you wish to show in your image.

Black Set to 250

For this example, I’ve decided on a value of 250. You can use different values to make more or less stars appear in the final image, so feel free to try slightly different values here. Once you have decided your starfield looks okay, press OK to confirm your adjustments. The resulting image should now resemble the original example image from the beginning of this tutorial, or the one below:

Final Starfield Image

If you bring the black slider closer to the right, it will result in less stars being visible in the image. This can be useful for creating multiple layers of sparse stars that you can overlay and move (parallax) at different speeds to simulate depth.

Sparse Stars

Now you can save and export your starfield, or you can create as many variations as you wish by changing the Seed value when you first run the CIE Ich Noise filter. Another thing you can do is duplicate your stars and apply a Blur filter to make them look a little bit more realistic. First, right click on the current layer and select Duplicate Layer to create a copy of our starfield. Now select Filters -> Blur -> Gaussian Blur to bring up the Gaussian Blur options window. Feel free to mess around with the scale settings to your liking and press OK when you are finished.

Blurry Star Layer

All there is to do now is change the Layer Blend Mode to something more useful, like Addition. You can try other blend modes if you like or even try mixing different layers of blurry and non-blurry stars to give some stars the appearance of standing out while leaving others untouched.

Final Starfield with Blurred Stars

I’d like to show off one more GIMP filter that can be useful for starfields, and that is the Sparkle filter. This adds almost a diffusion effect to certain parts of the image that can simulate brighter stars. Click on Filter -> Light and Shadow -> Sparkle to bring up the Sparkle options window. Choose a very low threshold value like 0.001-0.003 to keep the number of sparkling stars to a minimum. Press OK to confirm your changes.

Final Starfield with Sparkling Stars

You might get tired of me repeating this, but do not be afraid to experiment! Try using the selection tool to isolate certain areas of your starfield and applying filters to certain stars. Even something as simple as changing the order of your layers or their blend modes can provide variations that you can use to produce many starfields in a short amount of time.

Nebulae

Sometimes stars just aren’t enough to convey the feeling of being lost in space. You might also want to distinguish different levels or areas of your game using distinct features, like stellar nebulae or gas clouds. There are actually a lot of different ways to make nebulae and gas clouds built right into GIMP that can save you a lot of time. The example image below shows a composite using the stars from the first section of the tutorial combined with the nebula we will make in this section.

Example Nebula

Nebulae and Gas Clouds can be made using a number of different Noise Generators or Noise Filters to create the illusion of clouds or gas. You should absolutely experiment with different combinations of Noise, Scale, Seed Values, or even Layer Blending Modes to get different results for your own Nebulae. As we did in the first section of the tutorial, create a blank image with a black background. For the sake of this tutorial, I will stick with 512×512 for the image size.

In the Filter menu, there are several different Noise types to choose from when making your Nebulae. To start with, we will be using the more familiar filter called Difference Clouds for our first layer. Select Filters -> Render -> Noise -> Difference Clouds to generate the bottom layer of the nebula.

Difference Clouds

You can also use any of the other Noise Filters if you prefer. Difference Clouds always generate the same pattern, while some of the other filters allow you to change the Seed value or tweak various settings such as scale or position, which may be more desirable depending on your needs. It may also be helpful to rename the Layers in your image to keep track of things.

Next, create a new layer above the Difference Clouds and fill it with black. For this layer, we are going to use a different Noise Filter to add a little more detail to our nebula. Select Filter -> Render -> Noise -> Solid Noise to bring up the Solid Noise options. Set both the X and Y Scale sliders to 1 and the detail slider to 15. It is here you can also change the Seed Value or press the New Seed button to get a completely different variation of noise. I have also gone ahead and made sure to select the Turbulent option. This adds another layer of noise iterations and provides more detail to the nebula.

Solid Noise Filter Settings

Once you have found a Seed you like, press OK to confirm the settings and you should see your new Solid Noise layer. In order for this new layer to have any effect on the image, we need to change the Layer Blend Mode to something other than Normal. I have chosen Grain Merge, as this is one of my personal favorite blending modes, but you are free to choose whichever mode you think looks best.

Blended Noise Layers

What this will do is obscure, or Mask, certain parts of the bottom layer using the values of the top layer. Currently, this still looks like a bit of a blobby unusable mess, but we haven’t begun to add any color to our nebula yet.

The quick and dirty method is to simply add a Color Overlay layer on top of the image. To do this, create yet another new layer and give it a name if you wish. Now all there is to do is select a color for the nebula and use the Fill Tool to fill in the entire layer with a single solid color.

Solid Color Layer

Once again, this layer will have no effect on the overall image until we change the Layer Blend Mode to something other than Normal. In this case, we simply want to apply the color of this layer to the rest of our image, so change the blend mode to Overlay. This should look something like the image below.

Nebula with Color Overlay

The next step is not required and can actually be interchangeable with the previous step if you prefer. You can also experiment with different types of gradients or blend modes for different results. Create yet another new layer and leave it blank for now. If you click and hold on the Paint Bucket tool, a drop-down menu will pop up allowing you to switch to the Gradient Tool instead. On the left side of the screen, you can select a palette for your gradient as well as change the shape. I’ve selected Radial for the shape and Deep Sea as the color palette.

Radial Deep Sea Gradient

With the Gradient Tool selected and your settings chosen, click somewhere in the center of the image and drag outwards to create a radial gradient. As with the previous steps, you will not see any changes until the Layer Blend Mode has been changed to something other than Normal. For this tutorial, I went ahead and chose Soft Light as the blending mode for the Gradient Layer.

Nebula Blended with Radial Gradient

At this point, you may wish to keep your Starfields separate from your Nebulae if your project requires it. Often it is desirable to allow for the different background layers to scroll at different speeds, which produces the illusion of depth in Space Shooters or Side Scrolling games.

If you would prefer to merge the starfield with your nebula into one single image, it is incredibly easy to do so. First, go back to the starfield we created in the first section of the tutorial and Copy/Paste it into a new layer above the Nebula (Or import a starfield you have already saved and exported as a new layer.) All you need to do is change the Layer Blending Mode to something that pleases your eyes. For the sake of this tutorial, I have selected Addition for the blend mode.

Stars with Addition Blend Mode

You can try different blend modes for different effects. It is even possible to continue this process of adding layers of stars and noise clouds to produce even more complex colorations and variations, so don’t hold back from experimenting!

Seamless Backgrounds

In order for your space backgrounds to work correctly as backgrounds in your game projects, you need them to be Seamless. This means that you can duplicate, or tile, the image along all four edges and have no visible seams between them. Thankfully, GIMP also has a built-in feature that makes this an incredibly simple task.

Example Nebula

Let’s take the example nebula from the previous section of the Tutorial and open it in GIMP. If you were to place copies of this background side by side, you can see sharp edges between each copy, as shown in the image below.

Image with Seams

In order to avoid this, we need to apply another filter to our image in order to create a seamless tiling version. Click on Filters -> Map -> Tile Seamless to bring up the options window. Simply press OK to confirm. This filter duplicates sections of the image and copies them to the four corners, along with some blending effects, in order to create a Seamless version of the image.

Seamless Background

The main downside to this method is sometimes you lose a bit of color or brightness in certain areas of the image, depending on where they were in the original. You can experiment with the different blend modes in the Tile Seamless filter options, but this can also cause issues with the edges not actually remaining seamless. If you were to tile or duplicate this background and place copies next to itself, the edges are now seamless and the transition is no longer apparent.

Tiling the Image

Once you are happy with your results, simply save and export your new Seamless Space Background, or combine it with more layers to give it even more detail.

Final Seamless Background

Just like we did in the very first section of this tutorial while making starfields, it is absolutely possible to adjust the color values in the final image to bring some of the brightness back to the nebula. At the top of the screen, click on Colors -> Levels to bring up the Adjust Color Levels options window. Drag the white triangle slider over towards the left side of the screen to bring up the lighter values in the image. I went with a value of 136, but you can choose whichever you prefer.

Adjusted Nebula Color Levels

Press OK to confirm your color adjustments. The resulting nebula should have at least some of its original brightness restored and a bit more color. You can also do this step before adding your star layers, or you can simply apply the adjustments to your final image as a whole.

Nebula with Adjusted Color Levels

All that is left now is to save and export your image. These very simple methods can save you a ton of time when prototyping, especially for simple projects where you just need some basic assets to work with.

Final Exported Background

Try combining the methods outlined in this tutorial in different ways, like changing the order of your layers, or experimenting with different blend modes. Sometimes, you will surprise yourself with results you didn’t even consider beforehand, just through experimenting.

Don’t forget, you can already grab a ton of FREE backgrounds rendered at multiple sizes in the Seamless Space Backgrounds Pack from Screaming Brain Studios to save yourself some time!

*This article will be expanded over time!

The post Space Backgrounds first appeared on Screaming Brain Studios - Free Game Assets.

Texture Design Components

ScreamingBrain — Fri, 18 Mar 2022 04:27:57 +0000

Introduction

In part one of the Texture Design series, we looked at a number of different types of tools and methods by which textures can be created. In this second part of the Texture Design series, I thought it would be helpful to cover the various types of components used by texture authoring software to create procedural textures, as well as demonstrate a number of ways these components are used.

A lot of the same principles and techniques tend to work in regular photo editing software like GIMP, though the functions are applied through using filters and layer blending. The process is still similar enough to produce reasonable results, if you do not want to use a texture authoring tool like Material Maker or TextureLab. Just keep in mind that most modern development pipelines do not tend to use photo editing software for this type of work, so depending on your needs, it may be advantageous learning to work with texture authoring software.

This Texture Design series is intended to be a type of reference material while working on your own textures, and not necessarily a how-to or step-by-step instructional guide for any particular tool. Also keep in mind that I am by no means a professional texture artist, I merely wish to share the things I have learned while designing various textures for Screaming Brain Studios. There may be some details or terminology that I get wrong from time to time, but I will always update these tutorials to correct any errors.

A quick clarification of terminology is needed here: When I use the term Texture, I am referring to the final completed render at the end of the render pipeline, such as a red brick wall. Any time I use the term Material, I am referring to a component of the texture itself, such as the clay that makes up the bricks or the mortar in between them.

Generators

Generators are one of the building blocks that are used to create procedural textures. Each texture authoring tool has its own unique set of Generators, though many of the tools share similar features or generator types. A Generator is a type of component that is capable of outputting a specific mathematical function, and often include things like solid shapes, noise, bricks, tiles, gradients, solid colors, or complex patterns. Some Generators can even function in such specific ways that they are capable of outputting organic patterns, such as wood or fibers. The resulting output of Generators is a base component referred to as a texture primitive. The very first component in every procedural texture is most likely a type of Generator, and every procedural texture begins with one of these texture primitives.

Cells / Bricks / Gradient / Weave / Wood

Unfortunately, Generators are rather specific to texture authoring software, such as TextureLab or Material Maker, and you will not actually find this type of feature in image editing software like GIMP. This is not to say that you can’t use GIMP to create textures, as there are a few ways to create texture primitives using filters or plugins. In other cases, you simply have to find an alternative method to produce certain components and then import them into GIMP to make use of them. There are several Screaming Brain Studios asset packs specifically designed for this type of use, including the Gradient Texture Pack, Noise Texture Pack, and the Abstract Noise Pack. Each of these packs contains the resulting renders of various Generators from different texture authoring tools.

Each available Generator also has a number of parameters and settings that can be tweaked by the user to change different aspects of the output, allowing for an incredibly wide variety of designs and styles. For example, each of the texture maps below was produced using the same Brick Generator as the example bricks from above.

Variations of the Same Brick Generator

In many cases, it is also possible to set properties like opacity, blending modes, or even the ability to apply additional effects such as colors or smoothing to the Generator result, depending on the software you are using.

I mentioned in Part 1 of the Texture Design series that the very base component of most textures is often a Solid Color, Noise, or a Gradient. These are each produced by a specific type of Generator, and each has a number of different uses, depending on what you are attempting to do. For example, you may use one Generator to produce the outline of some bricks, a second Generator to produce a gray and brown rocky material using some Perlin Noise, and a third Generator to create a black and white grainy heightmap to apply some grit to the texture.

Most texture authoring software also has a Generator or node for the importing of photographs or existing images, allowing the image to be manipulated or transformed, as well as combined with other components to produce an entirely new texture. Some software even has the ability to perform various Texture Synthesis methods, so imported images can be re-scaled or sampled to make new textures. Sometimes it is even desirable to utilize parts of a photograph or existing texture as a material in your pipeline. This can not only save time, but it is useful when you have several existing materials you wish to use across multiple texture designs.

Gradients

You probably already know what a Gradient is, if you have ever done any type of graphic work at all. For anyone that is uncertain, a Gradient or Color Gradient is a range of colors (black to white, blue to green, red to orange to yellow to red, etc.) with a gradual blend from one to another. It is even possible for Gradients to consist of sharp color changes instead of smooth blends, depending on the software you are working with, and in most cases, you can control the angle or shape of the gradient as well. They can be single color, bicolored, or even multicolored depending on your requirements. Just about every graphic editing software today tends to have some sort of Gradient tool available, making them incredibly easy to create.

Angled / Circular / Lines / Sine / Vertical

As you can see in the example image above, each Gradient has a different shape, and not every possible shape is shown here. There are many different shapes including Square, Saddle, Pyramid, or even Spiral gradients. It is also possible to produce custom gradients by combining different components, or through the application of various filters and mixing them with noise functions. The most common shapes of gradient found in most graphic software are Linear, Radial, or Conical.

Linear / Radial / Conical

Gradients are a type of component that can be used for a variety of different purposes, including applying color to the texture as color palettes, to perform shading and blending effects, or even as heightmaps. It is also possible for Noise to be used to do similar things, like shading, blending, or as heightmaps, but Gradients tend to be combined with different Noise functions to produce specific color or blending effects. You can combine these with different types of Mixing to produce color blends or even produce surface displacement and warping.

For anyone using GIMP, you can easily create all kinds of different Gradients using the Gradient Tool. This can be found if you click and hold on the Bucket Fill tool, then subsequently selecting the Gradient Tool.

Gradient Tool in GIMP

Activating the Gradient Tool will bring up the Tool Options panel on the left where you can change settings including the blend mode, color palette, or the gradient shape. This is also where you can set up custom color palettes for your gradient to utilize. You can then select multiple endpoints on the canvas to adjust the gradient, or you can enter the positions manually using the Start Endpoint and End Endpoint dialog windows.

Square Gradient Made in GIMP

The process for making Gradients is essentially the same in just about any image editing software you could find today, though texture authoring software often has more customization options or built-in features to affect the final output of the gradient generator.

One incredibly useful function of Gradients is to blend materials together, by using the Gradient as a Mask. We will talk more about Masks later on in the tutorial. Some tools allow you to control specific ranges of texture blending, based on the light and dark values in the Gradient, while working with image editing software like GIMP utilizes layer blending to pull off the same techniques.

Base Materials Blended with Gradients

In the above example, you can see a few simple variations of texture blending using a Gradient as the blending mask. With properly designed Gradients and terrain materials such as dirt or grass, you can create terrain blends for things like pathways, roads, and even tile-sets or autotiles for game engines that have believable transitions between the materials.

Noise

When we talk about Noise in the realm of images and computer graphics, we are sometimes referring to the light and dark values of an image that appear to give graininess or speckling. Though when we are talking about Noise in a texture design context, we are typically talking about Noise Functions, which can include a variety of different types, such as Gradient Noise, Value Noise, and any number of sub-types such as Perlin, Voronoi, or Simplex noise.

Perlin / Blobs / Water / Veins / Voronoi

Noise is a type of component or texture primitive that is used to produce all kinds of different material patterns, such as rocky surfaces, rippling water, cracked paint, fluffy clouds, or even heightmaps for displacing the texture in numerous ways. It is through the creative combination of Noise, Gradients, Filters, and Blend Modes that countless materials can be produced. Texture authoring software often allows you to select a gradient or color palette to use when generating Noise or allows you to combine colors and gradients with the Noise through the use of a blending or mixing node. This is also sometimes referred to as colorizing.

Perlin / Blobs / Water / Veins / Voronoi

In the example image above, you can see the same styles of Noise as the previous example image, only with various Gradients applied to colorize the Noise. Already, this gives you a bit of an idea how simply combining Noise and colored Gradients can begin to produce more intricate patterns or materials. Each type of Noise is suited to different types of uses and selecting the right kind for the job can take some practice or trial and error.

Perlin – Resembling clouds, Perlin Noise is useful for all kinds of natural patterns like marble, stone, terrain, water, or stucco.
Perlin Noise / Clouds, Terrain, Marble
Voronoi – Resembling cells, Voronoi Noise has a structured appearance useful for things like ice, crystals, stained glass, cracked surfaces, or rock formations.
Voronoi Noise / Shaded Stone, Beveled Stones, Ice Crystals
Gabor – Resembling worms or streaks, Gabor Noise has a rippling or striped appearance useful for liquids, fabrics, or natural features like sand.
Gabor Noise / Water, Sand, Liquid
Turbulence – Resembling smoke, Turbulent Noise tends to work great when making fabrics, fluids, or metals.
Turbulent Noise / Fabric, Molten Rock, Shiny Metal
Worley – Resembling spheres or cells, Worley Noise has many configurations that are useful for natural features like stones, lava, water caustics, and even animal skin.
Worley Noise / Agate, Magma, Flagstones

These are just a few different types of Noise and different ways they can be used to produce a wide variety of materials with characteristics. Perlin Noise is one of the most frequently used types of noise functions, and it can be used to produce everything from simple materials to complex terrain mapping. Worley Noise is a little bit different and has a cellular structure, which can be used to produce everything from water caustics to animal scales. Some of these Noise types are actually sub-categories of another Noise function. Voronoi Noise for example, is a type of Worley Noise. This is also referred to as Cellular Noise, due to the way it has the appearance of ‘cells’ or blobs.

Keep in mind, you won’t always have access to every type of Noise in every tool, and each tool may have their own sub-categories or specific names for the different types of Generators. It is always possible to generate a specific type of Noise with one tool and import it into another.

Masks

Another important component in creating textures is the Mask. Since we discussed Gradients and Noise in the previous sections, we can jump right in and quickly explain a key point. While Masks can actually be composed of either Gradients or Noise, or combinations of both, their function is rather different. Anyone who has already worked with tools like GIMP or Photoshop may already have an idea what Masks are, but for anyone who is unfamiliar, a Mask is normally used to block out, or ‘mask’, certain areas of the texture when applying another function or operation to the texture.

Various Types of Masks

These are by no means the only ‘types’ of Masks. In fact, most of the time you will be creating masks out of the same materials you are working on. Almost anything could actually act as a Mask, depending on what it is you are attempting to do, but it is common to work with either grayscale or black and white Masks. The texture blending example in the section on Gradients is an example of a gradient being used as a Mask to tell the software how much of each base material to render, depending on where the light and dark values are in the Gradient. If we were to use the checkered Mask from the example above, the resulting texture blend would look like this instead:

Base Materials Combined with Checkered Mask

So far, we have only looked at the way Masks can be used to blend materials together. Another way Masks are used is to block out areas of a material so when a function or filter is applied, only the uncovered areas are affected. Any area containing a white pixel will be at full opacity, any area containing a black pixel will be fully transparent, and values between white and black will be semi-transparent. This is useful for adding things to a material like wear-and-tear or erosion, isolated color adjustments, complex shadows, or lighting effects. This is also commonly referred to as an Opacity Mask.

Mask / Masked Color Change, Masked Blur, Masked Emboss, Masked Shader

In the example image above, you can see several different ways to use a Mask to add different types of effects to a material. The areas of the Mask that contain white, or lighter values, get affected by changes, whereas the areas that contain black, or darker values, are blocked out and left unaffected. If you invert the colors of the Mask, you can affect the parts of the material that were previously unaffected. Often you will use multiple masks to create your final texture, especially if you are designing something more complex like a cottage wall with wooden beams or window frame with shutters.

Mixing

Another important part of the texture design process is Mixing. Also sometimes referred to as Blending, this is when two or more texture components are combined together to form a composite, either by combining color values or applying some type of distortion or displacement. This could be something as simple as combining a colored Gradient with some Perlin Noise so that the resulting output resembles a blue sky with white clouds, or as complex as combining a heightmap with a steel material to produce the appearance of raised panels. It is also very common to use Masks in conjunction with Mixing to maintain control over which parts of a material are affected by any mixing operations.

Various Noise Masks Used for Displacement

One method applied by some texture authoring software involves mixing a Mask with a source material to produce a warp or displacement effect. In the example image above, you can see a number of different types of masks being used as Opacity Masks and/or as displacement maps to alter the way the material is displayed. Different texture authoring software will have access to different types of Filters or nodes for warping, displacement, and other useful effects, making this process easier than if you were doing it with regular image editing software like GIMP.

Most texture authoring tools as well as image editing software also have ways to mix materials together using a number of different color blending algorithms. The way image editors such as GIMP do this is by using layers and Blend Modes, which you can change using the drop-down menu whenever you have a layer selected. Each tool has its own specific mixing or blend modes available, but some of the most common mixing algorithms found in just about any available tools are Add, Subtract, Multiply, Divide, Difference, Burn, Dodge, Lighten, Darken, or Screen.

Add – Takes the input material or layer color values and adds them together, resulting in a brightening effect. This can be used for light or glowing effects.
Add/Additive Blend Mode
Subtract – Takes the input material or layer values and subtracts them from the base color values, resulting in a darkening effect. This can result in pure black depending on the colors in the mixed materials.
Subtract/Subtractive Blend Mode
Multiply – Takes the input material or layer color values and multiplies them, resulting in a darkening effect. This can be great for producing shadows or darkening certain areas of a texture.
Multiply/Multiplicative Blend Mode
Divide – Takes the input material or layer colors and divides the background colors by the foreground colors. This is essentially the opposite of Subtract.
Divide Blend Mode
Difference – Takes the input material or layer color values and subtracts them from the base color values before recombining them with the base color values again. Useful for creating strange color blends or inversions.
Difference Blend Mode
Burn – Takes the input material or layer color values and raises the contrast of the base colors, resulting in an overexposure effect. This can be used to create a washed-out effect.
Burn Blend Mode
Dodge – Takes the input material or layer color values and reduces the contrast of the base colors, resulting in a brightening effect. Useful for applying saturation to the mid tones.
Dodge Blend Mode
Lighten – Takes the input material or layer color values and compares them to the base colors and keeps the lighter of the two.
Lighten Blend Mode
Darken – Takes the input material or layer color values and compares them to the base colors and keeps the darker of the two.
Darken Blend Mode
Screen – Takes the input material or layer color values and multiplies them with the inverted values of the base colors before inverting them again. This is essentially the opposite of the Multiply blend mode.
Screen Blend Mode

There are a number of other types of blend or mixing modes, but these are generally the ones you will find in most tools. These different blend modes allow you to combine texture primitives and materials into more complex designs. For instance, you can use the Multiply blend mode to combine a material with a bump or heightmap to produce a simple shadow effect. Often this blend mode is used for restoring contrast and detail in photo retouching.

*This tutorial will be expanded over time! Part 3 Coming Soon!

Base Materials

A process that I follow is to first create a number of base materials, working my way up to more detailed and intricate materials. These base materials are plain, mostly featureless component materials that make up my final texture. I gave an example of this in Part 1 of the Texture Design series where a brick texture was composed by using two base materials and a mixing mask. The example image below shows a number of different base materials created using various processes and using different types of Noise, Gradients, or Masks to achieve different types of surfaces.

Example Base Materials

When working on a new texture, I find that it helps to look up a number of existing images or photographs online to use as a frame of reference. With a reference image, you can try to break your texture down to its component parts. I’ll use the brick wall texture as an example again here. Looking at an existing photograph of a brick wall, we can first begin to divide it into base materials by examining the color differences and different substances that exist in the real-world image.

The most apparent substances here are the reddish clay making up the bricks and the white gritty mortar holding them together. The very first thing I want to do is create some texture primitives and work my way up to having a base material for the red clay and a base material for the gritty white mortar.

The post Texture Design Components first appeared on Screaming Brain Studios - Free Game Assets.

Screaming Brain Studios – Free Game Assets

Textures with GIMP

Contents

Introduction

Texture Tutorial: Brushed Metal

Texture Tutorial: Wood

Texture Tutorial: Rough Stone

Texture Tutorial: Stone Tiles

Texture Tutorial: Lava Rocks

G’MIC: Cartesian Transform

Contents

Introduction

Variables and Constants

a = 1+1; x+a

Perspective Transforms

Distortions and Warps

Planet Textures: Fault Formation

Contents

Introduction

TfP: The Interface

TfP: Rocky Planets

TfP: Gas Giants

TfP: Custom Colorizers

TfP: Custom Tools

TfP: Custom Clouds

Planet Textures: Procedural

Contents

Introduction

Blender: Preparing the Scene

Blender: Procedural Terrain

Blender: Bumps and Clouds

Blender: Camera Setup

Isometric Pathways

Contents

Introduction

Pathway Masks

Alpha Masking

Planet Textures: Gaseous

Contents

Introduction

Hand Painted Textures

Noise Based Textures

Spherical Textures

Contents

Introduction

Fixing the Seams

Fixing the Pinch

Fixing the Blur

Convolution Filters

Contents

Introduction

Convolution Matrix

40 42 4646 50 5552 57 58

0 1 00 0 00 0 0

(40*0) (42*1) (46*0)(46*0) (50*0) (55*0)(52*0) (56*0) (58*0)

0 42 00 0 00 0 0

0 0 00 42 00 0 0

3×3 Kernels

0 0 00 0 00 1 0

1 1 11 1 11 1 1

0 1 01 4 10 1 0

0 -1 0-1 5 -10 -1 0

-1 -2 -1-2 13 -2-1 -2 -1

-1 0 -10 7 0-1 0 -1

-1 -1 -1-1 8 -1-1 -1 -1

0 1 01 -3 10 1 0

-1 -2 -1 0 0 01 2 1

0 0 0-1 1 0 0 0 0

-2 -1 0-1 1 1 0 1 2

1 0 00 1 0 0 0 -1

3 2 02 1 -1 0 -1 -2

1 0 0 0 0 00 0 -1

0 0 0 0 -1 00 0 0

5×5 Kernels

-2 -2 -2 -2 -2-1 -1 -1 -1 -10 0 0 0 01 1 1 1 12 2 2 2 2

-2 0 0 0 -20 -1 0 -1 00 0 13 0 00 -1 0 -1 0-2 0 0 0 -2

9 0 3 0 90 0 0 0 03 0 1 0 30 0 0 0 09 0 3 0 9

3 0 0 0 00 2 0 0 00 0 1 0 00 0 0 2 00 0 0 0 3

-2 -2 -1 0 0-2 0 1 2 2-1 1 2 2 20 2 2 2 20 2 2 2 2

Space Backgrounds

40 42 46
46 50 55
52 57 58

0 1 0
0 0 0
0 0 0

(400) (421) (460)
(460) (500) (550)
(520) (560) (58*0)

0 42 0
0 0 0
0 0 0

0 0 0
0 42 0
0 0 0

0 0 0
0 0 0
0 1 0

1 1 1
1 1 1
1 1 1

0 1 0
1 4 1
0 1 0

0 -1 0
-1 5 -1
0 -1 0

-1 -2 -1
-2 13 -2
-1 -2 -1

-1 0 -1
0 7 0
-1 0 -1

-1 -1 -1
-1 8 -1
-1 -1 -1

0 1 0
1 -3 1
0 1 0

-1 -2 -1
0 0 0
1 2 1

0 0 0
-1 1 0
0 0 0

-2 -1 0
-1 1 1
0 1 2

1 0 0
0 1 0
0 0 -1

3 2 0
2 1 -1
0 -1 -2

1 0 0
0 0 0
0 0 -1

0 0 0
0 -1 0
0 0 0

-2 -2 -2 -2 -2
-1 -1 -1 -1 -1
0 0 0 0 0
1 1 1 1 1
2 2 2 2 2

-2 0 0 0 -2
0 -1 0 -1 0
0 0 13 0 0
0 -1 0 -1 0
-2 0 0 0 -2

9 0 3 0 9
0 0 0 0 0
3 0 1 0 3
0 0 0 0 0
9 0 3 0 9

3 0 0 0 0
0 2 0 0 0
0 0 1 0 0
0 0 0 2 0
0 0 0 0 3

-2 -2 -1 0 0
-2 0 1 2 2
-1 1 2 2 2
0 2 2 2 2
0 2 2 2 2