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
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!