Procedural Generation Tutorial Basic Cell Pattern Texture - Part 1

Procedural Generation Tutorial Basic Cell Pattern Texture - Part 1

The end result of the full tutorial.

At the end of Part 1 we will have produced this (See image 1.0).

Image 1.0

Before you start you should know these things:

• Create Texture variables
• Manipulate textures using SetPixels
• Create a basic texture pattern
• What noise is and hot to use it with a texture pattern

You should have gone through these tutorials before going further:

• Checker Board Texture
• Brick Pattern Texture
• Brick Pattern Noise Texture

If you find yourself not understanding some of the terminology or code of the tutorial I would also recommend going through the previous tutorial to get up to speed. I will leave a link to it below to go through at your leisure.

Checker Board Pattern Texture http://joseph-easter.blogspot.nl/2016/12/procedural-generation-tutorial-checker.html

Brick Texture Tutorial http://joseph-easter.blogspot.co.uk/2017/01/procedural-generation-tutorial-brick.html

Brick Noise Texture Tutorial http://joseph-easter.blogspot.nl/2017/02/procedural-generation-tutorial-brick_8.html

If you follow this tutorial and find I am moving too fast or if you don’t know the things in the list above, I would recommend getting up to speed and then come back to this tutorial when you are ready.

With this tutorial if you want to convert this into JavaScript by all means do so but it may be easier for you to follow this in C# and stick with the language of the tutorial to make it easier.

PROJECT RESOURCES: At the bottom of the post there is a download link to a zip file. This files includes all files needed to follow Part 1 and the completed project file of Part 1.

In this tutorial series, we will be adding a pattern to the texture using code by adding noise to the texture image.


In this tutorial series, we will be creating a very simple pattern using a cellular texture using code. This tutorial will use and build upon what we have learnt from the previous texture tutorials, by creating two textures, one for the background, and one for the foreground, dividing the foreground into cells and adding an image into those cells then combining those textures. Later we will add variation to it by deciding whether to show a cell based on it noise value in the texture space, then using that noise to position it with in the cell itself using bombing.


We will:

• Explain the theory
• Add the Noise script to a quad
• Bootstrap some of our code from the BrickNoisePattern class
• Create the background texture (one block colour)
• Import the PNG image file
• Add the background colour to it

Step 1: The theory

Theory for the project:

In this project, we will be using techniques we used in previous tutorials. Then later when we have the foundations laid out we will add some more variation to it by implementing a new technique using noise generated by the game object’s position.

In procedural generation, a ‘bomb’ is essentially a node or a seed to place a given item. For example, if you had a grid texture, you would divide that texture into chunks. You may decide that this would create a regular pattern, a tiling effect. You may not want this, so you would use an algorithm to decide which chunks to show. This may still show a regular pattern to some degree, because the image you placed in the chunk is smaller than the chunk itself and it’s in the centre of the chunk itself. Then you decide to create random nodes or seeds inside each chunk. This decides where the image will be placed inside each chunk.

Note: In some engines and with some Shaders if the image is so far from the centre that it protrudes into another cell it may clip off part of the image that is outside the cell (or chunk). In this case, you would modify the shader to check the surrounding eight cells of the shader or texture.

However, in unity this is not a problem because it will set the pixels of the image if it has enough pixels to set in the texture. This causes another problem though. One image may overlap another one from another cell or two, this can be fixed by making the sure image is set between two predefined points within its cell.

Theory for Part 1:

In this part, we will set the basics for the project. We will create a quad in the centre of the scene, add the noise class to it since we have already done the work for it. Then we will create a new class above it called ‘Basic Cellular Texture’ and add some of the code from ‘Brick Noise Pattern Texture’ to it. After this we will create and colour the background texture, then do the same with the top layer texture. With the top layer texture, we want this to be transparent (or alpha out the pixels so the background texture can show through the top layer). Then we will create a texture variable to store the image we will be putting into the top layer texture.

Step 2: Bootstrapping code from the Brick Noise Texture and Setup

In this step, we are not doing anything difficult here. First create a Quad and name it ‘Basic Cell Texture’. Then if you have not already done so, import the ‘Noise’ and ‘NoiseLibrary’ scripts into your project. Then create and add a new script to the quad named ‘BasicCellPatternCreator’, then add the ‘Noise’ script to the quad (make sure it is under ‘BasicCellPatternCreator’).

If you have not already done so, create a folder for your scripts (called ‘Scripts’) and put your scripts in there. (See image 1.1).

Image 1.1: This is the order they should be in.

Now we need to do one more thing before we start, import the image [insert file name here] into your project and put it into your ‘Art’ folder. When you import it make sure you click on the PNG file and make sure ‘Alpha is transparency’ is set to true and set ‘Max Size’ to ‘64’ (See Image 1.2). The image itself is 64 by 64 pixels.

