Creating a game on Blend4Web. Scene and surroundings
Nowadays it is difficult to be a pioneer, because there are very few areas left for the inquisitive mind. “Eka bent,” you say, and perhaps think of the author’s modesty. Well, I will reject philosophical, boring texts and begin the narration in a normal language.
There is WebGL - universal technology for the web. There is Blend4Web - a platform for working with WebGL technology. There are documentation and examples of working with this platform, but there are no games at all.
"Not at all?"
"Alas, absolutely."
')
Or maybe I was looking bad? I do not know, but I want to put an end to this injustice and create the first game. The first is not for myself, because I already have three commercial games on Unity. First on this engine.
I will not particularly spread about the choice of engine. Articles on this topic have already been written, and spears in the verbal skirmish broken. I'll just start doing and talk about the progress of the work.
What do you think, how does the game start? Just do not say that with the idea. Personally, I prefer to find out the usefulness of the new project for people and for myself at a very early stage. And what do I need to get: money, experience, PR, or all at once? So you want to exclaim - just and more! But, alas, chase two (or already three?) Hares ...
Recently, I'm interested in browser games. I did mobiles, there is also a PC-variant in the piggy bank, but for the web it is somehow not yet available. Unfortunately, my main tool Unity in this can not help now. Therefore, I stopped at Blend4Web.
Here only I wish to study it on the real working project. Let it be simple, but allowing me to get such precious exp.
The main thing is experience. And experience is best achieved in openness. Therefore, the slogan of my project: "Open Source!". Yes, I will open scripts, models, scenes for free use. And I hope that return feedback will significantly increase my professionalism.
There is such a popular topic as “fish hunter”. Open Google Play and you will see hundreds of games of similar subjects. Asians even cooked up a gaming machine and children actively “quench” unfortunate fish. So I want to create another clone of this game. But not simple, but with a twist. In due time I will tell about everything. For now - to work.
Each developer has his own approach to the first stage of work. Someone makes a prototype, someone sculpts the main characters right away, and I will start with the game scene. My first task is a pretty billet, a sort of “bath” filled with water, where future hunters will greedily seek out fish. What I need to do at this stage:
And only then, I will begin to fill this scene with all sorts of scenery: from seashells to algae.
As you already understood, the main work will go in Blender. I will not touch on the issue of installing and configuring the Blend4Web SDK - this is quite simple and everything is “chewed” on the developers site. It is only important to follow some guidelines to simplify the work.
Firstly, Blender work projects must be saved in the SDK / Blender / Project Name folder.
Secondly, in the editor profile you need to replace the standard Blender Render with Blend4Web. As a result, Blender functions that are not supported by the engine will disappear.
And thirdly, JSON export should be carried out in the SDK / Deploy / Assets / Project Name folder.
One little trick. You have not forgotten that the ultimate platform is the web? For testing, you need a server, at least local. So, after installing Blend4Web and with Blender open, the server will automatically start at localhost: 6687. To speed up the work, the developers propose to set a tick in one inconspicuous option Run in Viewer when exporting. This will force the program to start the application immediately after export.
There is another nice addition - a viewer with the ability to customize the parameters of the engine directly in the browser window. Just this program starts when the Run in Viewer option is enabled. It is simply indispensable for fine-tuning materials or other components of the scene in a real WebGL. After all, Blender does not fully display all the frauds with engine settings.
The theoretical part is completed, go to practice.
According to my plans, the player must see the picture above. Camera perspective and motionless. Light source in one position. The scene can be presented in the form of puff pie:
From all this, I now need to make two points - the first and the last.
It seems, I hear exclamations: "And all ?!". Solid "Yes", because I want to do it beautifully. At the same time, let's see if it is possible at all with the help of Blend4Web.
What do you think is shown in the picture? The answer is simple - the base scene. A bold look will highlight a camera, a light source and two horizontally positioned planes. This is the future of land and water.
It looks cool, if only because it is a sign of the beginning of work. After all, it's always difficult to start. I threw a couple of primitives into the scene and you are happy - 0.00001% has already been done.
There was a time when Unity Free users licked at the quality version of the Pro version. In Unity were blanks with the characteristic names of Water (Simple) and Water (Pro). Now they are mixed and accessible to all.
Blend4Web does not initially have such a separation, and even in the free version all the functions of the platform are available. And it makes me happy, because for the project I use the free SDK. So, Blend4Web offers its own way of creating water surfaces. No need to steam with writing scripts or shaders - just adjust the material.
Look at this screenshot. Here, nothing more than a standard Blender material panel. True, it looks a bit unusual, because the profile Blend4Web, selected earlier, added new features. So, to turn on some water, you need to do the following:
By the way, there are a lot of water settings. The screenshot shows not all the parameters. The developers have fastened the possibility of creating the underwater world, coastal foam, waves and much more. Since I do not need this in my project, I refer those interested in the official certificate.
However, the water “will not play”, if you do not add texture to the material. This should be a Normal Map simulating water ripples. There are a lot of them on the Internet, you can do it yourself, but I decided not to waste time and took the texture from the example in the SDK platform.
And, interestingly, such textures can be installed as many as 4 pieces (in fact, the file should be the same). Only for each you need to change its scale (the Texture panel in the Mapping tab). I understand that it is the imposition of multi-scale textures and causes the effect of the water surface. And yes, since this is the Normal Map, then you need to disable Diffuse in the Influence parameters and enable Normal. As a result, by simple frauds you can get just such a picture (see fig.). Of course, it looks primitive, but there is animated water with refraction in Blend4Web.
Water bottom. Personally, I have an association with sand, probably because I grew up on the sea. All sorts of shells, jellyfish, mermaids - oh, something I did not go there. In general, we make a sandy bottom.
In the primitive understanding, it is a plane with two textures: sand itself and a Normal Map derivative of it. In principle, working with textures for Blend4Web is no different from standard Blender functionality. It is only important to take into account the physical location of the files, and they should be located in the SDK / Deploy / Assets / Project Name folder. Of course, you can cram them anywhere, but Blend4Web has some tools that automate and optimize the final build.
I’ll look at creating sand very briefly, because of the similar information on working with textures in Blender pond-pond:
In principle, until the work with the bottom we postpone and pay attention to the camera. If you are not just reading my lesson, but are trying to pile something, you probably already tried to export the scene. Twisted, twirled it in the viewer, with ecstasy looking at the nondescript planes. That's just the game is not supposed to. The camera should be on top and be static. Note that camera rotation is not a built-in viewer function. He only performs exactly those settings that are laid when creating the scene, and therefore we turn to the camera settings.
This is a standard camera settings panel with some intersperses from Blend4Web. Now we are interested in the Camera Move Style tab. By default there is a Target, i.e. tracking a certain point in space, but if you select the Static mode, you get a static picture. Notice that the developers have created as many as 4 camera behaviors, thus making life easier for simple igrodels.
But back to our bottom. Have you tried playing with my recipes? Refraction, transparency, waves, and yet something is missing. There is no life.
If you find some video of the seabed, you will see the characteristic light overlap. The peculiar movement of light spots really fascinates and I want the same in my game. This effect is called caustic.
In principle, Blend4Web supports caustics for underwater objects. This is achieved by adding another texture to the water, but already procedural.
Add a Voronoi texture to the new slot, twist its parameters at least as in the official certificate and you will get caustic. So, in brief, the official reference sounds. But it was not there. I struggled with this task for a long time, until I thought that a caustic should be displayed on the objects themselves, and not on the water. It turned out that caustic tuning consists of two stages:
If my article is read by the developers of Blend4Web, then I want to contact: "Guys, modify your documentation!". In my case, add at least a link from the caustic page to the page with the description of the objects.
Let's go back to the scene. It remains to slightly change the environment settings. To make the objects not too dark, you need to turn on the ambient light. This is possible in the World panel (Environment Lighting option). Note that ambient light is calculated from the current white. It does not suit me and I prefer my own shade.
I chose Sky Color from the Environment Color menu and set the desired color a little higher in the Horizon Color settings (turn on the Render Sky option). I will not give a screenshot, since this stage is the easiest. But I will brag about the end result (I advise you to see the build, the link to which is slightly lower. The “live” picture is prettier).
Not a masterpiece, but a working option. Of course, the parameters of light, water, environment will be corrected more than once, and yet, this part of the game has already been done.
I coped with the task of the first stage and laid the first brick in the foundation of the project. So far there has been no particular difficulty. Unfortunately, I have not yet had time to prepare a page with a project on my website and properly arrange the repository on bitbacket.
Assembly
Sources
And to the creators of Blend4Web, I have another request: make a quick button to export the scene in JSON. A little annoying to open the menu, select the desired options. While working on a project, it is very often necessary to export the scene for testing. Such a button will save a lot of time for the developer.
UPDATE
The new version of the engine 15.07 changed the approach to creating caustics. Now you do not need a procedural texture voronoi. In the Water panel, the Caustic area appeared. Be careful, the result of the function depends on the distance of the water surface to the objects.
There is WebGL - universal technology for the web. There is Blend4Web - a platform for working with WebGL technology. There are documentation and examples of working with this platform, but there are no games at all.
"Not at all?"
"Alas, absolutely."
')
Or maybe I was looking bad? I do not know, but I want to put an end to this injustice and create the first game. The first is not for myself, because I already have three commercial games on Unity. First on this engine.
I will not particularly spread about the choice of engine. Articles on this topic have already been written, and spears in the verbal skirmish broken. I'll just start doing and talk about the progress of the work.
What do you think, how does the game start? Just do not say that with the idea. Personally, I prefer to find out the usefulness of the new project for people and for myself at a very early stage. And what do I need to get: money, experience, PR, or all at once? So you want to exclaim - just and more! But, alas, chase two (or already three?) Hares ...
Recently, I'm interested in browser games. I did mobiles, there is also a PC-variant in the piggy bank, but for the web it is somehow not yet available. Unfortunately, my main tool Unity in this can not help now. Therefore, I stopped at Blend4Web.
Here only I wish to study it on the real working project. Let it be simple, but allowing me to get such precious exp.
The main thing is experience. And experience is best achieved in openness. Therefore, the slogan of my project: "Open Source!". Yes, I will open scripts, models, scenes for free use. And I hope that return feedback will significantly increase my professionalism.
Formulation of the problem
There is such a popular topic as “fish hunter”. Open Google Play and you will see hundreds of games of similar subjects. Asians even cooked up a gaming machine and children actively “quench” unfortunate fish. So I want to create another clone of this game. But not simple, but with a twist. In due time I will tell about everything. For now - to work.
Each developer has his own approach to the first stage of work. Someone makes a prototype, someone sculpts the main characters right away, and I will start with the game scene. My first task is a pretty billet, a sort of “bath” filled with water, where future hunters will greedily seek out fish. What I need to do at this stage:
- beautiful sandy bottom with reflections from the water;
- realistic water with refraction.
And only then, I will begin to fill this scene with all sorts of scenery: from seashells to algae.
As you already understood, the main work will go in Blender. I will not touch on the issue of installing and configuring the Blend4Web SDK - this is quite simple and everything is “chewed” on the developers site. It is only important to follow some guidelines to simplify the work.
Firstly, Blender work projects must be saved in the SDK / Blender / Project Name folder.
Secondly, in the editor profile you need to replace the standard Blender Render with Blend4Web. As a result, Blender functions that are not supported by the engine will disappear.
And thirdly, JSON export should be carried out in the SDK / Deploy / Assets / Project Name folder.
One little trick. You have not forgotten that the ultimate platform is the web? For testing, you need a server, at least local. So, after installing Blend4Web and with Blender open, the server will automatically start at localhost: 6687. To speed up the work, the developers propose to set a tick in one inconspicuous option Run in Viewer when exporting. This will force the program to start the application immediately after export.
There is another nice addition - a viewer with the ability to customize the parameters of the engine directly in the browser window. Just this program starts when the Run in Viewer option is enabled. It is simply indispensable for fine-tuning materials or other components of the scene in a real WebGL. After all, Blender does not fully display all the frauds with engine settings.
The theoretical part is completed, go to practice.
According to my plans, the player must see the picture above. Camera perspective and motionless. Light source in one position. The scene can be presented in the form of puff pie:
- Water.
- Floating creatures (fish).
- Crawling along the bottom of the creature (crabs, starfish) and scenery.
- Actually, the very bottom.
From all this, I now need to make two points - the first and the last.
It seems, I hear exclamations: "And all ?!". Solid "Yes", because I want to do it beautifully. At the same time, let's see if it is possible at all with the help of Blend4Web.
What do you think is shown in the picture? The answer is simple - the base scene. A bold look will highlight a camera, a light source and two horizontally positioned planes. This is the future of land and water.
It looks cool, if only because it is a sign of the beginning of work. After all, it's always difficult to start. I threw a couple of primitives into the scene and you are happy - 0.00001% has already been done.
There was a time when Unity Free users licked at the quality version of the Pro version. In Unity were blanks with the characteristic names of Water (Simple) and Water (Pro). Now they are mixed and accessible to all.
Blend4Web does not initially have such a separation, and even in the free version all the functions of the platform are available. And it makes me happy, because for the project I use the free SDK. So, Blend4Web offers its own way of creating water surfaces. No need to steam with writing scripts or shaders - just adjust the material.
Look at this screenshot. Here, nothing more than a standard Blender material panel. True, it looks a bit unusual, because the profile Blend4Web, selected earlier, added new features. So, to turn on some water, you need to do the following:
- Calculate the UV coordinates for the plane. In my case, this is the simplest Unwrap operation (Edit Mode: U key, select Unwrap).
- Enable transparency. Transparency panel, Show Transparency option. Type must be set to Alpha Blend.
- Enable refraction. Refractive option.
- Enable the Water option.
By the way, there are a lot of water settings. The screenshot shows not all the parameters. The developers have fastened the possibility of creating the underwater world, coastal foam, waves and much more. Since I do not need this in my project, I refer those interested in the official certificate.
However, the water “will not play”, if you do not add texture to the material. This should be a Normal Map simulating water ripples. There are a lot of them on the Internet, you can do it yourself, but I decided not to waste time and took the texture from the example in the SDK platform.
And, interestingly, such textures can be installed as many as 4 pieces (in fact, the file should be the same). Only for each you need to change its scale (the Texture panel in the Mapping tab). I understand that it is the imposition of multi-scale textures and causes the effect of the water surface. And yes, since this is the Normal Map, then you need to disable Diffuse in the Influence parameters and enable Normal. As a result, by simple frauds you can get just such a picture (see fig.). Of course, it looks primitive, but there is animated water with refraction in Blend4Web.
Water bottom. Personally, I have an association with sand, probably because I grew up on the sea. All sorts of shells, jellyfish, mermaids - oh, something I did not go there. In general, we make a sandy bottom.
In the primitive understanding, it is a plane with two textures: sand itself and a Normal Map derivative of it. In principle, working with textures for Blend4Web is no different from standard Blender functionality. It is only important to take into account the physical location of the files, and they should be located in the SDK / Deploy / Assets / Project Name folder. Of course, you can cram them anywhere, but Blend4Web has some tools that automate and optimize the final build.
I’ll look at creating sand very briefly, because of the similar information on working with textures in Blender pond-pond:
- Calculate UV-coordinates for the plane (the same operation as for water);
- Add a basic texture to the texture slot. It can be left without customization;
- Add to next texture slot second texture and set the parameters in the Influence, as for the water Normal Map.
In principle, until the work with the bottom we postpone and pay attention to the camera. If you are not just reading my lesson, but are trying to pile something, you probably already tried to export the scene. Twisted, twirled it in the viewer, with ecstasy looking at the nondescript planes. That's just the game is not supposed to. The camera should be on top and be static. Note that camera rotation is not a built-in viewer function. He only performs exactly those settings that are laid when creating the scene, and therefore we turn to the camera settings.
This is a standard camera settings panel with some intersperses from Blend4Web. Now we are interested in the Camera Move Style tab. By default there is a Target, i.e. tracking a certain point in space, but if you select the Static mode, you get a static picture. Notice that the developers have created as many as 4 camera behaviors, thus making life easier for simple igrodels.
But back to our bottom. Have you tried playing with my recipes? Refraction, transparency, waves, and yet something is missing. There is no life.
If you find some video of the seabed, you will see the characteristic light overlap. The peculiar movement of light spots really fascinates and I want the same in my game. This effect is called caustic.
In principle, Blend4Web supports caustics for underwater objects. This is achieved by adding another texture to the water, but already procedural.
Add a Voronoi texture to the new slot, twist its parameters at least as in the official certificate and you will get caustic. So, in brief, the official reference sounds. But it was not there. I struggled with this task for a long time, until I thought that a caustic should be displayed on the objects themselves, and not on the water. It turned out that caustic tuning consists of two stages:
- Adjust the procedural texture of Voronoi for water.
- The inclusion of the Caustics option is personalized for each bottom object (Object panel, Special Effects group).
If my article is read by the developers of Blend4Web, then I want to contact: "Guys, modify your documentation!". In my case, add at least a link from the caustic page to the page with the description of the objects.
Let's go back to the scene. It remains to slightly change the environment settings. To make the objects not too dark, you need to turn on the ambient light. This is possible in the World panel (Environment Lighting option). Note that ambient light is calculated from the current white. It does not suit me and I prefer my own shade.
I chose Sky Color from the Environment Color menu and set the desired color a little higher in the Horizon Color settings (turn on the Render Sky option). I will not give a screenshot, since this stage is the easiest. But I will brag about the end result (I advise you to see the build, the link to which is slightly lower. The “live” picture is prettier).
Not a masterpiece, but a working option. Of course, the parameters of light, water, environment will be corrected more than once, and yet, this part of the game has already been done.
Afterword
I coped with the task of the first stage and laid the first brick in the foundation of the project. So far there has been no particular difficulty. Unfortunately, I have not yet had time to prepare a page with a project on my website and properly arrange the repository on bitbacket.
Assembly
Sources
And to the creators of Blend4Web, I have another request: make a quick button to export the scene in JSON. A little annoying to open the menu, select the desired options. While working on a project, it is very often necessary to export the scene for testing. Such a button will save a lot of time for the developer.
UPDATE
The new version of the engine 15.07 changed the approach to creating caustics. Now you do not need a procedural texture voronoi. In the Water panel, the Caustic area appeared. Be careful, the result of the function depends on the distance of the water surface to the objects.
Source: https://habr.com/ru/post/263453/
All Articles