This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
Curious about 3D game development? Now is the time to learn! This five-part tutorial series will demonstrate how to build a simple game with ShiVa3D Suite, a cross-platform 3D game engine and authoring tool. In this second installment, you will learn how to use the ShiVa Editor and Collada model files.
Using the ShiVa Editor
In part 1 of this tutorial, we introduced the tutorial application, discussed various ShiVa3D concepts and the main tools in the ShiVa3D suite. We also explained the files in the download archive accompanying this tutorial. In part 2, we will start discussing how to develop the game using the ShiVa Editor. We will introduce the ShiVa Editor modules used in developing the tutorial application. Then, we will talk about the Collada model files representing the main characters in the application. Finally, we will discuss some initial steps used to create the application, such as creating the game and the scene as well as importing the Collada models.
ShiVa Editor Modules
First, let's give a quick introduction to the various modules in the ShiVa Editor. We have borrowed 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 developer edit the game resource. For example, with game editor 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.
Attributes Editor is used to edit various attributes of an object. Those attributes include the translation, rotation and scale of the object as well as attributes grouped under headlines such as visibility, light, sensor, collision etc.
Material Editor is a WYSIWYG editor to create and edit materials in the game.
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 AIModel editor, you can define variables, functions, states and handlers for an AIModel.
Script Editor is used to edit scripts of an AIModel.
Obtain Necessary Game Files
First, you need the following four files, which are part of the downloads accompanying the tutorial.
- duck.dae, duckCM.tga: Those files represent the Collada model of the duck. You can also download those from their original source. On the home page of the site, click the Model Bank link and then either log in or opt for anonymous access by clicking on the link that says 'Click here for anonymous access'. Then, go to Public Section -> COLLADA 1.4.1 Basic Samples -> Duck. Download duck.dae and duckCM.tga. (For information on Collada graphics format, the related Wikipedia entry is a good starting point.)
- sphere.dae: This file represents the Collada model of the egg. You can download it from the Model Bank of its original location, similar to above, following the Public Section -> COLLADA 1.4.1 Basic Samples -> Sphere. (As the name implies this is actually a sphere. We will explain later how to play with its dimensions to make it an egg.)
- marble.jpg: This file represents the background 'skybox' image. It is a section of a larger file, 1213316117-7.jpg, downloaded from http://www.texturewarehouse.com.
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:\temp\Duck.)
Press Close. In Data Explorer, you should now see a top level folder named Duck. Select the Games folder, and from the right-click menu select Create -> Game. Name the game Duck as well.
The game must be visible in Data Explorer when you select the Games folder, as shown below.
In Data Explorer, scroll down to select the Scenes folder. From the right-click menu, select Create -> Scene. Name it MyScene.
You should see the newly created scene in the Data Explorer when the Scenes folder is selected, as shown below.
Import and Configure Models
We will now import the models for the duck and the egg. For convenience, we placed all three files, duck.dae, sphere.dae and duckCM.tga, in the same folder, D:\temp\collada_models. In your environment, if you place those files in a different location be sure to substitute the instructions below accordingly.
In Data Explorer, select Import -> Model, as shown below.
In the dialog box, File to import text field, choose the full path to duck.dae. Do not change anything in the dialog. Press Import (see below).
After the import is completed, you should see the Import succeeded message as shown below. Press OK to dismiss the dialog.
Repeat the import for the egg, sphere.dae. The dialog for importing sphere.dae is shown below.
Now, you should see the duck and sphere in the list of models when the Models folder is selected in Data Explorer. This is shown below.
Next, we will place those models in our scene. Bring up the Game Editor and the Data Explorer. In the Data Explorer, double-click Duck under the Games folder. The game will be loaded in the Game Editor. In the Game Editor, select the Scenes tab. In the Data Explorer, select the Scenes folder and drag and drop MyScene into the Scenes tab in the Game Editor (see below).
Bring up the Scene Viewer and Data Explorer side by side. In the Data Explorer, select the Scenes folder and double-click MyScene. In the Data Explorer, select the Models folder. Drag and drop the duck from the Models folder into the Scene Viewer. Similarly, drag and drop the sphere from the Models folder into the Scene Viewer.
Now, MyScene has both models in it. However, we need to adjust the location and size of those models. Also, we will add collision sensors to the duck and the egg. Bring up the Attributes Editor and Scene Explorer side by side. In Data Explorer, double-click on MyScene. In the Scene Explorer, Objects tab you should see DefaultCamera, duck and sphere. Select DefaultCamera in Scene Explorer. In the Common Attributes section of the Attributes Editor, set the Translation values to 6, 7 and 5 for the X, Y and Z Axis, respectively. (See below.)
Now, select the duck in the Scene Explorer. In the Common Attributes section of the Attributes Editor, set the Translation values to 2, 3 and 2 for the X, Y and Z Axis, respectively. Also, set Scale values to 0.01, 0.01 and 0.01 for all three axes, as shown below.
Next, in the Scene Explorer, select the duck and from right-click menu, Attributes -> Sensor -> Add a sphere sensor as shown below.
On the Scene Explorer, select the Sensor Attributes section. Define offset values to be 0, 55, 0 and Size = 75. This is shown below.
Select the sphere in the Scene Explorer. In the Common Attributes section of the Attributes Editor, set the Translation values to 0, 3 and 0 for the X, Y and Z Axis, respectively. Also, set Scale values to 0.4, 0.4 and 0.5 as shown below. (We skew the z-scale a bit, to give an egg shape to the spherical model.)
Now, in the Scene Explorer, select the sphere and from the right-click menu, Attributes -> Sensor -> Add a sphere sensor. On the Scene Explorer, select the Sensor Attributes section. Define offset values to be 0, 0, 0 and Size = 1.1.
Edit Materials For the Duck And Egg
We will now edit the materials for the duck and egg. Bring the Material Editor and Data Explorer up side by side and select the Materials folder in the Data Explorer. Double-click on the material with file name duck_blinn3, as shown below.
In the Material Editor, Lighting section, check Receive Static Lighting, Per Vertex. Under Shadowing, check Cast Static Shadows. Adjust Ambient color so that it becomes pure white. This is shown below.
In lighting, also adjust Diffuse to be completely black and set Shininess to 0.22.
In Advanced Effects section, set Intensity: 120.
In a similar way, edit the material called sphere_lambert1 in the Materials Editor. In the Lighting section, check Receive Static Lighting, Per Vertex. Under Shadowing, check Cast Static Shadows. Adjust Ambient color so that it becomes pure white.
Adjust Diffuse to be completely black and make sure to set Shininess to 0.5, as shown below.
Finally, in Advanced Effects section, set the Intensity to 120.
Closing Remarks for Part 2
In part 2, we started describing how to develop the game using ShiVa Editor. We introduced the ShiVa Editor modules used in developing the tutorial application. Then, we talked about the Collada model files representing the main characters in the application. We also discussed some initial steps to create the application, such as creating the game and the scene as well as importing the Collada models. In part 3, we will show how to edit the scene of our application. We will also start entering the code for the AIModels of the game. In particular, we will enter the code for the DuckAI.