Build Tic Tac Toe in Python! Use Tkinter to create a GUI! Grids, Widgets, Labels, Buttons and More!!

what's going on you guys welcome back to the channel uh today we have kind of a fun one for you getting started with graphical user interfaces or guise in python using the uh tkinter or kinter import uh module that that can build graphical user interfaces it comes standard with python in installs and we're gonna do kind of a fun gui by building out a playable tic-tac-toe game as our first um as our first app so it's kind of a fun way to get introduced to graphical user interfaces before i get into it if you do find this or anything else on the channel helpful i really appreciate a like on this video subscribe to the channel helps me out a ton as i'm getting started here and if you'd like to see anything in particular on this channel or have any questions feel free to let me know about in the comments below and without any further ado let's get right into it so the first thing you're going to do anytime you're using kinter as your graphical user interface module is you're going to import it and so i like to just do from kinter import all which is the star and then the second thing i always do when you build a new app is just root equals tk open parentheses you're just defining uh what the root is so that you can draw all of your widgets onto the root of the screen so um that's just the the first thing the first two things you have to do we haven't created anything that's going to get drawn onto the screen yet and those are called widgets so things like labels buttons text inputs sliders progress bars anything like that they're all called widgets so what we're going to do is we are going to go ahead and define one just to get something drawing on the screen so let's go ahead and just call it main label and the way you do it you you pick a variable name for your label something that's easy to remember and just set it equal to and then capital l for label say where you're drawing it so we're drawing it on to the root which is the purpose of defining it before and then say what we want the text to be equal to and so since we want to build a tic-tac-toe game we'll say welcome to tic tac toe okay and uh so there's two things you have to do with every widget you have to define it but then you also have to draw onto screen and there are two ways to do this i'll go ahead and show them both here the first would be what's called pac which is it just picks the next location that kinter calculates is the logical location for it to go and it's not very graceful you're probably not going to use this a whole lot but i'll just do this to show how to get something on the screen as soon as possible and then to actually get your app to run you always have to do root dot main loop um and just like that and you've created a game loop of not a game loop an app loop of the thing actually running and drawing on screen so that should be all we need to do to get yeah so we get this little obviously it doesn't look like much we get this little app and you may notice because we didn't define location or anything it it resizes and slides around which you might like you might not but what we'll do next is we'll actually show how to improve the location of your widget but you can see right there we made a label and got it onto a usable app in you know three minutes so that's pretty cool that's a cool start to the um building of an app but let's go ahead and make a second label and we'll call this um player select label uh i i use kind of long variable names but it's partly so that it's clear when looking at the code what each thing does and so on this one will uh tell the player select a select a character to play as okay and what i'm going to do for this one instead of pack is i'm going to do player select label and i am going to use the other way of drawing things on those somewhat more precise way of drawing it which is dot grid and you actually define a row and a column location for your grid elements when you do this so uh let's go ahead and just do row one so it should be down one level and then column zero and let's go ahead and run this take a look at what we get it already has right uh you can't use pack and grid um so as soon as you use grid you um you're saying okay we're going to use a grid system whereas pack is saying you're going to let us define it so we also need to have our label which is why i put this in row one so that our main label could be in row zero so now when we run it we should have our welcome to tic-tac-toe yep above select a character to play as but now you'll see when i resize it they don't move because we've built out a grid system and these are going to be in the top left and then you know second row still all the way to the left because we built a grid and if you think about it the grid is stationary even if you change the size of the screen so that's pretty cool but now you're saying well we told them to select a character to play as and we haven't actually done anything to to handle character selection yet so let's get on to the next type of widget i want to cover which is buttons and we're going to have two right and tic-tac-toe you can be x's or o's so we're going to have what i'll call x button and the format is just like with labels a capital b to say it's going to be a kinter button and then we put on the root and we'll just make the text x right because you're this is going to be showing up below the select a character to play as and all it has to do is display an x and then our o button same deal button with capital b draw it onto the root and then this actually it needs to be text equals i just left it as an x but okay so then down here text is going to be o and so those are our two buttons and then we're going to go ahead and draw them on to the screen so we'll do x oop x button dot grid and let's go ahead i think i copied too much there and we want this to be in row 2 column 0 and then let's put the o button let's put that in row 2 column 1. so this is the first thing we're seeing where we go into a second column right but now let's go ahead and run it and check it out here so yeah you can see it's trying to um it's trying to put the button at the first available space after this first column um we'll take a look in future videos about actually resizing it to make it pretty but you can see we have two buttons here um we have an x and an o and nothing happens yet because we haven't built out what actually happens when you push the buttons let's take a look at a couple things you can do with buttons since we're talking about them right now you can change the state to disabled when you want someone to not be able to click on it so let's say the game has already started and you don't want them to be able to change their character mid game that would be a time to either remove the button from the screen or just disable it so like if you're building one screen out and they're going to stay on that screen the whole time they play the game you might need to disable and then enable button states on a screen so you can do state disabled and then the next thing we're going to cover is the next thing we actually want to do with the app which is um what actually happens when you click the button right so that's called command and um command is you define the function that runs when you click the button so we're going to come up here and we're actually going to write a couple functions and i'll call this x x select and then we'll do another function that i'll call oh select okay and so when the x button is clicked you say command equals and then x select okay and then for o we're going to say command equals oh select and that is all we have to do to get them to run these functions now we haven't uh told the functions to do anything yet so let's go ahead and say what we actually want to have happen i will go ahead and make a variable called player character and when the game starts we just want to be empty and then i'm going to call that inside of these functions so i'm going to call global player character for both of these and then what i'm going to do in here is i'm going to say player character equals and inside of x select right it's going to be x and then inside of oh select it's going to be an o and i am assuming you know a little bit of fundamental python and how just functions and object-oriented programming work there's a tutorial series on this youtube channel plus lots of other content out there if you're a little bit confused about just how the code works and not the kinder specific things you might want to check that series out first but okay so we've said that the character is going to be x if they select this and o if they select this and let's go ahead and actually draw another label on the screen that's going to tell them what they've selected who they're playing as so we'll say player label equals a new label we'll draw it on the root and we are going to say that the text is equal to you have selected and then we will add the player character okay um and one thing i haven't talked about because we've been doing the defining of the widget and then the drawing of it separately so far you can actually come to the very end of your widget definition where you do the label and tack the grid right onto the end of it i don't usually like doing it this way because especially as you get more complex widgets they can start to like run over to um oh we want that to be row three column zero uh they can they can start to run over into a second line and it's just a little cleaner to separate them out but i did want to show that this works so i'm going to leave that one there for that and then so this is handling defining it and drawing it onto the screen in the same row which is pretty nice um and let's go ahead and just copy this exact same thing and let's that should work it should uh place it in the same spot regardless of what button you press um so let me go ahead and run it and let's see okay welcome to tic-tac-toe select a character to play as let's play as x you have selected x let's select o you have selected o okay pretty cool so let's do one last thing in this video and then i will save the like operational playable game for a future video when x or o is selected let's also draw a start button onto the screen okay because now that they've selected a character we want them to be able to play the game so let's go ahead and say start button that's going to be a button it's still going to be on the root and the text is going to say start oh we'll just say start um and let's put that just below the label so that's going to be now we're into row four and column zero okay and let's put that in both of them because regardless of which one they do we want them to be able to start afterwards and you may have noticed i didn't so let's go x okay there it is oh there it is you may have noticed i didn't do anything yet for what that start button is going to do because once you hit the start button it's going to be time to play the game we need to disable these buttons we need to go into a state where the grid shows up and you actually can click on you actually can click on any of the buttons and uh play the game and then um that's that's gonna require a new function which we'll call the actual like game mode function um so this is an intro to building a gui with um with kinter and python it's uh step one be sure for a lookout um for follow-up videos to this one where we really flesh out the app more and if i see comments or questions i'll make sure to cover those in the follow-up uh videos in this series but for now i hope you found this useful if you did again i really appreciate a liking to subscribe to the channel it helps me out a ton as i'm getting going here um and as always good luck with your code and thanks for watching thanks bye