Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use pixel art in an app?

I have an iOS app that uses sprite kit, and I am ready to add my artwork. The artwork is pixel-art and is inherently very small. I am trying to find the best way to display this in way where:

  1. All of the art is the same size, meaning that one image pixel takes up exactly the amount of real world pixels as in all the other images.

  2. There is no blurring in an attempt to make the textures look smoother, which often happens when scaling images up.

I have tried solving the second one like so:

self = [super init];
if(self){
    self.size=size;
    self.texture = [SKTexture textureWithImageNamed:@"ForestTree1.png"];
    self.texture.filteringMode = SKTextureFilteringNearest;

    [self.texture size];
}
return self; 

The above code is in the initialization of the SKSpriteNode which will have the texture.

This is my original image (scaled up for easy reference):

The problem is that my result always looks like this:

its blurry!!!!!

(The bottom of the trunk being offset is not part of this question.) I am not using any motion blur or anything like it. I'm not sure why it isn't displaying correctly.

Edit 1: I failed to mention above that the trees were constantly animating when the screenshots were taken. When they are still they look like this:

The image above is of two trees overlapping with one flipped caused because of a bug to be fixed later. My question is now how can I prevent the image from blurring while animation is occurring?

Edit 2:

I am adding multiple instances of the tree, each one loading the same texture. I know it as nothing to do with the animation because I changed the code to add just one tree and animate it, and it was pixelated perfectly.

like image 753
67cherries Avatar asked Nov 11 '22 13:11

67cherries


1 Answers

You need to use "nearest" filtering:

self.texture.filteringMode = SKTextureFilteringNearest;
like image 80
LearnCocos2D Avatar answered Nov 15 '22 04:11

LearnCocos2D