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

 

One of the catches with a web application is finding a place to host it.  If you just have a couple static pages this is pretty simple, there area  few thousand different hosting companies that will serve your pages for a few dollars a month.  However, once you start talking about server side programmability, things get much more complicated.  In this case you generally need a dedicated server or at least, a shared server.  However, the recent move towards cloud computing gives you another option.

 

Such as Heroku.

 

We are now going to look at uploading our cocos2D JavaScript web application to Heroku.  First things first, you need to sign up.  Don’t worry, you don’t need to pay nor give them a credit card, the entry tier is free.

 

Now that you are signed up, we need to make a couple really small alterations to our project, don’t worry, both are pretty minor.  First create a file named package.json

{
    "name": "firstthis",
    "version": "0.0.1",
    "dependencies": {
        "express": "2.5.x"
    },
    "engines": {
        "node": "0.8.x",
        "npm":  "1.1.x"
    }
}

Package.json is a JSON format config file that tells Node what dependencies you have.  You need to tell it what libraries you need ( generally all the things you  “require”ed in code).  The second section is also very important, as it tells what version of Node you want to use.  This is very important with Heroku as if you do not specify a version, you will get Node 0.4.x, which isn’t compatible with our project.  When you run your Heroku app, package.json will determine what is installed.

 

You also need to create a file called Procfile ( with no extension ), like this:

web: node server.js

Think of this like a BAT or SH file that is run on Heroku’s servers when you run it.  You will see this in action shortly. 

 

Now that our application is configured and ready for Heroku, lets get the tools installed.  Head on over to the Heroku toolbelt page and install the version that is right for you.  They have a Windows, Linux and Mac version, all of which should follow basically the same instructions.  For this tutorial I will be using the Windows version, but you should be able to follow along without issue no matter what OS you run.

 

image

 

 

After install completes, open a command prompt ( or terminal… ) and type:

heroku login

Log in using the email address and password you signed up with. If prompted to create an SSH key, allow it.  If you need to generate an SSH key manually, you can do so with the following command:

ssh-keygen –t rsa –C [email protected]

You can then tell heroku to use this key with the command:

heroku keys:add

Now it’s time to set up a git repository, which is how we deploy to Heroku.  Don’t worry, its not all that scary.  Again, at the same command line, switch to your application directory ( this part is very important, make sure you cd to your application code directory ) and enter:

git init

git add .

git commit –m “This is a commit comment, put whatever you want”

This combination of commands creates a git repository, adds everything from the current directory and below to it, then commits the changes.  If you look in your directory, you will now notice a .git folder. 

 

Now lets create and deploy our app to heroku. First enter:

heroku create

git push heroku master

If prompted for a security question about trusting heroku, type yes.  These two lines essentially created the app on heroku’s servers, then pushed our git archive to heroku.  At this point, your code is now deployed to Heroku’s servers… almost there!

Now we fire up a copy of our app on their server.  This is where the Procfile we defined earlier comes in.  Essentially you are going to run the command you defined in web: in your Procfile, do this with the command:

heroku ps:scale web=1

Finally, since we are using express, we need to set an environment variable:

heroku config:add NODE_ENV=production

 

And your app is now deployed and live.

 

So… um… where is it?  Ah yeah… type:

heroku apps

image

These are your app server names.  In your case you will have just a single one right now.  Simply take this name and add .herokuapp.com to it.

 

For example, when you open http://radiant-planet-8015.herokuapp.com you see:

image

 

At this point we are running a cocos2D app, served by Node, hosted on Heroku!

 

You can try it out yourself, but I make no promises the server will still be running, so do not consider that URL permanent.  At this point you should be able to deploy your own app to Heroku.

 

The next part is now live.  In this section we will add the ability to populate our application with data.

General


15. July 2012

 

Here at GameFromScratch.com, we have run a number of guides on how to create games but nothing on how to actually make money off them.  The following is a guest post by Ben Chong, an HTML5 game developer and founder of marketJS.com.

The advice, views and opinions expressed below are not necessarily those of GameFromScratch.com.

 

It’s been 6 months since the last guide about monetization was written. Considering how fast things are moving with HTML5 games, it’s timely to write a new one. Please note, this guide chooses the path of least resistance to the money.


Chrome Web Store

Probably the easiest to begin with. Host your game, run ads on it. Two ad networks to trust are

  • Google Adsense - variable rates, but it depends a lot on what’s on your game page. Try inserting HTML5 related keywords, because companies are spending more money on HTML5-related ads. You’ve probably seen countless “Ludei ❤ HTML5 “ and “CocoonJS” ads. Capitalize on this, and make sure some of that ad spend trickles into your pocket.
  • Ad4Game - this network displays pure game ads. You’ll be promoting other games from large game studios. eCPMs of about $1.50 - 2.00, and they do very timely NET30 Paypal payments. Contact Angelica, tell her that your game’s on the Chrome Web Store. She’ll be delighted to set you up.

