Jump to content

Traviso.js: blurry pixel art objects based on position


Recommended Posts

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() 

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


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

Any advice on how to fix this blurry problem?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...