DrawNode (thickness != 1) is bigger/smaller as expected. What can I do?

[NgVThangBz]

• axmol version:2.3.1
• devices test on:All devices
• developing environments
  • NDK version: r23c
  • Xcode version: 14.2+
  • Visual Studio:
    • VS version: 2022 (17.9+)
    • MSVC version: 19.39+
    • Windows SDK version: 10.0.22621.0+
  • cmake version:
    Steps to Reproduce:

just simple check:
mydraw->drawLine(Vec2(200,200), Vec2(400,200), Color4B::RED,1);
mydraw->drawLine(Vec2(200,300), Vec2(400,300), Color4B::RED,2);
and result:

It seems like the thickness needs to be divided by a factor

It seems to be related to _contentScaleFactor

[rh101]

If the thickness is being scaled, then isn't the existing behavior correct?

For example, if you draw a line of thickness 1, and the contentScaleFactor is 2, then the line drawn should be be 2 pixels thick. Isn't that the purpose of the content scale factor, or am I misunderstanding it?

If you have a content scale factor that is not equal to 1, yet you require the lines to not be affected by it, then wouldn't the following work?

mydraw->drawLine(Vec2(200, 200), Vec2(400, 200), Color4B::RED, 1 / AX_CONTENT_SCALE_FACTOR());

[NgVThangBz]

i tested, even when _contentScaleFactor = 1, the error still occurs,
line with thickness = 0.9 is bigger than line with thickness = 1
i think drawing thickness = 1 is fine now, we just need to recalculate drawing thickness != 1 to match the size

However, I have an app with contentScaleFactor = 10, and lines with thickness!= are drawn much larger

[rh101]

i tested, even when _contentScaleFactor = 1, the error still occurs, line with thickness = 0.9 is bigger than line with thickness = 1 i think drawing thickness = 1 is fine now, we just need to recalculate drawing thickness != 1 to match the size

However, I have an app with contentScaleFactor = 10, and lines with thickness!= are drawn much larger

OK, in that case it may be a bug. @aismann would the one who is familiar with the DrawNode implementation.

[NgVThangBz]

sorry for the misinformation, but it seems _contentScaleFactor doesn't affect drawNode

[aismann]

@NgVThangBz
Can you try this snippet:

mydraw->properties.setDrawOrder(true);  // drawing all with polygons
float _scaleFactor = Director::getInstance()->getContentScaleFactor() * 2;
mydraw->drawLine(Vec2(200,200), Vec2(400,200), Color4B::RED, 1.0f / _scaleFactor);
mydraw->drawLine(Vec2(200,300), Vec2(400,300), Color4B::RED, 2.0f / _scaleFactor);

A faster way is using a defined thickness array:

mydraw->properties.setDrawOrder(true);  // drawing all with polygons
float myScaleFactor = AX_CONTENT_SCALE_FACTOR();
float thickness[10];  /// max thickness is 9
for (int i = 0; i < 10; i++)
{
    thickness[i] = (float) i / (myScaleFactor * 2);
}
mydraw->drawLine(Vec2(200,200), Vec2(400,200), Color4B::RED, thickness[1]);
mydraw->drawLine(Vec2(200,300), Vec2(400,300), Color4B::RED, thickness[2]);

[NgVThangBz]

@aismann
Yes, I was able to handle it in my code,
however I wish Axmol could handle it too so that newbies can easily use DrawNode

[aismann]

@aismann Yes, I was able to handle it in my code, ...

@NgVThangBz
Using mydraw->properties.setDrawOrder(true); and your own thickness (scale) is working for you, right?

[aismann]

I have add a Wiki entry:

Maybe I add a new property:
drawNode->properties.drawAllWithPolygons(false/true) // false is the default

But the problem is:
The performance will be slower if each draw call have scale the same thickness again.

[NgVThangBz]

it seems that : _contentScaleFactor is not the cause,
from my testing it seems that the cause is the difference of FrameSize and designResolutionSize, but I'm not sure about it

[aismann]

it seems that : _contentScaleFactor is not the cause, from my testing it seems that the cause is the difference of FrameSize and designResolutionSize, but I'm not sure about it

Can you give me a "better" code snippet which shows your problem (also I can use it to the upcoming tester too)?

[NgVThangBz]

@aismann
maybe i think we should edit in _drawSegment() instead of expecting from input.
because DrawNode->drawLine is used in many places: (Label, sprite...)
ex: like Label->enableUnderline(); is wrong (some case)

[NgVThangBz]

i think factor = (FrameSize /designResolutionSize)*2

[aismann]

@NgVThangBz
How looks your Label with Label->enableUnderline();?
Can you copy a screenshot here?
you can use this example:

    auto label = Label::createWithTTF("Underline", "fonts/Marker Felt.ttf", 20);
    label->setPosition(Vec2(100, 80));
    label->enableUnderline();
    this->addChild(label, 1);

• One screenshot with your changes on PR
• One screenshot without your PR plz.

With my fix its look like this:

[NgVThangBz]

glView = GLViewImpl::createWithRect("HelloCpp", ax::Rect(0, 0, designResolutionSize.width, designResolutionSize.height),1,true);

if: glView->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);
without my changes:

my PR

