Jump to content

  • Log In with Google      Sign In   
  • Create Account

Interested in a FREE copy of HTML5 game maker Construct 2?

We'll be giving away three Personal Edition licences in next Tuesday's GDNet Direct email newsletter!

Sign up from the right-hand sidebar on our homepage and read Tuesday's newsletter for details!


We're also offering banner ads on our site from just $5! 1. Details HERE. 2. GDNet+ Subscriptions HERE. 3. Ad upload HERE.


Like
9Likes
Dislike

Making a Game with Blend4Web Part 3: Level Design

By Mikhail Luzyanin | Published Sep 21 2014 11:46 PM in APIs and Tools
Peer Reviewed by (Vilem Otte, Aardvajk, jbadams)

Blend4Web Game Blender 3D Modeling

This is the third article in the Making a Game series. In this article we'll consider assembling the game scene using the models prepared at the previous stage, setting up the lighting and the environment, and also we'll look in detail at creating the lava effect.

Assembling the game scene


Let's assemble the scene's visual content in the main_scene.blend file. We'll add the previously prepared environment elements from the env_stuff.blend file.

Open the env_stuff.blend file via the File -> Link menu, go to the Group section, add the geometry of the central islands (1) and the background rocks (2) and arrange them on the scene.


ex02_p03_img02.jpg?v=2014080111562320140


Now we need to create the surface geometry of the future lava. The surface can be inflated a bit to deepen the effect of the horizon receding into the distance. Lets prepare 5 holes copying the outline of the 5 central islands in the center for the vertex mask which we'll introduce later.

We'll also copy this geometry and assign the collision material to it as it is described in the previous article.


ex02_p03_img03.jpg?v=2014080111562320140


A simple cube will serve us as the environment with its center located at the horizon level for convenience. The cube's normals must be directed inside.

Lets set up a simple node material for it. Get a vertical gradient (1) located on the level of the proposed horizon from the Global socket. After some squeezing and shifting it with the Squeeze Value node (2) we add the color (3). The result is passed directly into the Output node without the use of an intermediate Material node in order to make this object shadeless.


ex02_p03_img04.jpg?v=2014080111562320140


Setting up the environment


We'll set up the fog under the World tab using the Fog density and Fog color parameters. Let's enable ambient lighting with the Environment Lighting option and setup its intensity (Energy). We'll select the two-color hemispheric lighting model Sky Color and tweak the Zenith Color and Horizon Color.


ex02_p03_img05.jpg?v=2014080111562320140


Next place two light sources into the scene. The first one of the Sun type will illuminate the scene from above. Enable the Generate Shadows checkbox for it to be a shadow caster. We'll put the second light source (also Sun) below and direct it vertically upward. This source will imitate the lighting from lava.


ex02_p03_img06.jpg?v=2014080111562320140


Then add a camera for viewing the exported scene. Make sure that the camera's Move style is Target (look at the camera settings on the Blend4Web panel), i.e. the camera is rotating around a certain pivot. Let's define the position of this pivot on the same panel (Target location).

Also, distance and vertical angle limits can be assigned to the camera for convenient scene observation in the Camera limits section.


ex02_p03_img07.jpg?v=2014080111562320140


Adding the scene to the scene viewer


At this stage a test export of the scene can be performed: File -> Export -> Blend4Web (.json). Let's add the exported scene to the list of the scene viewer external/deploy/assets/assets.json using any text editor, for example:

    {
        "name": "Tutorials",
        "items":[

            ...

            {
                "name": "Game Example",
                "load_file": "../tutorials/examples/example2/main_scene.json"
            },

            ...
        ]
   }   

Then we can open the scene viewer apps_dev/viewer/viewer_dev.html with a browser, go to the Scenes panel and select the scene which is added to the Tutorials category.


ex02_p03_img08.jpg?v=2014080111562320140


The tools of the scene viewer are useful for tweaking scene parameters in real time.

Setting up the lava material


We'll prepare two textures by hand for the lava material, one is a repeating seamless diffuse texture and another will be a black and white texture which we'll use as a mask. To reduce video memory consumption the mask is packed into the alpha channel of the diffuse texture.


ex02_p03_img09.jpg?v=2014080111562320140


The material consists of several blocks. The first block (1) constantly shifts the UV coordinates for the black and white mask using the TIME (2) node in order to imitate the lava flow movement.


ex02_p03_img10.jpg?v=2014080111562320140


Note:  
The TIME node is basically a node group with a reserved name. This group is replaced by the time-generating algorithm in the Blend4Web engine. To add this node it's enough to create a node group named TIME which has an output of the Value type. It can be left empty or can have for example a Value node for convenient testing right in Blender's viewport.


In the other two blocks (4 and 5) the modified mask stretches and squeezes the UV in certain places, creating a swirling flow effect for the lava. The results are mixed together in block 6 to imitate the lava flow.

Furthermore, the lava geometry has a vertex mask (3), using which a clean color (7) is added in the end to visualize the lava's burning hot spots.


ex02_p03_img11.jpg?v=2014080111562320140


To simulate the lava glow the black and white mask (8) is passed to the Emit socket. The mask itself is derived from the modified lava texture and from a special procedural mask (9), which reduces the glow effect with distance.

Conclusion


This is where the assembling of the game scene is finished. The result can be exported and viewed in the engine. In one of the upcoming articles we'll show the process of modeling and texturing the visual content for the character and preparing it for the Blend4Web engine.


ex02_p03_img12.jpg?v=2014080111562320140



Link to the standalone application

The source files of the application and the scene are part of the free Blend4Web SDK distribution.



About the Author(s)


Mikhail Luzyanin is a 3D artist in Blend4Web dev team.

License


GDOL (Gamedev.net Open License)




Comments

Very interesting read... I really like this series of articles so far!

This series of articles has been really good. Not to mention the basic concepts behind them so far can easily be applied not only to Blender, but also Unity and other 3D engines. 

There's something about this article that makes me think of pizza... :)


Note: Please offer only positive, constructive comments - we are looking to promote a positive atmosphere where collaboration is valued above all else.




PARTNERS