Help me understand the image /screen /proportion, relative size between the opengl windows simulator and real device

after long and many hours of development only on the windows opengl simulator using visual studio 2012
every thing looked like it should be i tested on 480/320 screen size

  CCSize screenSize = pEGLView->getFrameSize();
    CCSize designSize = CCSize(320, 480);

    CCEGLView::sharedOpenGLView()->setDesignResolutionSize(designSize.width, designSize.height, kResolutionShowAll);

    if (screenSize.width > 640) {
        CCFileUtils::sharedFileUtils()->addSearchPath("ipadhd");
        pDirector->setContentScaleFactor(1280/designSize.width);
    } else if (screenSize.width > 320) {
        CCFileUtils::sharedFileUtils()->addSearchPath("ipad");
        pDirector->setContentScaleFactor(640/designSize.width);
    } else {
        CCFileUtils::sharedFileUtils()->addSearchPath("iphone");
        pDirector->setContentScaleFactor(320/designSize.width);
    } 

and with this function that loades the images

void GameLayer::loadImages()
{
    CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("sprites35.plist");
    m_gameBatchNode  = CCSpriteBatchNode::create("sprites.png",200);
    this->addChild(m_gameBatchNode,2,kSSheet);
    m_background  = CCSprite::create("gride300_300.png");
    m_background->setPosition(ccp(m_winSize.width/2,m_winSize.height/2));  
    this->addChild(m_background,kGrid);

}

when i first run the app in my device ( iphone 5 )
all sizes of the images got 1/3 smaller and the position was all wrong .
my question is how can i develop on windows using the open GL simulator and still to see every thing right on my iphone 5
thanks

this is critical issue for if some one knows how to solve it please elaborate with me and tell me what im doing wrong , what size’s i need to define in the windows opengl simulator
so i could see the same proportion on my iphone 5
thanks

The first thing that comes to mind, when positioning things you need to know where the visible origin is (bottom left, it’s different on every resolution).
Luckily, cocos2d-x has a built in method for this.

const CCPoint VISIBLE_ORIGIN = CCDirector::sharedDirector()->getVisibleOrigin();

Then positioning can be done like:
SPRITE->setPosition(ccp(VISIBLE_ORIGIN.x + VISIBLE_SIZE.width/2, VISIBLE_ORIGIN.y + VISIBLE_SIZE.height/2));

thanks for the replay , this is very important for me to understand what is the difference , the reason is that i mostly develop on the windows visual studio
and when i tested it all position’s was wrong .
i will give more info
for example i have background image that is 297 x 297 Pixels (1.00) in size
i place it like this :

m_background  = CCSprite::create("gride300_300.png");
m_background->setPosition(ccp(m_winSize.width/2,m_winSize.height/2));  
this->addChild(m_background,kGrid);

in the simulator it looks great . but when i see it in the iPhone it in the middle but very small . not like in the simulator

second example:
i place round gems with size : 35 x 35 Pixels (1.00) each to place in the middle also
one after the other they all look great in the simulator but when i see it in the iPhone they are again very small
and align to the bottom left of the screen ,
here is the code to place the gems :

void Gem::placeInGride()
{
    CCSpriteBatchNode *spriteBatchNode = (CCSpriteBatchNode*) getGameController()->getGameLayer()->getChildByTag(kSSheet);
    int gemSelect =(rand() % totalGemsAvailable) + 1;

    GemType gemNum;
    gemNum =(GemType)gemSelect;
    setGemState(kGemNew);    
    char spritename[20];    
    sprintf(spritename,"gem%i_tranc.png",gemNum); 
    setImageName(spritename);
    setGemType(gemNum);    
    char spriteid[20];    
    sprintf(spriteid,"gem_%i_%i",getRowNum(),getColNum()); 
    std::string gemid(spriteid);
    setGemId(spriteid);
    mySprite = CCSprite::createWithSpriteFrameName(spritename);
    mySprite->setOpacity(255);
    spriteBatchNode->addChild(mySprite, 2);

    CCSize sSize = mySprite->getContentSize();
    setGemPosition(setPositionForGem(getRowNum(),getColNum(),sSize));

}

CCPoint Gem::setPositionForGem(int row,int col,const CCSize& gemSize)
{

    float leftPadding = 30 ; 
    float rightPadding = 37.5 ;
    float topPadding = 111.5;
    float buttonPadding = 90;
    float gemHight = gemSize.height;
    float gemWidth = gemSize.width;

    float x = (leftPadding+1) + ((gemWidth+2)*(col));
    float y = (topPadding+1)  + ((gemHight+2)*(row/*+1*/));
    return  ccp(x,y) ;

}

im attaching screen shots both from my iphone and windows
what more info do you need ?

it dosn’t let me to add another file so here is the windows screen

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.

1 Like

Thanks
thank you to taking the time to answer me such informative answer , i didnt test it but i will soon
can you take alook at this question please and advice:
http://www.cocos2d-x.org/boards/6/topics/33443?r=33801