Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

13. July 2012

 

This is the first part of my adventure creating a simple game for my daughter

 

One of the catches with a JavaScript game, as you saw from this earlier tutorial, to take full advantage you need a client and a server.  However, once you want the server to start doing “stuff”, you want as much control over it as possible.  The advice “write your own!” is normally remarkably stupid, but with Node, it actually isn’t!  In fact, you can create a fully functioning server in only a couple lines of code.  If you are looking for a way to deploy an advanced JavaScript application, read on.

 

If you’ve never experienced Node before, basically it is a server side implementation of Google’s V8 Javascript engine, and a whole TON of plugins to do just about everything.  Perhaps the biggest selling point is, it allows you to work in both Javascript on the client and server.  It is also easy to deploy, massively asynchronous, scalable and frankly, kinda cool.  The first thing you are going to need to do is install it on your computer.  The install process is remarkably simple, although when you are done I would suggest adding node to your PATH environment variable if you are working on Windows.

 

Now that you have Node installed, let’s create a simple server.  Create a file called server.js like this:

 

var express = require('express'), server = express.createServer(); server.use('/cocos2d', express.static(__dirname + '/cocos2d') ); server.use('/cocosDenshion', express.static(__dirname + '/cocosDenshion') ); server.use('/classes', express.static(__dirname + '/classes') ); server.use('/resources', express.static(__dirname + '/resources') ); server.get('/', function(req,res){ res.sendfile('index.html'); console.log('Sent index.html'); }); server.get('/api/hello', function(req,res){ res.send('Hello Cruel World'); }); server.listen(process.env.PORT || 3000);

 

And… that’s it, a fully functioning web server.

 

That first line is the key, where we require(‘express’).  Express is the module that is doing the heavy lifting on the server side.

 

There is however a small amount of configuration you need to do.  You need to tell node to install the express module.  This is pretty simply done though, open a command prompt and navigate to your project directory, then type:

npm install express

 

npm is the node package manager, and it will download and configure your project to work with express.  Now that we are configured, lets get back to code.

 

The next four lines are defining a series of static routes.  Essentially, if a web request comes in to any of these paths  ( for example  http://localhost/cocos2d ), node will simply serve the files back to the requesting browser, just like IIS or Apache would.  These four lines will result in /cocos2d, /cocosDenshion, /classes and /resources folders having their files served, so when your HTML file requests /classes/cocos2d.js, the file will be returned.  This is how we will allow our user to download our scripts and resources.  In this particular, I am porting the class from this tutorial to run from Node, which is why we require a resources and cocosDenshion folder.

 

Next is a GET request handler for “/”.  In HTTP, there are two kinds of requests, GET ( urls ) and POST ( form submissions ).  In this line we are saying if someone requests our web root, our function is called, which simply sends the file index.html back.

 

A moment later, we set up another GET handler for the route (URL) /api/hello, which simply returns the string “Hello Cruel World”.  This is a very simple web service, and we will see it in action shortly.

 

Finally we start our server listening on port 3000, or whatever port the running environment forces us on, in case our host has such limitations.  At this point, we have a fully functioning web server. 

 

However, I made a few alterations to the last tutorial’s file layout to better be served by Node.  Our folder structure now looks like:

image

 

Don’t worry if you are missing a few folders ( .git and .idea for example ) or files ( package.json or Procfile ), we will covers those later.

 

I altered all the paths in cocos.js and MyFourthApp.js because cocos2d was moved to the classes folder.  Otherwise the code is pretty much unchanged from the last tutorial.  You can download the full source at the end of this post if you want to see the complete changes.

 

I did make a few small alterations though, beyond changing paths.  I added a reference to jQuery in index.html, like this:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="classes/cocos2d.js"></script>

 

I also added the following line to cocos2d.js:

else { cc.setup("gameCanvas"); jQuery.get("/api/hello", function(data,textStatus,jqXHR){ cc.Log(data); });

 

So what exactly is this line of code doing?

 

Remember earlier in server.js where we added a route handler for /api/hello?  Well this is about as simple a REST based web request as you can make.  This uses jQuery to make an AJAX call to our server, which returns the string “Hello Cruel World”, which we log to the console.   

 

Why?  Well, absolutely no reason… yet.  But this is a very primitive example of something we are going to do in more complexity later on.  We can do processing on our node based server, and handle it in our cocos2D client.  Through this mechanism we can make up for the limitations of client side Javascript, or enable server side functionality.  You can easily request data from a server without having to reload your page.

 

 

Now you can run your server.  Open a command prompt, navigate to your project directory and type node server.js.  If all went well, there should be no error messages.  Now open up a web browser and navigate to http://localhost:3000 like this:

image

 

Here is your cocos2D application hosted in a custom Node server viewed in a browser, and if you look at the JavaScript console, you will see the “Hello Cruel World” message logged by cocos, but returned asynchronously from the server.  To shut down your server, simply press CTRL + C.

 

 

At this point we have a working web server, capable of hosting a cocos2D application ( and replacing the need for WAMP completely ), making successful, if simple, web services calls between the client and server.

 

You can download the full project right here.

 

Next up, we will look into a problem many web developers face… where the heck am I going to put this thing???

 

EDIT:  Next part is now up.

Programming , , ,

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.

General , , ,

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

    Overall

    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)

    Audio

    New Additions and Modifications

    • Position property has been added to the BgmPlayer class.

    Environment

    New Additions and Modifications

    • The following class has been withdrawn.

      • PersistentMemory

    Limitations

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

    Graphics

    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.

    Limitations

    • 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.

    Input

    New Additions and Modifications

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

    Imaging

    New Additions and Modifications

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

    Model

    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

    Services

    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.

    Limitations

    • 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 2.8.8.4.
    • 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.

    Restrictions

    • 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.

    Document

    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

    News ,

    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 = "http://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 , ,

    Month List

    Popular Comments