Jump to content

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?

Link to comment
Share on other sites


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

Link to comment
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?

Link to comment
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 [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

            .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

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