Blog

Making a Game. Part 7: Enriching the Game World

2015-01-23

We continue our gamedev series about the adventures of Pyatigor! (Yes, this is how we decided to name our protagonist.) In this article, we'll explain how to create environment FX and other details which make the game world more diverse and dynamic.

Overall view of the game scene.

Environment FX

By running the game or just viewing the screenshot above, you can see new elements in the scene. Let's take a look at them one by one:

  • heat haze, that is optical distortion due to differences in air temperature,
  • smoking near the perimeter of the level,
  • lava flaming,
  • small rocks floating in lava,
  • smoking in the sky.

First of all, let's talk about heat haze, smoking and lava flaming. All these effects were created using dynamically updated materials.

Preparing the geometry for effects.

For the heat haze material, a solid encircling geometry in the form of a cylinder (1) was created around the islands. As a result, all objects behind this geometry will be distorted when viewing from the center.

For the smoking material, geometry around the islands was created as well, but with spaces (2).

Lava flaming geometry (3) is situated in places where other objects make contact with lava.

Heat Haze

This effect is based on the refraction effect coupled with UV animation of a normal map. Let's take a look at the material.

Heat haze material.

The normal map (1) is at the heart of this material and is used with different scaling twice. Thanks to a Time Blend4Web-specific node, which is being added to one of the UV channels (2), this texture glides through the material creating an illusion of rising heated air.

The normal map is passed to a Refraction node (3), which is yet another Blend4Web-specific node. Also, a mask is generated (4) to be passed into this Refraction node in order to specify in which places distortions will be observed, and in which places will not.

The Levels Of Quality nodes (5) situated before the final color and alpha, cause this material to disappear at low quality settings, where the refraction effect is not available.

Results of using a Refraction node with a mask.

See the above picture to see how it works. On the left the original red sphere is shown ("clean"), then the mask is pictured ("mask"), more to the right the normal map is shown ("normal") which glides through the UV. This will result in visible distortions ("refraction") of the sphere when observing it through the material.

Smoking Material

The material for smoking effect is made similar to the heat haze.

Smoking material.

It is based on the tile texture resembling smoke (1), which is passed to the alpha channel of the material. It moves along the UV coordinates under the influence of the Time node (2) and is combined with the vertex color with a different scale (3 and 4). This vertex color fades the material out on the edges of the geometry.

Alpha mask for the smoking material.

In the above picture you can see how it works. In this case, black color corresponds to fully transparent areas.

Lava Flaming

Lava flaming.

Lava flames are located near bunches of stones. Their geometry is constructed of groups of spreaded polygons, which are painted with a black and white vertex color mask, darker to the top.

Lava flaming material.

Again, this material uses the same UV animation principle. Moreover, it uses the same tile smoke texture (1). With a Time node it is being shifted through the UV in three different directions (2). The resulting color obtained from this shifting is combined with the vertex color, and then all this is used to generate the alpha mask (3). In addition, this texture is mixed a bit differently, painted with fire-like colors (4) and passed into the diffuse channel of the output.

Floating Stones

In order to add further details, I have also added small stones floating in lava.

Series of models for floating stones.

While the source .blend file only keeps five different stones, I managed to make seven variations by adding or excluding different stones from the groups. For optimization purposes, I re-used the island material for these stones.

If you launch the game, you may notice that these stones are slightly rocking. This effect was achieved using procedural vertex animation, namely Wind Bending, which is normally used for grass, bushes and so on. This animation can be enabled for objects under the Blend4Web panel.

Setting up wind bending.

In this particular case I only needed to tweak two parameters: Angle for max object inclination and Frequency, which is how fast the bending will happen.

Note

The wind bending effect is a simple and resource-conserving way to deform geometry compared with animation of any other types. Its settings are described in detail in the user manual.

Smoking in the Sky

New sky material.

If you stare at the sky, you may notice that it is now much more diverse because of smoking. I did that with dynamically updated material.

Sky material nodes.

Once again, I re-used the smoke texture (1) and made it shifting with a Time node (2). The important distinction from the above mentioned materials is that the texture is moving not through the UV coordinates but through global coordinates. The only thing left was to paint this texture with the right colors (3). It is also worth it to note the Levels Of Quality node which switches the material to a primitive two-color gradient at the low quality mode.

Note

The Levels Of Quality node allows to create parallel settings inside a single material for rendering at different quality modes.

Game screenshot depicting new FX.

Now the scene looks much more lively and detailed. However, the most interesting things are still ahead: I mean the gameplay elements for the player to interact with and for which this small virtual space was created. But about that you'll find in one of the following articles, don't miss it!

Launch the game!

