Character preparation for Blend4Web
The site developers engine published a lot of materials, including on this topic. All "chewed" and in Russian. But the incident - the task was not easy, even for a person who has solid experience with Blender and sincerely considers himself a game developer. Some stages caused critical attacks of “freezing”, resulting from a misunderstanding of the features of working with the engine and, frankly speaking, poor JavaScript knowledge.
An important factor was the attempt to transfer the experience of working with Unity (c #) to a completely different platform. And it was a serious mistake. Blend4Web is a tool sharpened solely for creating WebGL applications, which gives a solid advantage over the cross-platform Unity, but also imposes some limitations. In connection with the termination of support for the web player and the poor performance of the Unity WebGL exporter, the Blend4Web platform looks very interesting. Therefore, you want - you do not want, and it is necessary to understand.
This lesson is a compilation of your own experience, hints of b4w developers, official documentation. Designed, first of all, on beginners and based on my game project.
A game character, in my understanding, is an object capable of moving, “thinking” and interacting with other objects. I will leave the implementation of AI for the next article, but for now the conversation will be about basic actions.
')
Blend4Web is based on Blender, so all settings for models and scenes are performed in this editor, which favorably distinguishes b4w from other solutions.
The game level can be created in different ways:
As planned, the game has fish - evil and not very fast and slow, large and small. If they are rigidly placed at the level, then replay value will not be at the height. Much more interesting if they are generated in different places, quality and quantity. Yes, and network traffic is saved. Therefore, I definitely chose the second download option.
In addition, I’ll dwell on acting characters. For my game, I came up with an unusual gameplay with indirect control. In fact, the player helps, and does not affect the main character. And here it is important that all the characters move along predetermined trajectories, but the paths and destination points are generated randomly or depending on the tasks at hand.
It turns out that the characters need two main actions:
These requirements simplify the use and tuning of physics. Only simple colliders are needed.
So, let's say there is a ready-made gaming model and its resources are located in the appropriate SDK folders. It is desirable to fulfill this requirement, since in the latest version of the engine it was possible to automate the processes of building and debugging through the web interface. However, the requirements are simple:
Scene files (blend) should be located in the sdk \ blender \ project directory.
Resource files, as well as exported JSON from scenes, are placed in sdk \ deploy \ assets \ project .
Scripts, HTML, CSS in the folder sdk \ apps_dev \ project .
The b4w engine does not work with the original blend files, but with the JSON format. The export is done from the Blender menu: File | Export | Blend4Web (JSON) . Note that the exporter surpasses the entire Blender scene. Therefore, it is necessary to remove from it objects that are not involved in the game, for example, a high-poly original. Of course, the API allows you to select the necessary objects from the scene, but the entire file will be downloaded over the network.
The second feature is the use of modifiers. There is no need to apply them and, thereby, cut off the opportunity to correct the model. Just tick the Apply Modifiers option or even better in the Apply Scale and Modifiers option. These parameters are in the Object panel of the selected object.
It is important to give intelligible names to materials, objects, textures. Indeed, in the future, access from the code to them is performed using names. Latin, underscore and numbers are suitable. It is worth avoiding the standard automatic names for Blender, where dots are used.
The simplest way to check the model settings is to view it in the browser using a special utility. The program can be launched automatically after JSON export, if you enable the Run in Viewer option (on the left in the B4W Export JSON panel). Note that the option is available only when the project is saved in the correct sdk \ blender \ folder for the SDK.
The viewer allows you to twist, consider the model from all sides, adjust the parameters of the scene, and most importantly - signals possible problems with JSON. A small traffic light in the corner of the screen (see fig.) Warns of the “patient” state. Red and yellow - something is wrong and you should look at the logs in the browser console.
If at this stage everything is fine, then it's time to do physics. Usually, for the balance between speed and quality, not the original forms of the model are used, but its simplified variations. Moreover, such simple primitives as cube, sphere, capsule are most often taken. Personally, I stopped at a simple cube, since the game will need to calculate the collision, and not the exact physical effects.
For this, I added a new primitive Cube to the scene. Made it root (parent) in relation to the model, and also grouped everything into one whole. If you do not know how to do this - here is a step by step algorithm:
After these actions, the collider named Fish became the root (see fig. Above). It is he who will participate in physical activities, move around the scene, and the model is obtained, just a “passenger”.
So, all the physical settings are made with respect to the cube-collider. The first thing you need to do is turn off the rendering in the engine render, because you only need its form, not the view. Check the Do Not Render option in the settings as in the figure above. The second is to enable the Force Dynamic Object option. This is necessary for the performance of some of the necessary API functions. But all the other parameters are in the Physics panel.
In fact, the physics of an object in Blend4Web is very easy to activate. It is enough to set a tick in Object Physics and the model will interact with the outside world. The type of interaction is determined by the Type parameter. In the picture, Dynamic is selected and this is not accidental, because the fish model is mobile. For fixed elements of the scene, such as walls, stairs and other obstacles, you must install the type Static.
The view of the collider is selected in the Collision Bounds tab. The picture shows Box as the most appropriate shape for the parallelepiped. Of course, for your model, you can choose any of the available physical primitives.
And the last - option Charaster . By name it is clear that it activates. Yes, indeed, the developers of Blend4Web took care of the users and added quick settings for the main parameters of the character's movement: walking, jumping, running, walking, etc. Of course, this is not particularly applicable to fish, but without the inclusion of this option, some API functions will not work.
Basically, everything. You can export the scene and move on to programming.
In one of the articles I have already talked about the features of creating applications Blend4Web. Therefore, I will not repeat, but go straight to the topic of the lesson.
As you know, the Blend4Web API functions are grouped into separate modules and these modules must be declared before use:
Suppose a situation where the main scene of the game is already loaded and it is necessary to release the first fish in the “pool”. Then in the main script there will be lines:
The first thing a module should do is download a file with a model.
The function m_data.load is responsible for loading JSON files. Working with it has several subtleties, but first you need to clarify what the scene hierarchy is from the point of view of the engine.
All scenes in the application have a specific sequence number, which is assigned when downloading files. The lowest, basic level is the first loaded scene and its number is 0. All the rest will receive the next numbers 1,2,3 ... n.
The zero level is of particular importance compared to the others. All global settings, NLA logic (if used), lighting and cameras are taken from this scene. Accordingly, subsequent files are loaded into the application without global variables, and the existing cameras and light sources are ignored.
The sequence number assigned to the loaded level allows you to identify the object. For example, in different scenes there are objects with the same name Empty. By specifying the name and the number of the scene, you will get access to the desired object.
Now back to the download:
The first value that is passed to the function is the file name (“fish.json”). Moreover, it is desirable to use a constant to specify the directory. The fact is that after the final build of the project, the scattered files in the SDK folders are grouped in one place. The action takes place automatically and in order to avoid problems with lost files, this constant is needed. It is previously declared in the variable area:
The second value (fish_loaded_cb) is the name of the function that will be called after the download is complete. There are several nuances that you need to know ...
The actual file loading is asynchronous and the original load function returns control to the main thread BEFORE loading is complete. Unfortunately, in the official SDK documentation this moment is not specified, which led to the fabulous loss of my time when trying to figure out why the code does not work.
The third value (null is indicated) is the name of the function transmitting data about the boot process. Useful for creating preloaders. I don't need it now. Read about creating preloader in this article .
The fourth value (set to true) in the SDK engine is indicated as wait_complete_loading. This, in fact, confused me earlier. In fact, this parameter is only responsible for calling fish_loaded_cb. If set to true, the callback will be executed after loading all the file data. False - an early function call, after loading key objects (for example, sounds are not).
The latter value is responsible for the state of new objects added to the scene. In this case, they turn off, become invisible and do not react to physics. This allows you to place them and prepare for action.
So, the object is loaded into the scene. Now all the action goes to the function:
Here some code is already supposed to be connected with the logic of the object - this is the topic of the next article. But something I still add.
The main control of the motion of an object is concentrated in two modules of the engine: transform, physics.
Transform contains basic functions for moving, rotating, scaling objects. And it happens instantly, for a frame change. Thus, movement is possible only when using a constantly generated event. Note that the Blend4Web API offers its own event implementation.
Physics is a module that offers a large number of functions related to physics. Please note that some of them require the activation of the Charaster settings in Blender (see above). This, first of all, concerns the movement control of the character. Since the action is based on physics, there is no need to use events.
Consider a simple example of moving a character forward:
An important factor was the attempt to transfer the experience of working with Unity (c #) to a completely different platform. And it was a serious mistake. Blend4Web is a tool sharpened solely for creating WebGL applications, which gives a solid advantage over the cross-platform Unity, but also imposes some limitations. In connection with the termination of support for the web player and the poor performance of the Unity WebGL exporter, the Blend4Web platform looks very interesting. Therefore, you want - you do not want, and it is necessary to understand.
This lesson is a compilation of your own experience, hints of b4w developers, official documentation. Designed, first of all, on beginners and based on my game project.
A game character, in my understanding, is an object capable of moving, “thinking” and interacting with other objects. I will leave the implementation of AI for the next article, but for now the conversation will be about basic actions.
')
Blend4Web is based on Blender, so all settings for models and scenes are performed in this editor, which favorably distinguishes b4w from other solutions.
The game level can be created in different ways:
- Static All models, objects are pre-arranged on the base scene. It uses the standard Blender functions to connect objects from third-party blend files (Link). Thus, the entire level is completely loaded into memory, and the developer has the ability to access objects using the Blend4Web API. This is an easy way, but it has a drawback - a long download, which is critical for browser games.
- Dynamic. There is a main scene, and all the necessary objects are independent files and are loaded using the Blend4Web API.
As planned, the game has fish - evil and not very fast and slow, large and small. If they are rigidly placed at the level, then replay value will not be at the height. Much more interesting if they are generated in different places, quality and quantity. Yes, and network traffic is saved. Therefore, I definitely chose the second download option.
In addition, I’ll dwell on acting characters. For my game, I came up with an unusual gameplay with indirect control. In fact, the player helps, and does not affect the main character. And here it is important that all the characters move along predetermined trajectories, but the paths and destination points are generated randomly or depending on the tasks at hand.
It turns out that the characters need two main actions:
- Follow the route.
- Deviate from the trajectory to perform the task or when meeting with another object.
These requirements simplify the use and tuning of physics. Only simple colliders are needed.
Step 1. Setting up the model in Blender
So, let's say there is a ready-made gaming model and its resources are located in the appropriate SDK folders. It is desirable to fulfill this requirement, since in the latest version of the engine it was possible to automate the processes of building and debugging through the web interface. However, the requirements are simple:
Scene files (blend) should be located in the sdk \ blender \ project directory.
Resource files, as well as exported JSON from scenes, are placed in sdk \ deploy \ assets \ project .
Scripts, HTML, CSS in the folder sdk \ apps_dev \ project .
The b4w engine does not work with the original blend files, but with the JSON format. The export is done from the Blender menu: File | Export | Blend4Web (JSON) . Note that the exporter surpasses the entire Blender scene. Therefore, it is necessary to remove from it objects that are not involved in the game, for example, a high-poly original. Of course, the API allows you to select the necessary objects from the scene, but the entire file will be downloaded over the network.
The second feature is the use of modifiers. There is no need to apply them and, thereby, cut off the opportunity to correct the model. Just tick the Apply Modifiers option or even better in the Apply Scale and Modifiers option. These parameters are in the Object panel of the selected object.
It is important to give intelligible names to materials, objects, textures. Indeed, in the future, access from the code to them is performed using names. Latin, underscore and numbers are suitable. It is worth avoiding the standard automatic names for Blender, where dots are used.
The simplest way to check the model settings is to view it in the browser using a special utility. The program can be launched automatically after JSON export, if you enable the Run in Viewer option (on the left in the B4W Export JSON panel). Note that the option is available only when the project is saved in the correct sdk \ blender \ folder for the SDK.
The viewer allows you to twist, consider the model from all sides, adjust the parameters of the scene, and most importantly - signals possible problems with JSON. A small traffic light in the corner of the screen (see fig.) Warns of the “patient” state. Red and yellow - something is wrong and you should look at the logs in the browser console.
If at this stage everything is fine, then it's time to do physics. Usually, for the balance between speed and quality, not the original forms of the model are used, but its simplified variations. Moreover, such simple primitives as cube, sphere, capsule are most often taken. Personally, I stopped at a simple cube, since the game will need to calculate the collision, and not the exact physical effects.
For this, I added a new primitive Cube to the scene. Made it root (parent) in relation to the model, and also grouped everything into one whole. If you do not know how to do this - here is a step by step algorithm:
- Select model, then collider. Press CTRL + P and select Object in the menu that appears.
- To group the selected objects, press CTRL + G.
After these actions, the collider named Fish became the root (see fig. Above). It is he who will participate in physical activities, move around the scene, and the model is obtained, just a “passenger”.
So, all the physical settings are made with respect to the cube-collider. The first thing you need to do is turn off the rendering in the engine render, because you only need its form, not the view. Check the Do Not Render option in the settings as in the figure above. The second is to enable the Force Dynamic Object option. This is necessary for the performance of some of the necessary API functions. But all the other parameters are in the Physics panel.
In fact, the physics of an object in Blend4Web is very easy to activate. It is enough to set a tick in Object Physics and the model will interact with the outside world. The type of interaction is determined by the Type parameter. In the picture, Dynamic is selected and this is not accidental, because the fish model is mobile. For fixed elements of the scene, such as walls, stairs and other obstacles, you must install the type Static.
The view of the collider is selected in the Collision Bounds tab. The picture shows Box as the most appropriate shape for the parallelepiped. Of course, for your model, you can choose any of the available physical primitives.
And the last - option Charaster . By name it is clear that it activates. Yes, indeed, the developers of Blend4Web took care of the users and added quick settings for the main parameters of the character's movement: walking, jumping, running, walking, etc. Of course, this is not particularly applicable to fish, but without the inclusion of this option, some API functions will not work.
Basically, everything. You can export the scene and move on to programming.
Step 2. Program code.
In one of the articles I have already talked about the features of creating applications Blend4Web. Therefore, I will not repeat, but go straight to the topic of the lesson.
As you know, the Blend4Web API functions are grouped into separate modules and these modules must be declared before use:
// , AI b4w.register("game_fish", function(exports, require) { // var m_scenes = b4w.require("scenes"); var m_cfg = b4w.require("config"); var m_data = b4w.require("data"); var m_trans = b4w.require ("transform"); var m_phy = b4w.require ("physics"); var m_obj = b4w.require ("objects"); … var APP_ASSETS_PATH = m_cfg.get_std_assets_path() + "waterhunter/"; exports.new_fishes = function() { //- } } Suppose a situation where the main scene of the game is already loaded and it is necessary to release the first fish in the “pool”. Then in the main script there will be lines:
// AI var m_fish = b4w.require("game_fish"); … // m_fish.new_fishes(); The first thing a module should do is download a file with a model.
exports.new_fishes = function() { //- m_data.load(APP_ASSETS_PATH +”fish.json”, fish_loaded_cb,null,true,true); } The function m_data.load is responsible for loading JSON files. Working with it has several subtleties, but first you need to clarify what the scene hierarchy is from the point of view of the engine.
All scenes in the application have a specific sequence number, which is assigned when downloading files. The lowest, basic level is the first loaded scene and its number is 0. All the rest will receive the next numbers 1,2,3 ... n.
The zero level is of particular importance compared to the others. All global settings, NLA logic (if used), lighting and cameras are taken from this scene. Accordingly, subsequent files are loaded into the application without global variables, and the existing cameras and light sources are ignored.
The sequence number assigned to the loaded level allows you to identify the object. For example, in different scenes there are objects with the same name Empty. By specifying the name and the number of the scene, you will get access to the desired object.
Now back to the download:
m_data.load(APP_ASSETS_PATH +”fish.json”, fish_loaded_cb,null,true,true); The first value that is passed to the function is the file name (“fish.json”). Moreover, it is desirable to use a constant to specify the directory. The fact is that after the final build of the project, the scattered files in the SDK folders are grouped in one place. The action takes place automatically and in order to avoid problems with lost files, this constant is needed. It is previously declared in the variable area:
var APP_ASSETS_PATH = m_cfg.get_std_assets_path() + "waterhunter/"; The second value (fish_loaded_cb) is the name of the function that will be called after the download is complete. There are several nuances that you need to know ...
The actual file loading is asynchronous and the original load function returns control to the main thread BEFORE loading is complete. Unfortunately, in the official SDK documentation this moment is not specified, which led to the fabulous loss of my time when trying to figure out why the code does not work.
The third value (null is indicated) is the name of the function transmitting data about the boot process. Useful for creating preloaders. I don't need it now. Read about creating preloader in this article .
The fourth value (set to true) in the SDK engine is indicated as wait_complete_loading. This, in fact, confused me earlier. In fact, this parameter is only responsible for calling fish_loaded_cb. If set to true, the callback will be executed after loading all the file data. False - an early function call, after loading key objects (for example, sounds are not).
The latter value is responsible for the state of new objects added to the scene. In this case, they turn off, become invisible and do not react to physics. This allows you to place them and prepare for action.
So, the object is loaded into the scene. Now all the action goes to the function:
function fish_loaded_cb (data_id) { //data_id - //- } Here some code is already supposed to be connected with the logic of the object - this is the topic of the next article. But something I still add.
The main control of the motion of an object is concentrated in two modules of the engine: transform, physics.
Transform contains basic functions for moving, rotating, scaling objects. And it happens instantly, for a frame change. Thus, movement is possible only when using a constantly generated event. Note that the Blend4Web API offers its own event implementation.
Physics is a module that offers a large number of functions related to physics. Please note that some of them require the activation of the Charaster settings in Blender (see above). This, first of all, concerns the movement control of the character. Since the action is based on physics, there is no need to use events.
Consider a simple example of moving a character forward:
function fish_loaded_cb (data_id) { // data_id var obj_fish = m_scenes.get_object_by_name ("fish", data_id); // m_phy.set_character_move_dir(obj_fish,1, 0); } Source: https://habr.com/ru/post/268937/
All Articles