Gameplay

Setting up the scene

blend/

character_model.blend

Blender Game

character_collider

Physics

Dynamic

Rigid Body

character_collider

Step height

game_example.blend

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.

Enable physics

Preparing the necessary files

The engine b4w.min.js The addon for the engine app.js The physics engine uranium.js

game_example.html

game_example.js

body { margin: 0; padding: 0; }

game_example.js

"use strict" if (b4w.module_check("game_example_main")) throw "Failed to register module: game_example_main"; b4w.register("game_example_main", function(exports, require) { var m_anim = require("animation"); var m_app = require("app"); var m_main = require("main"); var m_data = require("data"); var m_ctl = require("controls"); var m_phy = require("physics"); var m_cons = require("constraints"); var m_scs = require("scenes"); var m_trans = require("transform"); var m_cfg = require("config"); var _character; var _character_body; var ROT_SPEED = 1.5; var CAMERA_OFFSET = new Float32Array([0, 1.5, -4]); exports.init = function() { m_app.init({ canvas_container_id: "canvas3d", callback: init_cb, physics_enabled: true, alpha: false, physics_uranium_path: "uranium.js" }); } function init_cb(canvas_elem, success) { if (!success) { console.log("b4w init failure"); return; } m_app.enable_controls(canvas_elem); window.onresize = on_resize; on_resize(); load(); } function on_resize() { var w = window.innerWidth; var h = window.innerHeight; m_main.resize(w, h); }; function load() { m_data.load("game_example.json", load_cb); } function load_cb(root) { } }); b4w.require("game_example_main").init();

on_resize

physics_uranium_path

_character

_character_body

ROT_SPEED

CAMERA_OFFSET

Moving the character

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); }

_character variable

_character_body

animation.apply() - sets up animation by corresponding name,

- sets up animation by corresponding name, animation.play() - plays it back,

- plays it back, animation.set_behaviour() - change animation behavior, in our case makes it cyclic.

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

setup_movement()

setup_rotation()

setup_jumping()

sensor manifold

NOTE: You can check out all the possible sensors in the corresponding section of the API documentation.

logic function

callback

controls.create_sensor_manifold()

sensor manifold

setup_movement()

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); }

move_array

move_array

function(s) { return (s[0] || s[1]) }

move_cb()

obj

pulse

move_dir

move_dir

id

m_phy.set_character_move_dir(obj, move_dir, 0);

setup_movement()

CT_TRIGGER

Turning the character

setup_rotation()

function setup_rotation() { var key_a = m_ctl.create_keyboard_sensor(m_ctl.KEY_A); var key_d = m_ctl.create_keyboard_sensor(m_ctl.KEY_D); var key_left = m_ctl.create_keyboard_sensor(m_ctl.KEY_LEFT); var key_right = m_ctl.create_keyboard_sensor(m_ctl.KEY_RIGHT); var elapsed_sensor = m_ctl.create_elapsed_sensor(); var rotate_array = [ key_a, key_left, key_d, key_right, elapsed_sensor ]; var left_logic = function(s){return (s[0] || s[1])}; var right_logic = function(s){return (s[2] || s[3])}; function rotate_cb(obj, id, pulse) { var elapsed = m_ctl.get_sensor_value(obj, "LEFT", 4); if (pulse == 1) { switch(id) { case "LEFT": m_phy.character_rotation_inc(obj, elapsed * ROT_SPEED, 0); break; case "RIGHT": m_phy.character_rotation_inc(obj, -elapsed * ROT_SPEED, 0); break; } } } m_ctl.create_sensor_manifold(_character, "LEFT", m_ctl.CT_CONTINUOUS, rotate_array, left_logic, rotate_cb); m_ctl.create_sensor_manifold(_character, "RIGHT", m_ctl.CT_CONTINUOUS, rotate_array, right_logic, rotate_cb); }

setup_movement()

elapsed

controls.get_sensor_value()

CT_CONTINUOUS

m_phy.character_rotation_inc(obj, elapsed * ROT_SPEED, 0)

ROT_SPEED

Character jumping

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); }

m_phy.character_jump(obj)

Moving the camera

setup_camera()

load_cb()

function setup_camera() { var camera = m_scs.get_active_camera(); m_cons.append_semi_soft_cam(camera, _character, CAMERA_OFFSET); }

CAMERA_OFFSET

Today we're going to start creating a fully-functional game app with Blend4Web 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!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 thedirectory. The creation of these resources will be described in a separate article. Let's open thefile and set up the character. We'll do this as follows: switch to themode and select theobject - the character's physical object.Under thetab we'll specify the settings as pictured above. Note that the physics type must be eitheror, otherwise the character will be motionless. Theobject 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 theparameter, which lifts the character above the surface in order to pass small obstacles. Now lets open the mainfile, from which we'll export the scene.The following components are linked to this file:Make sure that thecheckbox is turned on in the scene settings. The scene is ready, lets move on to programming.Let's place the following files into the project's root:The files we'll be working with are:and. Let's link all the necessary scripts to the HTML file:Next we'll open thescript and add the following code:If you have read Creating an Interactive Web Application tutorial there won't be much new stuff for you here. At this stage all the necessary modules are linked, the init functions and two callbacks are defined. Also there is a possibility to resize the app window using thefunction. Pay attention to the additionalinitialization parameter which specifies the path to the physics engine file. The global variableis declared for the physics object whileis defined for the animated model. Also the two constantsandare declared, which we'll use later. At this stage we can run the app and look at the static scene with the character motionless.Let's add the following code into the loading callback:First we save the physical character model to the. The animated model is saved as. The last three lines are responsible for setting up the character's starting animation.Before defining theandfunctions 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, ashould be created.Next we have to define the, 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, in which the performed actions will be present. And finally thefunction should be called for the, which is responsible for processing the sensors' values. Let's see how this will work in our case. Define thefunction: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. Now to define the logic functions. We want the movement to occur upon pressing one of two keys in. This behavior is implemented through the following logic function:The most important things happen in thefunction. Hereis our character. Theargument becomes 1 when any of the defined keys is pressed. We decide if the character is moved forward (= 1) or backward (= -1) based on, 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:Two sensor manifolds for moving forward and backward are created in the end of thefunction. They have thetype 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.Here is the definition for thefunction:As we can see it is very similar to. Thesensor was added which constantly generates a positive pulse. This allows us to get the time, elapsed from the previous rendering frame, inside the callback using thefunction. We need it to correctly calculate the turning speed. The type of sensor manifolds has changed to, i.e. the callback is executed in every frame, not only when the sensor values change. The following method turns the character around the vertical axis:Theconstant is defined to tweak the turning speed.The last control setup function isThe space key is used for jumping. When it is pressed the following method is called:Now we can control our character!The last thing we cover here is attaching the camera to the character. Let's add yet another function call -- into thecallback. This function looks as follows:Theconstant 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.