In this tutorial series, we will create a flight simulator application using ShiVa3D Suite. In order to build this application, we will cover all the topics necessary for creating 3D games, educational applications, and novelty 3D apps. This tutorial, part 2 of the series, will cover environment and terrain creation.

In part 1 of this series, we introduced the flight simulator application named Simulator and explained the development process we followed while creating the Simulator. We also described the contents of the download archive accompanying this series and the basic flight maneuvers simulated in the app. In this tutorial, we start describing how to develop the game using the ShiVa Editor. Our main focus will be creating the visual components of the application.

Also available in this series:

1. Create a 3D Flight Simulator App for iOS and Android - Theoretical Overview
2. Create a 3D Flight Simulator App for iOS and Android - Environment Creation
3. Create a 3D Flight Simulator App for iOS and Android - Simulator Programming
4. Create a 3D Flight Simulator App for iOS and Android – Project Export

ShiVa Editor Modules

Let us first give a quick introduction to the various modules available in the ShiVa Editor. We borrow most of this information from the ShiVa Editor help documentation.

Data Explorer is a resource manager to provide access to various elements of the game, including the game itself, scenes, AIModels, materials, etc. Its user interface presents those resources in a hierarchical folder structure.

Game Editor is the main module of the editor letting the developer edit the game resource. For example, with the game editor, a developer can define the scenes and the AIModel associated with the game.

Scene Viewer allows the developer to visualize the scenes in the game and the models in those scenes.

Scene Explorer is a separate module independent of the scene viewer. The developer will mainly use the scene explorer to find and manage resources in a scene.

Ambience Editor is used to edit visual attributes of a scene such as color, lighting, and various visual effects.

AIModel Editor allows developer to edit AIModels. With the AIModel editor, you can define variables, functions, states and handlers for an AIModel.

Script Editor is used to edit scripts of an AIModel.

Step-By-Step Overview

The steps to create the Simulator can be organized as follows:

• Create a project, a game, and a scene.
• Create a terrain.
• Create the sky above the terrain.
• Add a light source to shed light on the terrain.
• Create the necessary code and variables.
• Add the control buttons to the screen. We are doing this after creating the code because the buttons need to be hooked up when the code is written.
• Add a font, which is needed to display any text message to the user.
• Finally, perform a unit test of the Simulator.

Step 1: Create The Game And The Scene

Start the ShiVa Editor. From the top bar menu, select Main -> Projects -> Add. Enter a folder path to store your game. (We chose D:\ShProj\Projects\Flight_Simulator.) This is shown below.

Close the dialog by pressing Close.

In Data Explorer, highlight the Games folder and then right click menu Create -> Game.

Name the game Simulator. Press OK.

In Data Explorer, highlight the Scenes folder and from the right click menu Create -> Scene.

Name the scene Scene1. Press OK.

Bring up the Game Editor and in the Data Explorer, under the Games folder double click the Simulator. In the Games Editor, you should see various properties of the Simulator game.

In the Game Editor select the Scenes tab. In the Data Explorer under the Scenes folder select Scene1, drag-and-drop it to the Scenes tab in Game Editor. You should see something like this:

In Game Editor Scenes tab, double click on Scene1. You will see a green check sign under the column named Loaded.

Step 2: Create The Terrain

The single most important visual element in the Simulator is the terrain because, other than the sky, the terrain is what the user will see during the entire simulation. ShiVa Editor lets us create sophisticated terrains. For the purposes of this series, we will create a relatively simple terrain. For more information on ShiVa Editor terrain capabilities, see Chapter 16 of Shando's Shiva Book and this article on Terrain Creation.

Bring up the Terrain Editor. In Data Explorer, in the Scenes Folder, double click Scene1. In the Terrain Editor menu, select Create.

In Terrain Editor, select the Create menu.

• Check Create empty chunks
• Select Chunk Count: 32x32
• Select Chunk Size: 32x32
• Select Unit Size: 4

Press OK.

We have defined a square whose edges are boundaries of the terrain. On each side, there are 32 chunks where the chunk size is 128 (4 x 32). With those definitions, each side of the terrain is 4,096 (4 x 32 x 32) units.

Now, we will add irregularities, i.e. hills and hollows, to the terrain. In the Terrain Editor, select the Chunks section. Click on the upper left corner of the terrain (shown below):

Keep the mouse button pressed and drag the cursor all the way to the lower right corner to select all the chunks as shown below.

While all the chunks in the terrain are selected, go to the Geometry section in the Terrain Editor and click on the rectangle on the left that has a blue down arrow on it.

From the drop-down menu, select Noise.

Substitute the following values:

• Operator: Replace
• Amount: 0.53
• Soft borders: 0.50
• Frequency: 0.008
• Persistence: 0.411
• Octaves: 6
• Amplitude: 44

Press OK.

