Sorry I’m only now seeing that you replied back. This might be a little lengthy, but I’m gonna try to explain in a decent amount of detail what’s happening.
For the scaling problem
This is in my AppDelegate.cpp (also in the auto-generated project) and it scales things the correct way automatically. (I use 1 size of asset).
It’s possible you don’t need to set the content scale factor because if you have your assets at different sizes, you effectively did the scaling yourself.
(Meaning that if you already accounted for the difference in design resolution sizes between assets,
setting the content scale factor might be overkill, effectively doing the scaling an extra time.)
CCSize frameSize = pEGLView->getFrameSize();
// In this demo, we select resource according to the frame's height.
// If the resource size is different from design resolution size, you need to set contentScaleFactor.
// We use the ratio of resource's height to the height of design resolution,
// this can make sure that the resource's height could fit for the height of design resolution.
// if the frame's height is larger than the height of medium resource size, select large resource.
if (frameSize.height > mediumResource.size.height)
{
//CCFileUtils::sharedFileUtils()->setResourceDirectory(largeResource.directory);
pDirector->setContentScaleFactor(largeResource.size.height/designResolutionSize.height);
}
// if the frame's height is larger than the height of small resource size, select medium resource.
else if (frameSize.height > smallResource.size.height)
{
//CCFileUtils::sharedFileUtils()->setResourceDirectory(mediumResource.directory);
pDirector->setContentScaleFactor(mediumResource.size.height/designResolutionSize.height);
}
// if the frame's height is smaller than the height of medium resource size, select small resource.
else
{
//CCFileUtils::sharedFileUtils()->setResourceDirectory(smallResource.directory);
pDirector->setContentScaleFactor(smallResource.size.height/designResolutionSize.height);
}
You can use the same size assets on all of them and have them scale, or use different size ones.
If you use different size ones, I would experiment with the setContentScaleFactor lines (commenting them out, etc.)
For the positioning problem
The reason why the bottom left coordinate is different on every device/resolution is because cocos2dx (depending on your multi-resolution policy mode)
zooms in to the window so there is no empty window space, which makes it weird when the bottom left isn’t 0,0 anymore.
The only time the coordinate system is going to match the visible area on the screen is when the aspect ratio is the same, but that’s not a guarantee.
That’s why you can’t trust 0,0 as the base coordinate and have to use the visibleOrigin instead.
If you are having trouble positioning things, try adding your objects to a master parent node and set the position of it to (visibleOrigin.x, visibleOrigin.y).
If you don’t , then objects that are direct children of the scene would have to be offset independently taking the visibleOrigin into account (calculating it for each node).
Summary: it’s a lot easier doing the offset calculation once and applying it to a parent node.
Example:
//node is direct child of scene
node->setPosition(visibleOrigin);
//your other nodes don't want to have to worry about the bottom left coordinate
node->addChild(otherNode);
//set other node's position normally, since the offset is now taken care of
otherNode->setPosition(visibleWidth/2, visibleHeight/2);
More tips
I noticed you are using hard coded values for your padding and some other stuff.
Although the design resolution is hard-coded and cocos2dx encourages you to design in points, I think that is bad to follow.
Personally, I use values like
const float PADDING = visibleWinSize.width/100;
or whatever. You have a lot more consistency and less surprises if you avoid hard coded numbers and just rely on proportions.
It is useful to not rely on the contentSize because that is the raw size, not necessarily it’s current actual size.
A “actualSize” function may help you in knowing without a doubt, the size of something.
I have this in my own utils file:
CCSize actualSize(CCNode* const node)
{
const float actualWidth = node->getContentSize().width*node->getScaleX();
const float actualHeight = node->getContentSize().height*node->getScaleY();
const CCSize ACTUAL_SIZE = CCSizeMake(actualWidth, actualHeight);
return ACTUAL_SIZE;
}
Also, testing on multiple resolution sizes regularly can minimize you having to go back to fix positioning and scaling
because of cocos2d-x’s wonky “points”, “design resolution”, and “visibleOrigin” oddities.