Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
11. July 2012

 

In this tutorial we are going to cover playing sound effects and music files.  We are also going to implement a simple menu system to control everything.  The example sound effect and song are taken from the cocos2D HTML tests. 

 

First we need to preload our sound effect files.  Remember the preload in main.js?  Now we are going to actually use it.  Open up main.js and make the following change:

 

cc.AudioEngine.getInstance().init("mp3,ogg,wav");
   cc.Loader.shareLoader().preload([
    {type:"effect",src:"Resources/effect2"},
    {type:"bgm",src:"Resources/background"}
   ]);

 

Here we preload our song and sound effect for later playback.  It doesn’t have to be in this file, but it guarantees that it has happened when we need it.  You will need to add a pair of mp3 files in a subdirectory named Resources, background.mp3 and effect2.mp3.  Obviously you can use whatever files you want, but be sure not to add the file extension here. 

The out key call is the call to init(). This call initializes the AudioManager singleton.  The parameter are the supported file formats.  mp3, ogg and wav are the supported options.  This value determines what extension the loader will use when looking for your resources.  Each browser supports different file formats, so if you want to playback in as many browsers as possible, it is ideal to provide all three options.  For example, if you do not provide ogg, Chromium on Ubuntu will not play any sound.

 

Now lets take a look at MyFourthApp.js:

 

var MyFourthApp = cc.LayerColor.extend({
    init:function()
    {
        this.initWithColor(new cc.Color4B(0,0,0,255));
        var size = cc.Director.getInstance().getWinSize();


        cc.AudioEngine.getInstance().setEffectsVolume(0.5);
        cc.AudioEngine.getInstance().setBackgroundMusicVolume(0.5);

        var menuItem1 = new cc.MenuItemFont.create("Play Sound",this,this.playSound);
        var menuItem2 = new cc.MenuItemFont.create("Play Song",this,this.playSong);
        var menuItem3 = new cc.MenuItemFont.create("Stop Playing Song",this,this.stopPlayingSound);
        var menuItem4 = new cc.MenuItemFont.create("Exit",this,this.exit);

        menuItem1.setPosition(new cc.Point(size.width/2,size.height/2+50));
        menuItem2.setPosition(new cc.Point(size.width/2,size.height/2));
        menuItem3.setPosition(new cc.Point(size.width/2,size.height/2-50));
        menuItem4.setPosition(new cc.Point(size.width/2,size.height/2-100));

        var menu = cc.Menu.create(menuItem1,menuItem2,menuItem3,menuItem4);
        menu.setPosition(new cc.Point(0,0));

        this.addChild(menu);

        return this;
    },
    playSound:function(){
        cc.log("Playing sound");
        cc.AudioEngine.getInstance().playEffect("Resources/effect2");
    },
    playSong:function(){
        cc.log("Playing song");
        cc.AudioEngine.getInstance().playBackgroundMusic("Resources/background",false);
    },
    stopPlayingSound:function(){
        cc.log("Done playing song");
        if(cc.AudioEngine.getInstance().isBackgroundMusicPlaying())
        {
            cc.AudioEngine.getInstance().stopBackgroundMusic();
        }
    },
    exit:function(){
        document.location.href = "https://www.gamefromscratch.com";
    }
});


MyFourthAppScene = cc.Scene.extend({
    onEnter:function(){
        this._super();
        var layer = new MyFourthApp();
        layer.init();
        this.addChild(layer);
    }
});

 

The guts of this are identical to the last tutorial, with the obvious exception of changed names.

The following two lines set the background volume for both music and effects to 50%.  As you can see, AudioManager is available as a singleton object, just like Director.

 

cc.AudioEngine.getInstance().setEffectsVolume(0.5);
cc.AudioEngine.getInstance().setBackgroundMusicVolume(0.5);

 

Next up we create 4 different MenuItemFont objects:

var menuItem1 = new cc.MenuItemFont.create("Play Sound",this,this.playSound); var menuItem2 = new cc.MenuItemFont.create("Play Song",this,this.playSong); var menuItem3 = new cc.MenuItemFont.create("Stop Playing Song",this,this.stopPlayingSound); var menuItem4 = new cc.MenuItemFont.create("Exit",this,this.exit);

 

