Application design tools… what do you use?

3. June 2013

 

As I am just starting out on a new game these days, I am in the most wishy-washy stage of development, design.  Over the years, the way I went about designing an application has changed greatly as technology, my team size and frankly, me, have changed.  Now that I work mostly alone I find I am a lot less formal than I used to be.

 

In the ancient days, I ignored design completely, or used a spiral bound binder and a pencil.  On my last large scale project I worked mostly in Visio for object design and program flow modelling.  For idea capture and design documents, OneNote was my loyal ally.  If you find yourself working using a paper and pencil most often, you should check out OneNote, it is probably the greatest application Microsoft make and I say that without hyperbole.  It is an under-exposed and under-appreciated application.  Whenever I see websites comparing Evernote or Google Keep I laugh and laugh and laugh.  Those two programs aren't in the same league as OneNote.  That said, the OneNote mobile offerings, at least on iOS and Android are pretty terrible and the web version is only ok.  The application version though, its just great. 

 

That said, this combination of applications has definite limits.  These days I am working more commonly across platforms, splitting my time about 50/50 between MacOS and Windows.  Unfortunately Mac Office doesn't include OneNote and Visio isn't available either.  Also, I am no longer part of MSDN and Visio is stupidly expensive.  The other major change is the rise of tablets.  I find myself on mobile much more often now, either the iPad or my Galaxy Note ( which you can pry from my cold dead hands! ).  So, if I am out and about and an idea comes to me, its nice to just whip out my phone or tablet, which are on instantly, jot the idea down and move on.  Additionally, I find touch a much nicer interface when working on a fluid design.

 

One of the flaws of working with code modelling software is it is often too advanced for me.  I don't need it to validate my class design, I am not working in a team or with contractors, so I don't need it to create formal design documents or strictly defined interfaces.  At the end of the day I generally just like to enter a class name and description, then model relationships between other classes.  That or create flow charts that illustrate user or application flow.  Visio can do this, but it is massive overkill.  Enter the mind map.

 

In my life, I always had a bit of a mental block towards this kind of software…  I don't really know why, but I never really looked into it closer and I regret that, as mind mapping is basically what I've needed all along.  Essentially mind mapping is just a diagramming software that models relationships.  That's about it and exactly what I am looking for.  There are reams of mind mapping applications out there, from downloadable applications to web services, from free to very expensive.  If you want to try one out free, you can try FreeMind or XMind to get started.  If you haven't tried one yet, you really should.

 

Myself, I am using a combination of applications for program design.  My design documents and "raw text dump" application of choice is still OneNote.  I vastly prefer authoring in the full application in Windows, but the web application and mobile apps work in a pinch, at least for reading.  On iPad I use iThoughtsHD, which you can see in action below:

IThoughtsHD

I haven't found a mind map application that works well on my Note, but I've also barely looked.  I like iThoughtsHD because it's quick, intuitive and supports the functionality I need. On top, it is compatible with most other Mindmap applications including FreeMind and Xmind that I mentioned earlier.  So I can design on the go, then open on my desktop on any platform.  Truth is though, I vastly prefer working on the tablet, it is just such an intuitive format for this kind of work.

 

If there is any interest, I will go into a bit more detail on Mind mapping and iThoughtsHD for game design.  I know this is a topic that isn't generally discussed very often, although that could be because people find it boring! ;)

 

So, that's what I use these days to design my applications ( and other projects ).  What do you use?

Design




LibGDX supporting RoboVM backend

31. May 2013

 

LibGDX has just added preliminary support for RoboVM, which is essentially a Java runtime for iOS among other things.  Previously LibGDX required a Xamrin (300$) license if you wanted to target iOS, so this is a nice step.  In their words:

 

I started working on the libgdx RoboVM backend yesterday. RoboVM is an ahead-of-time compiler for JVM bytecode, that targets iOS. It’s completely free for commercial usage, supports the entire JRE (through Android’s runtime class library), has super easy integration with Eclipse and soon Maven, and is all-around fantastics. Development is really fast, compile times are in the seconds range for the simulator (once the JRE has been compiled).

I’m doing this mostly because i want to offer a free alternative for the Xamarin/Monotouch based backend. Xamarin has been super supportive of our efforts in the past, but there are some technical hurdles that we can’t seem to overcome, e.g full JRE support, JNI performance, high compile times etc.

