Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon Join the GFS Discord Server!
23. May 2014



I believe there is an old law or charter that requires all programming adventures to start off with a Hello World application, and who am I to break the law ( or charter ) ?


Of course before you get started, you have to choose your tools.  One of the cool things about working in HTML5 is you can simply pick your favorite text editor ( such as Sublime Text or Notepad++ ) and just start typing.  TypeScript adds a small layer of complexity over top but not too much.  I’ll cover TypeScript in a second, in the meanwhile back to the tools.  Personally I like working in an IDE like environment, integrating as much of the development cycle ( build-compile-run-debug, although not all are relevant to HTML5 ) in a single location.  For TypeScript development there are two clear leaders to chose from, both of which I have access to licenses for.  Visual Studio and WebStorm.  You can use the Express versions of Visual Studio to do TypeScript development if you don’t have a full license, while Webstorm is available with a 30 day license ( and is well worth the 50$! ).


Personally I chose Visual Studio 2013 for a couple reasons.  First, I’ve been doing lots of Java development lately, so I miss the familiar comforts of Visual Studio, which in my opinion is still the best IDE on the market.  Second, Microsoft developed TypeScript, so you have to imagine the tooling support is pretty good.  And it is.  Of course you’ve got solid code completion, error checking and syntax colouring:



Perhaps more importantly, debugging support works as well.  You can set breakpoints, inspect values and step line by line:



However, there is a problem I encountered here in Visual Studio 2013.  It simply wouldn’t hit any breakpoints I set in code.  Granted, this is a bit of a big problem, no?  Anyways my solution was pretty simple… add the generated JS files to the project and you are good to go:




There is probably a better solution, but this worked for me.  Oh, speaking of Visual Studio 2013 problems, I encountered another one.  When you try to create a new TypeScript project, you may be prompted to install TypeScript for Visual Studio 2013.  However, when you click the link for it, it brings you to the website for TypeScript for Visual Studio 2012!  If you want to do TypeScript development in Visual Studio 2013 you need to download and install Visual Studio 2013 Update 2.  Advanced warning, it’s 3.6GB.  Of course, if you’ve been using Visual Studio recently, or just downloaded it, you probably already have Update 2 installed so it wont impact you.  Me, I was out and used my mobile connection to download the update… ouch!


Otherwise for getting started with Phaser in Visual Studio using TypeScript this tutorial is a great place to start.  A few things have changed ( like the above mentioned Get TypeScript link process no longer working ) and a few of the generated names are different ( default.htm is now index.html ), but otherwise it will get you up and running in a few minutes.  Basically you just download or clone Phaser from Git.  Truth is though you only need to add a few files to your project all available in this folder.  The files of importance are phaser.js and phaser.d.ts.  The first file is Phaser itself ( the .min version is optimized for size for when you deploy, but use the full slower to load version for development ) and the .d.ts are the TypeScript definitions.



Why TypeScript


You may be asking what exactly TypeScript is?

It’s a Microsoft created language designed to make JavaScript development easier.  One thing to be aware of upfront, TypeScript IS JavaScript, in that 100% of JavaScript is valid TypeScript.  This makes TypeScript a superset of JavaScript.  You could take any .js file, rename it .ts and it will run just fine.  At the end of the day, all TypeScript is compiled down to ordinary JavaScript, remarkably readable JavaScript to boot.


The “Super” part of superset is what makes TypeScript so useful.  Basically it adds a number of constructs on top of the language that make dealing with some of JavaScript’s worst warts easier.  More than anything, TypeScript allows you to deal with increasingly complex applications, something JavaScript really doesn’t make easy.  That’s all nice and good to say but you may be asking How?  Good question!


First of all TypeScript adds a Type system on top of JavaScript… thus the name.  JavaScript has very mutable types… if you pass a string where it expects a number, it happily converts as best it can, even if that isn’t what you want.  With TypeScript, if you define a type for a variable then use it wrong it will catch it at compile time.  This alone should cut down on hoards of logic errors.  Of course for those that want JavaScript style ducktyping “any” exists.


Second, TypeScript adds classes, something that is coming in the future for JavaScript.  This allows data hiding ( marking members as private ) as well as built in constructor support.  Data hiding is something JavaScript desperately needs, allowing multiple programmers to write code that doesn’t stomp all over each other.  TypeScript also adds the interface, which is a class without implementation, or somewhat easier to grok as a “contract”.  TypeScript also enables generics.


