Cocos2d-iPhone：CCSprite在視網膜和非視網膜屏幕上的位置不同

Question

我有一個使用cocos2d-iphone構建的相當簡單的應用程序，但是我一直無法解決一個奇怪的定位問題。該應用使用精靈表，並且應用內有一個Retina和非Retina精靈表，使用完全相同的圖形（當然，分辨率除外）。該應用程序中還有其他用於CCSprites的圖形，它們都是標準和-hd後綴。

在應用程序中，應用程序啓動時會創建一組精靈。這些最初創建的CCSprites始終在Retina &上的位置相同（並正確），非視網膜屏幕。

// In method called to setup sprites when app launches 
// Cache & setup app sprites 
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile: @"sprites.plist"]; 
sprites = [CCSpriteBatchNode batchNodeWithFile: @"sprites.png"]; 

hill = [CCSprite spriteWithSpriteFrameName: @"hill.png"]; 
hill.position = ccp(160, 75); 
[sprites addChild: hill z: 1]; 

// ... [create more sprites in same fashion] 
// NOTE: All sprites created here have correct positioning on Retina & non-Retina screens 

當用戶點擊屏幕一定的方式中，一種方法被稱爲創建另一基團的CCSprites（導通和截止屏幕），動畫它們全部，其中一個子畫面的，hand，總是在Retina &非視網膜屏幕上的位置相同（並正確）。其他人（一羣雲）成功創建&動畫，但他們的位置是正確的只有在視網膜顯示。在非Retina顯示屏上，每個雲的起始位置都不正確（對於x,y或有時兩者都不正確），並且它們在動畫之後的結束位置也是錯誤的。

我已經在觸摸方法中包含了以下負責的代碼，可以創建新的精靈並將它們加以動畫。再一次，它在Retina顯示屏上按預期工作，但在非Retina屏幕上顯示不正確。使用的CCSprites在應用程序啓動時以相同的方式創建，以設置應用程序中始終具有正確位置的所有初始精靈。

// Elsewhere, in a method called on touch 
// Create clouds 
cloud1 = [CCSprite spriteWithSpriteFrameName: @"cloud_1.png"]; 
cloud1.position = ccp(-150, 320); 
cloud1.scale = 1.2f; 

cloud2 = [CCSprite spriteWithSpriteFrameName: @"cloud_2.png"]; 
cloud2.position = ccp(-150, 335); 
cloud2.scale = 1.3f; 

cloud3 = [CCSprite spriteWithSpriteFrameName: @"cloud_4.png"]; 
cloud3.position = ccp(-150, 400); 

cloud4 = [CCSprite spriteWithSpriteFrameName: @"cloud_5.png"]; 
cloud4.position = ccp(-150, 420); 

cloud5 = [CCSprite spriteWithSpriteFrameName: @"cloud_3.png"]; 
cloud5.position = ccp(400, 350); 

cloud6 = [CCSprite spriteWithSpriteFrameName: @"cloud_1.png"]; 
cloud6.position = ccp(400, 335); 
cloud6.scale = 1.1f; 

cloud7 = [CCSprite spriteWithSpriteFrameName: @"cloud_2.png"]; 
cloud7.flipY = YES; 
cloud7.flipX = YES; 
cloud7.position = ccp(400, 380); 

// Create hand 
hand = [CCSprite spriteWithSpriteFrameName:@"hand.png"]; 
hand.position = ccp(160, 650); 

[sprites addChild: cloud1 z: 10]; 
[sprites addChild: cloud2 z: 9]; 
[sprites addChild: cloud3 z: 8]; 
[sprites addChild: cloud4 z: 7]; 
[sprites addChild: cloud5 z: 6]; 
[sprites addChild: cloud6 z: 10]; 
[sprites addChild: cloud7 z: 8]; 
[sprites addChild: hand z: 10]; 


// ACTION!! 
[cloud1 runAction:[CCMoveTo actionWithDuration: 1.0f position: ccp(70, 320)]]; 
[cloud2 runAction:[CCMoveTo actionWithDuration: 1.0f position: ccp(60, 335)]]; 
[cloud3 runAction:[CCMoveTo actionWithDuration: 1.0f position: ccp(100, 400)]]; 
[cloud4 runAction:[CCMoveTo actionWithDuration: 1.0f position: ccp(80, 420)]]; 
[cloud5 runAction:[CCMoveTo actionWithDuration: 1.0f position: ccp(250, 350)]]; 
[cloud6 runAction:[CCMoveTo actionWithDuration: 1.0f position: ccp(250, 335)]]; 
[cloud7 runAction:[CCMoveTo actionWithDuration: 1.0f position: ccp(270, 380)]]; 
[hand runAction: handIn]; 

這可能是值得一提的是我看到一個正在運行的應用程序和標準的iPhone和iPhone（視網膜）的硬件選項之間切換時，在iPhone模擬器這個定位不正確的行爲。我沒有能夠驗證這種情況發生，或者在實際的非Retina iPhone上沒有發生，因爲我沒有。然而，這是我唯一一次看到這種奇怪的定位行爲發生（在用戶觸摸後得到不正確的結果），並且因爲我以完全相同的方式創建了所有的精靈（即，[CCSprite spriteWithSpriteFrameName:]，然後設置了position與positioncpp()），我會特別感謝任何幫助，以追查爲什麼這組單個精靈在非Retina屏幕上總是不正確。

編輯/更新 我已經添加了一些額外的日誌來精確調查創建的精靈發生了什麼。這裏是一個雲的例子：

// Non-Retina 
cloud1 position -- x: 70.000000 y: 320.000000 
cloud1 anchor -- x: 0.500000 y: 0.500000 
cloud1 size -- w: 384.000000 h: 576.000000 
cloud1 origin -- x: -122.000008 y: 31.999989 

// Retina 
cloud1 position -- x: 70.000000 y: 320.000000 
cloud1 anchor -- x: 0.500000 y: 0.500000 
cloud1 size -- w: 172.800003 h: 121.800003 
cloud1 origin -- x: -16.400003 y: 259.100006 

我必須說我對此很困惑。我也沒有混合這些日誌。非Retina上的邊界框比Retina上的邊界框大？而且這些寬度/高度值甚至不匹配它們引用的圖像的大小。也許在spritesheets /紋理內發生了一些奇怪的事情？我也注意到起源不匹配。也許這也會影響產出？很奇怪，它只發生在這些精靈身上，沒有其他人。

任何想法&建議表示讚賞。

Answer 1

我可以想像兩種原因：

1. 的SD影像不是高清圖像的確切大小的一半
2. plist中裏面的圖片命名錯誤

確認您的HD圖像的寬度和高度恰好是SD圖像的兩倍（反之亦然）。由於您是從高清縮小的，請確保您的高清圖像尺寸可以被兩個整除。

一個常見的命名誤差的Plist發生。通常你會有image.png和image-hd.png。但是，紋理圖集略有不同。你應該有atlas.png和atlas-hd.png文件和相關的plist文件，但紋理地圖集中的圖像應該指向兩個版本的image.png。一個典型的錯誤是將image-hd.png添加到atlas-hd.png紋理圖集。

不確定這些問題是否適用。當然聽起來你可能想把日誌記錄添加到你的精靈位置，然後比較視網膜與標準分辨率的位置。如果這些位置恰好相差一半或兩倍於其他版本的位置，則您知道視網膜與非視網膜定位錯誤。否則，您的定位或移動代碼更有可能出現錯誤。

Answer 2

不要對此有可行的答案，但問題就消失了。

我再次修剪所有的圖像降低到2的冪，削去在這個過程中一些額外的空間。我將紋理/ spritesheet創建工具從Zwoptex交換到TexturePacker，並創建了兩個新的精靈表作爲PVR而不是PNG，並帶有新的.plist文件。

我還決定升級的cocos2d庫到最新的穩定（我以前使用之前1.0.1穩定版較舊的RC版）。

的問題已經消失，而不進行任何代碼更改。奇怪。

Answer 3

我的猜測是，免去您的spritesheets是什麼做的伎倆，但你沒有看到任何區別，直到模擬器完全覆蓋了應用程序的原始版本。我遇到過在模擬器中緩存圖像的問題，我不得不刪除應用程序（扭動它，按X），然後神奇地出現更新的圖像。

如有疑問，請在設備上進行測試。模擬器是很多「高度陌生」的原因。不值得。

Answer 4

我剛剛創建了一個測試應用程序並進行了測試。

因此，對於無視網膜設備： ImageName.png - 適用於iPhone/iPod的 ImageName〜ipad.png - 爲iPad

對於視網膜顯示設備： ImageName@2x.png - 適用於iPhone/iPod的 ImageName@2x~ipad.png - 對於iPad

如果您的iPhone高分辨率圖像和iPad高分辨率圖像具有相同的尺寸，您仍然可以使用@ 2x。 加載圖片只需使用[UIImage imageNamed：@「ImageName.png」]; 我剛剛在iOS 5.1,5.0和4.3的iOS模擬器上進行了測試。 順便說一句，爲什麼你應該使用@ 2x而沒有更多。

主要的原因是你不應該在iPhone和iPad上使用相同的圖形，因爲iPhone和iPad有不同的大小。如果您將使用相同尺寸的圖形，則iPad已經爲您的視網膜顯示器（如果您以前使用iPhone視網膜顯示器）完成。如果您使用不同尺寸的圖像，那麼您將爲iPhone和iPad使用不同的圖像名稱。所以在這方面你只需要添加@ 2x後綴。這就是爲什麼你應該使用@ 2x後綴。 - 這是我的想法。