{"id":70,"date":"2024-12-02T17:32:01","date_gmt":"2024-12-02T17:32:01","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/codedcat\/?p=70"},"modified":"2024-12-02T17:32:01","modified_gmt":"2024-12-02T17:32:01","slug":"developing-procedural-terrain-for-sim-firefighter","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/codedcat\/2024\/12\/02\/developing-procedural-terrain-for-sim-firefighter\/","title":{"rendered":"Developing Procedural Terrain for Sim Firefighter"},"content":{"rendered":"\n

Hey everyone! I’m so excited to share what I’ve been working on for Sim Firefighter: procedurally generated terrain! As you know, this game is still in its early stages, but one of the key features I’m tackling is creating dynamic maps that feel natural and engaging. Terrain isn’t just a backdrop in Sim Firefighter \u2014 it’s a major gameplay element that impacts fire behavior and player strategy. <\/p>\n\n\n\n

To make this happen, I’ve been diving into Perlin Noise, an amazing tool for generating smooth, organic patterns. The process has been challenging but so rewarding, and I’m thrilled to take you behind the scenes and show you how it all works!<\/p>\n\n\n\n

\n\n\n\n

What is Perlin Noise?<\/h2>\n\n\n\n

Perlin Noise creates smooth gradients of random values, perfect for generating terrains, clouds, or even fire spread patterns. It’s widely used in games because it avoids the harsh randomness of pure noise, resulting in more natural-looking outputs.<\/p>\n\n\n\n

\n\n\n\n

How I’m Using Perlin Noise in Sim Firefighter<\/h2>\n\n\n\n

The goal is to procedurally generate a map where each tile is assigned a terrain type \u2014 like grass, shrubs, or water \u2014 based on Perlin Noise values. Here’s how I’m building it:<\/p>\n\n\n\n

1. Choosing the Right Tool<\/p>\n\n\n\n

To generate Perlin Noise, I’m using the noisejs<\/a> library. It’s a straightforward JavaScript implementation of Perlin Noise that supports 2D and 3D noise and allows for seeding \u2014 important for creating reproducible maps during development.<\/p>\n\n\n\n

2. Generating the Noise Grid<\/p>\n\n\n\n

The terrain map in Sim Firefighter is structured as a grid. Each grid cell represents a tile, and I use Perlin Noise to assign values to each cell. Lower values might represent water, mid-range values, grass, and higher values trees. Here’s a pseudocode example of how the noise grid is generated:<\/p>\n\n\n\n

    <\/ol>\n\n\n\n
    <\/blockquote>\n\n\n\n
    Initialize PerlinNoise with width, height, scale, and seed\nFor each Y coordinate in the grid:\n    For each X coordinate in the grid:\n        Generate Perlin noise value at position (X, Y)\n        Store the noise value in the grid\nEnd For<\/code><\/pre>\n\n\n\n
    3. Mapping Noise to Terrain<\/p>\n\n\n\n
    The generated Perlin Noise value range for -1 to 1. We map these values to terrain types like water, grass, and trees. Here’s how the mapping is done:<\/p>\n\n\n\n
    For each value in the noise grid:\n    If value < -0.5: Assign \"water\"\n    Else if value < 0: Assign \"grass\"\n    Else if value < 0.5: Assign \"shrub\"\n    Else: Assign \"tree\"\nEnd For<\/code><\/pre>\n\n\n\n
    4. Rendering the Map<\/p>\n\n\n\n
    Once the terrain is generated, the next step is to render it visually. Each tile corresponds to a terrain type, and we render the corresponding graphic for each tile.<\/p>\n\n\n\n
    For each tile in the terrain grid:\n    Create a sprite at (X, Y)\n    Assign the terrain image based on the tile type (water, grass, etc.)\nEnd For<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    What I’m Learning Along the Way<\/h2>\n\n\n\n
    1. Tuning Noise Parameters:<\/p>\n\n\n\n
    The scale and noise thresholds have a huge impact on the map’s look. Fine-tuning these values is a key part of the process.<\/p>\n\n\n\n
    2. Debugging with Visualization:<\/p>\n\n\n\n
    Visualizing the noise grid as colors or grayscale tiles has made it easier to identify issues with the terrain generation.<\/p>\n\n\n\n
    3. Reproducibility with Seeds:<\/p>\n\n\n\n
    Using a seed ensures I can regenerate the same map, which has been essential for testing.<\/p>\n\n\n\n
    \n\n\n\n
    What’s Next?<\/h2>\n\n\n\n
    Sim Firefighter is still in its early stages, so there’s a lot more to do. Next steps for procedural terrain include:<\/p>\n\n\n\n