If you’re feeling brave, try out Google’s In-App Payments API. It might take an hour to figure out and a few more to integrate with your game. That is, assuming that your game actually functions well with in-app purchases.


Being featured matters a lot in the Web Store.


A normal featured game fetches about 1000 plays/day. A game featured on the front page of the games section, right at the top gets about 60,000 plays/day, or 60x.


Google loves it when you showcase what their engineers have built. If you want to get your game featured, remember to integrate some of Google’s APIs: WebGL, Chrome Fullscreen, Web Audio, etc. You can’t obviously integrate all of them, but having a few will give you a boost over other game devs. Once you’re ready, start pitching playable games to Google developer advocates. You can find them all here.


Costs: your server hosting fees, integration time and pitching time


iOS and Android

Deploy your game using one of the many wrapper tools out there, like appMobi, Ludei’s CocoonJS, GameClosure and Spaceport.

Ludei seems to be the only one publicly telling the world how great their engine is. They’ve got the entire monetization suite ( iAds and in-app purchases ), which is always a bonus for developers.

The upside is, once you manage to successfully master one of the tools above, you get access to virtually 100% of the mobile app market. Whether people will actually download your game is an entirely different topic.

Before launching your game, remember that you have only one shot at this. If your game flops in the App Store, you might be able to save it by doing free-app-a-day promotions/price manipulations. However, the download spikes you get from promotions do not last. Your game will be piled under 1000 new games being published each day. Find your niche, and market wisely via developer forums like TouchArcade. Don’t forget to pitch to blogs like Kotaku, they always enjoy a good story.


Costs:

  • appMobi charges $99 for a game dev toolkit.
  • Spaceport takes 10% of anything you earn.
  • CocoonJS and GameClosure are free, but you need to personally contact the companies.
  • hours in learning how to use the tools and integrating with your game.
  • iOS dev account costs $99/year.
  • Google Play account costs $25/year.

Facebook

Facebook canvas games don’t get the attention they deserve, but they’re still wildly profitable if done right. The virality from game invites/activities are what you should be focusing on when designing a Facebook game.

Ads and virtual goods (Facebook Credits) work well here. Note that Facebook doesn’t allow google ads running, so you need to look for other game-focused ad partners like Ad4Game.

Another caveat: not all HTML5 games will work perfectly on Facebook, because they still have a percentage of users that have older browsers. What to do? Your best bet is to politely ask them to download and use Chrome, or the Google Chrome Frame plugin.


Costs:

  • server hosting fees
  • integration time with Facebook APIs

Mac App Store

Not as popular as the iOS App Store, but worth a shot. One of the earliest HTML5 games we noticed here was Onslaught Arena.


Google+ Games

Google is a bit picky when it comes to selecting partners, on grounds of maintaining the user experience. You need to have a reputation and a hit game to be considered ( think Triple Town ).


Intel App Up Store

Intel gives you access to the PC app market. No hard numbers on revenue, but they run a small fund to encourage developers.


Pokki Store

Pokki gives you access to the desktop games market. Wrap your game inside their SDK and deploy! We don’t have hard numbers of how well their games monetize. Last we know, they ran a HTML5 games contest which proved lucrative.


Mozilla App Marketplace

Should launch in late Q3 2012. Firefox has about 25-28% of the browser market. Putting your games here should theoretically produce similar revenue numbers to that of the Chrome Web Store. Mozilla has bigger plans ahead, particularly in mobile. Would be interesting to see if this ties in well with the App Marketplace.


Sell distribution rights

An increasing number of publishers are looking to pepper their own game portals with fresh HTML5 content.

These publishers are looking to license games that run on the web and mobile ( yes, games that run on the mobile safari/android). There are a few ways you can capitalize on this:

  • sell exclusive rights for a high price ( $1500 - 2000+ ) to one publisher/
  • sell non exclusive rights for $500+, to multiple publishers.
  • sell distribution rights to publishers, and take 60-80% from all ad/virtual goods revenue generated

You are free to negotiate any type of deal with publishers. Most developers prefer upfront payments, but if you think the publisher has impressive reach, doing a revenue split from ads/virtual goods might be a smart move. A top developer recently made 4 figures a month from Google ads alone.

Costs

  • time to optimize your game for the mobile web.
  • time to integrate your game with the publisher’s APIs ( if required ).

How do I find these publishers?
  • Our startup, marketJS connects HTML5 game developers with publishers. It’s free to use, and we’ve got a good database of publishers hungry for games. Upload a game, and start negotiating!

So many choices

There’s no single best option to monetize your games. Build a team, adopt a shotgun approach, analyze results and seek advice from other developers.


Can I go full-time making HTML5 games?

Yes, you can make a high 5 figures/year by making HTML5 games. This excludes development contracts and funded projects. Snag a few of those, and you might even hit 6 figures.

Pick your battles, test each market, and keep polishing. The games industry is very competitive, but extremely fulfilling.

General


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


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


GFS On YouTube

See More Tutorials on DevGa.me!

Month List