Image 1.2: Make sure the Quad is set to 

the default values in the inspector.

Now we go into our script and prepare it buy bootstrapping some code from ‘BrickNoiseTextureCreator’, essentially copy and pasting code we have already done before. First, we copy and paste a few variables ‘mainTexture’. Then we copy over the variables ‘mainTexWidth’, ‘mainTexHeight’, ‘blockWidth’, ‘blockHeight’, ‘colour0’, ‘colour1’, ‘colour0Arr’, ‘colour1Arr’ and ‘NoiseScr’ of type ‘Noise’. After this we copy and paste the functions ‘SetMainTextureSize’, ‘CreateMortarColour’, ‘ConvertColourToArray’, ‘SetBlockSize’, ‘CreatePattern’ and ‘AddTexturesTogether’. (Also below ‘mainTexture’ add ‘combinedTexture’).

Code:

public Texture2D mainTexture;
public Texture2D combinedTexture;

public int mainTexWidth;
public int mainTexHeight;

int squaresX;
int squaresY;

int blockWidth;
int blockHeight;

public Color32 color0;
public Color32 color1;

public Color32[] color0Arr;
public Color32[] color1Arr;

public Noise noiseScr;

void Start()

{

   SetMaintextureSize();
   CreateMortarColour();
   ConvertColourToArray(blockWidth * 
                        blockHeight);

   CreatePattern();
   AddTexturesTogether();

}

void SetMaintextureSize()

{

   ...

}

void CreateMortarColour(Texture2D tex)

{

   ...

}

void ConvertColourToArray()

{

   ...

}

void CreatePattern()

{

   ...

}

void AddTexturesTogether()

{

   ...

}

Great, now comment out the functions ‘CreatePattern’, ‘AddNoiseToTexture’ and their respective references in the ‘Start’ function. Then in ‘SetMainTextureSize’ remove the reference to ‘ConvertBricksToSquares’ and the lines setting up the ‘leftBrickTexture’ and ‘rightBrickTexture’ variables. With these respective functions, we don’t need them now and in their current state they will throw in errors, but we will need them later. Next stop we will fix an error in our code and create the background colour.

Step 3: Creating and Setting the Background Colour

Now, the error we are getting is a ‘no overload for method’ error. Which means it needs to have the appropriate variable parsed to it. This is an easy fix, when we reference it in ‘Start’ we will parse it the background texture ‘mainTexture’. Then we change the variable’s name to ‘CreateBackgroundColour’ since this makes more sense. (See image 1.3).

Code:

...
void Start()

{

   SetMaintextureSize();
   CreateBackgroundColour(mainTexture);
   ConvertColourToArray(blockWidth * 
                        blockHeight);

   CreatePattern();
   AddTexturesTogether();

}

...

void CreateBackgroundColour(Texture2D tex)

{

   ...

}

Image 1.3

At the moment we can’t see the result of the result of the function even though we have used ‘tex.Apply();’ after making changes. This for a very simple reason, we have forgot to set the texture variable to the ‘mainTexture’ variable of the and renderer of the material the quad is using.

This is very easy to fix since in the function the line should already be there but commented out. (if the line isn’t there for some reason add it (it will be in the code snipped below in bold). (See image 1.4).

Code:

...

void CreateBackgroundColour(Texture2D tex)

{

   ConvertColourToArray(tex.width *

                        tex.height);

   tex.SetPixels32(0, 0, tex.width,

                   tex.height, colour0Arr);

   tex.Apply();

   GetComponent<Renderer>().material.

                           mainTexture = tex;

}

Image 1.4

We now need to do one last thing. Set the background colour. At the moment, the colour is black since that’s the default when creating a new colour variable. All we have to do is click the variable and chose the desired colour from the colour picker. Or you can enter the bit values or enter the Hexadecimal value of your desired colour. I’m going with a light blue since it is a nice colour with good contrast with most bright colours. (if you want the precise colour I’m using the Hexadecimal value is '41CEFDFF'). (See image 1.5).

Image 1.5

This is the result you should have when in ‘Play Mode’. (See image 1.6).

Image 1.6: Resolution 256 by 256.

Great, part one is finished. We have laid down the foundations.

We have learnt how to:

• Make a simple texture variable
• Colour our texture with one block colour

In Part 2 we will create two new variables, one for the image we will be using in the top layer and an image which we will create and store a pattern on. We will learn how to divide the texture into simple cells, add the new image to the cells of the texture and fix any bugs that appear.

Download project resources and files here.

Go to Part 2, click here.

If you enjoyed this tutorial and would like me to add some extra content to it, like and share this tutorial on here and social media and leave a comment below. If you didn’t like this tutorial please leave a comment below saying why.