3

I am almost done with my first SpriteKit game. One of the things that bothers me a lot is the quality of the images in my app.

You can see below the difference between a label text and my logo's edges. The logo has clearly blurred at the edge points. I created the images in Photoshop and they are all in PNG. I saved them with or without compression but no change. I would like to have sharp edges to make them look good. What should I do?

blurred edge problem

I am using Swift as language and I read somewhere that the following way of defining the image makes it look better but didnt make any difference in my app.

let logoTexture = SKTexture(imageNamed: "img/logo.png")
logo = SKSpriteNode(texture: logoTexture, size: logoTexture.size())
johncoffey
  • 251
  • 3
  • 12
  • What are dimensions of used images ? And what is the size of logo node ? Do you use appropriate assets (e.g. 2x, 3x ) ? Also is there any scaling applied to logo node? – Whirlwind Jun 01 '15 at 19:56
  • this logo size is 300x150 but i have different sizes of images in the game which also have the same issue. i actually shared the size of the logo node at the bottom of my post which is logoTexture.size(). 2x, 3x are for icons, my problem is mainly the logo inside the game and how it looks. no, i didnt apply any programmatic scale to the logo node. – johncoffey Jun 01 '15 at 20:06
  • I've noticed that you have pointed on how you create logo node, but I was interested in real size of an image in pixels, and the size of a node when created (in points), and from that code the real size of node (in points) can't be seen. ;) That's why I asked...As I said, I can produce good results, without pixelation, so just change the picture you use currently with appropriate one. – Whirlwind Jun 01 '15 at 20:38

1 Answers1

3

I can produce the same result if I use 300x150px logo.png. So,what you should do is to use appropriate assets, which is @2x (and @3x if you support iPhone 6+). When you use this naming conventions, iOS will choose right assets for you. This works with @1x and @2x, and for @3x there was a know bug (if using atlases). I am not sure if it is fixed yet.

You should make an image of size 600x300px and name it logo@2x.png. Note that if you just scale image up in image editor, you will get same result because when scaling a bitmap some artefacts always occur. At the best, if you have vector file of your logo image, you can scale it up without loosing quality. If not, you have to make new logo image in high resolution.

After you make these changes, reset simulator's content and settings, and run application again, and it should work.

Community
  • 1
  • 1
Whirlwind
  • 14,286
  • 11
  • 68
  • 157
  • really appreciated the response but are you talking about only the icons for the app or talking about all of the images that are used inside the game itself? – johncoffey Jun 01 '15 at 20:38
  • @johncoffey If you support something like iPhone 4s, 5, 5s, 6, iPad retina, you should use 2x assets. And yes, I am talking about all the images you use. You can read this for additional info. http://stackoverflow.com/a/13346381/3402095 – Whirlwind Jun 01 '15 at 20:51