tfe Homepage

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

If you missed it, check out the previous part.

Screenshot

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

• Change weapon
• Displaying damage taken
• Healing potions

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".

    // 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();
            if(child.name==name)
            {
                return child;
            }
            childrens = childrens.concat(child.children);
        }
    }

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

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
        });
        text_geo.computeBoundingBox();
        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 = -this.camera.rotation.x;
        text_mesh.rotation.x=Math.radians(-90);
        text_mesh.rotation.y = -this.camera.rotation.y;
        text_mesh.rotation.z = -this.camera.rotation.z;

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

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

    // In the main "update" loop of the game, add:
    animations.forEach(function(anim)
    {
        anim.animation_function();
    });

    // A call 
    game.add_fadeout_text(
    {
            text:'My text',
            color:0xff0000,
            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.