Transparent Sprites - Programming Tutorial (TFT_eSPI library)

Ғылым және технология

As I promised, here is tutorial. How to use transparent Sprites on any TFT display. This example works great with TFT_eSPI library. I am using T-Display S3 but you can use and TFT display or any development board.
YOU CAN BUY IT HERE: www.lilygo.cc/0cAg0r
Here is code : github.com/VolosR/SpritesTuT
image to rgb565 converter : www.rinkydinkelectronics.com/t...
I hope you learned something, if you did, please leave a comment.
........................................................................................................................
You can SUPPORT my work by buying me coffee here:
ko-fi.com/volosprojects
Here is NEW TUTORIAL : • Bar Graph - Programmin...
...............................My T-Display S3 VIDEOS ..........................
• Is this Best ESP32 boa...
• LilyGo T-Display S3 (P...
• T-Display-S3 developme...
• How to Scroll Image (E...
• Winter Is Coming! T-d...
• T-Display S3 - How to ...
................................................................................................

Пікірлер: 166

  • @TYGAMatt
    @TYGAMatt Жыл бұрын

    Your Tft_espi tutorials are fantastic. Thank you so much for taking your time to share this great information. Matt.

  • @Peter_S_
    @Peter_S_ Жыл бұрын

    Excellent video! Your English is not clumsy at all. You are a very clear presenter and every video I have watched has been an excellent presentation. Large parts of America have both English and Spanish as primary languages so your English closely follows the normal English of somebody who speaks multiple languages. Most importantly, you explain everything very clearly. Excellent channel!

  • @user-nc2wk3sl5g

    @user-nc2wk3sl5g

    Жыл бұрын

    E bem explicado.

  • @Rick_Cavallaro

    @Rick_Cavallaro

    Жыл бұрын

    You got that right. These videos could hardly be any better!

  • @hypnoticatrance

    @hypnoticatrance

    5 күн бұрын

    Exactly this!

  • @louiscelenza8017
    @louiscelenza8017 Жыл бұрын

    I really appreciate your videos. You take your time and stay on point. Your English is very good. It has a good tempo and vocal control. I always learn valuable information from your videos, and implement them into my projects. Please continue your quality work. Thank you.

  • @VolosProjects

    @VolosProjects

    Жыл бұрын

    Thank you Louis, I will try.

  • @hypnoticatrance
    @hypnoticatrance5 күн бұрын

    Cool stuff, I like your Video Tutorials, and they help me much to get run things I don't had a clue about. My main problem was to get run my new display with tft eSPI, about there was not much Info around how to do with my display. But I find out how, and got it running. Since then i can play around with your nice tutorials! The Idea to use eSPI i got in your videos, and it made my display much faster, as the original library does from my display.

  • @TYGAMatt
    @TYGAMatt Жыл бұрын

    Brilliant. Thank you so much for taking the time to share this with us. Much appreciated

  • @michealmorrow1481
    @michealmorrow1481Ай бұрын

    Thanks for this tutorial. I really like that you upload and show after every step so we can truly follow along.

  • @arlo4051
    @arlo4051 Жыл бұрын

    Thank you Volos, I have been fighting with trying to get transparencies to work for a month now, your the best. Regards to family.

  • @VolosProjects

    @VolosProjects

    Жыл бұрын

    tnx Arlo, best wishes to you and your family

  • @kenworks6068
    @kenworks6068 Жыл бұрын

    Your videos are exactly what I need to make some additional gauges in my SUV as I have changed to a different power train. Many vehicle functions were handled by the old engine controller, like the air conditioning compressor logic and I am adding functions like variable speed electric fans as well as additional gauges. I am using Arduino mega2560 A/D to read a lot of sensors, scale data and provide basic control logic. Then the scaled data is going to the LILYGO T-Display-S3 via. I2C to drive multiple gauges. Your examples have been very instructive and with them my code is really improving - Thank You

  • @VolosProjects

    @VolosProjects

    Жыл бұрын

    I am glad you found something useful. Cheers

  • @briannielsbergh
    @briannielsbergh11 ай бұрын

    I've been searching for a way to get rid of the flickering, even been in the official lilygo forum (and in the TFT forum) and not anyone could give a clue... finally I found this video with a simple hack, thank you so much 😊😊

  • @newmonengineering
    @newmonengineering Жыл бұрын

    You are doing a great job with English language. And this is an interesting concept. I now know how to eliminate flicker and draw sprites. Very nice. I'm sure it probably took a while to figure these tricks out. But it looks very nice.

  • @philsaunders65
    @philsaunders6517 күн бұрын

    Thank you for your clear explanation. I learn so much from every video. I think the videos are much better unscripted because we get to understand your thought-processes, and what you say is more authentic and natural.

  • @tszulpinedo757
    @tszulpinedo757 Жыл бұрын

    Como siempre, los mejores códigos y ejemplos. Gracias, profesor.

  • @smpplaza6673
    @smpplaza6673 Жыл бұрын

    Awesome work mate thank you for taking the time to teach us these things!! You and lilygo are an awesome team!!

  • @VolosProjects

    @VolosProjects

    Жыл бұрын

    Thank you my friend.

  • @edwilliams9914
    @edwilliams9914 Жыл бұрын

    Thanks! Very informative, like this whole series. Very clearly explained. (And your English is perfectly fine for anyone who actually cares to listen and learn -- and if they *don't*, forget 'em and carry on!).

  • @tmiller9099
    @tmiller9099 Жыл бұрын

    Thank you. It was helpful to see how some of this comes together.

  • @nkbdl
    @nkbdlАй бұрын

    I finally got it working. I am using a LilyGO T-Display S3 and there are some small variations in how to put the code in. But the code works. Thank you! :)

  • @VolosProjects

    @VolosProjects

    Ай бұрын

    i am glad you found way. thank you :)

  • @rocoroco15
    @rocoroco15 Жыл бұрын

    Thank you so much! I am waiting for my LilyGo screen to arrive... This will be my first project with it!!!

  • @Anto-ro6ru
    @Anto-ro6ru Жыл бұрын

    Great video, i suggest you to also talk about the approach used in some examples for the moving sprites of the tft library. They use a buffer to “clear” the background as far as i understood.

  • @thepapatech2067
    @thepapatech2067 Жыл бұрын

    Learning quite a lot watching your videos. Keep up the great work!

  • @VolosProjects

    @VolosProjects

    Жыл бұрын

    Thank you, i will :)

  • @psprophet
    @psprophet Жыл бұрын

    I love your "clumsy" english, Volo! It makes everything easier for me - as Brazilian. Cheers!

  • @VolosProjects

    @VolosProjects

    Жыл бұрын

    tnx fabio 😀 cheers

  • @MeinElektronikHobby
    @MeinElektronikHobby Жыл бұрын

    ... wieder etwas gelernt. Bin gespannt auf das nächste Video - Learned something again. I'm looking forward to the next video

  • @VolosProjects

    @VolosProjects

    Жыл бұрын

    Tnx :)

  • @jeffreymorris1752
    @jeffreymorris1752 Жыл бұрын

    Your English is very good. You've a more effective and comprehensible vocabulary than most Americans.

  • @jiginvp4830
    @jiginvp48303 ай бұрын

    Great tutorial. Thanks. Very appreciated. Please do more tutorials.

  • @krusethorsten
    @krusethorsten Жыл бұрын

    Sprites on a ESP32... Since long time I try to understand what you tell us now. But not had a clue before. How crazy is this solution, to put the graphic in a sprite and this graphic in another sprite to stop flickering. .... but finally it makes sense, and it does what you want. Have to see the video more times to really understand this technic. I definitely will use it in one of my projects in the future...

  • @elkakael4369
    @elkakael43696 ай бұрын

    ur so called "clumsy english" has help me alots and im dont have difficulties understanding it 👍🏽🙏🏽👌🏽

  • @VolosProjects

    @VolosProjects

    6 ай бұрын

    Thank you, it is nice to know that.

  • @freddycarrillo9266
    @freddycarrillo9266 Жыл бұрын

    OMG, your tutorials are the very best, youre great

  • @VolosProjects

    @VolosProjects

    Жыл бұрын

    thank you Freddy 😀

  • @tablatronix
    @tablatronix Жыл бұрын

    This is impressive, i have one of these sitting in my desk, I need to put it to use!

  • @pezictusfish
    @pezictusfish Жыл бұрын

    The technique is vey clever, thank you for sharing!

  • @GuruTimCreates
    @GuruTimCreates Жыл бұрын

    thanks for sharing this. Very useful to add to my how-to's knowledge

  • @user-hz7kp8cl7i
    @user-hz7kp8cl7i5 ай бұрын

    Very useful video lesson. Thanks a lot!

  • @HenricoNar
    @HenricoNar Жыл бұрын

    Really like your video's .You are very accomplished programmer ! Keep up the good work !

  • @VolosProjects

    @VolosProjects

    Жыл бұрын

    tnx man

  • @hjlc3135
    @hjlc31355 ай бұрын

    Excellent tutorial! Many thanks for this! And don't apologize about your english! For other non-english speakers yours is a lot more understandable than the one of many 'native' speakers! 🙂

  • @VolosProjects

    @VolosProjects

    5 ай бұрын

    Thank you!

  • @BerndSchmitt-Martinique
    @BerndSchmitt-Martinique9 ай бұрын

    Very useful video and very well explained...step by step . Perhaps you should mention in one of your sprite videos . that the MAIN TRICK with SPRITES is, that you are drawing directly on a " screen buffer " in your MCUs memory !!! You dont draw on the TFT using library functions , which is much more time-consuming. When your IMAGE in your SCREEN BUFFER is complete you push it out in one piece to the TFT. This can even be done still faster by using DMA - direct memory access. Each frame is drawn on a clean sheet of paper ( the background sprite ) so you dont have to take care of the old graphical content. Years ago - without sprites - it was very complex to draw moving graphics , because .... before drawing new content you always had to "neutralize" the old content . Thanks a lot for your videos - because you wont find these excellent explanations on any other place .

  • @CrazyPit
    @CrazyPit6 ай бұрын

    Excellent video!

  • @zyghom
    @zyghom Жыл бұрын

    FANTASTIC!

  • @dobitaobyte
    @dobitaobyte Жыл бұрын

    Amazing, man. When I saw you using RGB565 2bytes here, I tried an icon too and now it's working. Probably I did some mistake before. But I need to confess that image used in example sketch from LilyGo let me crazy. I can't understand the array of 1 byte to generate rgb565.

  • @beavisul
    @beavisul Жыл бұрын

    This was great! Thank you!

  • @EasyOne
    @EasyOne Жыл бұрын

    Very well explained

  • @electronics.unmessed
    @electronics.unmessed Жыл бұрын

    Nice gadget, I have to think about it how to use it in my projects!😀

  • @chadreshpatel2339
    @chadreshpatel233910 ай бұрын

    TFT_eSPI library is amazing but the documentation is not that extensive. It is difficult to figure out how many amazing things we can do. But thanks to your tutorial, i can understand much more things in details.

  • @pbart9821
    @pbart9821 Жыл бұрын

    Best espi tutorials

  • @ReflectingMe2024
    @ReflectingMe2024 Жыл бұрын

    Excellent video whip is wonderfully explained, and your English is a million times better than my Russian😂. Suggestion: I think you’d have a decent audience if you did a live stream, maybe coding another interesting program on the excellent T-Display. I’d watch. Thank you for your great work here. John.

  • @anhoanghocgioi3140
    @anhoanghocgioi31408 ай бұрын

    Wherever, in whichever school this Mister is teaching, I want to attend his classes!

  • @VolosProjects

    @VolosProjects

    8 ай бұрын

    hahaha, thank you.

  • @IronRiviera
    @IronRiviera5 ай бұрын

    Very nice. Thanks

  • @timoengelmann3541
    @timoengelmann3541 Жыл бұрын

    Thanks, this is great 💪

  • @beavisul
    @beavisul Жыл бұрын

    I think this is the best video about this topic. Really really impressed how straight-forward it was. Do you know if it is possible to create gradient transparency? One side of the image fully transparrent and the other no transparency. Useful to create shadow effects. Thank you for the awesome knowledge and content!

  • @codecaine
    @codecaine Жыл бұрын

    Excellent content

  • @markwinfield1679
    @markwinfield1679 Жыл бұрын

    Your English is very good and some of your technical language is better than those who are English. You only seem to get confused with some of the pronunciation and that will be because words are pronounced differently in different parts of the world. Keep up the great work. You have saved me hours of work, I will be buying you a coffee.

  • @VolosProjects

    @VolosProjects

    Жыл бұрын

    Tnx Mark, yes pronunciation is big problem. I am glad you like content. Tnx

  • @davidrowe9168
    @davidrowe91689 ай бұрын

    Very useful. Thx

  • @madcow3417
    @madcow3417 Жыл бұрын

    A quick tip on using Paint: You don't have to resize the image if you paste it in then hit 'Crop' while it's still selected.

  • @guywhoknows
    @guywhoknows Жыл бұрын

    Good video. Good explanations.

  • @BlondieSL
    @BlondieSL Жыл бұрын

    This is an excellent video! The way you explain and demo things makes things so easy to follow and logical. Thanks for that. Just a note. In your video, you mentioned that links that you use, like the rinkydink one, for example, will be in the description. Other than links to other videos and the main code link, I'm not seeing any other links. I'm just now about to get started with ESP32 as I kind of want to move up from Arduino stuff, so any links and suggestions are always helpful. As I've not yet connected my 2, ESP32 boards to Arduino IDE (which I'll use), I'm not yet sure how to find/install whatever board drivers are required. LOL Thanks in advance.

  • @VolosProjects

    @VolosProjects

    Жыл бұрын

    thank you, sorry i totally forgot, i will add links in min . Thank you :)

  • @biker2k3
    @biker2k3 Жыл бұрын

    Excelente explicación!

  • @Fusiiiiion
    @Fusiiiiion Жыл бұрын

    Thanks a lot, this is a great job'

  • @terrydaktyllus1320
    @terrydaktyllus1320 Жыл бұрын

    Thank you again!

  • @bjarkekorsgaard
    @bjarkekorsgaard4 ай бұрын

    Thank you Volos, for the niece programming example - perfect 🙂 I have noticed that .png files are not converted perfectly via the rinkydinkelectronics rgb565 converter. I can advice to convert .png to .jpg and then use the rgb565 concerter. Now looks slightly better 🙂

  • @alejandroperez5368

    @alejandroperez5368

    3 ай бұрын

    But how does the jpg file conserve the transparency?

  • @michaelbyron9688
    @michaelbyron9688 Жыл бұрын

    Oops.. EXCELLENT video!

  • @Alexandr22ru
    @Alexandr22ru Жыл бұрын

    Thank you!

  • @chipko
    @chipko Жыл бұрын

    Hello! TFT_eSPI is amazing as too your videos!

  • @AlwaysBolttheBird

    @AlwaysBolttheBird

    Жыл бұрын

    TFT_eSPI is a super powerful library

  • @michaelbyron9688
    @michaelbyron9688 Жыл бұрын

    EXCEKENT video!

  • @pezictusfish
    @pezictusfish Жыл бұрын

    Hey man! Have you used lvgl library with esp32 ttgo's? Also, I was thinking about adding components for cool toys, would be awesome to create an esp32 sonar radar with a graphical twist!

  • @HaikuGuy
    @HaikuGuy Жыл бұрын

    Thanks!

  • @paulpkae
    @paulpkae6 ай бұрын

    Thanks for the Video. Have you found any good documentation for the TFT_eSPI library?

  • @walley7i322
    @walley7i3222 ай бұрын

    Wow!!! Good!!!!!!!

  • @adrianaxente
    @adrianaxente9 ай бұрын

    The technique to avoid flickering using "background" sprite is called "double buffering" 😊

  • @LQhristian
    @LQhristian Жыл бұрын

    Volos, thank you for all your effort! Have you thought of connecting bluetooth to phone to receive notifications (then delete after a short time)??

  • @heinzodermatt3928
    @heinzodermatt3928 Жыл бұрын

    Hello Volos, I love your videos. I bought my self a TTGO S3 T-Display. I could manage to get it working with arduino IDE. But not with PlatformIDE. Can you give me a hint, where to look, to get PlatformIO working with this nice Display? (After upload it always stays black) Another question, how do you design your pixel screens ? I'm sure there are some kind of UI designer out there.

  • @tvamos73
    @tvamos73 Жыл бұрын

    Thank You!

  • @VolosProjects

    @VolosProjects

    Жыл бұрын

    thank you for comment and for coffee 😀

  • @Bestkeiki
    @Bestkeiki Жыл бұрын

    I hope you will do a video demonstrating the lilygo t-dongle-s3 also

  • @nerijusk9598
    @nerijusk9598 Жыл бұрын

    Thank you for you work. I have question how do when arrow move very fast(full speed) and can regulate the speed?

  • @VincentVeak
    @VincentVeak8 ай бұрын

    Is there a reason to use two sprites vs just pushing the arrow image to the background sprite? What is the purpose of making an arrow sprite to begin with? Thank you!

  • @BlondieSL
    @BlondieSL Жыл бұрын

    I forgot to ask, are these sprite things dependent on the display type, make, model? Or will they work on any display, even like an ST7735 models? (1.8" and 0.96") ??

  • @antahsi
    @antahsi Жыл бұрын

    Nét và mượt quá

  • @akissot1402
    @akissot1402 Жыл бұрын

    Nice info Volos, but help. Sprite is erasing background as it moves, either alone or inside another sprite, any ideas?

  • @neurobits
    @neurobits Жыл бұрын

    Thnx. I just can’t realize why you fillScreen inside loop, that’s cpu expensive. Sprites aren’t like real full-managed-moving sprites? In worst case, is possible to create 2 (or whatever) sprites to be used as save-restore background sections? (excuse my eng)

  • @AgusTechnisi79
    @AgusTechnisi79 Жыл бұрын

    Good

  • @michealmorrow1481
    @michealmorrow1481Ай бұрын

    Great tutorial. I learned something new, as always with your tutorials. But, a problem. When I code: txtSprite.setSwapBytes(true); txtSprite.setTextColor(TFT_RED, TFT_BLACK); I get blue text. All colors except white are wrong, too. Even if I leave out the SwapByte, the colors are still wrong. Any idea why? I am using a T-Display S3.

  • @shadowmosesmusic
    @shadowmosesmusic3 ай бұрын

    New to PCB - thinking of doing one that can play an animated gif on loop with sound speaker, on off switch, rechargeable battery and led strip light. Would you know how to do that? There's not a lot of resources out there. Thank you

  • @Johann75
    @Johann756 ай бұрын

    How can you draw the screen quickly within an interrupt for quick user input?

  • @esmokebaby
    @esmokebaby Жыл бұрын

    I wounder if I can cut a hole in my PC case and have it read my CPU GPU temps and my fps

  • @bobinou
    @bobinou11 ай бұрын

    i am trying to display a jpg or png but it is rendering very slow with about 160 - 300ms per image. the image is stored on the esp32 using littlefs. is there a way to speed that up? i have tried normal tft and sprites.

  • @mikentx57
    @mikentx579 ай бұрын

    Question for anyone. If I have multiple sprites. How do I control their front to back order. So when they cross on the screen. I control which sprite will be on top.

  • @Windorey
    @Windorey Жыл бұрын

    Hello. I am trying to do this tutorial on M5Stack Core2, but I cannot draw image in Sprite. Please help me

  • @johanneskrijger398
    @johanneskrijger398 Жыл бұрын

    Hello Volo, I have one question about transparent sprites. Is there a way to send you an email. In short, I created an yellow Circle in a Sprite and it is displayed in Purple in Background Sprite.

  • @DanNV100
    @DanNV100 Жыл бұрын

    Не знаю зачем это, но это классно.

  • @cpocol
    @cpocol Жыл бұрын

    Hi Volos, as a very beginner in MCUs, I was inspired by your videos. Now, getting to an intermediate level, I implemented a simplified version of Wolfenstein 3D in ESP32. Please find it on my channel.

  • @JurassicJenkins
    @JurassicJenkins Жыл бұрын

    Volos - thank you for moving the needle on the UI - very good presentation. I bought 4 of these lilygo S3 and can’t get any to display, the code is running, no display, my money is on tft_eSPI - even though I did on PC and Mac. I’m only using the Arduino IDE. I’m a notepad++ guy 😊- No VSCode yet… any ideas? All the boards worked with “factory” code.

  • @VolosProjects

    @VolosProjects

    Жыл бұрын

    Hello, youu need to install right library for display, please fallow this tutorial kzread.info/dash/bejne/maStx6-jfZzJf7g.html

  • @khaldrogo9451
    @khaldrogo9451 Жыл бұрын

    How are the screens when it comes to sunlight? Are they visible?

  • @quaphik4239
    @quaphik4239 Жыл бұрын

    Quick question is this similar to the nfs process

  • @gx9033
    @gx9033 Жыл бұрын

    Хэв э найс дэй 👍

  • @markwinfield1679
    @markwinfield1679 Жыл бұрын

    I have a 240x240 display. Your code works with background.createSprite(240, 238); but fails with anything bigger than 238 i.e. background.createSprite(240, 240); I can still work with this, but would love to know why this is happening!

  • @nageshwarrao8629
    @nageshwarrao8629 Жыл бұрын

    I am wonder if you can program Gameboy advance or any arcade emulator in it

  • @neet9599
    @neet9599 Жыл бұрын

    hello,I wanna know how can make a frame animation forSprites

  • @chlor7877
    @chlor787710 ай бұрын

    Paint: If you set the image too small and paste a big image into it, it will size up by itself.

  • @fabryz
    @fabryz Жыл бұрын

    Did you see that Lilygo now released also the touch version of the "T-Display S3"?

  • @BlondieSL

    @BlondieSL

    Жыл бұрын

    Touch!!!??? NICE! I love touch screens. Currently, I use different sizes of Nextion displays, but the TFT like in this video is nice!

  • @kidrobot.
    @kidrobot. Жыл бұрын

    where can i buy one of these tiny things? i want one for my keychain

  • @petricabutnaru9263
    @petricabutnaru92632 ай бұрын

    I tried in stm32 with stmduino compiler witl ili9488 display using this library and this code, and on screen appears gray

  • @ZacsNotDead
    @ZacsNotDead Жыл бұрын

    I don't know wut this vid is gonna be I just like mega man

  • @weimingfeng2284
    @weimingfeng2284Ай бұрын

    I am confused, why don’t you just convert the gif file to .h file? And why do you have to convert the transparent gif file to a jpeg file in black background?

  • @localixdots9698
    @localixdots9698 Жыл бұрын

    Не пробовали написать небольшую операционную систему с UI ?

Келесі