Third and somewhat related to the second, it also adds Modules, something modern day JavaScript hacks in using closures.  If you have used C++, Java or C#, think namespaces.  There is also functionality in there to make the JavaScript experience more consistent such as always prefering === for comparisions ( 1 == “1” isnt true in Typescript, in fact it’s an error ), consistent this handling, etc.


It’s Microsoft, shouldn’t I be afraid?

When it comes to programming languages this is a perfectly legit concern when it comes to Microsoft.  Many of us remember the “embrace and extend” approach of J#, which was a Microsoft supplied Java implementation that only worked on Windows machines.  JScript.NET and Managed C++ can certainly be looked at as lesser evils created by Microsoft.


In the case of TypeScript though, this isn’t really valid for a couple reasons.

  • it’s open source.  Real open source too not some fake opensource lite ( Its Apache 2.0 by the way ).  So if they try to make it MS only people can literally tell them to fork off.
  • there is nothing Microsoft specific in there.
  • at the end of the day, it compiles down to JavaScript.


TypeScript is hardly unique, is it?

Nope, there are other languages that work in a very similar manner and work to solve the same problems.  The closest two are CoffeeScript and Google’s Dart.  That said there are tons of other languages that compile into JavaScript such as GWT ( Java to JavaScript ), Haxe, Kotlin ( Kotlin –> JVM –> JavaScript ) and probably a few dozen’s more.  What makes TypeScript most appealing to me is it’s simularity to normal JavaScript ( unlike CoffeeScript ) and it’s not Google ( unlike Dart and GWT )… what can I say, I’ve been burned too many times from Google’s horrific developer support.  Unlike Microsoft, Dart does very much have vendor tie in ( Chome/ChromeOS native Dart support ), something to be very aware of!


Ok… set up, tooling and language bits behind us, let’s take a look at a simple Phaser app!


First you have your host index.html.  This is the webpage you load in your browser to get things started:


<!DOCTYPE html>

<html lang="en">
    <meta charset="utf-8" />
    <title>Hello Phaser</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser.js"></script>
    <script src="app.js"></script>
    <div id="content"></div>


Most important lines here are the two <script> tags, bringing in first the Phaser libraries then your generated js code.  ( app.ts will automatically be converted to app.js by Visual Studio when you run if no errors occur ).


Now let’s take a look at App.ts:


class SimpleGame {

    constructor() { = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create });

    game: Phaser.Game;

    create() {
        var text = "Hello World!";
        var style = { font: "65px Arial", fill: "#ff0000", align: "center" };, 0, text, style);


