NanoFL under Mac OS X

NanoFL 3.0.5 currently only features a .exe binary for windows. The program itself is wrapped with XULRunner from Mozilla and that makes it easy to run natively on Mac OS X.

If you have a current Firefox there is no need to install XULRunner(which anyway seems deprecated). You can execute XULRunner apps with -app switch. Use Wine to install the game and then copy the installation folder somewhere accessible. In the terminal you then execute the following to start NanoFL.

/Applications/Firefox.app/Contents/MacOS/firefox -app 
/Users/headchant/Downloads/nanofl/application.ini

or more generic

/Applications/Firefox.app/Contents/MacOS/firefox -app /path/to/your/application.ini

Use no line breaks and edit the path to your installation of NanoFL.

This should start NanoFL inside a Firefox instance with almost all features as the windows version. Have fun! Screen Shot 2016-04-07 at 14.10.08

NanoFL and HiDPI

NanoFL is a minimalistic and free alternative to Animate CC (formerly Flash Professional). It publishes to Apaches Cordova or HTML5 with for example an CreateJS generator. While fiddling around with it I ran into the usual high resolution issues that always come up with HTML5: Blurry images and text.

Thankfully, there is an easy fix:

If you use the CreateJS just add a Scene class in the Document Properties Screen Shot 2016-04-07 at 13.36.14

If you hit publish a directory structure is created:

├── bin
│   └── library.js
├── gen
│   └── base.js
├── library
│   └── scene.xml
├── publish
│   ├── cordova
│   └── html
│       ├── bin
│       │   └── library.js
│       └── test.html
├── src
│   └── Game.js
├── test.html
└── test.nfl

Inside the src folder you will find a Game.js file with some boilerplate code. As suggested by Kevin Newman it is quite easy to change the canvas of CreateJS to use the HiDPI settings. We modify the code from his blog to fit our NanoFL environment into the init function of the Game prototype:

var canvas = document.getElementById("mainCanvas");
var stage = this.parent;
if (window.devicePixelRatio) {
    // grab the width and height from canvas
    var height = canvas.getAttribute('height');
    var width = canvas.getAttribute('width');
    // reset the canvas width and height with window.devicePixelRatio applied
    canvas.setAttribute('width', Math.round(width * window.devicePixelRatio));
    canvas.setAttribute('height', Math.round( height * window.devicePixelRatio));
    // force the canvas back to the original size using css
    canvas.style.width = width+"px";
    canvas.style.height = height+"px";
    // set CreateJS to render scaled
    stage.scaleX = stage.scaleY = window.devicePixelRatio;
}

Et voila, that’s it!