The source files are included in the Blend4Web SDK.

Please leave your comments in this forum thread.

Changelog

[2015-01-23] Initial release.

Comments
20 oct. 2024 11:27
Thank you very much, from this sharing of yours I can understand more about the formation process of the game fnaf, this is definitely one of the great shares and not everyone is willing to tell you.
14 nov. 2024 19:05
ในยุคดิจิทัลที่เต็มไปด้วยความสะดวกสบาย การดู ซีรี่ย์เกาหลี ออนไลน์ได้กลายเป็นกิจกรรมที่คนรักกันทั่วโลก ไม่เพียงแค่เพื่อความบันเทิงเท่านั้น แต่ยังสามารถสร้างแรงบันดาลใจและจุดประกายความคิดสร้างสรรค์ได้อย่างไม่น่าเชื่อ การเลือกซีรี่ย์ที่สามารถให้ทั้งความสุขและความคิดสร้างสรรค์สามารถช่วยเสริมพลังให้กับชีวิตทั้งในแง่ของอารมณ์และความคิดเชิงบวก
การเลือกดูซีรี่ย์ที่มีเนื้อหาน่าสนใจและเป็นมิตรสามารถช่วยให้คุณผ่อนคลายหลังจากวันทำงานที่หนักหน่วง ซีรี่ย์ที่เต็มไปด้วยความอบอุ่นในครอบครัวหรือความสนุกสนานในแง่มุมต่างๆ ช่วยให้คุณรู้สึกมีความสุขและเติมพลังให้กับตัวเองได้ ซีรี่ย์ที่มีเนื้อหาผ่อนคลายเช่น โรแมนติกคอมเมดี้ หรือ ชีวิตและความรัก จะช่วยลดความเครียดและเพิ่มความสุขในชีวิตประจำวัน
บางครั้งการดูซีรี่ย์ไม่เพียงแค่ช่วยให้เราหลีกหนีจากความเครียด แต่ยังช่วยเปิดมุมมองใหม่ๆ และจุดประกายไอเดียสร้างสรรค์ ซีรี่ย์ที่มีเนื้อหาลึกซึ้ง หรือแสดงให้เห็นถึงความท้าทายในชีวิต สามารถสร้างแรงบันดาลใจให้กับผู้ชมในการแก้ปัญหาหรือการคิดนอกกรอบ ตัวละครในเรื่องที่มีความคิดสร้างสรรค์ หรือการเล่าเรื่องที่แหวกแนวอาจช่วยกระตุ้นความคิดและพัฒนาทักษะการคิดเชิงสร้างสรรค์ได้
การได้เห็นการเติบโตของตัวละครในซีรี่ย์จะช่วยเสริมสร้างมุมมองใหม่ๆ เช่น การแก้ไขปัญหาชีวิต การเผชิญกับอุปสรรคต่างๆ และการพัฒนาความสัมพันธ์กับผู้อื่น โดยเฉพาะซีรี่ย์ที่เน้นเรื่องการพัฒนาตนเองและการเผชิญหน้ากับความท้าทาย เป็นการเรียนรู้ที่สามารถนำมาประยุกต์ใช้ในชีวิตจริงได้อย่างมีประสิทธิภาพ
การดูซีรี่ย์ออนไลน์สามารถเป็นแรงบันดาลใจในการสร้างงานศิลปะหรือเนื้อหาต่างๆ บางคนอาจได้รับไอเดียสำหรับการเขียนเรื่องราวใหม่ๆ หรือการสร้างสรรค์ผลงานในสาขาต่างๆ จากเรื่องราวที่ดู ซีรี่ย์บางเรื่องอาจมีความคิดที่ล้ำหน้า และทำให้คุณสามารถต่อยอดความคิดไปสู่การพัฒนาโปรเจกต์ใหม่ๆ หรือแม้แต่การทดลองไอเดียที่ไม่เคยคิดมาก่อน
การดูซีรี่ย์ออนไลน์ไม่ได้เป็นเพียงแค่กิจกรรมผ่อนคลายเท่านั้น แต่ยังเป็นแหล่งที่ช่วยกระตุ้นความคิดสร้างสรรค์และเสริมสร้างความสุขในชีวิตประจำวัน ซีรี่ย์ที่มีเนื้อหาหลากหลายและหลากหลายอารมณ์สามารถเป็นเครื่องมือที่ช่วยให้เรามองเห็นโลกในมุมมองที่แตกต่าง และจุดประกายไอเดียใหม่ๆ ที่สามารถนำไปประยุกต์ใช้ในชีวิตจริงได้อย่างมีประสิทธิภาพ
Please register or log in to leave a reply.