window.onload = () => {
    var game = new SimpleGame();


And that’s it.  Run it and your selected browser should automatically open and you should see:



Humble beginnings certainly, but beginnings all the same!

This is about the simplest Phaser application you can make.  The key line is creating game, a new instance of the Phaser.Game class.  The values we are passing in are the width, height, renderer, parent and a collection of functions that can will be called during the programs lifecycle.  The width and height are self explanatory.  The renderer tells Phaser how to render your game, using Canvas, WebGL or Headless ( for server side apps that don’t render ).  The value Phaser.AUTO let’s Phaser decide.  ‘content’ is the name of the HTML element to render to, you may notice back in the HTML file our DIV name is content, this is what connects Phaser to your HTML. The final value { create: this.create } is a name value pair saying for the “create” function use this.create.   There are a number of States that Phaser can be in, create, preload, render, update.  In this case we are simply defining the create state, so when Phaser enters a create state, our game’s create function will be called.


In the create method we simply create a text object and add it to our game using  The style value is in traditional CSS styling format.  The Text value is obviously the text to display.  Finally we wire up window.onload() to create an instance of our game starting the whole process off.  If you aren’t used to JavaScript programming window is a top level global object provided by the browser, onload is the method called predictably enough when your webpage loads.


Essentially the work flow goes:

  • user opens page in web browser
  • Phaser.js script is run and Phaser is loaded.
  • Your app ( app.js ) code is loaded
  • Your app registers a create method and creates a game instance then registers an onload handler.
  • webpage finishes loading, your pages onload is called creating an instance of your game.
  • Phaser enters a create state and your create() function is called.


Normally your application would continue to cycle through the various states ( update/render mostly ) and this is where your game would “run”.  We will look at this in more detail soon.


All told I have to say my initial impressions of Phaser are incredibly good.  There are hundreds of examples, the documentation is ample and well written.  Obviously it’s too early to comment on performance, design or other technical aspects yet.



21. May 2014


Yesterday saw the release of 2.0.5 of the Phaser game library.  Phaser is one of those libraries I am hearing about more and more recently.  It’s a JavaScript/Typescript game library featuring most of the things you would expect in a modern game engine, including:

  • WebGL and Canvas ( Pixi.js ) renderers
  • Physics
  • Sprites
  • Animation
  • Grouping
  • Input
  • Sound
  • Tilemaps
  • Caching
  • Plugins


Release 2.0.5 adds:

  • TypeScript definitions fixes and updates (thanks @luispedrofonseca @clark-stevenson @Anahkiasen @adamholdenyall @luispedrofonseca @WillHuxtable)
  • Input.getPointerFromIdentifier docs update to reflect where the identifier comes from. Pointer properties now set to give it fixed defaults (thanks @JirkaDellOro, #793)
  • Pointer.pointerId added which is set by the DOM event (if present in the browser). Note that browsers can and do recycle pointer IDs.
  • Pointer.type and Pointer.exists properties added.
  • QuadTree.retrieve can now accept either a Sprite with a physics body or a Phaser.Rectangle as its parameter.
  • PluginManager.add now accepts additional parameters and if given a function it will pass them all to the Plugin constructor.
  • Tilemap.getTile has a new nonNull parameter. If true it won't return null for empty tiles, but will return the actual Tile in that location.
  • Math.interpolateAngles and Math.nearestAngleBetween have been removed for the time being. They threw run-time errors previously.
  • PIXI.InteractionManager is no longer over-written if the object already exists (thanks @georgiee, #818)
  • Key.justPressed and justReleased incorrectly set the delay value to 2500ms. Now defaults to 50ms (thanks @draklaw, fix #797)
  • Stage.backgroundColor can now accept short-code hex values: #222, #334, etc.
  • Pointer.withinGame is now accurate based on game scale and updated as the Pointer moves.
  • Stage.bounds is now updated if the game canvas offset changes position. Note that it contains the un-scaled game dimensions.
New Features
  • New force parameter added to Group.set, setAll, setAllChildren, setProperty which controls if a property is created even if it doesn't exist.
  • Group.hasProperty will check a child for the given property and return true if it exists, otherwise false.
  • Phaser.Tween.from allows you to set tween properties that will end up where the current object is (thanks @codevinsky, #792)
  • Input.getPointerFromId will return a pointer with a matching pointerId value, if any. pointerId is a value set by the browser in the DOM event.
  • ArcadePhysics.getObjectsUnderPointer will return all children from a Group that overlap with the given Pointer.
  • InputManager.minPriorityID lets you set the minimum priority level an object needs to be to be checked by a Pointer. Useful for UI layer stacking.
  • New consts: Phaser.Tilemap.NORTH, SOUTH, EAST and WEST to use with plugins and generally just handy to have.
  • BitmapData.processPixelRGB added undefined check (thanks @muclemente, fix #808)
  • Phaser.Utils.transposeArray will transpose the given array and return it.
  • Phaser.Utils.rotateArray will rotate the given array by 90 or 180 degrees in either direction and return it.
  • BitmapData.rect provides a quick way to draw a Rectangle to a BitmapData.
  • Button.onOverMouseOnly is a boolean that causes onOver events to fire only if the pointer was a mouse (i.e. stops onOver sounds triggering on touch)
  • Tilemap.setCollision has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
  • Tilemap.setCollisionBetween has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
  • Tilemap.setCollisionByExclusion has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
  • Tilemap.setCollisionByIndex has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
  • Graphics.drawTriangles will draw an array of vertices to the Graphics object (thanks @codevinsky, #795)
  • Polygon.area will calculate the area of the Polygon (thanks @codevinsky, #795)
  • The Tiled JSON parser will now include Tiled polygons, ellipse and rectangle geometry objects in the resulting map data (thanks @tigermonkey, #791)
  • Input.addMoveCallback allows you to bind as many callbacks as you like to the DOM move events (Input.setMoveCallback is now flagged as deprecated)
  • Input.deleteMoveCallback will remove a previously set movement event callback.
  • Mouse will now check if it's over the game canvas or not and set Pointer.withinGame accordingly.
  • Mouse.mouseOutCallback callback added for when the mouse is no longer over the game canvas.
  • Mouse.stopOnGameOut boolean controls if Pointer.stop will be called if the mouse leaves the game canvas (defaults to false)
  • Tilemap.searchTileIndex allows you to search for the first tile matching the given index, with optional skip and reverse parameters.
  • Tilemap.layer is a getter/setter to the current layer object (which can be changed with Tilemap.setLayer)
  • Cache.checkKey added - allows you to pass in a Cache type and a key and return a boolean.
  • Cache.checkCanvasKey(key) - Check if a Canvas key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkTextureKey(key) - Check if a Texture key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkSoundKey(key) - Check if a Sound key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkTextKey(key) - Check if a Text key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkPhysicsKey(key) - Check if a Physics key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkTilemapKey(key) - Check if a Tilemap key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkBinaryKey(key) - Check if a Binary key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkBitmapDataKey(key) - Check if a BitmapData key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkBitmapFontKey(key) - Check if a BitmapFont key exists in the cache (thanks to @delta11 for the proposal)
  • Cache.checkJSONKey(key) - Check if a JSON key exists in the cache (thanks to @delta11 for the proposal)
  • New movement data added for a Pointer Locked mouse (Pointer.movementX/Y) (thanks @woutercommandeur, #831)
  • ScaleManager.bounds is a Rectangle object that holds the exact size of the game canvas, taking DOM offset and game scale into account.

The Plugins have now all moved to their own repository

Bug Fixes
  • Line.pointOnLine corrected algorithm (thanks @woutercommandeur, fix #784)
  • Line segment collision fails under certain cicumstances (thanks @woutercommandeur, fix #760)
  • The P2 DistanceConstraint method signature has changed. Updated Phaser so maxForce is now passed as object (fix #788)
  • Moved the this._reversed flag outside of the property loop in Tween (as per tween.js issue 115)
  • Emitter.makeParticles updated to use Array.isArray() check on the key/frame values, so non-string objects can be passed in (thanks @AnderbergE, fix #786)
  • Tilemap.createFromObjects will now force the creation of the property again even if it doesn't exist (regression fix from 2.0.4)
  • Phaser.Line.intersectsPoints fixed by properly checking the boundaries (thanks @woutercommandeur, fix #790)
  • Group.set and setAll were changed in 2.0.4 to not create the property unless it existed. This broke backwards compatibility, so has been fixed.
  • now returns the Sound object (thanks @AnderbergE, fix #802)
  • Device Silk UA test updated to avoid Safari conflict (thanks @jflowers45, fix #810)
  • Sound.stop on Samsung S4 would randomly throw a DOM error. Wrapped the audio stop in a try/catch (thanks FSDaniel)
  • RandomDataGenerator.integerInRange would return a non-integer value if you passed in a float.
  • Timer class updated so that code-resumed pauses don't mess up the internal _pausedTotal value (thanks @joelrobichaud, fix #814)
  • Timer class when paused by code after a game-level pause wouldn't set the codepaused flag (thanks @joelrobichaud, fix #814)
  • Stage.backgroundColor now properly accepts hex #RRGGBB and color values 0xRRGGBB again (fix #785)
  • Color.getRGB would return incorrect color components if a color value without alpha was given, now works with both 0xRRGGBB and 0xAARRGGBB.
  • Color.getWebRGB now works regardless if you give an 0xRRGGBB or 0xAARRGGBB color value.
  • If an object was drag enabled with bringToTop, the onDragStop event wouldn't fire until the mouse was next moved (thanks @alpera, fix #813)
  • RetroFont.text would throw WebGL errors due to an issue with Pixi.RenderTexture. Fixed in Phaser and submitted code to Pixi.
  • RenderTexture.resize would throw WebGL errors due to an issue with Pixi.RenderTexture. Fixed in Phaser and submitted code to Pixi.
  • Group.hasProperty fixed to not use hasOwnProperty, but a series of in checks (thanks @mgiuffrida for the idea, #829)
  • Tilemap.removeTile sets tiles to null but should set to index of -1 (thanks @draklaw, fix #835)


Plugins being moved to their own respository should make contributing to Phaser easier.  The repository is available here.



Personally I’ve been meaning to look closer at Typescript for a quite a while now and I’ve decided to do it with Phaser.  Of course I am going to document the process as I go, so if you are interested in Phaser or Typescript, stay tuned.  It’s not going to be a proper tutorial; as I have zero experience as of right now.  It should however still be useful to someone looking to get started with Phaser.

News Programming

1. October 2013


This game engine came to my attention yesterday on reddit so I took a bit of time to check it out and it has potential.


First off, it also has a few problems.  The installer has absolutely no feedback to say that it installed, no UI, nothing.  It left me scratching my head about what was going wrong and in the end everything was working fine behind the scenes.  It all ended up being moot though, as I never got the evaluation key I applied for anyway, so I was never able to run the local executables anyway.  This is all those teething growing pain issues and no doubt will be resolved in time.  My money says my email provider simply rejected their email… it happens.  Fortunately we can still get a pretty good look as the IDE runs in the browser as well and their is a demo on their site.


Speaking of which, here it is:



You can run the editor in demo mode by clicking here.  Unfortunately you can’t actually create projects this way, but it will give you an idea what SpellJS can do.  Otherwise you need a key.  There are a couple options here, free, not free and slightly more expensive.  Or more specifically:





So basically its free for non-commercial use, or 99 euro per developer if you want to make money selling your game directly.  If on the other hand you want to make money via advertising and/or make use of the analytic or cloud features it’s 239 euro per developer.  All told, fairly reasonable pricing in my opinion, but they will face the same trouble all other engine companies face…  a lot of their competition is free.


Then there is the matter of what platforms are supported:



That’s most of the major platforms covered with Flash support as a fallback for the non-compliant browsers out there.  The HTML5 layer is built over WebGL with fallback to Canvas/CSS3 rendering for non-compliant browsers.  The Android and iOS publishing is as native applications, not as web apps by the way, which is good as the iOS browser performance is often abysmal while Android is a mixed bag.


Ok, back to SpellJS…  the layout is pretty straight forward.


Games are laid out in terms of Scenes.  On the left hand side you’ve got the scene graph:



Right click on a scene and select Render Scene and it appears in the Scene view:



Here you can this scene in your game.  There are buttons across the top for pausing the scene and switching in and out of development mode.  Unfortunately they didn’t seem to work for me, I am not sure if this is a side effect of the editor.  SpellJS is supposed to support live editing, allowing you to change your game as you play it.


Across the right hand side is a context sensitive area depending on what you have otherwise selected.  This for example is what happens if you select the physics component in Update:



While if you have an entity selected, such as the HighScore, you will see:



This is where you would configure your various entities by setting the properties of attached components, or by adding new components.  Much like Unity, you can attach a series of components to your entities and multiple entities to your scene.


So, where the heck does code go?  That is the realm of scripts.  On the left hand panel, select Library:



And you will see the various assets that make up your game, such as graphics sounds and… scripts.



Here for example is the script showFinish showing in the in IDE editor:



The editor supports code folding, syntax highlighting but unfortunately doesn't seem to support code completion.


Scripts arent your only option, if you look the various systems that compose the update group, if you right click demo_asteroids.system.shoot and select show for example, the code that composes the system will be shown in the editor.





On other big question is… how is the documentation?  Quite good actually.  There is a Getting Started guide, a half a dozen tutorials and a fairly comprehensive, if a little sparse, reference guide.  One annoyance is, each click opens in a new tab, leading to tons of tabs to be closed.




All told, this looks like a very polished product and if you like working in JavaScript is certainly worth checking out.  Should my product key ever arrive and my calendar opens up a bit, I will take a closer look.  You can check them out at


3. September 2013


Way back in October of 2012 I mentioned the Platino 2D game engine.  It runs in Appcelerator Titanium a cross platform JavaScript based mobile development system.  Platino appears to have it’s roots in QuickTiGame2D, and open source 2D Titanium game engine.  Anyways, after several months in closed beta Platino is finally available to the public and it’s grown into an entire family of products.




Excerpts from the launch press release:

Over the past several months, we’ve been fine-tuning our Lanica product line and giving some of you early access to new goodies as we roll them out.  During that warm-up phase, we focused mainly on big studios to ensure that Lanica could handle the most heavyweight demands of mobile gaming and interactive development before we let it loose to the masses.

And now, without further ado, we’re releasing the Lanica Game Platform to indie developers!

What does that mean?  Well, most importantly, we’ve rolled out lower prices for indie devs, non-profits, and educational institutions to access Lanica.  You’ll no longer have to break the bank to have the power of our entire game-making platform in your hands.  Now, no matter what the scale of your operation, any developer can make use of all the big guns that we offer.


If you’re new around these parts, we should probably explain why we’ve decided to release Lanica as a three-pronged platform for making games:

You see, we realize that most developers out there already have their own processes in place, and it’s unfeasible for them to just drop everything and pick up a whole new platform every year.  That’s why we’ve built the Lanica Game Platform as a multi-tiered but separable platform, so developers can incorporate Lanica into their workflow at any scale — whether it’s just one tool or the entire platform.  We didn’t want Lanica to be an ‘all or nothing’ deal, that simply would not have been fair.  Instead, you can mix and match specific pieces of the Lanica Game Platform to fit your own development needs.

For instance:  Let’s say you absolutely love your current code editor, but are in dire need of a better sprite animator — Animo Sprites will have you covered!  Want better particle effects, but can’t part with your current framework?  You can use Animo Particles!  Need to step up to a completely new game engine? Then Platino (a.k.a. the JavaScript juggernaut) is your baby!

We don’t want to leave anyone out in the cold, so be sure to check out our entire product line and see what could work for you.


I was in on the closed beta and will say, working in Titanium is a breeze and the SDK is quite nice.  I never really got much into using the other tools other than to play around with the particle tool.  What I’ve been waiting on most was pricing and today we’ve finally got it:




Note the * beside all of the prices?  That’s because you don’t actually purchase monthly, it’s a bit of marketing slight of hand.  So basically the Platino Engine is 816$ a year for companies, or 408$ a year for indies.  Add another 144/72$ if you want to add in app purchase support.  To be honest, those prices are a great deal higher than I was expecting, especially given the amount of competition there is out there.  I am especially shocked there isn’t a complete package price point.


That said, if you are using Titanium and want a game engine, Platino is the only game in town and it’s a good game indeed.  Just not a cheap one, at least compared to it’s peers.


2. July 2013

Back in March I reported that Ludei was bringing WebGL support to their HTML5 performance wrapper, CocoonJS.  Today I received the following email:


The latest version of our Cloud and Launcher is available now! 
The wait is finally over! CocoonJS1.4 is NOW available in Google Play! We are still pending approval with the Apple App Store, so please check daily for its debut! This version includes the following awesome features:

  • WebGL support is now available! For the first time ever, publish your 3D games to iOS and Android devices!
  • Convenient 1-click Publishing to 5 App Stores -- bundles generated for: Apple, Google Play, Amazon, Chrome Store, Pokki
  • Improved Configuration Options for the Ludei Cloud Compiler
  • Updated Third Party SDKs -- advertisements, social integration and in-app payments
  • Improved Resources Management
  • Improved Audio Implementation that supports more HTML5 features
  • Improved webview support allowing you to develop HTML5 web apps while still having all our extensions available to monetize and make your game or app successful
  • And much more!! Click here to read the blog post!


This means you can now develop WebGL games and use Cocoon to deploy them to iOS and Android.  I am not sure if you ever tried running a WebGL application in a mobile browser… it's appalling.  None of the official browsers support WebGL, and the few that do ( Dolphin? ) got abysmal framerates.  So, if you want to run a high performance WebGL based game on mobile devices, CocoonJS is about your only option.

If you've never heard of CocoonJS, it's basically a high performance, striped down browser optimized for gaming.  It acts as a host for your game, so you bundle your game and Cocoon together to create an App Store deployable application.


In the same release, Ludei also announced:

Ludei Secures $1.5M in Funding 
We just announced that we recently received $1.5M in funding from key venture capitalists and angel investors, further validating the increasing industry support of HTML5 development. Click here to read more.

So you don't need to worry about they going anywhere sometime soon!


AppGameKit Studio

See More Tutorials on!

Month List