 Today with Godot we're going to continue our tutorials and we're going to make a little circular chart here. For example here we are going to just have a value and a circle chart and it will change color as the value changes and we're going to set up, we need to have some sort of value to measure so I'm going to measure how much I move my finger up and down the screen although in future tutorials we're actually going to use some real numbers but I can scroll my, slide my finger up and down, drag it up and down and it changes the value both in the number, the chart and the color and again this will run on all offerings. I'm using my daughter's Amazon tablet which I currently have taken apart because a couple days ago she thought she would wash it in the sink and it got some water in it but it's dried out now and I just haven't put the case back on but let's go ahead this shouldn't take too long we're going to go through it real quick so pay attention. As always with my projects you can find all the code and resources up on GitLab so if you go to gitlab.com forward slash mail x 1000 forward slash circle chart or check out the link in the description of this video you'll find this whole project you can download it give it a try but if you just want to follow you can also grab the assets from there I am going to show you how quickly there's two things we need to create and I'll show you how to create those but we'll also use the ones I've already created just to for ease so we're going to go over to Godot here so I have a new project here and I'm going to bring over the project that I've already created with the assets so I'm going to grab I have two images of circles one's just slightly smaller than the other a font and a new icon to replace Godot icon and drag those over I'm just dropping them right in my main project folder normally you'd want to put things into their own separate folders to keep things organized but this is such a small project I'm just gonna go ahead and throw them in the main directory next again I'm just gonna quickly show you how I created these circles so again there's two circles and one's just slightly smaller than the other so I'm in Gimp here I'm gonna say control n for new I'm gonna create a square image I'm gonna go 50 or 512 by 512 I don't remember what size I actually use this project I think it made it too big we are using a PNG we're not using SVGs or anything like that for this particular project so you just want to make it big enough that doesn't look pixelated small enough that it isn't huge because it doesn't need to be huge I'm 512 by 512 is probably bigger than needed you're gonna under advance you're gonna make fill transparency okay so we're gonna click okay so we have this blank image I'm gonna hit control a to select all so the whole box is selected I'm gonna say shrink and I'm gonna put in a number here I'm gonna go I don't know 48 I think so I have a square here I'm gonna turn that into a circle I'm gonna say select and I'm gonna go rounded rectangle I'm gonna put this all the way up to 100% okay and that gives us a circle but I don't just want to circle I want a you know circle with the hole cut out like a donut so I'm now gonna go to border select so select border and 32 pixel sounds good for this particular size image and now I'm gonna fill this in with white so put white click fill bucket and fill that in and like I said we're gonna do two images I save them as two inches I think I named them circle and circle underscore one you don't have to that you only need one but I like a slight border around my progress bar as it moves so just to show you this I'm going to hide that layer create a new blank layer and with what we already have selected I'm gonna say select I'm just gonna shrink it I'm gonna shrink it by I don't know four pixels on so we shrunk it by four pixels I'll fill that in in black just so you can see the difference so you can see I have a white border around the black so we're gonna be whatever color now we're gonna export them both as white circles because then in Godot we can tint them whatever color we want and this particular example we're gonna have a change color as the percentage changes so I just want to show you quickly how I personally made circles but you can use whatever program you'd like or you can just grab the ones from my project we're gonna use a user interface control here let's rename it chart chart and I'm gonna add two children first one's going to be a progress bar but not just a regular progress bar a texture crop progress bar then what we're gonna do is we're gonna go with that selected we're gonna go down to texture and we're gonna put sprites our PNG's in under and progress so the smaller circle I'm sorry the largest circle goes in under and the larger one they're saying that backwards the larger one goes in under the smaller one goes in progress to see the difference I'm gonna create I'm gonna take the under one I like to make it kind of a grayish color and the progress one in this particular case we're gonna make gray but we're gonna change our red we're gonna change that in our code you don't see the red one yet because we haven't given percentage percentage or value is at zero now I'm gonna give it 25 although again we're gonna change that in code you can see it filling from the left here that's not what we want again with that selected the texture progress we're gonna go up here to fill mode and we're gonna say clockwise like that it's also larger than our projects so what I'm going to do and I'm gonna go down here to wrecked and I'm gonna change the scale I think I did 0.4 by 0.4 so a little less than half its size again that depends on how big you make your sprite and there we go next I'm gonna add in a label so I'm gonna go chart add child and I'm gonna say label and I'm gonna put 25% in there just so you can have some text in there it's rather small now so with that still selected we're gonna go down to custom font we're gonna click here what's this empty and choose dynamic font click it again and that gives us this drop down we're gonna go font empty we're gonna load in the font whatever font you want but I again providing one with my project there it is we're gonna change the size so under settings we'll make this 64 you make it whatever size you would like I'm also gonna go here I'm gonna say full wreck so it's full like that and I'm going to come back up here and for a line I'm gonna say center and via line for vertical we're gonna go center so now it's in the center of our project I'm gonna come down here again and you can leave it like that but I also like to put a border around my words so I'm gonna choose black for the outline and then go one or two pixels whatever you think looks best I'm gonna click click ctrl s to save this I'll just save it as chart scene and I'll hit f5 and it will ask me to pick my default scene which will be this one and there we go that's what we have so far let me go ahead and I'm going to grab our texture process here oops let's go ahead I move that by accident control Z to undo I'm going to lock that so with the label selected I'm gonna choose this little lock tool and so now I can't accidentally oh I you know I locked the right thing I was moving the chart there I'm gonna move my circle here I'm just going to eyeball it for right now to fit around my wording let's hit f5 and see it's off-center and that's because of where its anchor is what I want to do is I want to move its anchor to the center here and there we go now hit f5 and it's right there perfect that's just what we want now we're ready to start coding I'm gonna right click on chart here and I say attach script and again I'm gonna call it chart.gd for Godot script and to make things simple I am going to copy and paste some code into here but I'll explain everything as we go I'm gonna erase everything except for that extends control and we're gonna create a couple of variables here click equal to false that's going to verify when I click that's gonna go true when I release the mouse or touchscreen it's gonna go false start it's gonna be the start position when you click so it's gonna get the position of our click and put it in start and then we'll be able to calculate how much we move based on that and the value I have it says a float here to ping on your project you may want to float we're gonna change this to an integer just by deleting that dot zero but that's gonna be the value that's returned as we move our finger up and down the screen next we're gonna do some on raise what is on ready so we're gonna be getting both our label and our circle here and we're gonna name them label and circle so they're easier to call so we're gonna get those nodes and to get them we have to wait for everything to load so I'm gonna say on ready but there's still global variables within this object so we can call them anywhere inside this script next we're gonna have a ready function it's gonna run once once everything is ready and we're gonna say label we're gonna say take the value which is currently an integer change it to a string and put the percent sign on the end in this particular case we're going percent in future tutorials will be using other things such as degrees Fahrenheit because we're gonna do something with a temperature sensor at some point we also have a script for updating the circle so when the script loads it's going to get the current value it's going to update our label and that's also gonna update the circle so for updating the circle we have a function here if we're just gonna give the value we don't need a whole function but we're gonna be changing the color too so real quick we're gonna give it this function these but this this line right here is just saying okay take our circle our chart so our chart here right and we're gonna change the value right there right and then we're also going to calculate based on that value what color it is I'll talk more about this once we have it up and running but right now I should be able to hit f5 and everything still looks the same except for now we have a green color and again I'll explain that more once we get it working so next we also want to be able to get the value so it's gonna update the value come down here or say okay get value we're gonna pass it a position we're gonna get our value we're gonna get the start position which is currently zero and we're gonna subtract that position which is going to be on the y-axis so up and down in our case and get a number from that and that number is kind of large so based on the screen resolution we do that we move our finger a little bit it's gonna jump all the way to a hundred percent pretty quick so to make it move a little bit slower I'm multiplying it by point two or basically gain 20% that number you can tweak this number right here if you want to move slower you can do point one or point zero five I find two to be pretty good for most screen sizes now we're also saying if that value is ever over a hundred set it to a hundred if it's ever under zero set it to zero that way we never go beyond a hundred or below zero in our particular case you may want to in your case again if you're working with temperatures you might want to go below zero once we do all that now we're going to take our start position and reset it to our current position and then we're going to take that value we're going to turn it into an integer which we have it as an integer here but if we had it as a float and we want to convert to an integer that's what that's doing right here if you want to be a float meaning a decimal number you wouldn't wrap it in this and we're also going to round the value we do this because if it's smaller than one you're going to always get zero so we want to round if it's more than at least a half of a number then we're going to return that value which we don't actually use in the script but as useful in future endeavors we are almost done all we have to do is get our user input so I'm going to copy that I'm going to paste I usually like to have that up pretty close to the top so this is saying anytime there's any type of input get that event okay we're going to check if that event is a mouse button press also including touch screens so if your finger is down on the screen or your mouse is clicked what next or actually I'm sorry if it's a button whether it's your your finger touching the screen or letting go on the screen or clicking a button or letting go of a button what are we going to do what we're going to check is it being pressed or is it being released so we're saying is it pressed or the exclamation mark here means not pressed okay when we press we're going to take our start number and set it equal to the position of your mouse cursor on the y-axis which is up and down and we're also going to set click true if you ever let go we're going to set click set to false so that's just detecting are we pressing or are we letting go if we are pressing then reset our start value okay now we're going to say okay if that event is now moving if you're moving the mouse cursor or moving your finger on a touch screen and the mouse is being clicked so we need that if we didn't have that anytime we move our mouse on the screen like I'm doing right now even if I'm not clicking if it's our change in the value we only want to do when we're clicking so that's what we're doing right there okay so we're checking that and they're gonna say okay get the value that's our function down here again we're passing it a position but not an xy coordinate just the y okay we're gonna take that and then we're gonna say update our label so our get value here that's going to update our global variable of value and so we're going to update our label and then we're gonna update our circle so again our circle here is going to get the global variable value value and set the value of our circle to that so I'll explain the color stuff in a second but let's go ahead and hit f5 to run our code and here I can click and I can move up and it's not based on where click like it's not that I click up here and the number jumps higher click down here jumps low it's calculating the difference from where I started to where I ended and it's looping through that every time we move the mouse now again we're going from green to red which is nice little transition again you can go other ways because maybe you want when it gets low it's your turn red if it's getting high you might want to turn red whichever is like the oh no something bad's about to happen so let's go ahead and quickly look at that I'm gonna explain this as best I can without getting too complicated we're using a range lurp so what is a lurp a lurp is similar to a tween if you tween basically calculates you give it two values and it transitions from one to another it's kind of what this is doing a lurp does that and range lurp is converting a certain set of numbers to another set of numbers so where we want to work with when you're working with color we have RGB so here we have ignore these two lines for a moment we're gonna say color we're gonna tint our process bar or progress bar and we're gonna give it a value of RGB red green and blue so if I hit set green and blue to zero and the first one to one because we're going from zero to one in this I'm gonna hit f5 you see our progress bar is red no matter what size it is if I go back in there and I change red to zero and green to one now our bar will be green no matter what we want if I was to set green to point five it's going to be green but a darker shade of green and if I do one and one we're gonna get red and green together and red and green together equals yellow okay this is color 101 and if we make them all equal to one we're gonna get white because white is the presence of all colors and if we set them all to zero we're gonna get the absence of color which is darkness right because you don't have any light we're gonna get black so we can set the colors that way or over in the thing here but if we were to go back and change these I'm undoing a lot where I could just type it there we go I'm saying okay set red and green blue is always going to be zero in this case but you if you want to use blue you can add in a value for that so we're gonna be red or green where the values for red and green so we're gonna take our value so which is going to be anyone from zero to 100 and that's what we're saying here it's a value and it's gonna be from zero to 100 we'll convert that from either one to zero or zero to one we go one to zero because we want when our value is zero we want green to be at its fullest when it's at a hundred we want it to be at its least for red we're gonna do the other if our value is zero it's gonna be zero if it's a hundred it's gonna be one if it's 50 it's gonna be point one so it's gonna do that and then it's going to mix those colors together right here so that is it we are done with our project except for one or two tweaks so we're done with the project we want to now make sure it displays on all screens properly so let's go up to project settings we'll go down to display somewhere in here display window and down here in orientation do we want to always be landscape do we always want to be portrait reverse but we can also use sensors so if you're using this on a phone if you turn the phone do you want to rotate so you do what best for your project I'm gonna say portrait for me so now on my phone or tablet this program will always work in portrait mode if you turn the screen sideways it's not going to rotate maybe what you want for your project may not it's up to your project desktop computer it's going to look the same regardless so there we go and again we do this and now you know again you can tweet this to however you want it to look one other thing we might want to do is when I hit f5 here in the game starts or the program starts you'll see it gives the Godot game engine logo right there if you don't want that you can make your own we're going to go under projects settings and then it's under applications boot splash and we can choose a program here or I'm sorry an image here you have a few options here and I'm just going to choose my icon which is kind of low resolution for this and a little confusing that loads up with a screen says 25% but just to show you you put whatever image you want there I believe it has to be a PNG hit f5 now it shows that when it's loading but you change that to whatever icon you want I almost forgot to show you just let's go up to project export we'll add in Android we will make sure we change our unique name to whatever your unique name is my website is filmsbychris.com so I'm going to do com.filmsbychris because that seems to be the standard for doing these things even though it just seems very weird to me and then that's all we have to do if you have a global key set up if not you're gonna have to set the debug key here which there's one in my project on GitLab if you want to grab that but we should be good now that we've created that little export we should be able to go up to our Android icon icon I've got that Amazon fire tablet plugged into the computer I have ADB and everything set up that I showed up showed how to do in previous videos and it is now packaging it for as an APK it's pushing it to the device and here we go we've got our little progress circle chart bar thing again we're going to use this in future videos I've got temperature sensors around the house and we're going to grab the temperature from them and give you a little readout we'll also look at you know other numbers that I collect on data around my house and display it in an app that runs on your desktop laptop phone tablet web browser whatever so thanks for watching please visit films by chris.com that's Chris the K there's a website if you like this view be sure to like share subscribe all that good stuff as always I hope that you have a great day