MenuItemFont is one of the available types of menuitems ( there is also a sprite based menu item ) that compose a menu.  For each one, you specify the text to display, the owning container as well as a callback function that is called when the menu is selected.  We then position each menuitem relative to the center of the screen, each one placed 50 pixels apart.   We then create our Menu item by passing in a variable number of MenuItem, like this:

var menu = cc.Menu.create(menuItem1,menuItem2,menuItem3,menuItem4);

 

Finally we position our menu and add it to our layer.

 

Next we have our 4 different callback function.  cc.log simple logs whatever text out to the console.  So if you have the developer console open in Chrome, or Firebug on Firefox, you will see the following when the code is run:

image

 

cc.Log is an effective and easy way to keep track of your code’s execution without requiring the debugger.

 

In the event of selecting “Play Sound” the playSound() method is fired, which calls:

 

cc.AudioEngine.getInstance().playEffect("Resources/effect2");

 

This uses the AudioManager singleton to play our preloaded effect “effect2” in the folder “Resources” using the playEffect() method.

 

In the event of selecting “Play Song”, the playSong method is fired, which plays a song using the function:

 

cc.AudioEngine.getInstance().playBackgroundMusic("Resources/background",false);

 

If “Stop Playing Song” is selected, the stopPlayingSound method is fired, which checks if a song is currently playing and stops it if one is.  Like this:

 

if(cc.AudioEngine.getInstance().isBackgroundMusicPlaying())
        {
            cc.AudioEngine.getInstance().stopBackgroundMusic();
        }

 

Finally, in the event Exit is called, the app simply redirects the user to a great website. Smile

 

 

As always, you can download the full project ( including all audio files ) right here.

 

Here is our application in action:

 

 

Read Tutorial 6

Programming


5. July 2012

 

I have recently been contacted by members on the development teams of two (completely!) different HTML game related libraries for inclusion on the HTML 5 Development links page.

 

 

The first is the Pulse Engine, a traditional HTML5 Canvas based library.  Perhaps best of all, it has complete documentation (woot!).  I am taking a closer look at this when time permits, and will post something shortly.

 

 

 

The second is Clay.io, which is more of a supporting library.  It provides leaderboards, payment processing, social integration and more.  They are a commercial library and take a 20% cut of payments processed.  It is documented as well, and contains a developer sandbox to test in.  I do have one suggestion for the developers… make the features more prominent on your home page. The details were there, but they were below the fold ( on my 1920x1280 screen! ).  You will be amazed how many people you will lose because it was immediately obvious what service you provide! If you need to add these features to your game, clay.io is certainly a place to start.

 

 

If you have developed and HTML5 related game library, or are a big fan of a library I missed on my list, let me know! 

News


27. June 2012

image

 

OK, I will be the first to admit that there are a few hundred HTML5 3D game engines in development, so why draw any attention to this one?

 

Well, there are a couple very good reasons.

 

First off, star power.  There are pair of fairly successful people behind PlayCanvas.  The CEO is Will Eastcott, former tech director at Activision, who worked on Call of Duty, Grand Theft Auto and Max Payne.  The CTO is Dave Evans, formerly at Sony, and on the team responsible for PlayStation Home.  So, the people behind the company understand real game requirements and have the experience to pull it off.

 

Second, it’s a full tool chain.  This is perhaps the biggest single selling point, it contains a visual designer, importer for 3D Studios Max, Maya and Blender.  Plus of course the libraries you need to create a game, including dynamic lighting, shadow effects, bones/skinned animations, skeletal blending, 3D spatial audio, a component entity system for scripting and more.

 

So basically… they are going head to head with Unity, but focused on HTML5.  They have a demo section, but it is currently a bit underwhelming.

 

At this point, you may be wondering about cost…

During our closed beta, the PlayCanvas development environment will be free and unrestricted for all. When the closed beta ends, the vast majority of users will be able to continue to use PlayCanvas at no cost within some generous limitations. Pro accounts will be available on a subscription basis at a nominal monthly cost. These accounts will relax certain restrictions and unlock additional power-user oriented features in the interface.

 

Currently it is in closed beta, so you will have to contact them for more details.  They are however presenting at Google IO ( which is happening right now ), so perhaps we will have more details soon.

 

If this sounds interesting to you, head on over to playcanvas to learn more.

News


GFS On YouTube

See More Tutorials on DevGa.me!

Month List