Blurry pixel art objects based on position

[mattiadelfranco]

Depending on the position of the object, I get some blurried items: really bad for pixel art items/objects that needs to be pixel-perfect without any filter applied on it.

There are my codes:

    ////// 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);

and mapData.xml

<?xml version="1.0" encoding="utf-8" ?>
<map_data>
    <tiles>
        <tile id="1" movable="1">test.png</tile>
    </tiles>
    <objects>
        <object id="1" movable="1" interactive="0" s="1x1">
            <v id="idle">
                <f>chair.gif</f>
            </v>
        </object>
        <object id="2" movable="1" interactive="0" s="3x3">
            <v id="idle">
                <f>carpet.png</f>
            </v>
        </object>
    </objects>
    <ground_map>
        <row>1 ,1 ,1 ,1, 1</row>
        <row>1 ,1 ,1 ,1, 1</row>
        <row>1 ,1 ,1 ,1, 1</row>
        <row>1 ,1 ,1 ,1, 1</row>
        <row>1 ,1 ,1 ,1, 1</row>
        <row>0 ,1 ,0 ,1, 0</row>
        <row>1 ,1 ,1 ,1, 1</row>
        <row>1 ,1 ,1 ,1, 1</row>
        <row>1 ,1 ,1 ,1, 1</row>
        <row>1 ,1 ,1 ,1, 1</row>
        <row>1 ,1 ,1 ,1, 1</row>
    </ground_map>
    <object_map>
        <row>0 ,0 ,0 ,0, 0</row>
        <row>0 ,0 ,0 ,0, 0</row>
        <row>0 ,0 ,0 ,0, 0</row>
        <row>2 ,0 ,0 ,0, 0</row>
        <row>0 ,0 ,0 ,0, 0</row>
        <row>0 ,0 ,0 ,0, 0</row>
        <row>0 ,0 ,0 ,0, 0</row>
        <row>0 ,0 ,0 ,0, 0</row>
        <row>0 ,0 ,0 ,0, 0</row>
        <row>0 ,2 ,0 ,0, 0</row>
        <row>0 ,0 ,0 ,0, 0</row>
    </object_map>
</map_data>

[axaq]

Hey Mattia, sorry to see those blurry lines. I believe this is what happens when images rendered on sub-pixel on a html canvas. Unfortunately, rounding the positions to fix this creates misalignments in isometric layout. Not really sure if it will help but you can try upgrading pixi.js (which is the renderer) version inside the traviso. This is something I have been forgetting for some time now. I'll try to upgrade it as soon as possible.

[mattiadelfranco]

I've resolved by adding this line in my code: renderer.roundPixels = true;