cocos2d/cocos2d-html5

Images looks blurry or pixelated after fullsceren

milomartinez opened this issue · 3 comments

Images look blurry or pixelated if the game goes fullscreen after the loader or the runScene, but it looks perfect if the fullscreen is call during the loading process cc.LoaderScene.preload.

this is the code for fullscreen from index.html


 function goFullscreen() {
        var i = document.getElementById("gameCanvas"); 
        if (i.requestFullscreen) {
            i.requestFullscreen();
        } else if (i.webkitRequestFullscreen) {
            i.webkitRequestFullscreen();
        } else if (i.mozRequestFullScreen) {
            i.mozRequestFullScreen();
        } else if (i.msRequestFullscreen) {
            i.msRequestFullscreen();
        }
    }

cocos2d-html5 : v3.17
browser:chrome
os: android
device:lg g7

I’ve never used Cocos2D HTML5, but I’m about to check it out. However, to answer your issue it is probably because the game runs inside a canvas element which does not handle re-render on resize. You have to listen to window resize and do whatever it takes to re-render the game scene when resize event is called. See example below:

window.addEventListener("resize", function(e) {
    // Whatever needs to be done to re-render the screen.
}, false);

Thanks for the answer. I'm managing the resize insedie my code doing:

cc.view.setResizeCallback(function()
    	{
            var gameContainer = document.getElementById('Cocos2dGameContainer');
            gameContainer.style.marginLeft = 0;
            gameContainer.style.marginRight = 0;
            gameContainer.style.marginTop = 0;
            gameContainer.style.marginBottom = 0;


                cc.view.setDesignResolutionSize(KTE_SCREEN_W, KTE_SCREEN_H, cc.ResolutionPolicy.SHOW_ALL);
             cGameScene.updateTransform();
                 cGameScene.visit();
}

any better idea to re-render???

change

//cc.view.enableRetina(cc.sys.os === cc.sys.OS_IOS || cc.sys.os === cc.sys.OS_OSX);// whys this????
cc.view.enableRetina(!(cc.view.getDevicePixelRatio()<0));

that made it work!!!!