• The operator value "Replace" instructs the Terrain Editor that the current layer should replace the previous one. Because we will have only one layer, this variable really has no significant implication.
• Amount is a number between 0 and 1, and could be considered some sort of opacity value. It has significance when this layer is being combined with a previous layer. Again, since there is only one layer, this variable has no significant implication.
• The Soft Borders variable influences the blending of chunks at the boundary of the selection with the adjacent chunks. Because we have selected all the chunks and there is only one layer, this variable should not have significance.
• The other variables Frequency, Persistence, Octaves and Amplitude, determine the height and depth of the hills and hollows, determining, respectively, how often those are repeated and how sharp and pointed the peaks look.

At this point, we have created the irregularities of the terrain. Now we just need to add some color.

Now, go to the Materials section in the Terrain Editor. Check the "Receive dynamic lighting" and "Receive dynamic shadows" checkboxes. Make sure the AO Amount is 0.00 and the AO Distance is 10.

Still, in the Materials section, select Ambient. In the Select Color dialog, enter:

• Red: 38
• Green: 74
• Blue: 56

Click "OK".

In the Materials section, click on Diffuse and then, in the Select Color dialog, enter:

• Red: 15
• Green: 77
• Blue: 18

Press OK.

In the materials section, click on Specular, and in the Select Color dialog, enter:

• Red: 16
• Green: 29
• Blue: 22

Press OK.

Finally, in the Materials section, click on the Production button.

When asked "Really render selection?" press Yes.

Now that the terrain surface has been created, in the Chunks section of Terrain Editor you should see something like below (although Min and Max height may slightly vary).

Step 3: Create The Sky

Next, we need to create the sky above the terrain. This will be done using the Skybox feature of the ShiVa Editor. The Skybox has six sides: front, top, left, right, back, and bottom. The terrain lies over the bottom, and the global X, Y, and Z axes point towards right, top, and the back sides of the Skybox, respectively. For each side (except bottom, because it is covered by the terrain) we will provide a 512 pixel x 512 pixel image to construct our Skybox. (See below).

For a seamless look, those images must be so that the adjacent edges of any two images must fit inseparably together, e.g. the right edge of the left image and the left edge of the front image. To achieve that effect, it is easier if you create those images from a panoramic image and apply further editing as needed. While running in the Simulator, you may observe an imperfection due to the left edge of the back image not blending with the right edge of the right image. However, what we have should suffice for the purposes of this series.

In Data Explorer menu, select Import -> Texture.

In Import A Texture dialog, click on '...' next to the File to import and select the following five files from the code archive accompanying this tutorial:

• back-crop.jpg
• front-crop.jpg
• left-crop.jpg
• right-crop.jpg
• top-crop.jpg

The Import A Texture dialog will look like this:

Press the Import button to finish the import. Now, in Data Explorer, if you select the Textures folder, you will see the imported files (highlighted below):

Bring up the Ambience Editor and in the Data Explorer, double click on Scene1 under the Scenes folder (If you are prompted to save Scene1, choose "Yes").

The Ambience Editor will look like this:

In the Ambience Editor, display the Sky section. Under Skybox, click on the arrow next to Front(-Z) and select front_crop.

Similarly, select right_crop for Right (-X), back_crop for Back(+Z), left_crop for Left(+X) and top_crop for Top (+Y). You should have the following.

Step 4: Add The Light Source

Now, we will add a light source to Scene1. In ShiVa Editor, there is a default dynamic light source called DefaultDynamicLightSet, which is a built-in Model (Note: From the ShiVa Editor documentation, dynamic lighting is used for moving lights/objects, with real-time light rendering whereas static light is used for static lighting and shadows, on static objects. For our purposes, we have selected a dynamic light source).

Bring up Scene Viewer and Data Explorer side-by-side. In the Data Explorer, under the Scenes folder, double-click on Scene1 (if you are prompted to save Scene1, choose "Yes").

You should see something similar to below picture in Scene Viewer

In Data Explorer, open the Models folder, which is directly under the top level Flight_Simulator folder. Select DefaultDynamicLightSet, then drag-and-drop it onto the Scene Viewer.

In Data Explorer, go to the Scenes folder and double click Scene1. When prompted to save Scene1, choose Yes. Now, bring up the Scene Explorer. Under the Objects tab, you should see the DefaultDynamicSet, as well as a DefaultCamera.

In the Scene Explorer, under the Models tab you should see the following.

Step 5: Create The AIModel

Now, we will create the AIModel for the game. This will be used to store the code and variables for the Simulator. In the Data Explorer, right click on the AIModels folder under the Resources folder. From the menu, select Create -> AIModel.

Name the AIModel MainAI. Press OK.

Now, we have to associate the MainAI with the Simulator game. Bring up the Game Editor and the Data Explorer side-by-side. In the Data Explorer, under the Games folder, double-click on the Simulator. The Simulator is now loaded in the Game Editor. Open the Main tab in the Game Editor. You will see that the User Main AI section is empty.

In Data Explorer, under the Resources -> AIModels folder, select MainAI, drag and drop it into the User Main AIs section in the Game Editor. You should see the following.

Closing Remarks For Part 2 Of This Series

In part 2, we started describing how to develop the game using the ShiVa Editor. Our main focus was creating the visual components of the application. In part 3, we will continue with adding the code and unit testing the end product.