if: glView->setDesignResolutionSize(designResolutionSize.width/2, designResolutionSize.height/2, ResolutionPolicy::NO_BORDER);
without my changes

my PR

[aismann]

However, I have an app with contentScaleFactor = 10, and lines with thickness!= are drawn much larger

@NgVThangBz
Please tell your designResolutionSize and frameSize too?

[NgVThangBz]

I checked, contentScaleFactor doesn't affect (according to my PR)

[aismann]

@NgVThangBz
Can you try this one on your DrawNode object?
mydraw->properties.setDrawOrder(true); // drawing all with polygons on mydraw->draw* methods

The problem is DrawNode thickness=1 is using the native cocos2dx method (which working only with thickness==1)

[NgVThangBz]

i ported my app from cocos2dx(3.17) to axmol. so i use cocos2dx's drawLine as standard
if using mydraw->properties.setDrawOrder(true); then line with thickness =1 will be bigger than cocos2dx

[aismann]

i ported my app from cocos2dx(3.17) to axmol. so i use cocos2dx's drawLine as standard if using mydraw->properties.setDrawOrder(true); then line with thickness =1 will be bigger than cocos2dx

Correct. Thats have to fix.
I hope I will find time to push the PR today.
Thanks.

[aismann]

@NgVThangBz
Some background info: (see also #1411 (comment))

• GLES2: support glLineWidth => Axmol 1.0
• GLES3: only support glLineWidth (0~1) => Axmol >=2.0
• Metal: not support lineWidth

DrawNode 2.0 is supporting thickness again but in a different way.

My proposal after some tests:
There is no "standard" function to get the right factor for the correct thickness (See the "extrem example").

Because of this I think a "Function Pointer" like:void setFactorFunction(float (*funcPtr)()) andsetFactor(yourFactor)method.
If the "default factor = Director::getInstance()->getContentScaleFactor()" not working for your situation you can overwrite the factor method with your own function (your factor is changing on runtime) or you usingsetFactor(yourFactorValue) anywhere on your source .

• The "default factor" will be initialized on the constructor of a DrawNode object.

Automatic via "Function Pointer":
On each DrawNode::clear() call with your own function via "Function Pointer".

• The factor will be "automatic" set on eachDrawNode::clear()call if the function pointer is set.

Manuell viasetFactor(yourFactor):

• You can usesetFactor(yourFactor)and control it yourself

"Extrem example":

Size g_resourceSize(960, 640);
Size g_designSize(1480, 320);  // very extrem: 1480, 320

Using "height = factor 4"

    float fS = Director::getInstance()->getGLView()->getFrameSize().height;
    float dS = Director::getInstance()->getGLView()->getDesignResolutionSize().height;

Using "width = factor 1.122"

     float fS     = Director::getInstance()->getGLView()->getFrameSize().width;
     float dS     = Director::getInstance()->getGLView()->getDesignResolutionSize().width;

@NgVThangBz

However, I have an app with contentScaleFactor = 10

Can you tell my your g_resourceSize, g_designSize? and your max/min display sizes?

[aismann]

@NgVThangBz
If you think its not working well plz provide a small working code snippet which can copy/paste on cpp_tests.

[NgVThangBz]

@aismann when using factor = 2*fS/dS it works fine
NgVThangBz@3e6a148

[aismann]

@NgVThangBz
As I ask you before:

1. Why you think widthis correct and not heightwhich is used on cpp-tests?
2. What is your g_resourceSize, g_designSize? and your max/min display sizes?
3. Please provide an example/code snippet/repository which shows or can be copy paste on cpp-tests

[NgVThangBz]

@aismann

• I just randomly used height and width, no purpose
• using with windows/mac:
  glView = GLViewImpl::createWithRect("App", ax::Rect(0, 0,1536,813), 1.0, true); glView->setDesignResolutionSize(480,254, ResolutionPolicy::NO_BORDER);
• The code in cpp-test has all the cases

[aismann]

• I just randomly used height and width, no purpose

Do you think thats a real usecase?

glView = GLViewImpl::createWithRect("App", ax::Rect(0, 0,1536,813), 1.0, true); glView->setDesignResolutionSize(480,254, ResolutionPolicy::NO_BORDER);

You have to update at least the
director->setContentScaleFactor(g_resourceSize.height / g_designSize.height);
like
director->setContentScaleFactor(1536 / 480); //width => factor 1536 / 480 = 3.2
or
director->setContentScaleFactor(813/ 254); //height => factor 813/ 254 = 3.20..

Why not using:

//Size g_resourceSize(960, 640);
//Size g_designSize(480, 320);

Size g_resourceSize(1536, 813);
Size g_designSize(480, 254);

• The code in cpp-test has all the cases

Try with the latest PR which is not merged

[aismann]

@NgVThangBz
Can it close?

[NgVThangBz]

all i care about is whether the factor = fS/dS is correct or not, if it is correct i think it can close

[aismann]

I cannot give you the right answer.
Only the developer knows which factor is correct fs/ds is a size which has a width and a height.
If (fs.width/ds.width != fs.height/ds.height) only the developer should/can know what is correct.

I will close it thinking about a PR.

[aismann]

see #2324 (reply in thread)

I will close it thinking about a PR.