Blog de tfe, Perl, Web et Libre...?

Game creation: bind weapon and displaying damages

PubliƩ le 08/11/2016 dans threejs

Here is the article 13 about my series of posts about the game creation.

If you missed it, check out the previous part.


Here is a screenshot of the current state of the game. The important changes are:

  • Change weapon
  • Displaying damage taken
  • Healing potions

Game threejs

Video presentation

Check out the new youtube video presenting the character moving/switching weapon and fighting:

Binding weapons to bone

Previously the character mesh had the weapon directly in the main mesh. To be able to switch between different weapons, we need to remove the weapon from the main mesh, and load it with another file.

The weapon will be added to a character bone named "weapon".

Game threejs

    // Function to search for a bone name, with recursive search
    function search_bone_name(name,childrens)
        var found=false;
        while(!found && childrens.length>0)
            var child = childrens.pop();
                return child;
            childrens = childrens.concat(child.children);

    this.weapon_bone = search_bone_name('Weapon',this.character_mesh.children.concat());
    // Load the weapon mesh here

The damage taken and attack animation speed is variable, depending on the weapon choosen.

Display fadeout text

To display the amount of damage taken, we want to create a text that start with 100% opacity and fadeout to 0, in a few seconds. The text will also have a zoom effect, while fading out.

    // We want to memorize all animations to be able to update them on each frame
    animations = [];

    this.add_fadeout_text = function(params)
        var text = params.text;
        var color = params.color;
        var size = params.size;
        var position = params.position;
        var delta_y = params.delta_y;

        var text_geo = new THREE.TextGeometry(text , {
            font: game.assets.text_font,
            size: size,
            height: 0,
            curveSegments: 4,
            bevelThickness: 1,
            bevelSize: 0.5,
            bevelEnabled: false,
            material: 0,
            extrudeMaterial: 1
        var text_mesh = new THREE.Mesh( text_geo, new THREE.MeshPhongMaterial({color: color}));
        text_mesh.position.x= -( text_geo.boundingBox.max.x - text_geo.boundingBox.min.x)/2 + position.x;
        text_mesh.position.y= delta_y + position.y;
        text_mesh.position.z= -( text_geo.boundingBox.max.z - text_geo.boundingBox.min.z)/2 + position.z;
        //text_mesh.rotation.x =;
        text_mesh.rotation.y =;
        text_mesh.rotation.z =;

        text_mesh.animation_function = this.inc_scale_fadeout.bind(this, text_mesh);

        window.setTimeout(this.remove_fadeout_text.bind(this, text_mesh), 1000);

    // In the main "update" loop of the game, add:

    // A call 
            text:'My text',
            size: 10,
            delta_y : 15, // Add this Y value from container position
            position: this.container.position

Healing potions!

In all games, we have some items to restore part of the life.
I added here a small bottle which restore a amount of life when the character walk hover it.

You can get: the source code or View the demo directly.