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:




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({
        this.initWithColor(new cc.Color4B(0,0,0,255));
        var size = cc.Director.getInstance().getWinSize();


        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));


        return this;
        cc.log("Playing sound");
        cc.log("Playing song");
        cc.log("Done playing song");
        document.location.href = "";

MyFourthAppScene = cc.Scene.extend({
        var layer = new MyFourthApp();


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.




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:



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:




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:




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:




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 , ,

11. July 2012


It’s actually a test build, but it is certainly worth checking out and helping out the Blender team.  So what can you expect in this test build ( and hopefully in the upcoming release )?


Bevel and inset are now mouse controllable ( woot!  This one falls under the category of WHAT WERE THEY THINKING??? problems before ).

Tons of Cycles changes

Motion tracking now includes planar tracking

Snap to vertice/face/edge implemented in Pose mode for bones

Sculpt masking add to the Sculpt tool


Green screening

And perhaps most important of all, especially for game developers… improved COLLADA support!


For the full details, check here or you can download here.


10. July 2012

Well, sorta.


Autodesk just announced the Scaleform is now available as a Unity3D plugin, or as a standalone mobile200px-Scaleform_logo SDK.  More importantly, it’s available at a price tag of $295 a platform. 


Scaleform is used to create UIs for games using the Flash toolset, including ActionScript.  If you’ve played a game in the last year, chances are you’ve seen Scaleform in action.  It powered such titles as Deus Ex: Human Revolution, Civilizations, Warhammer 40K, Skyrim and more.  A partial list is available here.


Up until now, buying Scaleform has been a tricky proposition.  Autodesk had no available pricing, so you could only really get it embedded in existing game engines like Unreal, or directly negotiate with Autodesk ( can you say ouch? ). So while 300$ may seem like a look, especially considering Unity starts at 400$, it is still a massive value compared to before.


Scaleform for mobile


For more details head on over to the Autodesk Gameware website.

News , ,

9. July 2012


I am a bit late to announce this ( like, almost 3 weeks late ), but cocos2D HTML has a new Cocos2dHTML5release.  You can read the complete release notes on their website, but there are a few changes that are of particular concern to the tutorials on this site.  Instead of going back an updating the tutorials ( for now at least ), I will show this quick updating guide in case you run into trouble getting them to run.  The changes on the whole are pretty minor.



So, if you want to update your code to run with alpha2, make the following changes.





In MyFirstApp.js change:

var layer1 = cc.LayerColor.layerWithColorWidthHeight(cc.ccc4(255, 255, 0, 255), 600, 600);


var layer1 = cc.LayerColor.create(cc.ccc4(255, 255, 0, 255), 600, 600);


var helloLabel = cc.LabelTTF.labelWithString("Hello world", "Arial", 30);


var helloLabel = cc.LabelTTF.create("Hello world", "Arial", 30);


var scene = cc.Scene.node();


var scene = cc.Scene.create();





In MySecondApp.js change:

var scene = cc.Scene.node();


var scene = cc.Scene.create();


var layer1 = cc.LayerColor.layerWithColorWidthHeight( cc.ccc4(128, 128, 128, 255), 600, 600), jetSprite = cc.Sprite.spriteWithFile("./images/Jet.png");


var layer1 = cc.LayerColor.create( cc.ccc4(128, 128, 128, 255), 600, 600), jetSprite = cc.Sprite.create("./images/Jet.png");





In MyThirdApp.js change:


var scene = cc.Scene.node();


var scene = cc.Scene.create();





And that’s it.  It sucks that breaking changes happen, but I think you will admit, this one is certainly for the better.   Any code from this point forward will use the newer SDK.


7. July 2012

I have run into another snag with using YUI in an MVC app, one that is causing me to look into JQuery + Backbone as an alternative.


It’s a pretty small thing over all, I can’t get actual YUI controls working from Moustache templates.  You need to pass the ID to a control, but at the point of Render() it doesn’t appear to be valid. This isn’t the actual problem though, the problem(s).

  • The community is quite small, and I found ZERO examples except Mojito based.  Even that is pretty sparse.
  • The everything and the kitchen sink approach YUI takes makes dropping in a replacement much trickier.
  • The only community is only really active on the official YUI forums, and they are moderated.



That last one is a gigantic deal breaker for me.  See, the community at the forums is wonderful and responsive.  It was quite impressive to deal with them and they have my kudos.


However…  my first post took 3 days to get approved! My second comment took another 8 hours. 


3 days in like a decade in internet-years!  It may seem a small point, but Yahoo!, if you want people to adopt YUI, you really need to remove this restriction.


Month List

Popular Comments