How to Rotate Sprites (TFT_ESPI library) PROGRAMING TUTORIAL

hello I hope you are doing fine today we will learn something new just to be clear in this video we will not learn how to make Compass we will not try to find our location in this video we'll try to learn how to rotate Sprites and this fake Compass is just example I created to give you an idea of what can be made using this method right now in upper part of the screen I have two different Sprites with left push button I can rotate this needle and with right one I can rotate Sprite beneath you can see that these Sprites rotate in different directions you can also notice that a needle Sprite have a transparent background so once again we will see how to deal with transparency on display we can see angle of specific Sprite and these location data are fake I decided to make this tutorial because nobody has done it before and existing example is power to understand so we will make one simple example and I hope you will learn something new if you are not familiar with Sprites and you don't know how to use them you can check my older tutorials I will leave links in description in this tutorial I am using lilygo T display S3 board because currently this is my favorite development board and you can see that on my channel page I have many videos where I where I am using this board feel free to check them and if you want if you want to buy this board you can find a link in description of this video if you are first time here don't forget to subscribe and if this tutorial was really helpful to you and if you want to support my work you can buy me a coffee my Batman cup is currently empty the link to my coffee page is in description also thank you okay let's start we'll start with empty sketch I included TFT SPI Library here we have Constructor for TFT display and one Sprite so in the setup we need DFD init function and for example I want to fill my screen with black color TFT fill screen TFT black let's upload to that to ensure everything is working and my screen is black so for now everything is working so now I will need Sprite create Sprite and my Sprite will be 20 by 80. and for example if I want push my Sprite to display item on location 40 40 but before that I will feel Sprite TFT red let's upload and here it is my Sprite and if I want to rotate my Sprite I will not use Sprite rotate Sprite I will not use Sprite push Sprite I will use bright push rotated and here I will put angle 45 let's see what we have now and we can see that something is wrong here why because we need to set our Pivot Point TFT for example eight five eighty-five and now we can see that our pivot point is in the middle of upper part at the location 85 85 okay but let's try to rotate it in Loop I will need variable angle which is zero and in each cycle I will increment angle by one and if is equal 360 angle is equal zero let's try this and here is first problem we need to delete previous Sprite solution would be TFT fill screen DFT black but that would cause flickering so real solution is to have another Sprite so I will make one more Sprite background spriter back create Sprite and I will make it 170 by 170. and first I will fill my background Sprite with TFT black then I will fill my smaller Sprite we can call it needle needle but I will push needle not on display I will push it on on back Sprite and then I will location zero zero so basically we have a big background Sprite and inside background Sprite will push we'll draw needles right which will be rotated for a specific angle in each cycle let's see what we have now and now our needle is rotating okay this is cool but this is not needle let's fix that for needle I will use function draw wage line and I will have two of them one wedge line will be red and other will be blue so first one will go from middle which is 10 and 0 to middle of the this Sprite is 10 40. and a radius of first cycle B will be one and radius of bottom will be 10. DFT red and Sprite will be filled in Black let's see what we have now I have error here I will need to comment this and black needle will go from middle of needle Sprite Which is 10 40. to the end of which is 10 80. and now radius of Center will be 10 and radius of another Circle will be 1 and TFT blue I hope this is not too hard to follow and now we have much nicer needle I can put in the middle fill fill a circle so 10 40. 10 40. and TFT in a radio radius is also 10. okay very nice but now I want this background Sprite back also fill Circle also in the middle middle of background Sprite is 85 85. 170 divided by 2 and 170 vector and now radius is 85 and we will choose TFT silver and now we have one problem we can see that my needle Sprite have this this nasty black color so we can make it transparent not really transparent but we will not draw black color so we'll push needle on back background Sprite at angle which is angle and we will Define TFT black s optional transparent color so black color will not be drawn and that's it we have two Sprites this big circle and this rotating needle I will put code of this in the description and I will also put code on of compass Compass project so you can learn from it also in this case we are rotating only needle Sprite so we are using to spread in a case of compass I have three Sprites background Sprite Compass Sprite and a needle Sprite because I am rotating two Sprites in different directions and that's it for this week I hope you learned something today um I know that sometimes it's hard to follow my tutorials but I hope you learned something that's it tell me what you think in the comments tell me um I don't know your ideas where this can be used what we can make maybe some game maybe some gauges I don't know tell me what you think please leave a comment leave a like subscribe if you want you can buy me coffee if you don't want it is still fine thank you because you are watching my videos have a nice day and goodbye

Channel: Volos Projects

Views: 32,759

Keywords:

Id: oqBa_ptBmLU

Length: 19min 3sec (1143 seconds)

Published: Tue Jan 10 2023