Our terrain generator only needs a few calls to get started, here's the basics!
Create a tileMap:
In your MyGame constructor, make a tileMap instance variable and set it to null:
this.tileMap = null;
In your MyGame initialize, instantiate your camera as follows:
Note: This can be adjusted to your liking, but this setup guarantees that your tileMap will show up on screen!
this.mCamera = new Camera(
vec2.fromValues(0, 0), // position of the camera
100, // width of camera
[0, 0, 1800, 900] // viewport (orgX, orgY, width, height)
);
In your MyGame initialize or loadScene, call the tileMap constructor
this.tileMap = new TileMap(
-50, // XPosition of bottom left corner
-25, // YPosition of bottom left corner
1, // Tile width in World Coordinates
102, // Width in tiles
52 // Height in tiles
);
In your draw method, setup your camera's view projection and draw the tileMap:
gEngine.Core.clearCanvas([0.9, 0.9, 0.9, 1.0]);
this.mCamera.setupViewProjection();
this.tileMap.draw(this.mCamera);
Now you're ready to make a terrain generator!
In your MyGame constructor, make a TerrainGenerator instance variable and set it to null.
this.terrainGen = null;
In your MyGame initialize or loadScene, call the TerrainGenerator constructor and make some terrain!
this.terrainGen = new TerrainGenerator(
this.tileMap, //The tile map we're generating to
0, //The starting tile for generation
this.tileMap.getWidth() - 1 //The last tile for generation
);
this.terrainGen.generateFlat(
0, //Y position lower bound
6 //Y position upper bound
);
this.terrainGen.generateBumps(4); //The Y level where terrain is generated
You should see some green bumpy terrain at the bottom of your window. Change parameters to see what you can make! It isn't much, but creating intricate terrain is only a few steps away now that you have the basics.
This tutorial assumes you understand how to load textures into the game engine. You can find a number of tile assets within assets/blocks or do a quick Google search for your own. Find textures for stone, dirt, grass, wood, and leaves and load them to the following variables:
this.stone
this.dirt
this.grass
this.wood
this.leaves
We assume that each texture has its own file with no blank space, making our UV array easy to define with:
this.defaultUV = [0, 1, 0, 1];
If you are using a SpriteSheet, you'll need to make UV arrays for each texture.
All code in this tutorial can be placed in the MyGame initialize method. It may help to create a method for terrain generation, which is what we've done in our example scenes.
Generating the Foundation:
We'll first create bumpy terrain with a few tall mountains.
this.terrainGen.generateFlat(0, 6);
this.terrainGen.generateBumps(4);
this.terrainGen.generateHills(
6, //Y level where the hills will start
0.02, //Frequency of the hills (keep it small!)
80, //The scale of the hills, affects height and width
2 //The steepness of the hills
);
Note that you can make the terrain less bumpy by decreasing the yLevel of generateBumps relative to the level of generateFlat.
This will create the same green renderables you saw in Tutorial 1. We'll now apply a stone texture to all of the created terrain.
this.terrainGen.setTexture(0, 52, this.stone, this.defaultUV);
We'll now layer dirt on top of the stone we've created.
for(var i = 0; i < 7 ; i++)
{
this.terrainGen.addTopTiles(this.dirt, this.defaultUV);
}
To top off the dirt, we'll add a single layer of grass
this.terrainGen.addTopTiles(this.grass, this.defaultUV);
Now we'll add trees to spruce (I'm sorry) up the surface
this.terrainGen.generateTrees(
5, //The minimum height of a tree
15, //The maximum height of a tree
0.05, //The tree frequency
this.wood, //The trunk texture
[1,0,1,0], //The trunk UV array
this.leaves, //The leaf texture
[1,0,1,0] //The leaf UV array
);
You should now have a grassy overworld with mountains and trees. Play with the parameters and add additional textures to your heart's desire!