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!