One more question about resize and fullscreen mode for app

[PainKKKiller]

For far I did project on pixi.js which scales (canvas just scales with css rules) from min-size 1126x634 to max-size 1920x1080. App centered on screen also with css rules. All graphical assets was resized for resolution 1126x634 (to improve speed of loading). Also there is fullscreen button, which switch on app to fit all screen with max possible size (but no more than 1920x1080). So far so good, but my boss don't like that graphics gets blurry (and specially text suffers) when scaled (and specially in fullscreen mode). And he desided to make two versions of app (1126x634 and 1920x1080) and two versions of graphical assets. So I check the innerWidth/height of the browser and load apropriate version. When user switches to fullscreen mode I also load HD version. This approach have some problems but I think it's possible to do app in that way. 
So I looking for advise on this approach is it wrong, or are there better ways to do it? I know that pixi.js can load different resolution assets (with @x2 prefix), but how can I improve text rendering when I just replacing graphical assets? And how can it improve view when scaled on the same resolution?

Thanks in advise!

 

EDIT:  After thinking about my question I want to reformulate it. Is this a good way to switch to fullscreen mode by switching between versions of app? Are there any better ways to achieve similar results in graphic and text quality?

[nmiguelmoura]

Hi,

About the text problem, I faced the same very recently. Text was good when font-size was big, but blurred when using small text. What I have done was to make text larger and then scale down.

For example, If I need a 14px text, I create it with 28px size and then scale to 0.5.

I don't know if it's the best way to do it, but I got crispy text using this method.

Hope it helps

[PainKKKiller]

Is it not the same as just to set resolution to text equal 2?

var style = {
   font: 'bold 10px Arial',
   fill: '#ffffff'
};

var reg1 = new PIXI.Text('some test', style);
reg1.resolution = 2;

 

[nmiguelmoura]

When I used PIXI v3 it was my way also, but since I upgraded to v4, it seems not to work anymore. Text keeps getting blurred in my case when only set resolution to 2 and I don't see a big difference between resolution 1 and 2.

[PainKKKiller]

Thanks for sharing I'll give it a try.

 

After reading some articles like this one and reading some topics like this  I have one more question related to this theme.  Can I use my own custom resolution factor inside of pixi.js? In my scenario I have basic resolution 1126x634 which has logical scaleFactor 1. So I create render with size 1126x634  and load assets for this resolution with prefix @1x.  Then I have 1920x1080 version which has scaleFactor 1.7, so I set PIXI.settings.RESOLUTION = 1.7 before initializing render, and from practice I see that render changes it's size to ~1920x1080. Does it mean that pixi.js will be loading assets with prefix @1.7x  automatically? And how It handles creation of text in that case? As I see It's not just scaled?

[PainKKKiller]

So far from my experiments I don't see that pixi loads assets automatically according resolution. When I sets set PIXI.settings.RESOLUTION = 1.7  it doesn't loads assets nor from @1.7x folder nor with @1.7x suffix (for example [email protected]). I have to load it manually from @1.7 folder:

PIXI.settings.RESOLUTION = 1.7; 

var renderer = PIXI.autoDetectRenderer(1126, 634, {view: document.getElementById("game-canvas") }); //but really it creates render with size  1126 * PIXI.settings.RESOLUTION

//then I load resurces

   this.commonLoader
            .add("locale", "res/locale/lang_RU.json")
            .add("bg_red", "res/" + "@" + PIXI.settings.RESOLUTION + "x/bg_red.png")

...

So far (I've made a little demo) I don't see any problems with this approach, all assets was placed correctly. But anyway I glad to listen to any advises on this approach