Chrome on Android blurring image assets

cocos2d-x JavaScript
#1

This might be a bit of a silly question but I have looked all through the documentation and haven’t found a way around this yet.

re: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

I have a game that I have built in Cocos2d-html5 3.x and am running into issues on Chrome on android devices with high resolution screens (specifically my Nexus 5 and Galaxy S4).

The Nexus 5 returns a device pixel ratio of 3, but a backing store pixel ratio of 1.

Chrome appears to be shrinking down my high resolution assets and then blowing them back up 3x with results in severe quality loss. Firefox on Android, and all iOS browsers do not experience the problem. (backing store pixel ration == device pixel ratio).

Has anyone experienced this before and is there a known solution?

#2

A solution has been found thanks to a colleague of mine who noticed that the version of Cocos2d-html5 I am using only enables retina display on OSX or iOS devices.

Making the following change resolves the issues on all affected platforms.

from:

_t.enableRetina(sys.os == sys.OS_IOS || sys.os == sys.OS_OSX);

to:

_t.enableRetina(!!window && !!window.devicePixelRatio && window.devicePixelRatio > 1);

Maybe this will help anyone who stumbles onto the same issue in the future.

1 Like
#3

Hi there,

Looks like I’m experiencing a very similar issue. Nexus 5 returns a viewport resolution of just 598 x 360.

Where did you make that change? What did you have to set your canvas / design resolution / resolution policy to in order for the game to be rendered in HiRes?

Thanks!

#4

I made the change in the constructor of cc.EGLView

I have posted the entire modified engine I was using for the project as a gist here. The modified line you are looking for is line 3358.

Here is just the constructor:

ctor: function () {
    var _t = this, d = document, _strategyer = cc.ContainerStrategy, _strategy = cc.ContentStrategy;
    _t._frame = cc.container.parentNode === d.body ? d.documentElement : cc.container.parentNode;
    _t._frameSize = cc.size(0, 0);
    _t._initFrameSize();
    var w = cc._canvas.width, h = cc._canvas.height;
    _t._designResolutionSize = cc.size(w, h);
    _t._originalDesignResolutionSize = cc.size(w,
        h);
    _t._viewPortRect = cc.rect(0, 0, w, h);
    _t._visibleRect = cc.rect(0, 0, w, h);
    _t._contentTranslateLeftTop = {left: 0, top: 0};
    _t._viewName = "Cocos2dHTML5";
    var sys = cc.sys;
    _t.enableRetina(!!window && !!window.devicePixelRatio && window.devicePixelRatio > 1);
    cc.visibleRect && cc.visibleRect.init(_t._visibleRect);
    _t._rpExactFit = new cc.ResolutionPolicy(_strategyer.EQUAL_TO_FRAME, _strategy.EXACT_FIT);
    _t._rpShowAll = new cc.ResolutionPolicy(_strategyer.PROPORTION_TO_FRAME, _strategy.SHOW_ALL);
    _t._rpNoBorder = new cc.ResolutionPolicy(_strategyer.EQUAL_TO_FRAME,
        _strategy.NO_BORDER);
    _t._rpFixedHeight = new cc.ResolutionPolicy(_strategyer.EQUAL_TO_FRAME, _strategy.FIXED_HEIGHT);
    _t._rpFixedWidth = new cc.ResolutionPolicy(_strategyer.EQUAL_TO_FRAME, _strategy.FIXED_WIDTH);
    _t._hDC = cc._canvas;
    _t._hRC = cc._renderContext
}

Hope this helps.

#5

Thanks a ton mate! If you’re ever in Toronto, I’ll get you a beer.

#6

You are right, we do active retina display only on iOS devices. But you don’t really need to modify the engine. You can just enable retina in the main.js

cc.game.onStart = function(){
    // Add this line
    cc.view.enableRetina(true);

    cc.view.adjustViewPort(true);
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
    cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new HelloWorldScene());
    }, this);
};
cc.game.run();

The reason we only active it on iOS is that we observed the behavior and iOS seems running really good under retina mode. But on many Android devices, once we activate retina display, the performance drops significantly.

1 Like
#7

Gotcha! Thanks