Tfe

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

If you missed it, check out the previous part.

Global audio system and volumes

To be able to adjust the global volume and music/ambient volumes separetely, i made a new volume system which:

Volume is set by the multiplication of:

• Global volume value: the same for every audio asset
• Volume type value: different value for music assets, ambient audio assets, etc...
• Default volume asset value: The default value of a single audio file, which can be usefull to made some tests with volume adjustements

In the game it is coded as:

    this.sounds.forEach(function(sound)
    {
        var mul=1;
        if(sound.getAttribute('volume_target_type'))
        {
            mul = game.gui.get_value(sound.getAttribute('volume_target_type'));
        }
        var val = game.gui.get_value('global_volume') * parseFloat(sound.getAttribute('initial_volume')) * mul;
        sound.volume = val;
    });

This function is pretty heavy to call, so we need a throttle to avoid calling it too ofter:

    // The function called by the main menu every time the volume slider is modified
    this.update_volumes_delay = throttle(this.update_volumes.bind(this), 200);

Locales translation

To be able to fetch strings that can be later translated, i made a new simple class:

    Game.prototype.labels =
    {
        locale: 'en',
        get: function(data)
        {
            return this[this.locale][data];
        },
        'en':
        {
            'game_name': 'The Unnamed game',
            'life': 'Life',
            'loading_assets': 'Loading game data'
            /* etc... */
        } 
    };

This is used to create the main menu system using variable strings.

Main menu layout

To create the main menu, i used the same idea i used to create the game gui: a new html layout.

By pressing the 'Escape' key the <div> is displayed/hidden.

By now, there are only 3 types of menu items:

• Buttons with a callback
• Sliders (to adjust volume ranges)
• Checkboxes (to enable/disable a setting)

Take a look at the gui.js file, if you are interested on how it is done.

Camera zoom levels and rotations

Each level has now a default camera setting value, so i will be able to adjust it depending on the level the user is.

The whole camera system is in the game.js file.

There are 4 parameters to adjust the camera:

1. opt.level: Height of the camera (Z distance from the floor to the camera)
2. opt.angle: Angle between the camera and the character
3. opt.distance: Distance betwwn the camera and the character
4. opt.time: Time to take to do the transition

Sources and demo

The sources are now directly available on github.

I created the tag "blog-23" 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.

A demo of the editor is also available.