Cocos2d-x CCSprite 圖片縮放自適應螢幕實戰

需求場景

遊戲開發中常遇到：背景圖尺寸與設計分辨率不匹配，需按比例縮放填滿螢幕且不變形。核心公式：縮放係數 = 目標尺寸 / 原始尺寸。

完整實現代碼

CCSize size = CCDirector::sharedDirector()->getWinSize();
CCSprite* backGround = CCSprite::create("./Images/menu/ingamepig.png");
CC_BREAK_IF(!backGround);

// 計算 X/Y 方向獨立縮放係數
float scaleX = size.width / backGround->getContentSize().width;
float scaleY = size.height / backGround->getContentSize().height;

// 分別設置 X/Y 縮放（非等比，填滿螢幕）
backGround->setScaleX(scaleX);
backGround->setScaleY(scaleY);

// 置於螢幕中心
backGround->setPosition(ccp(size.width/2, size.height/2));
this->addChild(backGround, 0, 0);

關鍵點解析

• getContentSize() 返回圖片原始像素尺寸，不受縮放影響
• setScaleX/Y 可獨立控制橫縱縮放，適配非等比分辨率
• setPosition 以中心點為錨點（默認），座標為螢幕中心
• addChild(zOrder, tag) 圖層級 0、標籤 0，便於後續獲取

效果對比

原圖顯示：

縮放後填滿螢幕：

進階提示

• 若需保持長寬比，取 MIN(scaleX, scaleY) 統一縮放，邊緣留白
• Retina 螢幕下注意 CC_CONTENT_SCALE_FACTOR 影響
• 大圖建議使用 CCSpriteFrameCache 避免重複載入

此技巧適用於啟動畫面、背景圖、UI 九宮格非拉伸區等場景。