How to Give Shapes Background Images with Python and Kivy!

welcome back to the channel in today's video I'm going to show you how to use images as backgrounds for different shapes in ki we're going to make them dynamically resizable and we're also going to take a look at how to change the masking of the color overlaid on top of it all within kivy in all in under 10 minutes also a quick note about today's video because I am in the middle of a move so I am recording this from an empty apartment I have still been working on big projects for you guys in the next couple weeks but recording them is always a little bit of a challenge so today I am just old school going through the laptop webcam I do still have my microphone but I'm in a very echoey empty apartment so hopefully the audio quality is still up there this is going to be a quick kiy crash course kind of like the last two videos on the channel but next week we should have a much bigger uh Ki project to do together a full game to do together hopefully as long as everything this week goes according to plan so without any further Ado let's Dive Right into how to make images that the backgrounds of shapes in [Music] ki okay so for this tutorial we are going to be starting from the project that we built in the previous tutorial on the channel which if you need a quick recap was just a rectangle in the lower left corner of the screen which when we clicked it it changed colors um so that is what we're going to start from for this tutorial if you need uh refresher on how we built this then be sure to check out the previous video otherwise I'll quickly describe what's going on in here right now so that we can get started with today's video so I just import the random module so that I'm able to randomly generate colors uh for this build and then from ki. apppp graphics and uix widget these are just standard things you need to have that rectangle to have that app run and then I just make a main widget app uh and then a my. KV file where I call Main widget so this this is the primary canvas I draw things on and then in the init function I just super the main widget which gives it all the properties Ki builds in and then I initialize my shape which in this case is just a rectangle but we are going to add a circle for this uh tutorial as well and then when the size changes I make sure to update my rectangle size and then when the clicking is uh uh done I change I clear out the canvas I change the color of the rectangle and I reinitialize the shapes and then the last thing is I just make sure there's a Ki app uh a class for my app and then I make sure if it's the main screen then we run the app that is all the setup you need to know if you don't want to go back and watch the previous tutorial or follow along with all the tutorials you can just copy this code down or check out the GitHub linked below because the uh ontouch the touch events um code is all linked there but now for today's video I want to also add in a circle to the screen just so I can kind of talk to um how putting an image on the background works for um both rectangles and circles and you can see two different ways and so that means I just want to include the circle and I need to import the ellipse from Ki Graphics so those are the only two things we have to do now let's just come down into our init shapes function where we create the rectangle and let's do something very similar for the circle okay and so I'm actually going to copy this entire row and I'm just going to say myself do Circle which is my self-defined variable for circle is going to be equal to instead of rectangle ellipse and that's all I'm going to do to just create the circle now let's come down into on size and let's go ahead and do something similar again and again it's probably easiest to just copy these wreck. Paws and size uh again and change them for Circle and the reason I think that's easiest is because sort of unlike P game uh Circle and rectangle are defined really or I should should say ellipse and rectangle are defined really similarly uh for KI so they basically you define the rectangle they're going to occupy and I'll actually say for the position of my circle I'll have it start at the halfway point um and then I'll just make it uh rather than half the screen I'll just make it a third of the screen so it's a little different um and then I think that's all I need to do to just get the circle kind of generated initially so if I run this yeah you'll see I get a big white circle or ellipse um right here as well so now let's take a look at the substance of this video which is what if instead of just a color a plain color we want a background image of our choosing to be on one of these so let's take a look at how to do that now this should be obvious but you you're going to need an image for this um and save it it's easiest to save that image that you want in the same folder as your U main.py file your your Ki file the same folder for everything I'm going to use the thumbnail of this YouTube video as my my uh image and I just have it called myor image.png and the good news is it's only one line of code per shape to make the background an image okay and so to do this all we have to do is say self. rec. source is equal to and then we just call the name of our image which for me is my image.png and let's just boot that up and take a look at what we get okay so you can see it's a little squished and the dimensions are kind of wrong but you get the image over top of the rectangle now let's take a look at what happens if we do that same thing for the circle okay and what I want to show you which is pretty important is because ellipses are still treated as rectangles the image is also treated as a rectangle so it kind of automatically crops the corners so this is important to note if you have an image that is nonrectangular it's still going to treat your image as if it's a rectangle so whatever rectangle has to get drawn to fill your shape is what's going to be used okay and then just one important note because we do want this to still update when we change sizes we should come down here to after we've cleared out the canvas and copy those three lines of code from up in the in it shapes and say that we want the circle to always have that new background color but then also to drop in the images and what's really cool that I think we should talk about now is that that color we're changing the rectangle to when we click does actually affect the image as well so right now both those images had white backgrounds which is why it looks normal check out what happens if I click the rectangle okay you can see the color is still changing for the rectangle and that's actually impacting the button um or the the the rectangle and so this is important know if you're making things like games or something like that you could use the same image like let's say you have a button you like the look of you could use the same image in four places and change the background color of that shape and it'll actually look like you have that thing four times so you can do some of that in kiy rather than making four iterations of your image but it really is whatever you prefer there and then obviously in keeping with kiy because of the way we wrote this intelligently it's dynamically resizable and so this is just a crash course into using images as backgrounds on shapes with python and Ki I hope you're enjoying the Ki tutorials uh like I said in the intro this will probably be the last short Ki tutorial for a couple weeks because I'm hoping to do my bigger uh tutorial for the game Mastermind that I have put together for you guys in Python using Ki and then I think we're going to dive back and do maybe like one more big pie game game and then some more Ki tutorials so that's probably what's coming up in the coming weeks make sure you're subscribed to catch all of those don't forget to leave a like on this video subscribe to the channel for a ton more great content let me know in the comments below if you have any questions about what you saw here or if you want to suggest what we should do next time thank you so much for watching as always thank you for the support thank you for bearing with me as I go through this move and an empty apartment and a new house and a relocation thank you all so much for that until next time bye