Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

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

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 ,

    Month List

    Popular Comments