Why is my image pushed to a sprite blurry?

[NerdyCrafter]

I've been experimenting with transparent sprites and I have a problem. When I push a normal image to my background sprite it becomes blurry, when I push a transparent sprite it look fine. On the left is the normal image and the right is the transparent sprite. Can this be fixed? Or will it only look right as a sprite?

#include <TFT_eSPI.h>

#include "circle.h"

TFT_eSPI tft = TFT_eSPI();
TFT_eSprite circleSprite = TFT_eSprite(&tft);
TFT_eSprite background = TFT_eSprite(&tft);

void setup() {
  tft.init();
  tft.setRotation(1);
  tft.setSwapBytes(true);
  tft.fillScreen(TFT_WHITE);

  background.createSprite(240,240);
  
  circleSprite.createSprite(88,88);
  circleSprite.setSwapBytes(true);

}
void loop() {
  background.fillScreen(TFT_GREEN);
  circleSprite.pushImage(0,0,88,88,circle);
  circleSprite.pushToSprite(&background,80,10,TFT_WHITE);//Transparent sprite pushed to background

  background.pushImage(80,140,88,88,circle);//Image pushed to background

  background.pushSprite(0,0);
}

[Bodmer]

This may be because the circle.h file contains an anti-aliased image. Post that header so I can see hwat is happening.

[NerdyCrafter]

Here is the top part, I used an image converter(http://rinkydinkelectronics.com/t_imageconverter565.php). If you need the full image code with each color/pixel let me know.

// Generated by   : ImageConverter 565 Online
// Image Size     : 88x88 pixels
// Memory usage   : 15488 bytes


#if defined(__AVR__)
    #include <avr/pgmspace.h>
#elif defined(__PIC32MX__)
    #define PROGMEM
#elif defined(__arm__)
    #define PROGMEM
#endif

const unsigned short circle[7744] PROGMEM={
0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF,   // 0x0010 (16) pixels
0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF,   // 0x0020 (32) pixels
0xFFFF, 0xFFFF, 0xFFFF, 0xD6BA, 0xAD75, 0x8C51, 0x630C, 0x39E7, 0x2945, 0x2104, 0x1082, 0x0020, 0x0020, 0x1082, 0x2104, 0x2965,   // 0x0030 (48) pixels

[Bodmer]

The image does appear to be antialiased with a white background, this means it will only look correct on a white background.

If circles is what you need, then there are functions to do this.

[NerdyCrafter]

I got it too work correctly, it had something to do with the swap bytes function. Both images are clear but only when background has setSwapBytes(true), if any of the others have it the image becomes blurry.

#include <TFT_eSPI.h>

#include "circle.h"

TFT_eSPI tft = TFT_eSPI();
TFT_eSprite circleSprite = TFT_eSprite(&tft);
TFT_eSprite background = TFT_eSprite(&tft);

void setup() {
  tft.init();
  tft.fillScreen(TFT_WHITE);

  background.createSprite(240,240);
  background.setSwapBytes(true);
  background.fillScreen(TFT_GREEN);
  
  circleSprite.createSprite(88,88);

}

void loop() {
  circleSprite.pushImage(0,0,88,88,circle);
  circleSprite.pushToSprite(&background,140,40,TFT_WHITE);//Transparent sprite pushed to background Right

  background.pushImage(20,40,88,88,circle);//Image pushed to background Left

  background.pushSprite(0,0);
}

[Bodmer]

Ah, that makes sense because white and black render correctly even when byte swapped.