Traviso.js: blurry pixel art objects based on position

[Matheeus]

As I'm planning to make an HTML5 MMO Isometric game, I'm experimenting various Frameworks/Isometric engine that could help me to speed up my work.

Now I'm trying this "Traviso.js" that seems to be really good and well documented, but now I'm getting a problem (probably is of Pixi.js more than Traviso): depending on the position of the object, I'm get some blurried items, this is really bad for pixel art items/objects that needs to be pixel-perfect without any filter applied on it.

This is my code:

    ////// Global on-frame renderer function
    function update() 
    {
        renderer.render(stage);
        requestAnimationFrame(update); 
    }

    ////// Here, we initialize the pixi stage
    var gameCanvas;
    var gameWidth, gameHeight;
        
        gameCanvas = document.getElementById('mycanv');
        gameWidth = window.innerWidth;
        gameHeight = window.innerHeight;

    // create an new instance of a pixi stage
    stage = new PIXI.Container();

    // create a renderer instance
    renderer = PIXI.autoDetectRenderer(gameWidth, gameHeight, false , false);
        
    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);

    update();

    ////// Here, we create our traviso instance and add on top of pixi

    // engine-instance configuration object
    var instanceConfig =
    {
        mapDataPath : "mapData.xml", // the path to the xml file that defines map data, required
        assetsToLoad : ["test.png", "chair.gif", "carpet.png"], // array of paths to the assets that are desired to be loaded by traviso, no need to use if assets are already loaded to PIXI cache, default null
        tileHeight : "33",
        isoAngle : "27",
        initialZoomLevel : 0
    };

    var engine = TRAVISO.getEngineInstance(instanceConfig);
    stage.addChild(engine);

Any advice on how to fix this blurry problem?

[xerver]

If I had to guess I would say it was pixel interpolation, you can try adding renderer.roundPixels = true; and trying to keep your coords as whole numbers and not fractional.

[Matheeus]

14 hours ago, xerver said:

If I had to guess I would say it was pixel interpolation, you can try adding renderer.roundPixels = true; and trying to keep your coords as whole numbers and not fractional.

Thank you, that statement resolved the blurry problem!

But now this let me clearly see that there is some strange problem about tile positioning: 

I inserted the right tile dimensions and, i suppose, the right isoangle, but they don't align correctly.

This is the tile i'm actually using:

I got this problem only with Traviso...

[xerver]

I recommend bringing this up to the Taviso devs, maybe they can help you out. I'm not familiar with that lib.

[Matheeus]

Resolved: It was a tile problem.

I used illustrator to draw the 66x33 tile.

Drawing a new tile in Photoshop with a better 64x32 size resolved the problem.

[xerver]

Perfect! that makes sense, glad you got it solved!