I got all our demo games to work in an hour. Niklas Therning, the guy behind RoboVM, supplied us with an initial RoboVM backend. I had to fix up a minor issues with ApplicationListener initialization order, and things just started to work.

It’s still early days. There’s a lot that needs to be done, but i have high hopes that this will become our new defacto iOS backend.

What’s currently missing in the backend:

  • touch coords are incorrect
  • no audio yet
  • Preferences are broken
  • some missing implementations

What’s currently missing in RoboVM:

  • Debugging
  • More optimizations. Performance seems to be good enough already, JNI calls seem to be a lot cheaper than with IKVM/Monotouch. I’m not sure if RoboVM uses LLVM’s full optimization pipeline yet.
  • A few bugs here and there, which we want to help to discover. RoboVM is tested against Android’s class library test suite, and pretty much all the tests pass.

 

You can read the entire post here.  It’s still pretty early, and as you can see there are still some issues, but its certainly a step in the right direction.

News




Corona, please stop annoying the hell out of me!

29. May 2013

So, some time back I took a look at all the various different Lua game engines and at the time one of the biggest strikes against Corona compared to it's competition was it's price.  However, about a month ago, Corona announced Starter Edition, a completely free ( non-trial ) version!  So I decided to give Corona a closer look today and my god is it annoying the hell out of me!

 

I am using Zero Brain studio and Sublime Text for development and both result in a simulator reload when you run your code, which in turn results in:

CoronaUpgradeMessage

 

Worse, the window doesn't even draw focus, so you have to tab over to it and click Continue before it will run the simulator.  It may seem like a minor annoyance, but trust me, within about 10 minutes I was ready to smash my computer.  The first time I thought, oh… that's why my app didn't load.  The second I got a little annoyed… after the 10th time seeing that message… well, I wrote this post.

 

Of course, I could just keep the simulator running, and instead of running from the editor, do a CMD+R to reload the app but this has a couple downsides.  First, this means I need to keep the simulator running and it's a battery sucking application and I'm on an unplugged laptop ( and normally this is the case ).  Second, well, it's an annoying process.

 

Fortunately I found this thread:

 

Hi @kodewulf,

Yes, we're aware of it, and we realize that it's somewhat obtrusive, especially if you build frequently. We intend to change this (to appear less often or something like that) but that must wait until the next public build. That being said, we intend to ramp up the frequency of public builds somewhat, so the wait won't be as long as you might imagine. In the meantime, this must remain "as is", and I apologize for the inconvenience.

 

Sincerely,

Brent Sorrentino

 

So they appear to be aware of the problem. That said, that post was dated April 19th, so I'm guessing this fix fell off the radar.  Just a heads up if anyone at Corona Labs is listening, this may seem like a minor point, but its annoying enough for me to stop using your product!  Little things that directly impact workflow… especially for no particularly good reason, they just have a way of getting under your skin!




The Sprite Project for the jMonkeyEngine

27. May 2013

 

In this day and age almost all graphics engines are behind the curtain based on 3D.  It's just the way graphics hardware works, so we now deal with textures instead of pixels  SpriteProjectand sprites.  At the end of the day, almost every single 3D game engine get a 2D sprite engine created on top off it, and now jMonkeyEngine is no exception with the release of The Sprite Project.

 

In case you have never heard of it, jMonkeyEngine is a complete Java based 3D engine, that is quite mature ( version 3+, over a decade old! ) and completely open source.  The Sprite Project is a 2D sprite engine built over top of it.  Here is a sample application taken from the documentation(pdf link).

 

package mygame;

import com.jme3.app.SimpleApplication;


public class Main extends SimpleApplication {

static Main app;

public static void main(String[] args) {
  app = new Main();
  app.start();
}

static SpriteEngine engine = new SpriteEngine();

@Override
public void simpleInitApp() {
  Sprite sprite = new Sprite(“Textures / Sprite.png”, “Sprite 1”, assetManager,
    true, true, 9, 1, 0.15f, “Loop”, “Start”);
  SpriteLibrary.l_guiNode = guiNode;
  SpriteLibrary library = new SpriteLibrary(“Library 1”, false);
  library.addSprite(sprite);
  engine.addLibrary(library);
}

@Override
public void simpleUpdate(float tpf) {
  engine.update(tpf);
  }
}

Pretty simple looking eh?

So if you are looking for a 2D sprite library built on top of a great Java 3D engine, you need look no further.

