Description

This showcase has been made by Floris Videler ([email protected]) and Shahin Basht Bavian ([email protected]). And we choose to work on a small world builder showcase. This because we think this shows both a lot of components of SD but also some of AI. In this showcase you can walk around in a flat area or a random generated terrain and place or delete blocks to your heart's content. Now this showcase is a sort of game, however this could also be a architects tool to help build and design houses! But for now it's a game to attract new students.

Features

For this showcase, we added a lot of features which will be shown in this section and will be explained in more details.

Perlin Noise

Connected issues: Basic world / map generation algorithm We wanted to generate a random terrain, this because else all the worlds would lookalike. But before we could get started on generating random terrain we had to find an algorithm to generate a height map we could turn into a 3D object. We choose Perlin noise. The reason for this is that this is one of the most used terrain generation algorithms and there are the most sources available. This doesn't mean that this makes it an easy algorithm, to get a better understanding we used a lot of blogs and articles: Understanding Perlin Noise & Perlin Noise: A Procedural Generation Algorithm are the most used.

After struggling for a while getting the algorithm to work in JavaScript, we got a 2D demo working. You can see this in the image below

Terrain generation

Connected issues: Map / world generation algoritme implementeren in A frame Now that we have a 2D map we need to make it a 3D terrain. We can do this by using the 2D map as a height map to create a 3D model. This turned out harder than expected. The plan was to create a plane and edit the vertices as shown on this page A-frame geometry. However this wasn't possible anymore, the underlying 3D rendered Three.js changed the way vertices can be changed on a plane. This had mostly to do with performance, you can only edit the buffer. After getting the hang of this we were able to generate a 3D terrain.

Playable area

Connected issues: Make the game playable in random generated terrain, Make generated terrain on playing level, Smooth playing area of random terrain As you saw we have a 3D terrain, however we need it to be flat in the middle. This is the area where the player can build or play. As of now we carve out a square. This will add a lot more life to the showcase.

Smoothing a 3d terrain only in a specific area was harder than expected. There is a first version of terrain smoothing around the playable area. We smooth the terrain by looking at the surrounding pixels of the playable area and getting the average of those. We do this till the edge has reached the playable level. INSERT PICTURE HERE.

Raycaster

Raycaster is a component that provides line-based intersection testing with a Raycaster. Raycasting is a method of extending a line from an origin towards a direction to check whether the line intersects with other entities. Using this method helped us to create the functions for add, snap and delete objects.

Add objects with right-hand controller

Connected issues: Add object To be able to add objects to the world we had to add a function to the right-hand controller. To do that we used a method called Raycaster to get the position of where the joystick faced and created a function to get the position from Raycaster and add an object in that position. For objects we use a-mixin which is a reusable bundle of components and we can use it to create voxels which is an object like a box but attached with a few custom a frame attachments.

Snap objects together

Connected issues: Snap object To be able to snap objects together we had to add a function to the block so they can snap together. To do that we used the Raycaster method to get the position of the block and make a grid and add a block next to the other block or on top of the other block.

Delete an object with left-hand controller

Connected issues: delete object After adding objects we wanted to make it possible to remove objects with left-hand controller. To do that we used the Raycaster method to get the object and remove it from the scene.

Change Color

To make the game even more fun for players we decided to add a function to change the color of blocks so they can have more space to be creative. To make this function we used a collection of colors to and we cycle through it to change the color of blocks.

Random textures

Connected issues: TODO We wanted to give every block an unique texture. We do this by generating a black and white map using the perlin noise algorithm described earlier. The whiter a part of the texture is, the more the color is going to show on that part. We do this every time the page is loaded so one color will almost never have the same texture as another color and will almost never have the same texture as last time. We safe these textures as HTML canvas elements which are easily turnt into A-frame textures (or material).

Trees

The trees that can be seen in the game are used to mask the steep hills and they ofcourse make the game look a lot nicer. We used an random algorithm to place the trees and excluded the buildable area from this. This way the player will not be bothered by the trees while playing.

Known bugs and limitations

• There is a bug that you can add an object underground in some places. (Fixed)
• Sometimes the controllers get switched up. The right controller than also deletes a block before placing one and same goes for the left controller. (Fixed?)
• The terrain is not smooth towards the middle. Smooth playing area of random terrain (Kinda fixed)
• The terrain is a random color.