How to use and why to use Sprites (TFT_espi Programing tutorial)

hello and welcome to my backyard I'm right now I'm outside so you will probably hear some birds traffic and maybe wind but I will try to make this video today we will learn how to use Sprites Sprites are a great way to avoid flickering off screen to avoid deleting parts of screen and to avoid delay function when you need to update data on screen very often uh or when you are programming games Sprites are very useful people think that Sprites are complicated but they are quite simple I will use TT go t display board but you can use any esp32 board or external uh TFT supported by budmore's TFT SPI Library I will make this simple example a round circle will move back and forward and here we will print x coordinate of this circle right now you can see that I'm not using Sprites and screen is flickering a lot and this is a big problem so I will show you how to make this same example run much smoother without flickering and we will of course use Sprites these two are not completely same examples you will notice that this runs much faster don't worry with using Sprites we can also achieve this speed okay let's start so here I have basic empty sketch I included dfta SPI library and here is Constructor now I need only TFT init function and I'm using a I will use ttigo in this orientation so I will need it TFT set rotation function one okay first let's draw a circle here I will need sorry I will need integer X it will be zero and I will draw DFT feel Circle at coordinate X 36 radius will be 30 and I will draw it in DFT red red and now I can try to upload that to my board and right now I have red circle now let's move it so in each loop I will increment X by 1. okay now we have another problem I will reset so Circle will be drawn but every previous Circle will also be visible so after drawing uh before drawing a circle we need to delete or a set whole screen and painting black and fill it with black color so in code first we will feel full screen with black we will increment X uh coordinate and then we will then we will uh draw a red circle if we reach if X is and of screen is 240 we will say that X is zero and now we have a moving Circle but screen is flickering a lot because we are constantly deleting and I'm drawing New Circle we can do one trick instead deleting whole screen we can just fill fill circle on previous position but with black color you will notice that now sketch run much faster because uh it is much faster to feel another circle with black color then fill a whole screen and I forgot TFT draw string I will draw value of x here and after upload we have same problem screen is still flickering and number will never go from zero because we need also to delete each time that number so we will use the same trick DFT feel rectangle uh 50 70 with TFT and and right now our numbers will go again from 0 to 240. but now we have even more worse flickering so what our solution to that one solution is to use delay function I don't know delay 100 of course delay will uh will slow down uh whole sketch and another problem is that it will be hard to use push buttons or something so if you are planning to make games or something that moves very fast avoid using delay so what is solution solution is very simple we will use Sprites I will delete this so I will add another line I will paste it line here so this is Constructor for Sprites our Sprite will have a name image in setup part of code I will create spread email and size of my Sprite is size of my screen you can make also smaller Sprites but I will make Sprite that will uh cover all screen so 240 by 235 because uh size of display on dtot displays 200 by 40 by 135 and now it's simple we will draw not to TFT display we will draw to Sprite image full circle image fill Circle image fill Circle image draw string and then we you then we will draw whole Sprite on screen in one move using image push Sprite and I will draw it on coordinate 0 0 B because I have Sprite that will cover all my screen if you have a small Sprite you can also draw it on another coordinate you can have a few Sprites it depends on the size of the all Sprites and memory of your board and now let's try will this work and here is final result smooth moving and displaying numbers without flickering in a first example so without using Sprites every object or every graphical object is drawn independently and every cycle I need to delete the whole screen or part of the screen to draw something different or new and the result was annoying flickering in this case when using Sprites a whole Sprite is drawn in single move so we don't have C annoying deleting so there is also no flicker sorry for my I hope you learned something today of course these are just basics of Sprites Sprites uh can also be rotated and you can draw one Sprite inside another which is more useful than it sounds but I will show you that in my next tutorial thank you for your time you can find these simple examples in description so don't forget to check the description to subscribe and if this was really helpful to you my coffee muggies currently empty thanks and have a nice day

Channel: Volos Projects

Views: 66,530

Keywords:

Id: sRGXQg7028A

Length: 13min 29sec (809 seconds)

Published: Thu Jul 07 2022