tfe Homepage

Here is the article 14 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:

• New lights
• Land creation between mazes
• New ambient music system
• Replace stamina bar by a temperaure bar

Video presentation

Check out the new youtube video presenting the new land path between the mazes, and the music ambient:

Land structure

The previous path between the mazes was really simple: The floor was made with 1 large box and the walls with 2 other boxes.

To have some consistency between the outside and the mazes, i choosed to do it with hexagone structures too. So the outside land is basically the same structure as the maze, but without any walls.

By now, the land is always the same level (no random generation here), but i think i will do more static levels in the future...

A level is made up by a simple javascript array structure:

    this.level = {
        outside_cells:
        [
            { x: 0, z: 0},
            { x: 0, z: 1},
            { x: 1, z: 0},
            { x: 1, z: 1},
            { x: 2, z: 1},
            { x: 2, z: 2},
            { x: 3, z: 0},
            { x: 3, z: 1},
            { x: 3, z: 2},
        ],
        end_cell:  { x: 3 , z: 2},
    };

With:

• outside_cells: all the hexagone coordinates
• end_cell: to identify in which cell i should put the end door and collision line

Ambient and Music system

There is custom music for the maze and another one for the path. When entering the areas, the music fadeout, and the new music fadein.

In each maze and path class, we have a music attribute:

 this.music = game.assets.path_sound;

Here are the functions that are used in the game, when entering the area:

    this.fadeinmusic = function(audio, target, looping)
    {
        if(audio.paused) { audio.play(); }

        if(!looping)
        {
            audio.volume=0;
        }
        if(audio.volume<<target)
        {
            audio.volume=Math.min(target,audio.volume+0.004);
            this.fadeinmusic_timer = window.setTimeout(this.fadeinmusic.bind(this, audio,target, true), 10);
        }
        else
        {
            audio.volume = target;
        }
    };

    this.fadeoutmusic = function(audio)
    {
        if(audio.volume>0)
        {
            audio.volume=Math.max(0,audio.volume-0.004);
            this.fadeoutmusic_timer = window.setTimeout(this.fadeoutmusic.bind(this, audio), 10);
        }
        else
        {
            console.log('audio pause!');
            audio.pause()
        }
    };

Temperature bar

I think the stamina doesn't add anything to the game experience, so i replaced its use by a "temperature bar". When the user is outside, the temperature goes down and the character is fine. But when the user is inside a maze, the temperature will go up, and the character will loose life when it reaches the maximum.

Sources!

The sources are now directly available on github.

I created the tag "blog-post-20" to be able to reach the state of the project corresponding to this blog post.

You can also test the demo of the latest state of the project.