Visualizing Random Noise
While Noise.cs handles the generation of random data, we will create two additional components to orchestrate our data preview. Within /Assets/Scripts/ProcGen/ create MapDisplay.cs. This file will coordinate the game objects and their rendering components in the scene.
Within /Assets/Scripts/ProcGen/ create MapGenerator.cs. This file will take the data produced by Noise.cs and convert its random numbers into color data that is usable by MapDisplay. We previously discussed how a significant effort in using procedural generation actually goes into curating the randomness so that it makes sense for our game design. MapGenerator.cs performs this job of refining the output of Noise.cs into relevant content our game.
Attach both MapGenerator and MapDisplay C# files to the "Map Generator" game object in the scene. These components appear deceptively simple in the inspector for now, but they will gain many configuration options in upcoming steps.
In addition to our two new components, we will need one more C# file that is a utility class. This means it will not be a MonoBehaviour and it will not be a component that is attached to any particular game object. Create a new C# file within /Assets/Scripts/ProcGen/ named TextureGenerator.cs. The purpose of this file is to help organize code relating to the generation of flat graphical data.
Eventually, MapDisplay will coordinate both two dimensional and three dimension previews of our randomly generated landscapes. For now, it only needs to accept 2D texture data for our plane (Line 8) and assign that graphical data to the material on our plane mesh. (Line 9)
using UnityEngine;
namespace ProcGen {
public class MapDisplay : MonoBehaviour
{
public Renderer textureRender;
public void DrawTexture(Texture2D texture) {
textureRender.sharedMaterial.mainTexture = texture;
textureRender.transform.localScale = new Vector3(texture.width, 1, texture.height);
}
}
}
Assign the Plane game object into the MapDisplay's textureRender property.
using UnityEngine;
namespace ProcGen {
public static class TextureGenerator
{
public static Texture2D TextureFromHeightMap(float[,] heightMap) {
int width = heightMap.GetLength(0);
int height = heightMap.GetLength(1);
Color[] colorMap = new Color[width * height];
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
float heightValue = heightMap[x, y];
colorMap[y * width + x] = Color.Lerp(Color.black, Color.white, heightValue);
}
}
return TextureFromColorMap(colorMap, width);
}
public static Texture2D TextureFromColorMap(Color[] colorMap, int size) {
Texture2D texture = new Texture2D(size, size);
texture.filterMode = FilterMode.Point;
texture.wrapMode = TextureWrapMode.Clamp;
texture.SetPixels(colorMap);
texture.Apply();
return texture;
}
}
}
Our TextureFromHeightMap function expects to receive a two dimensional float array. This is the exact same format produced by our Noise.GenerateNoiseMap function. From that float array, TextureFromHeight map will return Texture2D, which is a graphic that can be rendered on models in Unity. (Line 6)
We can't assume the size of the Texture2D we are making, so we determine that size by measuring the float array we originally received. (Lines 7 to 8)
Based on the measurements of the two dimensional float array. We create a Color array to keep track of the pixels for our graphic. Because of how Unity's graphical functions work, our Color array is actually one dimensional even though the graphic will eventually be two dimensional. (Line 10)
Since we know the width and height of the float array, we can loop through every X and Y in its coordinate system. (Lines 11 to 12)
For every number stored in the float array, translate that to a grayscale color. 0 is treated as black, while 1 is treated as white. The Lerp function computes all of the shades of grey in between. We store the resulting color in the color array by doing some row and column math to translate the 2D coordinate of the float array to a 1D coordinate in the color array. (Line 13 to 14)
We pass our color array to the TextureFromColorMap function which is a helper function that produces Texture2D data. (Line 18)
The TextureFromColorMap function receives a one dimensional color array and a size in order to return a Texture2D. (Line 21)
Often, textures are stored as square graphics for optimization reasons. This line creates a blank Texture2D at the configured square size. (Line 22)
These settings configure common graphical options you might recognize from the inspector when you have imported graphics by hand. We are configuring those same settings programmatically. We don't want our map to loop and we want the clarity of seeing sharp individual pixels. (Line 23 to 24)
The color data is assigned to the Texture2D object and the changes are saved. (Line 25 to 26)
The resulting texture is returned back to the calling function. (Line 28)
using UnityEngine;
namespace ProcGen {
public class MapGenerator : MonoBehaviour
{
public enum DrawMode {
NoiseMap
}
public DrawMode drawMode;
// Outlets
public MapDisplay display;
// Configuration
public int mapSize = 240;
public float noiseScale = 50f;
// Methods
public void GenerateMap() {
float[,] noiseMap = Noise.GenerateNoiseMap(mapSize, noiseScale);
if(drawMode == DrawMode.NoiseMap) {
Texture2D mapTexture = TextureGenerator.TextureFromHeightMap(noiseMap);
display.DrawTexture(mapTexture);
}
}
}
}
For this assignment, we are only previewing the noise as grayscale. An upcoming assignment will add more options here for previewing other kinds of video game maps. (Lines 6 to 9)
We link to MapDisplay which is in charge of rendering visuals. (Line 12)
Size and scale will influence how much random data we generate and how big the resulting map will be. (Lines 15 to 16)
The GenerateMap function is the primary function of this entire exercise. It kicks off the process of random data generation and map visualization. (Line 19)
GenerateMap orchestrates gathering random data produced by the Noise class and passing it to the proper renderer depending on our preview mode. (Line 20)
Depending on our preview mode, we render the appropriate kind of graphics based on the random data received in the prior lines. For now, our goal is just to draw a grayscale map of the random noise. (Lines 22 to 24)
Because MapDisplay is a sibling of MapGenerator, the display property can be assigned by dragging the "Map Generator" game object into its own property.
There is one last piece of code required to execute all that we've created up so far. The MapGenerator.GenerateMap() function kicks off the entire process, but currently nothing actually calls that function. You could call GenerateMap() at the Start of the game or other relevant gameplay moment, but the purpose of this assignment is to preview random data as a sort of developer tool. It would be more convenient if we could trigger GenerateMap() from the inspector without starting the game, since there is no gameplay at present.
Create a subfolder within /Assets/ called Editor. Within /Assets/Editor/ create a new C# file named MapGeneratorEditor.cs.
The "Editor" folder is a special folder for writing scripts that influence the Unity Editor itself. Such code is not included in exported builds of the game. You should not put your gameplay logic in this folder. Unity Editor code is useful for creating your own development tools or enhancing existing tools within Unity Editor.
The purpose of our editor code is to enhance the Inspector for MapGenerator to have an additional button for generating map data. The editor will also call the GenerateMap function whenever other values are changed in that component's inspector.
using UnityEngine;
using UnityEditor;
namespace ProcGen {
[CustomEditor(typeof(MapGenerator))]
public class MapGeneratorEditor : Editor {
public override void OnInspectorGUI() {
MapGenerator mapGen = (MapGenerator)target;
if(DrawDefaultInspector()) {
mapGen.GenerateMap();
}
if(GUILayout.Button("Generate")) {
mapGen.GenerateMap();
}
}
}
}
You should notice that the code in our file has a using statement for "UnityEditor" which provides the additional functionality for influencing the Editor. Unlike our use of the MonoBehaviour subclass when making components, this class declaration subclasses from Editor instead. Just as components have events such as "Update", Editor code has events such as "OnInspectorGUI" which occurs whenever the Inspector window needs to be drawn or updated.
When inspecting the "Map Generator" game object, you should now see a "Generate" button in the inspector tab. Clicking this button or changing any of the inspector values will show a randomly generated grayscale map of perlin noise, which may look like clouds for certain settings.
We will add more configuration options in the upcoming steps, but for now you should be able to control the size of the map and the scaling of the random data, which gives the appearance of zooming in and out of the random noise.