, ,




Taking a look at the Turbulenz HTML5 game engine

27. May 2013

So a couple weeks back there was an announcement that the Turbulenz HTML5 game engine was being open sourced. It was one of those projects I had intended to check out when I got the time…. which I finally did.

 

What is Turbulenz?

Turbulenz is an HTML5 game engine and platform. You can create and publish your game on Turbulenz and they take a 30% cut of sales ( this of course is their business model, and 30% is fast becoming the digital norm ). You can also publish to other sites ( your own, Facebook, Kongregate ) completely free. The most recent version of Turbulenz now offers TypeScript support.

 

Installing

You need to sign up and verify your email then log in to the developer portal.

There are downloads available for Windows, MacOS and LInux. Windows ships as a exe installer, while the other two ship as .run files. On Mac or Linux simply open a terminal window and chmod +x the file you downloaded, then execute it.

Before you install you need to install the CG Toolkit! It is available from nVidia right here. With that done, the install is simply a series of yes/no questions. The script will however prompt for your admin password. I was running Snitch ( packet detector ) during the install and no outbound requests were made, so you should be safe entering it.

 

What you get?

Now that it is installed, you should see a file hierarchy like this:

Turbulenze doc structure

 

Samples are pretty impressive, there are dozens of them covering topics from physics, to video, particles, model loading and more. In the assets folder, there are a fair number of resources to get you started. They include models, shaders, materials, fonts, video etc.

 

Perhaps most impressive though is the documentation. In the docs folder there is a pdf and html… now get this...

Turbulence Doc Length

 

That's the end of the table of contents, and yes… that is 949 pages! So, lets just say Turbulenze is well documented! You should be able to access the documentation online by clicking here.

 

Running Turbulenz

Open a Terminal and change directory to the SDK install location. In my case, installed using the defauls the directory is /Users/Mike/Turbulenz/SDK/0.25.1

Then type source env/bin/activate

Now finally run it by typing ./start_local.sh

Local turbulenze running in browser

Here is one of the samples, a 3D model sample, running in the browser. Please not, the choppiness is the results of the gif framerate, not the demo. It runs at least 30fps on my Macbook Air.

 

Turbulenze3DSample

 

 

Hello Turbulenz -- A simple Turbulenz project

We are going to create a "simple application" that displays a Hello World graphics on scene. We may be redefining the word "simple" in the process!

