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

I have a bit of a project I need to undertake in real life, that overlaps nicely with this site, so I am documenting the process here.



The nutshell version, I have a toddler and she is having trouble with transitions.  People have suggestion a This Then board, in terms of “Do This” “Then that” will happen.  Its remarkably simple over all, it is pretty much two pieces of velcro on a piece of cardboard and a bunch of pictures that we can stick to it.  I was about to have to print off a ton of pictures, scale them down, stick velcro to them and it dawned on me… this calls for an App!



See, I have a ton of devices around this place…  PCs, a Mac, a Galaxy Note, S3, Transformer, Playbook, iPhone, iPod and even an iPad that my daughter has pretty much claimed as her own.  So it only makes sense to implement this an application.  That said, supporting all of these platforms would be a pretty epic pain in the butt.  Also, I have very little desire to pay Apple 99$ a year just to put this app on her iPad, and I don’t want to be bothered with jailbreaking.


This is where my recent playing with HTML5 comes in extremely handy.  I am going to create it using a variety of technologies, include cocos2D, node/express and heroku.  The application itself is very simple, but the process is stuff that almost any moderately advanced web application is going to face.


First off, HTML5 is wonderful, but it has some serious limitations.  One such limitation is only having minimal local storage.  This is where your server comes in, and Node delivers in spades.  Another problem almost all web apps face is… where do I put this thing?  We will cover that as well.  Possibly at the end I will also covering delivering to device ( PhoneGap? Appcelerator? ), that’s a wait and see thing.


This isn’t exactly a tutorial series; this is something I have to accomplish, so I’ve decided to document the process as I go.  I wont always go into as much detail as I normally do with tutorials and I promise you, unless you have a toddler yourself, the end result wont be that exciting of a game.  However, you will see how to quickly make an HTML5 game in cocos2D, hosted in Node.js, developed quickly.  Hope you enjoy.


In fact, the first post is up.  This one covers hosting a cocos2D app ( our last tutorial on menus and music ) in a custom Node.js based server.


13. July 2012

Instead of updating all of the tutorials each time something is changed ( sadly, something I do not have the time for ), I will use this guide to track breaking changes as the occur.



PlayStation Studio .98 –> PlayStation Mobile .99


Libraries have been renamed from Sce.Pss to Sce.PlayStation.  So instead of say:

import Sce.Pss.Graphics;

it is now:

import Sce.Playstation.Graphics;


The install path has changed from [Program Files]\Pss to [Program Files]\PSM.


PssStudio is now PsmStudio.


Oddly enough, for me at least, it didn’t create a start menu entry.



Fortunately there is a conversion utility that will convert your code to the new naming standard.  In C:\Program Files (x86)\SCE\PSM\tools ( on my 64bit Win7 install anyways ), there is a file named project_conv_098to099.bat.  Simply drag your existing project folder on top of that script, or run it from a cmd prompt passing it your code directory, and your project will be updated.


The full .99 release notes are available here.


Here is the conversion process in action:

Updating from .98 to .99 SDK

General Programming

13. July 2012

