Making a Game with Blend4Web Part 1: The Character

Today we're going to start creating a fully-functional game app with Blend4Web.

Gameplay

Let's set up the gameplay. The player - a brave warrior - moves around a limited number of platforms. Melting hot stones keep falling on him from the sky; the stones should be avoided. Their number increases with time. Different bonuses which give various advantages appear on the location from time to time. The player's goal is to stay alive as long as possible. Later we'll add some other interesting features but for now we'll stick to these. This small game will have a third-person view.
In the future, the game will support mobile devices and a score system. And now we'll create the app, load the scene and add the keyboard controls for the animated character. Let's begin!

Setting up the scene

Game scenes are created in Blender and then are exported and loaded into applications. Let's use the files made by our artist which are located in the blend/ directory. The creation of these resources will be described in a separate article.
Let's open the character_model.blend file and set up the character. We'll do this as follows: switch to the Blender Game mode and select the character_collider object - the character's physical object.

Under the Physics tab we'll specify the settings as pictured above. Note that the physics type must be either Dynamic or Rigid Body, otherwise the character will be motionless.
The character_collider object is the parent for the "graphical" character model, which, therefore, will follow the invisible physical model. Note that the lower point heights of the capsule and the avatar differ a bit. It was done to compensate for the Step height parameter, which lifts the character above the surface in order to pass small obstacles.
Now lets open the main game_example.blend file, from which we'll export the scene.

The following components are linked to this file:

The character group of objects (from the character_model.blend file).

The environment group of objects (from the main_scene.blend file) - this group contains the static scene models and also their copies with the collision materials.

The baked animations character_idle_01_B4W_BAKED and character_run_B4W_BAKED (from the character_animation.blend file).

NOTE:
To link components from another file go to File -> Link and select the file. Then go to the corresponding datablock and select the components you wish. You can link anything you want - from a single animation to a whole scene.

Make sure that the Enable physics checkbox is turned on in the scene settings.
The scene is ready, lets move on to programming.

Preparing the necessary files

Let's place the following files into the project's root:

The engine b4w.min.js

The addon for the engine app.js

The physics engine uranium.js

The files we'll be working with are: game_example.html and game_example.js.
Let's link all the necessary scripts to the HTML file:

Moving the character

Let's add the following code into the loading callback:
function load_cb(root) {
_character = m_scs.get_first_character();
_character_body = m_scs.get_object_by_empty_name("character",
"character_body");
setup_movement();
setup_rotation();
setup_jumping();
m_anim.apply(_character_body, "character_idle_01");
m_anim.play(_character_body);
m_anim.set_behavior(_character_body, m_anim.AB_CYCLIC);
}
First we save the physical character model to the _character variable. The animated model is saved as _character_body.
The last three lines are responsible for setting up the character's starting animation.

NOTE:
Please note that skeletal animation should be applied to the character object which has an Armature modifier set up in Blender for it.

Before defining the setup_movement(), setup_rotation() and setup_jumping() functions its important to understand how the Blend4Web's event-driven model works. We recommend reading the corresponding section of the user manual. Here we will only take a glimpse of it.
In order to generate an event when certain conditions are met, a sensor manifold should be created.

Next we have to define the logic function, describing in what state (true or false) the certain sensors of the manifold should be in, in order for the sensor callback to receive a positive result. Then we should create a callback, in which the performed actions will be present. And finally the controls.create_sensor_manifold() function should be called for the sensor manifold, which is responsible for processing the sensors' values. Let's see how this will work in our case.
Define the setup_movement() function:
function setup_movement() {
var key_w = m_ctl.create_keyboard_sensor(m_ctl.KEY_W);
var key_s = m_ctl.create_keyboard_sensor(m_ctl.KEY_S);
var key_up = m_ctl.create_keyboard_sensor(m_ctl.KEY_UP);
var key_down = m_ctl.create_keyboard_sensor(m_ctl.KEY_DOWN);
var move_array = [
key_w, key_up,
key_s, key_down
];
var forward_logic = function(s){return (s[0] || s[1])};
var backward_logic = function(s){return (s[2] || s[3])};
function move_cb(obj, id, pulse) {
if (pulse == 1) {
switch(id) {
case "FORWARD":
var move_dir = 1;
m_anim.apply(_character_body, "character_run");
break;
case "BACKWARD":
var move_dir = -1;
m_anim.apply(_character_body, "character_run");
break;
}
} else {
var move_dir = 0;
m_anim.apply(_character_body, "character_idle_01");
}
m_phy.set_character_move_dir(obj, move_dir, 0);
m_anim.play(_character_body);
m_anim.set_behavior(_character_body, m_anim.AB_CYCLIC);
};
m_ctl.create_sensor_manifold(_character, "FORWARD", m_ctl.CT_TRIGGER,
move_array, forward_logic, move_cb);
m_ctl.create_sensor_manifold(_character, "BACKWARD", m_ctl.CT_TRIGGER,
move_array, backward_logic, move_cb);
}
Let's create 4 keyboard sensors - for arrow forward, arrow backward, S and W keys. We could have done with two but we want to mirror the controls on the symbol keys as well as on arrow keys. We'll append them to the move_array.
Now to define the logic functions. We want the movement to occur upon pressing one of two keys in move_array.
This behavior is implemented through the following logic function:
function(s) { return (s[0] || s[1]) }
The most important things happen in the move_cb() function.
Here obj is our character. The pulse argument becomes 1 when any of the defined keys is pressed. We decide if the character is moved forward (move_dir = 1) or backward (move_dir = -1) based on id, which corresponds to one of the sensor manifolds defined below. Also the run and idle animations are switched inside the same blocks.
Moving the character is done through the following call:
m_phy.set_character_move_dir(obj, move_dir, 0);
Two sensor manifolds for moving forward and backward are created in the end of the setup_movement() function. They have the CT_TRIGGER type i.e. they snap into action every time the sensor values change.
At this stage the character is already able to run forward and backward. Now let's add the ability to turn.

Character jumping

The last control setup function is setup_jumping():
function setup_jumping() {
var key_space = m_ctl.create_keyboard_sensor(m_ctl.KEY_SPACE);
var jump_cb = function(obj, id, pulse) {
if (pulse == 1) {
m_phy.character_jump(obj);
}
}
m_ctl.create_sensor_manifold(_character, "JUMP", m_ctl.CT_TRIGGER,
[key_space], function(s){return s[0]}, jump_cb);
}
The space key is used for jumping. When it is pressed the following method is called:
m_phy.character_jump(obj)
Now we can control our character!

Moving the camera

The last thing we cover here is attaching the camera to the character.
Let's add yet another function call - setup_camera() - into the load_cb() callback.
This function looks as follows:
function setup_camera() {
var camera = m_scs.get_active_camera();
m_cons.append_semi_soft_cam(camera, _character, CAMERA_OFFSET);
}
The CAMERA_OFFSET constant defines the camera position relative to the character: 1.5 meters above (Y axis in WebGL) and 4 meters behind (Z axis in WebGL).
This function finds the scene's active camera and creates a constraint for it to follow the character smoothly.
That's enough for now. Lets run the app and enjoy the result!
Link to the standalone application
The source files of the application and the scene are part of the free Blend4Web SDK distribution.