First you start off creating a new project using the Turbulenz web interface ( http://127.0.0.1:8070 ). Full instructions are in the documentation.


Creating a new application

CreateNew

 

Once your project is made you need to run a build process.

makehtml --mode canvas-debug -t templates -t . -o HelloTurbulenz.html HelloTurbulenz.js

This generates the HTML file ( HelloTurbulenz.html in this case ) for your project. Each time you change your source, you need to run this process again. I have to admit I found this annoying, as the lack of a build cycle is exactly what I like about HTML5 development in the first place! Anyways, next up we need to create a resource mapping file. You can't simply access files like "myImage.png", you need to create a mapping.

Create a new file named mapping_table.json and add the following contents:

 

{    "version": 1.0,    "urnmapping": {        "textures/helloWorld.jpg": "helloWorld.jpg"    }}

 

 

This file basically says The file at "/textures/helloWorld.jpg" actually resides in the file "helloWorld.jpg". Once you have defined your mapping table, you need to add it to your application configuration in the Turbulenz web app!

 

Configuring the mapping table

Manage1

Manage2

 

You need to create a folder in your application directory named staticmax ( no idea why that name btw… ) and put your image there, I used the following image:

HelloWorld

 

Textures in Turbulenz need to be power of 2. This particular image is 512x256 and named helloWorld.jpg.

 

Now let's take a look at the code:

/*{{ javascript("jslib/draw2d.js") }}*/

/*{{ javascript("jslib/requesthandler.js") }}*/

/*{{ javascript("jslib/services/turbulenzservices.js") }}*/

/*{{ javascript("jslib/services/turbulenzbridge.js") }}*/

/*{{ javascript("jslib/services/gamesession.js") }}*/

/*{{ javascript("jslib/services/mappingtable.js") }}*/

/*{{ javascript("jslib/canvas.js") }}*/

/*global TurbulenzEngine: true */

/*global TurbulenzServices: false */

/*global RequestHandler: false */

/*global Canvas: false */

 

TurbulenzEngine.onload = function onloadFn() {

var intervalID;

 

var gd = TurbulenzEngine.createGraphicsDevice({});

 

var draw2D = Draw2D.create({graphicsDevice: gd});

 

var requestHandlerParameters = {

};

var requestHandler = RequestHandler.create(requestHandlerParameters);

 

var helloTextureLoading, helloTexture = null;

 

 

var mappingTableReceived = function mappingTableReceivedFn(mappingTable) {

helloTextureLoading = gd.createTexture({

src:mappingTable.getURL("textures/helloWorld.jpg"),

mipmaps:true,

onload: function(texture){

helloTexture = texture;

}

});

};

 

var gameSessionCreated = function gameSessionCreatedFn(gameSession) {

TurbulenzServices.createMappingTable(requestHandler, gameSession, mappingTableReceived);

};

var gameSession = TurbulenzServices.createGameSession(requestHandler, gameSessionCreated);

 

function tick() {

gd.beginFrame();

draw2D.begin();

if(helloTexture !== null)

draw2D.draw({

texture: helloTexture,

sourceRectangle:[0,0,512,256],

destinationRectangle:[0,0,512,256],

origin:[0,0]

});

draw2D.end();

gd.endFrame();

}

intervalID = TurbulenzEngine.setInterval(tick, 1000/60);

 

};

 

If you run that code, you see:

HelloWorldTurbulenz

 

One thing that needs to be looked at right away is the comments at the top of your code:

/*{{ javascript("jslib/draw2d.js") }}*/

/*{{ javascript("jslib/requesthandler.js") }}*/

/*{{ javascript("jslib/services/turbulenzservices.js") }}*/

/*{{ javascript("jslib/services/turbulenzbridge.js") }}*/

/*{{ javascript("jslib/services/gamesession.js") }}*/

/*{{ javascript("jslib/services/mappingtable.js") }}*/

/*{{ javascript("jslib/canvas.js") }}*/

/*global TurbulenzEngine: true */

/*global TurbulenzServices: false */

/*global RequestHandler: false */

/*global Canvas: false */

 

These are build instructions for Turbulenz and are processed when you run makehtml. These are the dependencies of your application. You will spend some time adding and removing libraries to resolve various build snafus.

 

The rest of the code is fairly straight forward, if a bit more involved than you would normally expect. If you are new to JavaScript asynchronous programming, following the programs execution might be a bit confusing.

 

We start off creating a number of required Turbulenz subsystems. Then we define a method that will be called once the mapping table is loaded. Inside we create our texture, then when it's unload function is fired, we assign the results to our variable helloTexture. Next we create our game Session, this is where createMappingTable is actually called, leading to the above callback being fired.

 

Next we create a function tick(), which is essentially our game loop. Each "loop" through the game loop ( or each time tick is called ) we call beginFrame() on the GraphicsDevice and begin() on our Draw2D object. If you have done any OpenGL programming, this will look immediately familiar. If our texture is loaded ( the joys of async processing… ) we draw our texture on screen.

 

After we define our tick() function, we then set Turbulenz to call it every 60th of a second by calling setInterval.

 

 

Of course, this is a very simple example, it doesn't use 95% of what Turbulenz has to offer, but does show you the workflow of working an Turbulenz, as well as what a simple application looks like. The framework itself is amazingly comprehensive and performs quite well on every browser I tested. On the other hand, it's complicated… sometimes needlessly so. This simple sample took me FARRRRRRRR too much time to figure out all the various hurdles ( adding assets, project layout, running and hosting applications, the compilation process, etc… ), but you only have to do that once. In all honesty, I spent about 3x longer on this than I expected to! Turbulenz has very good documentation, but you need to know what you are looking for and that is often the most difficult process. What I haven't shown today are the supporting tools that ship with Turbulenz, like the Collada -> JSON converters, nor the platform services that the Turbulenz server offers.

 

If ease of use or simplicity is a priority for you, I highly suggest you look elsewhere ( three.js perhaps ). If you want to bundle your application for portables using PhoneGap, CocoonJS, etc… I think you are out of luck with Turbulenz. However if you want a complete and capable 3D HTML engine, with a complete asset pipeline and backend services and are willing to put up with the build process and the occasional bout of head scratching, Turbulenz is certainly worth checking out. Just advanced warning… it aint easy!

 

Edit there is a nearly 2 hour getting started webcast I've embedded below