I'm making a menu for my game. Here is the background image for the menu displayed using a sprite in a MenuScene class.
http://img182.imageshack.us/i/cocos.png/
Here is the same image displayed with a UIImageView in the scene
http://img178.imageshack.us/i/imageview.png/
Why is the cocos2d sprite blurrier than the UIImageView? Is this something I'll have to get used to and design around or is there some way to fix it?
Why is cocos2d blurry?
(22 posts) (12 voices)-
cracka
MemberPosted 2 years ago # -
does it look OK on the device (not the Simulator) ?
Posted 2 years ago # -
the simulator doesn't work well with alpha premultiplied images.
Actually it creates alpha premultiplied images, but it tells cocos2d that it is using NON alpha pre-multiplied images, so cocos2d renders the images as non-premultiplied images, while, in fact, they are alpha-premultiplied.for more info about alpha premultiplied, search "libpng" on the forum.
Posted 2 years ago # -
cracka
MemberSo is this because I used shadows and other effects in my background image? I also noticed when placing the buttons that I had to adjust some vertically by 1-2 pixels even though in photoshop they're all perfectly aligned horizontally.
Does this mean I can just leave this as a simulator problem and not a cocos2d problem?
Thank you
Posted 2 years ago # -
I suggest that you try it on the device too. But it seems that you are triggering a known bug in the Simulator
Posted 2 years ago # -
Steve Oldmeadow
AdministratorTry setting the Director to use 2D projection and see if that makes a difference.
Posted 2 years ago # -
I had problems with blurry menu images also (and other sprites). After some time I lost figuring out I found it was about image dimensions with odd pixels. For example, if my menu image was 100x50 it was sharp, but if it was 100x51 it was blurry. Suppose it has something with subpixeling in cocos2d. Just try with images where both dimensions are even numbers...
Posted 2 years ago # -
Posted 2 years ago #
-
@Joao Caxaria
Lol
Btw, if you're using Zwoptex for creating sheets, like I am, remember to untrim your images with even dimensions, because atlas sprites are also suffering from the same problem
Posted 2 years ago # -
Hi, I think I have the same problem. I'm also using Zwoptex and with some sprites there are weird artifacts. What do you mean exactly with "untrim"? Do you let Zwoptex reorder the images in the texture? Could you explain your procedure?
Thx a lot!
Posted 2 years ago # -
"Untrim" is option in Zwoptex (Menu > Modify > Untrim...) so Zwoptex doesn't "cut" your transparent pixels. Sometimes it's useful to trim them, but sometimes you should keep your sizes, depending on your needs of course.
About Zwoptex redordering... I mostly let Zwoptex reorder images, but sometimes I need to manually tweak positions because I like to keep a 1px "minimum spacing" and Zwoptex just can't pack them like you can do it visually. They have "complex" reordering, but then there is no "spacing" between...
Posted 2 years ago # -
@crmagicxxx yeah, I saw that... after changing my images to even the dimensions, I still had the problem.. because Zwoptex was trimming my images by default.
It's all good now. Thanks again!
Posted 2 years ago # -
Brilliant info. That was really killing me! Thanks a lot!
Posted 2 years ago # -
What is special about menus? Is this happening on all sprites? And has somebody confirmed if its worth changing things or it all looks fine on the actual device without taking the extra steps?
Posted 2 years ago # -
it affects anything that has an odd numbered width or height.
If you absolutely need to have the dimensions that are causing blur, you can adjust the position to either
X.25
X.50
X.75depending on the actual dimensions, 1 of those sub-pixel positions will correct the blur.
Posted 2 years ago # -
I'm not sure about this, but I guess that the blurriness is caused by having offset values with decimals (for example 8.5) in the Zwoptex generated plist; hence caused by odd numbered width/height because it seems they are halved to calculate the offset (as I saw in the source).
I think that this could be fixed by either rounding the offset values in cocos2d, or compensate by 1 pixel for odd numbered width/height in Zwoptex - the latter being the most accurate solution I believe.Sorry about the bump but I would like to know if someone could confirm my theory ?
Posted 1 year ago # -
Have you seen this post?
Posted 1 year ago # -
I'm not sure this is related here; we're not dealing with scaling, so we're talking about blurry sprites with a 1:1 scale and if I'm not mistaken, whether the sprite is aliased or not shouldn't change anything at this scale.
Isn't it rather an issue of positioning, where images can have positions that are not pixel perfect (i.e. floats) since the engine is based on a 3D framework ?Or am I totally missing the point here ? :)
Posted 1 year ago # -
You're not missing a point, but that's irrelevant :) What's important is the resolution for blurry sprites...
1) You have a sprite of 100x50 and you position it on (160,240) everything is fine (assuming anchor point is in the center)
2) You have a sprite of 101x50 and you position it on (160,240) - now where is the center of it? 101/2 = 50.5 so it has to be blurry because everything is calculated in 3D world. So either make your sprite 100x50 or position it on e.g. (160.33,240) or something like that. Didn't test that .33 though :)
Major problem here is with labels. I found them blurry most the times, because their contentSize is often not rounded. I didn't test, but maybe checking the label's contentSize and then changing it so it has even dimensions could solve the problem. But I really stopped giving attention to those details long time ago...
Posted 1 year ago #
Reply
You must log in to post.