Need help with drawing part of an image.

[2ant]

Hello,

Thank you Bodmer for your awesome library.

I'm trying to draw part of an image ( a sprite from a spritesheet ).

My image is 64 by 64.

I can draw the image entirely, the top half ( 64x32 ) but when i try to draw the left half (32x64) or juste the top-left square (32x32) it seems to take part of the image and mix it and stretch it.

Original image:

Code:

// Set delay after plotting the sprite
#define DELAY 30


#include "sample_images.h"

TFT_eSPI    tft = TFT_eSPI();         // Declare object "tft"

TFT_eSprite spr2 = TFT_eSprite(&tft);
TFT_eSprite spr3 = TFT_eSprite(&tft);
TFT_eSprite spr4 = TFT_eSprite(&tft);
TFT_eSprite spr5 = TFT_eSprite(&tft);

void setup()
{
  Serial.begin(9600);
  Serial.println();

  delay(50);

  tft.init();
  tft.setRotation(0);

  spr2.setColorDepth(8);
  spr3.setColorDepth(8);
  spr4.setColorDepth(8);
  spr5.setColorDepth(8);

  spr2.createSprite(64,64);
  spr2.setSwapBytes(true);

  spr3.createSprite(64,32);
  spr3.setSwapBytes(true);

  spr4.createSprite(32,64);
  spr4.setSwapBytes(true);

  spr5.createSprite(32,32);
  spr5.setSwapBytes(true);
  
  tft.fillScreen(TFT_CYAN);
  
  

  spr2.pushImage(0, 0, 64,64, (uint16_t *)stars2);
  spr2.pushSprite(0, 0, 0);

  spr3.pushImage(0, 0, 64,32, (uint16_t *)stars2);
  spr3.pushSprite(0, 96, 0);

  spr4.pushImage(0, 0, 32, 64, (uint16_t *)stars2);
  spr4.pushSprite(0, 160, 0);

  spr5.pushImage(0, 0, 32,32, (uint16_t *)stars2);
  spr5.pushSprite(0, 256, 0);

  
}

void loop(void)
{
  
}

Result:

Am i using the correct method ?
If i'm using the wrong method i can't unterstand why sp3 would work but not sp4 and spr 5.

Any help is welcome.

[2ant]

A user on arduino forum suggested using pushSprite with more parameters and it work but i need the transparency.

[Bodmer]

There are a few ways to do this:

1. Create a single 32x32 sprite and copy the sheet image to this with an offset, e.g. -32,-32 will copy the bottom right part of the sheet to the smaller sprite. Then you can push that smaller sprite to the screen with transparency.
2. Create a single 64x64 sprite for the shole sprite sheet. Then use the view port feature, see examples. So tft.setViewport(0,0,32,32); will create a 32x32 pixel window at TFT coord 0,0. Pushing the sprite to that area with an offset will only show part of the sprite.
3. Create a single sprite sheet with all sprites alligned vertically, then use a pointer to access the sprite image area you want.
4. A variant of 1 above where 4 off 32x32 sprites are created and the sprite sheet copied to each one with an offset.

If you need further help then provide a complete example that I can run, then I can easily make some changes to show how to do it. Create a zip file of the complete sketch and drag drop it on you message.

[2ant]

Thank you for your fast reply !

The n°1 solution seem the best for me right now. I managed to print all four part of a 32x128 image with it.

The image:

The code with a litlle animation :

#include <TFT_eSPI.h>
#include "sample_images.h"
TFT_eSPI tft = TFT_eSPI();
TFT_eSprite spr2 = TFT_eSprite(&tft);
TFT_eSprite spr3 = TFT_eSprite(&tft);

void setup() {
  tft.init();
  tft.setRotation(0);
  tft.fillScreen(TFT_CYAN);

  spr2.setColorDepth(16);
  spr3.setColorDepth(16);

  spr2.createSprite(128,32);
  spr2.setSwapBytes(true);
  
  spr3.createSprite(32,32);
  spr3.setSwapBytes(true);

  spr2.pushImage(0, 0, 128, 32, (uint16_t *)stars3,TFT_BLACK);
  spr2.pushSprite(0, 0, TFT_WHITE);
  
  spr3.pushImage(0, 0, 128, 32, (uint16_t *)stars3,TFT_BLACK);
  spr3.pushSprite(0, 64, TFT_WHITE);

  spr3.pushImage(-32, 0, 128, 32, (uint16_t *)stars3,TFT_BLACK);
  spr3.pushSprite(64, 64, TFT_WHITE);

  spr3.pushImage(-64, 0, 128, 32, (uint16_t *)stars3,TFT_BLACK);
  spr3.pushSprite(128, 64, TFT_WHITE);

  spr3.pushImage(-96, 0, 128, 32, (uint16_t *)stars3,TFT_BLACK);
  spr3.pushSprite(192, 64, TFT_WHITE);
}
void loop(void) {

  spr3.pushImage(0, 0, 128, 32, (uint16_t *)stars3,TFT_BLACK);
  spr3.pushSprite(32,128, TFT_WHITE);
  delay(1000);

  spr3.fillSprite(TFT_CYAN);
  spr3.pushSprite(32,128, TFT_WHITE);
  spr3.pushImage(-32, 0, 128, 32, (uint16_t *)stars3,TFT_BLACK);
  spr3.pushSprite(32,128, TFT_WHITE);
  delay(1000);

  spr3.fillSprite(TFT_CYAN);
  spr3.pushSprite(32,128, TFT_WHITE);
  spr3.pushImage(-64, 0, 128, 32, (uint16_t *)stars3,TFT_BLACK);
  spr3.pushSprite(32,128, TFT_WHITE);
  delay(1000);

  spr3.fillSprite(TFT_CYAN);
  spr3.pushSprite(32,128, TFT_WHITE);
  spr3.pushImage(-96, 0, 128, 32, (uint16_t *)stars3,TFT_BLACK);
  spr3.pushSprite(32,128, TFT_WHITE);
  delay(1000);

  spr3.fillSprite(TFT_CYAN);
  spr3.pushSprite(32,128, TFT_WHITE);
 }

20220423_193414.mp4

Thank you again for your awesome work and see you the next time i'm blocked.