Transparent Sprites - Programming Tutorial (TFT_eSPI library)

hello today you will learn how to use transparent Sprites of course this tutorial will work only with TFT display supported by DFT aspi Library in this tutorial I'm using this T display S3 development board but this will work on any TFT display I already made few examples where I used transparent Sprites you are watching them right now you can find those examples on my YouTube channel links are in description this video is not scripted so in this video you will hear my Clumsy English like always okay let's start here I have empty basic sketch so we included our TFT SPI Library we have TFT object init function we rotated our display we will draw images so we will need this set swap byte true function and whole screen is filled black on this side of screen you can see results okay let's try to find some image I will go to site called icon archive I will search for Arrow this one will be fine and I will choose size for example 96 by 96. I will open it right click and copy now I will go to paint I will resize my picture too 96 by 96 so same size my arrow is and I will paste it so we can see that my arrow have black background and that is exactly what I want and next I will go save as and I will save it like Arrow jpeg in 3D objects folder now I need to convert JPEG to format that can be readed by DFT aspl Library I will use this site you can find Link in description it is very easy to use so we will choose our file which is Arrow jpeg I will go make file download it and I will save it as arrow.c so here is my arrow.c I will open this file in Notepad select all and copy whole content of this file now I can go back to my Arduino IDE and I will make new header file so I will click here new tab Arrow dot h i will write name of new file here and here it is new header file and I will just paste it here so now we have image 96 by 96 Excel let's try to draw with that picture on this screen first of we need to include this arrow.h now we can use simple TFT push image location can be I don't know 2020 size is of course 90. 6 by 96 and image is called Arrow and let's upload and after uploading we can see our Arrow here and it looks very good because we have black background and background of our arrow is also black but let's try to paint our background in for example in purple let's upload and now we can see the difference our background is purple and our Arrow have black background also so we need to use Sprites I will add this part of code so we created Sprite and I will call it Arrow Arrow Sprite in a setup part of code I will add create function and I need to put size here I will put exactly same size like my image so 96.96 and now I can instead drawing this image too screen I can draw it to Sprite arrows right push image but now I need to push it to zero zero coordinates because my Sprite is the same size like image so I need to start drawing it at the beginning and to show this Sprite on screen there is function push so push Sprite and here I need to put coordinates so let's say 40 40. and upload okay we have our arrows right here but colors are in mess so I will need this same function after creating Arrow Sprite I will also need set swap bytes true to that Arrow Sprite let's upload and now we have our Sprite but we are still on same position so trick to make this Sprite transparent is to add here color which will not be drawn so in this case we don't want to draw black color so I will add TFT black let's upload foreign and now we have nice and transparent Sprite which looks great but there is one problem if we want to move that Sprite we will we will have a problem so I will show you what is problem if you want to move Sprite we will need to move our code to Loop region I will need one more variable in x which will represent X position of Sprite so in each cycle I will go in each cycle I will draw a fill whole screen with purple with purple I will push image to Arrow Sprite on position X I will no sorry zero zero I will push Sprite on position X on screen and I will for example increment and if if he's larger than oh my God larger than 300 and 30 X is equal minus 100. let's try to upload this so we have a problem with flickering trick to do this right is to use instead this TFT function we'll use another Sprite which will be a large background Sprite and background I will copy this will uh be size of the whole screen so I will fill background whole background Sprite I will fill background spray with purple I will push image to Arrow Sprite and I will push Arrow Sprite to background Sprite so now I will use push to Sprite and here will be pointer to pointer to background and at the end I need to push show hole background Sprite position is 0 0 because our background Sprite is size of whole screen so we have two Sprites background which is large a large Sprite and arrow Sprite Which is small and we will push that Arrow Sprite to background Sprite and then we will push background Sprite to our display I hope this makes sense let's try to upload and now it's looking much better so we have now transparent Sprite without that black background and let's see how to add transparent text I will add one more Sprite txt is right then also we need to create in setup region let's say 80 by 80. and a trick is also to txt dxt right um background color also need to be black DSP set text color so foreground color I will DFT sorry d f T I will make it white and background color DFT black black now I will go dxt oh sorry I will fill whole Sprite with TFT black and I will draw TFT I will draw a string to it should be value of x and location is zero zero and size let's try a big size size six and here I have here I will need also DFT bright push to Sprite and also I will push these two just copy it also I will put uh push this to background Sprite but now location will be for example 100 and 50. and also we will not draw black color let's try this sorry the XT Sprite and now we have our transparent Arrow transparent text without that black I hope you learned something and that this will be useful if you are planning to make games this will be very useful to you thank you for your time if you are first time here please subscribe I will leave this code in the description so you can download it and try it you can play with it thank you Please Subscribe please watch few of my other videos we have time and if you if you want you can always buy me coffee link is also in description thank you have a nice day I will see you soon goodbye

Channel: Volos Projects

Views: 332,313

Keywords:

Id: U4jOFLFNZBI

Length: 19min 36sec (1176 seconds)

Published: Sun Oct 30 2022