Sony have just announced the release of a new version of the PlayStation Mobile SDK, with the following new features:

  • In-App Purchase library
  • Digital Signature & Encryption library for content protection
  • GamePad support for UI Toolkit library
  • ModelViewer for previewing .mdx files on PC
  • 50+ bug fixes


    The is a guide on moving to the new SDK available here.



    There is one major ramification to this upgrade, you need to recompile all of your projects, and that includes any of the projects that I have made available in various tutorials.  There is a batch file named project_conv_098to099.bat in the tools folder of your install directory.  Drag your project onto it to update them.  You will also need to update the assistant on your Vita if required.


    Additionally, the namespace Sce.Pss has been changed to Sce.PlayStation, as part of the rebrand.  To me this is simply annoying, as it just broke every single tutorial, all of the existing documentation, etc… for very little gain.



    App.cfg has also been rendered redundant and has been replaced by app.xml, which will be automatically generated for you by Studio.



    There are already some bug reports coming in for .99 with file reading, so be cautious when upgrading.


    Here are the full .99 release notes:


    ver 0.99


    Notice for migration of the project created in Ver 0.98 into Ver 0.99

    • The application setup file "app.xml" has been introduced. Along with the introduction, "app.cfg" is withdrawn.

      • Along with the above change, the batch file “project_conv_098to099.bat” is provided to convert “.cs”, “.csproj” and “app.cfg”. Please execute any of the followings for project conversion.

      How to execute in the console screen

      1. Go to [Start Menu] - [All Programs] - [Accessories] - [Command Prompt].
      2. Input cd "%SCE_PSM_SDK%/tools/” to move from the current directory.
      3. Specify and execute [sample098_project_folder], the top folder of the project to be converted into “project_conv_098to099.bat”.

      > project_conv_098to099.bat [sample098_project_folder]

      How to execute in Explorer

      1. Drag and drop [sample098_project_folder] onto “project_conv_098to099.bat” in Explorer.

    New Additions and Modifications

    • The SDK name has been changed from "PlayStation Suite SDK" to "PlayStation Mobile SDK".

    • Namespace of API has been changed from "Sce.Pss" to "Sce.PlayStation".

    • Signature verification / encryption have been supported for the files included in the application packages.

    • The number of sub-directory levels (incl. files) that can be created under the directories of Application/, Documents/, Temp/ has been changed from 5 levels to 6 levels.

      • "/Application/1/2/3/4/5/6.dat" -> OK (Documents/, Temp/ as well)
      • "/Application/1/2/3/4/5/6/7.dat" -> NG (Documents/, Temp/ as well)


    New Additions and Modifications

    • Position property has been added to the BgmPlayer class.


    New Additions and Modifications

    • The following class has been withdrawn.

      • PersistentMemory


    • SystemEvents.onRestored event does not work correctly on PlayStation(R)VITA.


    New Additions and Modifications

    • Default screen size has been changed to 960x544 which is same as PlayStation(R)VITA.
    • The value of TextureWrapMode has been changed.


    • PlayStation(R)VITA has the following limitations.
      • GraphicsContext.SetVertexBuffer() applies only the first VertexBuffer.
      • GraphicsContext.SetPolygonOffset() is not supported. Specified parameters are ignored.
      • Texture2D.GenerateMipmap() may not operate correctly.
      • TextureCube is not supported. An exception occurs when created.


    New Additions and Modifications

    • Dead-Band has been set around the center of the analog stick in GamePad.


    New Additions and Modifications

    • The ReadBuffer method has been added to the Image class.


    New Additions and Modifications

    • MDX file format has been modified and its version has been changed to 1.00.

    • MDX files of old format cannot be used directly. If you want to use them, please use the source code project of Model API instead of its prebuilt assembly and replace MdxLoader.cs with MdxLoader095.cs which is included in the project.

    • Implemented the following features.
      • Loading block names, bounding spheres
      • Motion transition, motion repeat mode
      • UV offset/scale, UV animation
      • Texture-less material
    • Updated the toolkit used by the converter.
      • Crosswalk 2013.0
      • FBXSDK 2011.3


    New Additions and Modifications

    • Sce.PlayStation.Core.Services namespace has been newly provided.
    • API InAppPurchaseDialog has been newly provided for In-App Purchase.

    UI Composer

    New Additions and Modifications

    • Custom widget functionality to locate user’s arbitrary widget has been added.

    • The custom panel functionality provided until version 0.98 has been withdrawn.
      • For the UIC files where the custom panels are provided, internal change is made to replace the custom panel with the custom widget.
      • Addition of the custom panel to WidgetList will be invalid.
    • The files can be opened by drag & drop of project file (*.uic) for the running UIComposer.

    • The initial value of Anchor of the Widget has become Anchor.None.
      • However, some may not be Anchor.None if conversion of size is restricted such as CheckBox, DateTimerPicker, Slider, ProgressBar and PopupList.


    • UIComposer is not started unless it performs as an administrator.

    UI Toolkit

    New Additions and Modifications

    • Functionality to perform focus operation in gamepad has been added.
      • For further information, see [UI Toolkit Programming Guide] - [Basic Concept] - [Gamepad Operation].
    • Key event distribution structure has been changed.
      • For further information, see [UI Toolkit Programming Guide] - [Basic Concept] - [Key Event Distribution].
    • The functionality to specify pixel density has been added.
      • For further information, see [UI Toolkit Programming Guide] - [Basic Concept] - [Pixel Density].
    • The property of Font type of each widget has been changed to UIFont type.

    • Event types of Hiding and Hidden in Dialog have been changed from EventHandler to EventHandler<DialogEventArgs>.

    • If widgets parent and child with different scroll directions were located, they cannot scroll correctly. This problem has been fixed.

    • Too many instances of items were created with ListPanel.Move method. This problem has been fixed.

    • When trying to display a dialog just after closing another dialog, display was failed. This problem has been fixed.

    • API which was Obsolete in ver 0.98 has been deleted.

    PSM Studio

    New Additions and Modifications

    • The base has been changed to MonoDevelop
    • If debugging is executed on PlayStation(R)VITA, no string is displayed in the application output window. This problem has been fixed.
    • Edit app.xml working with PSM Publishing Utility.
    • Add a functionality of signature verification / encryption. Content Protection (Plain, Signed, SignedAndEncrypted) can be selected from Property of files.


    • In rare cases, app.exe.mdb is occupied by process to fail in build. In the case of occurrence, please restart PSM Studio.
    • It may fail in opening a project. Once close and then reopen it.

    PSM Publishing Utility

    New Additions and Modifications

    • New release
    • Metadata and master packages are created.

    PSM Development Assistant (for PlayStation(R)VITA)

    New Additions and Modifications

    • Along with the name change of SDK, the name has been changed to "PlayStation Mobile Development Assistant".

    • PSM Development Assistant (for PlayStation(R)VITA) 0.99 has been released as a patch package. The version can be updated to 0.99 by selecting and apply the update icon displayed on LiveArea in PSM Development Assistant (for PlayStation(R)VITA) 0.98. In order to use PSM Development Assistant (for PlayStation(R)VITA) 0.99, the system software of PlayStation(R)VITA system needs to be updated to 1.69 or later version.

    • Note that it cannot be run correctly with the combination of PSM Studio (former name: PSS Studio) released in SDK 0.98 and PSM Development Assistant (for PlayStation(R)VITA) 0.99. PSM Development Assistant (for PlayStation(R)VITA) must be equivalent to the SDK version.

      • Correctly operating combination:
        • PSM Studio for SDK 0.98 & PSM Development Assistant (for PlayStation(R)VITA) 0.98
        • PSM Studio for SDK 0.99 & PSM Development Assistant (for PlayStation(R)VITA) 0.99
      • Incorrectly operating combination (Becomes error at installation):
        • PSM Studio for SDK 0.98 & PSM Development Assistant (for PlayStation(R)VITA) 0.99
        • PSM Studio for SDK 0.99 & PSM Development Assistant (for PlayStation(R)VITA) 0.98
    • Graphic asset has been changed.

    • The busy dialog of "Installing..." has been displayed during installation from PSM Studio. Moreover, PS button has been locked during installation.

    • The links to Debug Setting Items and Developer Forum website have been provided in the option menu. Ticket information of InAppPurchaseDialog can be reset on PlayStation(R)VITA by selecting [Debug Settings]-[Reset Ticket Information].

    • Wording contents in the Intellectual Property Notices pages and scroll performance have been adjusted.


    New Additions and Modifications

    • Added the following documents.
      • Basic Usage of 2-Dimensional Physics Simulation Physics2D Library
      • In-App Purchase
      • About Build Action
      • Folder Structure In PSM App
      • Safe Application Implementation
      • Setting Signature and Encryption
      • Uninstall
      • Mastering
      • Usage of Publishing Utility


    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


    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.


    AppGameKit Studio

    See More Tutorials on!

    Month List