Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
27. May 2014

 

So I’ve been looking at creating games using Phaser with TypeScript and I’ve run into my first few annoyances.  The first of which is certainly debugging.  At first glance debugging looks wonderful then I realized my mistake.  In the previous post I said I had to add the generated JS file to the project for a breakpoint to be hit and suddenly I understand why.

 

You can’t debug TypeScript code in Chrome or Firefox.

 

Ugh.

 

If you set a breakpoint in Visual Studio in a TypeScript file:

image

 

Then run your application using Internet Explorer as the target:

image

 

And…

image

 

Now switch to Chrome or Firefox and your breakpoint will never be hit.

 

 

Well that kinda sucks.  At the end of the day it’s not a deal breaker, Internet Explorer is getting better and with Windows Tablets and Phones, should probably be a device target for you, so using Internet Explorer as your debug platform shouldn’t be a huge deal, especially if you are using Visual Studio as your development device.

 

 

Debugging TypeScript in Firefox or Chrome

 

Of course both Firefox and Chrome have built in debuggers so you can easily debug the generated JavaScript.  However, if you want to develop in the language your programmed ( be it TypeScript, Dart or Coffeescript ) you need another option…

 

Source Maps.

 

All major browsers support source maps now, but may require you to jump through a a couple hoops.  A source map is basically what it says, a map from one language to another, so the debugger can run the JavaScript code but show you the line that actually generated it.

 

First we need to tell Visual Studio to generate a source map for our TypeScript project.  Right click your Project file in Solution Explorer and select Properties.

image

 

Select TypeScript Build and in the Debugging section check Generate Source Maps.

image

 

Now build your project and the js.map file should be generated.

 

Source map with Chrome and TypeScript

 

Now let’s take a look at the process in Chrome.  Run the project in Chrome from Visual Studio.  In Chrome we now need to enable source maps.

Press F12 to bring up the developer tools if not already open.

Select the gear icon.

image

 

In the resulting window make sure Enable JavaScript source maps.

image

 

Now you will see your ts files are available in the sources tree.  Notice how I set a breakpoint in the TypeScript source ( line 12 )?

image

 

Now refresh in Chrome:

image

 

The corresponding line in the generated JavaScript will be triggered when the breakpoint is hit.

 

Not perfect but definitely better.

 

Source map with Firefox and TypeScript

 

From Visual Studio run in Firefox.

Load the Debugger ( CTRL + SHIFT + S or Tools –> Web Developer –> Debugger ).

Click the gear icon and now select Show Original Sources

image

 

Now Firefox will show your TS source ( and no JS files unlike Chrome, to see them turn Show Original Sources off ).  As you can see you can now set a breakpoint in the TypeScript source:

image

 

Unlike Chrome however the debugger also works with the TypeScript sources:

image

 

 

 

Summary and another gotcha!

 

If you are working in Visual Studio 2013 the VS debugger works flawlessly with Internet Explorer.

If you want to work in another browser with TypeScript use Source Maps if you don’t want to work with the generated JavaScript.  In terms of browsers, Firefox supports source maps much better than Chrome does.

 

Now another gotcha that took me a bit of time to stumble to the solution of.  When you create a source map its actually added at the bottom of the generated JavaScript file (app.js in this case), like so:

})(GameFromScratch || (GameFromScratch = {}));
//# sourceMappingURL=C:/temp/Phaser/TitleScreen/app.js.map

 

Here is the gotcha, you absolutely cannot use that pathing in Chrome nor Firefox, you simply wont get a source map in either browser.  Instead edit it to use relative paths like:

 

})(GameFromScratch || (GameFromScratch = {}));
//# sourceMappingURL=app.js.map

And you are good to go.

Programming


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:

image

 

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

image

 

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:

 

image

 

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">
<head>
    <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>
</head>
<body>
    <div id="content"></div>
</body>
</html>

 

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() {
        this.game = 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" };
        this.game.add.text(0, 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:

image

 

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 this.game.add.text().  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.

 

Programming


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:


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

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.
  • Sound.play 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:

image

 

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:

 

image

 

 

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:

image

 

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:

image

 

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

image

 

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:

image

 

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

image

 

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:

image

 

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

image

 

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

image

 

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.

image

 

image

 

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.

 

image

 

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 SpellJs.com.

Programming


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.

 

image

 

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.

[SNIP]

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:

 

image

 

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.

News


GFS On YouTube

See More Tutorials on DevGa.me!

Month List