contentScaleFactor not working correctly


I meant your whole code block.
And in fact the original code too (my opinion about the original code I wrote here).

If setDesignResolutionSize() has never been called, then the default design resolution is equal to the frame size. And since the design resolution is equal to the frame size, ResolutionPolicy has no effect.

It will always be equal to 1. Because

And contentScaleFactor is equal to 1 by default.


Yes, I put it incorrectly. While
director->setContentScaleFactor(MAX(glview->getFrameSize().width/1280.0f, glview->getFrameSize().height/720.0f));
is the equivalent of your code,

glview->setDesignResolutionSize(1280.0f, 720.0f, ResolutionPolicy::NO_BORDER);
will give you a similar result, but not the full equivalent.

What is the difference?
In the first case, your design resolution is equal to the frame size, ie your coordinate system is equal to the frame size.
On the bright side, you do not need to worry that part of the design resolution will not be visible.

In the second case, the engine will keep your coordinate system equal to the design resolution, and will scale your layout according to ResolutionPolicy.
On the bright side, you do not need to worry about different coordinate systems.
But you need to worry that part of the design resolution will not be visible, and you will need to use getVisibleSize() and getVisibleOrigin(). Because NO_BORDER.

About your case 4, then I believe that the problem is because you use setDesignResolutionSize() and setContentScaleFactor() together.


ResolutionPolicy has effect here in my case. As you can see for 480 * 800 data below,

dpi = 240
Content Scale Factor: 1.000000
FrameSize HW: 480.000000 800.000000
CustUtils: screenHeight, screenWidth: 480.000000, 800.000000
CustUtils: designScreenHeight, designScreenWidth: 720.000000, 1280.000000 (This is I am setting in CustUtils.cpp, Not glview->setDesignResolutionSize(frameSize.width, frameSize.height, ResolutionPolicy::NO_BORDER):wink:
CustUtils: scaleX, scaleY: 1.000000, 0.666667
Bounding HW= 480.000000 853.333374
Image HW= 720.000000 1280.000000

Here by default image size is , 1280 * 720 but getting scaled. After scaling image size is 853 * 480. Since 853 > 800, image is getting cropped width wise.

Though contentScaleFactor is by default 1, but since my previous designResolution was 1280 * 720, it was not working correctly. Do not get confused by glview->setDesignResolutionSize(frameSize.width, frameSize.height, ResolutionPolicy::NO_BORDER); with mu CustUtils.cpp designResolution HW.

Whatever is happening right now is the thing I wanted to achieve. :slight_smile:


Yes. That is being used in SplashScreen.cpp.

The more I start developing, I will find out more. Will keep you updated.


I meant that if you never called setDesignResolutionSize(), then your design resolution is equal to the frame size and ResolutionPolicy = NO_POLICY.
And if you use glview->setDesignResolutionSize(frameSize.width, frameSize.height, ResolutionPolicy::NO_BORDER), then even though you specified a policy, it is like you did not specify anything in the end. The result is the same.

In the end, you can delete that block of code, nothing will change. :slight_smile:


No Border - “The entire application fills the specified area, without distortion but possibly with some cropping, while maintaining the original aspect ratio of the application.”

As you can see in my case -

  • Application is filling the specified area.
  • Cropping is happening.
  • Original AR is being maintained.


Where did you get this quote?

We’re talking about Case 4, right?

By the way, I really like how you write your posts - in detail and with screenshots.


Go to -

No no. All my Test Cases are invalid because of wrong use. I have not posted the successful ones except one. Check

Big Thanks. :smiley:


The quote is not true.

NO_BORDER - The design resolution will be scaled to fit into the screen size (the frame size), and there will be no distortions, and there will be no black borders, but perhaps a part of the design resolution will not be visible (if the aspect ratio of the design resolution is not equal to the aspect ratio of the frame).


This is what I said

It’s also saying the same thing from

According to the width and height of screen and design resolution to determine the scale factor, choose the larger one as the scale factor. This can make sure that one axis can always fully display on screen, but another may scale out of the screen.

Same same I think. And that is happening for my case. Look at this - Multi-resolution code in the default template


The application and design resolution are different things. If you use NO_BORDER and use setContentScaleFactor() incorrectly, then you can get both black borders and the wrong scale.
ResolutionPolicy only works with a design resolution.

Yes, I read your post in other topic in parallel.
But now my mind is too tired and wants to sleep. I will read it carefully tomorrow, okay?


We will add to our docs a lot of info from this thread. How would you all feel about proof-reading a draft once complete? I’ll be working on this over the next few days.


No probs. :slight_smile:


That would be great. Must add snaps for better understanding with some real time data. :slight_smile:


of course, graphics are very helpful to understanding.


I don’t mind.


If you still have questions, please write it like
code + result + question.
I think we considered different cases in the last posts.


I do not know if this is useful, but I think that a good plan to explain the concept to someone is

  • There are many different screen resolutions with different aspect ratios.
    This raises many questions.
    What screen resolutions should we use to create graphics resources? What coordinates should we use to set the position? How to scale resources?


  • What is the design resolution and how one line of code answers these questions.
    A few code examples with setDesignResolutionSize(), but without setContentScaleFactor().
    Only one set of graphics resources.


  • Why is it a good idea to have multiple sets of graphics resources.
    A few code examples with setDesignResolutionSize() and setContentScaleFactor() and setSearchPath().


  • An alternative way. Do not use design resolution, use only setContentScaleFactor().
    A few code examples.


  • More complex cases.


May be. I was not talking about my Test Cases 1-4 today. Because I implemented my way at yesterday night.


If you mean Utils.cpp, then my idea was that if you use it, then you do not need to use glview->setDesignResolutionSize(frameSize.width, frameSize.height, ResolutionPolicy::NO_BORDER). But of course you can do this if you want.

The reason I mentioned glview->setDesignResolutionSize(1280.0f, 720.0f, ResolutionPolicy::NO_BORDER) is that I noticed that your implement the same scaling logic that NO_BORDER. But this is not a full equivalent, I wrote about the difference here.
And I edited this post to avoid confusion.

By the way, if you use Utils.cpp, and do not use setDesignResolutionSize() (or use it like setDesignResolutionSize(frameSize.width, frameSize.height, ResolutionPolicy::NO_BORDER)), then you do not need to worry about visibleOrigin, and getVisibleSize() will always return frame size.

Do we agree now? :slight_smile: