Sprite artifacts problem

Problem

CCSprite 등의 class로 이미지를 사용할때 artifacts가 발생하는 현상
이미지를 자세히 살펴보면 대략 가로,세로 1px정도가 늘어나 보인다.

Cause

cocos2d에서 이미지를 사용시 이미지 크기의 99%만큼의 texture를 로딩하고
이를 사용시에 이미지 크기 100%에 맞춰 보여주게되므로 대략 1%정도 늘어나 보여지게 된다.
예를 들어 가로,세로 100px의 이미지가 있다면 실제로는 가로,세로 99px만 로딩하고
이를 화면에 보여줄때는 99px의 이미지를 100px크기로 보여주려하기때문에 이미지가 가로,세로 1px씩 늘어나게되어 artifact가 발생하게 된다.

Sprite Correct

Sprite artifacts

Solution

CCDirector의 Projection을 2D로 설정하여 해결

[[CCDirector sharedDirector] setProjection:CCDirectorProjection2D];

단, 3D 효과를 사용하는 경우 director의 설정을 3D로 바꾸고 원하는 3D효과를 사용한 후 다시 2D로 설정해야하는 방안을 고려해야한다.

Other Suggestion

# 99%만 사용하는 문제가 있었으니 이를 보정하는 방안을 사용 [1]

원인이 100%에서 99%만 로딩하여 100%크기로 늘리기때문에 발생하는 것이었으므로
이를 보정하기 위해 1%를 줄인다.
(1%라는 표현을 사용했지만 사실 약 1px정도가 늘어난 것임 그러므로 이를 보정하기 위해 1px만큼을 줄여서 사용하는 방안으로 해결)

someSprite.scaleX = (someSprite.contentSize.width -1) / (someSprite.contentSize.width);

someSprite.scaleY = (someSprite.contentSize.height -1) / (someSprite.contentSize.height);

but 이미지는 깨지지 않고 정상적으로 보이지만 이미지 크기가 전체적으로 약간 줄어들었으므로 디자이너가 의도한 이미지 배치가 나오지 않게된다.
또한 원래부터 99%의 texture만 로딩하므로 1%에 해당하는 이미지가 잘려보이게 된다.

# 99%만 사용하는 문제가 있었으니 이를 보정하는 방안을 사용 [2]

cocos2d forum에서 같은 issue가 제기되었다가 일명 CJ’s patch로 불리는 보정방안이 0.99.5 버젼에 적용되었는데 다음과 같이 설정을 변경하면 된다.

ccConfig.h

#define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 1

해당 부분의 주석에 원인에 해당하는 내용도 언급이 되어있다.

/** @def CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL

If enabled, the texture coordinates will be calculated by using this formula:

– texCoord.left = (rect.origin.x*2+1) / (texture.wide*2);
– texCoord.right = texCoord.left + (rect.size.width*2-2)/(texture.wide*2);

The same for bottom and top.

This formula prevents artifacts by using 99% of the texture.
The “correct” way to prevent artifacts is by using the spritesheet-artifact-fixer.py or a similar tool.

Affected nodes:

– CCSprite / CCSpriteBatchNode and subclasses: CCBitmapFontAtlas, CCTMXTiledMap
– CCLabelAtlas
– CCQuadParticleSystem
– CCTileMap

To enabled set it to 1. Disabled by default.

@since v0.99.5

*/

forum이나 blog등에는 이 방법으로 해결되었다는 사람이 많았는데 이상하게도 난 해결이 되지 않았다.
disabled하나 enabled하나 sprite artifacts는 해결되지 않았다.

# SpriteSheet생성시 Border, Spacing, Extude 설정을 사용

TexturePacker나 Zwoptex와 같은 tool을 사용하여 SpriteSheet를 생성할 때 Border, Spacing, Extude 등의 설정을 사용해 봤으나 해결되지 않았다.

# Anti-Aliasing 사용

[someSprite.texture setAliasTexParameters];

but 안티알리아싱을 사용하게되면 문제가 해결되는 것 처럼 보여지게 되지만 이미지가 뿌옇게보이는 현상이 있어 선명한 화면이 구성되지 않는다.

관련 자료

http://www.cocos2d-iphone.org/forum/topic/8267
http://www.cocos2d-iphone.org/forum/topic/5760
http://www.cocos2d-iphone.org/forum/topic/12542
http://www.cocos2d-iphone.org/forum/topic/10654