PainKKKiller

One more question about resize and fullscreen mode for app

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 top@1.7x.png). 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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.