title
Game Development in Python 3 With PyGame - 2 - Display Images

description
In this PyGame tutorial, we cover how to load images and display them to the screen. You can also draw objects to the game's screen with some built in functions with PyGame, but sometimes you will want a fancy image. See http://pythonprogramming.net for sample code PyGame with Python 3 Playlist: http://www.youtube.com/playlist?list=PLQVvvaa0QuDdLkP8MrOXLe_rKuf6r80KO http://seaofbtc.com http://sentdex.com http://hkinsley.com https://twitter.com/sentdex Bitcoin donations: 1GV7srgR4NJx4vrk7avCmmVQQrqmv87ty6

detail
{'title': 'Game Development in Python 3 With PyGame - 2 - Display Images', 'heatmap': [{'end': 575.654, 'start': 570.393, 'weight': 0.852}, {'end': 725.47, 'start': 613.626, 'weight': 0.872}, {'end': 990.535, 'start': 976.914, 'weight': 0.802}, {'end': 1068.491, 'start': 1034.953, 'weight': 0.804}, {'end': 1127.001, 'start': 1081.643, 'weight': 0.82}], 'summary': 'Tutorial series on pygame development covers aspects such as initializing pygame, defining colors using rgb method, creating transparent backgrounds using gimp, loading and displaying car images in pygame, and implementing game movement through frame updates and flipbook visualization.', 'chapters': [{'end': 139.585, 'segs': [{'end': 32.787, 'src': 'embed', 'start': 5.131, 'weight': 1, 'content': [{'end': 9.794, 'text': 'Hello everybody, and welcome to the second part of our Pygame with Python 3 game development tutorial video.', 'start': 5.131, 'duration': 4.663}, {'end': 11.595, 'text': 'In the last video.', 'start': 10.374, 'duration': 1.221}, {'end': 21.62, 'text': "what we covered was just creating a very basic window, understanding the bare minimum of Pygame, how it's initialized, how it's ended,", 'start': 11.595, 'duration': 10.025}, {'end': 23.902, 'text': 'as well as events and stuff like that.', 'start': 21.62, 'duration': 2.282}, {'end': 28.304, 'text': "So the first thing I'd like us to do is we'll just get rid of this print event statement.", 'start': 23.982, 'duration': 4.322}, {'end': 30.065, 'text': "We don't need that anymore.", 'start': 29.045, 'duration': 1.02}, {'end': 32.787, 'text': 'That was just going to clog up our console.', 'start': 30.085, 'duration': 2.702}], 'summary': 'Pygame tutorial covers initializing, events, and window creation.', 'duration': 27.656, 'max_score': 5.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs5131.jpg'}, {'end': 77.407, 'src': 'embed', 'start': 52.651, 'weight': 0, 'content': [{'end': 59.732, 'text': 'One of the reasons is if we want to resize the game or offer an option later on to say, hey, we want a different resolution of the game,', 'start': 52.651, 'duration': 7.081}, {'end': 60.392, 'text': 'then we can do that.', 'start': 59.732, 'duration': 0.66}, {'end': 73.462, 'text': "Also, the more major reason is a lot of times you're gonna reference the game's size, either width or height, to create events or to display things.", 'start': 61.348, 'duration': 12.114}, {'end': 77.407, 'text': 'So to display text, for example, you wanna say where you want that text to be.', 'start': 73.502, 'duration': 3.905}], 'summary': 'Resizing the game allows for different resolutions and better display options.', 'duration': 24.756, 'max_score': 52.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs52651.jpg'}], 'start': 5.131, 'title': 'Pygame development tutorial part 2', 'summary': 'Covers initializing pygame, setting display dimensions as variables, and emphasizes avoiding hardcoding to promote flexibility and modifiability in game development.', 'chapters': [{'end': 139.585, 'start': 5.131, 'title': 'Pygame development tutorial part 2', 'summary': 'Covers initializing pygame, setting display dimensions as variables, and explains the importance of avoiding hardcoding, promoting flexibility and modifiability in game development.', 'duration': 134.454, 'highlights': ['The tutorial focuses on initializing Pygame, setting display dimensions as variables, and explaining the importance of avoiding hardcoding for flexibility and modifiability in game development.', 'The tutorial emphasizes the significance of setting display dimensions as variables for potential resizing and referencing in game development, promoting modifiability and flexibility.', 'The chapter highlights the importance of avoiding hardcoding display dimensions in game development, promoting flexibility and modifiability for potential resizing and referencing in the game.']}], 'duration': 134.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs5131.jpg', 'highlights': ['The tutorial emphasizes the significance of setting display dimensions as variables for potential resizing and referencing in game development, promoting modifiability and flexibility.', 'The tutorial focuses on initializing Pygame, setting display dimensions as variables, and explaining the importance of avoiding hardcoding for flexibility and modifiability in game development.', 'The chapter highlights the importance of avoiding hardcoding display dimensions in game development, promoting flexibility and modifiability for potential resizing and referencing in the game.']}, {'end': 501.295, 'segs': [{'end': 166.156, 'src': 'embed', 'start': 139.585, 'weight': 0, 'content': [{'end': 144.128, 'text': "what you're going to see in most people's code is color definitions right at the top.", 'start': 139.585, 'duration': 4.543}, {'end': 153.132, 'text': 'i kind of wish pygame had some color definitions by default, like black, like red white or red white, Red, orange, yellow, green, blue, purple,', 'start': 144.128, 'duration': 9.004}, {'end': 155.393, 'text': "black and white would make a whole lot of sense, but they don't.", 'start': 153.132, 'duration': 2.261}, {'end': 157.373, 'text': 'And I guess that was okay.', 'start': 156.133, 'duration': 1.24}, {'end': 161.855, 'text': "But generally, you're going to see everybody is defining at least black and white right out of the gate.", 'start': 157.433, 'duration': 4.422}, {'end': 166.156, 'text': "And the way that you're going to define colors is with the RGB.", 'start': 163.456, 'duration': 2.7}], 'summary': 'Most code includes color definitions at the top, with common ones being black and white. pygame lacks default color definitions.', 'duration': 26.571, 'max_score': 139.585, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs139585.jpg'}, {'end': 208.111, 'src': 'embed', 'start': 177.549, 'weight': 2, 'content': [{'end': 188.051, 'text': "now, just in case you guys aren't familiar, first of all, colors in computing are measured with RGB, and the idea here and the why?", 'start': 177.549, 'duration': 10.502}, {'end': 191.352, 'text': 'because RGB stands for red, green, blue.', 'start': 188.051, 'duration': 3.301}, {'end': 197.947, 'text': "so when you define a color like black, it's going to be zero, zero, zero, because it's going to be.", 'start': 191.352, 'duration': 6.595}, {'end': 208.111, 'text': "there's literally like no black or no color in black, which is, uh, quite opposite of what you know of black.", 'start': 197.947, 'duration': 10.164}], 'summary': 'Colors in computing are measured with rgb, where black is defined as 0, 0, 0.', 'duration': 30.562, 'max_score': 177.549, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs177549.jpg'}, {'end': 350.106, 'src': 'embed', 'start': 316.737, 'weight': 3, 'content': [{'end': 323.16, 'text': "Nowadays, it's all like generated digitally pretty much, but that's why we use RGB with computers.", 'start': 316.737, 'duration': 6.423}, {'end': 328.723, 'text': "So that means what's white going to be? Well, white is going to be the maximum of all colors.", 'start': 323.92, 'duration': 4.803}, {'end': 332.885, 'text': 'Each of these colors that we can put in here is anything.', 'start': 329.323, 'duration': 3.562}, {'end': 335.787, 'text': 'You have 256 choices for each color.', 'start': 333.125, 'duration': 2.662}, {'end': 339.009, 'text': 'So the combinations are 256 by 256 by 256, right? So anyway, white is going to be 255, 255, 255.', 'start': 336.227, 'duration': 2.782}, {'end': 350.106, 'text': 'And why is that? Because one of your options is, of course, 0.', 'start': 339.009, 'duration': 11.097}], 'summary': 'Rgb with computers uses 256 choices for each color, resulting in 256x256x256 combinations for white at 255, 255, 255.', 'duration': 33.369, 'max_score': 316.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs316737.jpg'}], 'start': 139.585, 'title': 'Defining colors in pygame', 'summary': 'Discusses the manual definition of colors using rgb method in pygame, highlighting the absence of default color definitions and the common practice of defining black and white at the beginning of the code. it also explains the use of rgb color model in computers, the concept of white color being 255, 255, 255 in rgb, and the process of creating and using images in pygame, with a focus on drawing and manipulating objects.', 'chapters': [{'end': 235.648, 'start': 139.585, 'title': 'Defining colors in pygame', 'summary': 'Discusses the manual definition of colors using rgb method in pygame, highlighting the absence of default color definitions and the common practice of defining black and white at the beginning of the code.', 'duration': 96.063, 'highlights': ['Colors in Pygame are defined using the RGB method, with black being represented as (0, 0, 0) and white as (255, 255, 255).', "It is a common practice in most people's code to define at least black and white color values at the start.", 'Pygame does not have default color definitions, such as black, red, orange, yellow, green, blue, and purple.']}, {'end': 501.295, 'start': 235.708, 'title': 'Understanding rgb color model', 'summary': 'Explains the use of rgb color model in computers, the concept of white color being 255, 255, 255 in rgb, and the process of creating and using images in pygame, with a focus on drawing and manipulating objects.', 'duration': 265.587, 'highlights': ['Explanation of RGB color model and its use in computers The chapter explains the use of RGB color model in computers, providing a comparison with the traditional color mixing process, and highlights the concept of using light to display colors in computing.', 'Definition of white color in RGB as 255, 255, 255 It outlines that white is represented as 255, 255, 255 in the RGB color model, and mentions the total combination possibilities of RGB colors being 256 by 256 by 256.', 'Process of creating and using images in Pygame The chapter focuses on the process of creating and using images in Pygame, specifically drawing and manipulating objects, and encourages the audience to draw their own images while offering guidance on creating transparent backgrounds for the images.']}], 'duration': 361.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs139585.jpg', 'highlights': ['Colors in Pygame are defined using the RGB method, with black being represented as (0, 0, 0) and white as (255, 255, 255).', 'Pygame does not have default color definitions, such as black, red, orange, yellow, green, blue, and purple.', 'Explanation of RGB color model and its use in computers The chapter explains the use of RGB color model in computers, providing a comparison with the traditional color mixing process, and highlights the concept of using light to display colors in computing.', 'Definition of white color in RGB as 255, 255, 255 It outlines that white is represented as 255, 255, 255 in the RGB color model, and mentions the total combination possibilities of RGB colors being 256 by 256 by 256.']}, {'end': 681.453, 'segs': [{'end': 575.654, 'src': 'heatmap', 'start': 501.335, 'weight': 0, 'content': [{'end': 505.099, 'text': "If you're making games and you want to load images, you should know how to make transparent backgrounds.", 'start': 501.335, 'duration': 3.764}, {'end': 508.182, 'text': "If you're on like Mac or something like that, it's actually really easy to do.", 'start': 505.479, 'duration': 2.703}, {'end': 510.004, 'text': "But if you're on Windows, it's not so much.", 'start': 508.202, 'duration': 1.802}, {'end': 512.846, 'text': 'So for Windows, I recommend a program called GIMP.', 'start': 510.104, 'duration': 2.742}, {'end': 514.368, 'text': "You've probably heard of it.", 'start': 513.486, 'duration': 0.882}, {'end': 515.889, 'text': "I don't like it very much.", 'start': 514.568, 'duration': 1.321}, {'end': 518.991, 'text': "But to make a transparent background on GIMP, it's super easy.", 'start': 516.049, 'duration': 2.942}, {'end': 527.34, 'text': "So anyway, I'll show me drawing the car and then I'll come back and show you guys how you can edit an image real quick for no background on GIMP.", 'start': 519.592, 'duration': 7.748}, {'end': 528.542, 'text': "So let's do that.", 'start': 527.401, 'duration': 1.141}, {'end': 575.654, 'text': 'Okay, once you have your image, I want to show you guys how to make a transparent background with GIMP.', 'start': 570.393, 'duration': 5.261}], 'summary': 'Transcript discusses making transparent backgrounds for images using gimp on windows and mac.', 'duration': 74.319, 'max_score': 501.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs501335.jpg'}], 'start': 501.335, 'title': 'Gimp for transparent backgrounds', 'summary': 'Covers creating transparent backgrounds using gimp for game development, highlighting the ease of the process on windows and mac, with a recommendation for gimp on windows. it also includes a tutorial on converting backgrounds to transparent using a race car image as an example, catering to beginners.', 'chapters': [{'end': 575.654, 'start': 501.335, 'title': 'Creating transparent background with gimp', 'summary': 'Discusses creating a transparent background using gimp for game development, emphasizing the ease of the process on windows and mac, with a recommendation for gimp on windows.', 'duration': 74.319, 'highlights': ['Using GIMP to create a transparent background is recommended for Windows users due to its ease of use.', 'Creating a transparent background for game images is essential for game development.', 'Mac users have an easier process for creating transparent backgrounds compared to Windows users.']}, {'end': 681.453, 'start': 576.354, 'title': 'Gimp image editing tutorial', 'summary': 'Demonstrates how to use gimp to convert a background to a transparent one, using a race car image as an example, making it easy and accessible for beginners.', 'duration': 105.099, 'highlights': ['The process of converting a background to a transparent one using GIMP is demonstrated, providing a practical example with a race car image.', 'The speaker expresses dislike for GIMP due to the presence of multiple windows, which can be a barrier for beginners.', 'GIMP is used to convert the white background of an image to a transparent one, showcasing the ease and accessibility of the process for beginners.']}], 'duration': 180.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs501335.jpg', 'highlights': ['Creating a transparent background for game images is essential for game development.', 'Using GIMP to create a transparent background is recommended for Windows users due to its ease of use.', 'Mac users have an easier process for creating transparent backgrounds compared to Windows users.', 'The process of converting a background to a transparent one using GIMP is demonstrated, providing a practical example with a race car image.', 'GIMP is used to convert the white background of an image to a transparent one, showcasing the ease and accessibility of the process for beginners.', 'Covers creating transparent backgrounds using GIMP for game development, highlighting the ease of the process on Windows and Mac, with a recommendation for GIMP on Windows.']}, {'end': 985.343, 'segs': [{'end': 729.935, 'src': 'embed', 'start': 682.369, 'weight': 2, 'content': [{'end': 690.274, 'text': "Now, once you have your car image, what you're gonna wanna do is somewhere around here, we'll make some space, scroll up a little bit.", 'start': 682.369, 'duration': 7.905}, {'end': 698.818, 'text': "And now we're just gonna say car img, and that's gonna equal pygame.image.load.", 'start': 691.114, 'duration': 7.704}, {'end': 704.922, 'text': "And then what do we wanna load? And this is for me, it's racecar.png.", 'start': 698.959, 'duration': 5.963}, {'end': 709.945, 'text': "Make sure that the image is in the same directory as your script, otherwise it's not gonna work.", 'start': 705.362, 'duration': 4.583}, {'end': 712.327, 'text': 'um, but you could put the full path.', 'start': 710.385, 'duration': 1.942}, {'end': 717.071, 'text': "you know, c colon slash, blah, blah, blah, but if it's in the same directory, this should be fine.", 'start': 712.327, 'duration': 4.744}, {'end': 722.396, 'text': "um, unless you're on like linux or something sometimes that throws, you gets angry.", 'start': 717.071, 'duration': 5.325}, {'end': 725.47, 'text': 'but anyway, That is our image.', 'start': 722.396, 'duration': 3.074}, {'end': 727.733, 'text': 'So to load up an image, we just do that.', 'start': 725.57, 'duration': 2.163}, {'end': 729.935, 'text': 'But obviously, that image is not shown yet.', 'start': 727.853, 'duration': 2.082}], 'summary': "Loading car image using pygame.image.load, ensure it's in the same directory", 'duration': 47.566, 'max_score': 682.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs682369.jpg'}, {'end': 865.708, 'src': 'embed', 'start': 827.017, 'weight': 0, 'content': [{'end': 830.4, 'text': "So that's what our car function is gonna do for displaying the car.", 'start': 827.017, 'duration': 3.383}, {'end': 835.164, 'text': 'Now, again, I just wanna reiterate, X, Y has to be a tuple in its own little brackets.', 'start': 830.86, 'duration': 4.304}, {'end': 837.326, 'text': "And here's the reason, car image is a parameter.", 'start': 835.204, 'duration': 2.122}, {'end': 843.611, 'text': "So if we just did this, it would think X and Y were separate parameters when really it's all one parameter.", 'start': 837.386, 'duration': 6.225}, {'end': 845.672, 'text': "So we definitely wanna have those brackets there, don't forget.", 'start': 843.651, 'duration': 2.021}, {'end': 853.761, 'text': "Now, to start our car's location, We could just hard code it.", 'start': 846.853, 'duration': 6.908}, {'end': 857.023, 'text': 'We could say, well, we want it to be at the bottom in the middle.', 'start': 853.801, 'duration': 3.222}, {'end': 858.504, 'text': 'We could do that.', 'start': 857.923, 'duration': 0.581}, {'end': 863.566, 'text': "And now it'd also be a good idea to explain location of things with computers.", 'start': 859.184, 'duration': 4.382}, {'end': 865.708, 'text': 'Again, not the same as what you were taught in school.', 'start': 863.627, 'duration': 2.081}], 'summary': 'Function displays car at specified location using tuple parameter.', 'duration': 38.691, 'max_score': 827.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs827017.jpg'}, {'end': 917.756, 'src': 'embed', 'start': 886.828, 'weight': 5, 'content': [{'end': 887.748, 'text': "It depends which way you're moving.", 'start': 886.828, 'duration': 0.92}, {'end': 889.369, 'text': 'But y is going down, for example.', 'start': 887.768, 'duration': 1.601}, {'end': 894.246, 'text': 'So things are measured in general as you were taught.', 'start': 891.263, 'duration': 2.983}, {'end': 898.148, 'text': 'The bottom left is 0, 0.', 'start': 894.626, 'duration': 3.522}, {'end': 899.811, 'text': "Well, in computers, that's the opposite.", 'start': 898.149, 'duration': 1.662}, {'end': 903.074, 'text': 'So up here is where x and y begin.', 'start': 899.851, 'duration': 3.223}, {'end': 903.935, 'text': "It's like right here.", 'start': 903.174, 'duration': 0.761}, {'end': 908.039, 'text': 'So 0, 0 for computers is actually up in the upper up left.', 'start': 904.395, 'duration': 3.644}, {'end': 913.014, 'text': 'you add it to X, you move over to the right.', 'start': 909.153, 'duration': 3.861}, {'end': 914.195, 'text': "so that's, you know, the same.", 'start': 913.014, 'duration': 1.181}, {'end': 917.756, 'text': 'but as you add to Y, you actually move down.', 'start': 914.195, 'duration': 3.561}], 'summary': 'In computer coordinates, (0,0) is at the top left, with x increasing to the right and y increasing downward.', 'duration': 30.928, 'max_score': 886.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs886828.jpg'}], 'start': 682.369, 'title': 'Loading and displaying car images in pygame', 'summary': 'Covers loading a car image in pygame using pygame.image.load, emphasizing the importance of image location. it also discusses implementing a function to display the car on a game window, explaining coordinates, tuples, and positioning within the window.', 'chapters': [{'end': 729.935, 'start': 682.369, 'title': 'Loading car image in pygame', 'summary': 'Explains how to load a car image in pygame using pygame.image.load and mentions the importance of the image being in the same directory as the script.', 'duration': 47.566, 'highlights': ['Using pygame.image.load to load the car image, racecar.png, into the program.', 'Emphasizing the importance of the image being in the same directory as the script for it to work properly.', "Providing an alternative of using the full path for the image if it's not in the same directory."]}, {'end': 985.343, 'start': 730.075, 'title': 'Python game: car display function', 'summary': 'Covers the implementation of a simple function to display a car image on a game display, explaining the use of coordinates and tuples, and the difference between graph and computer coordinates, with considerations for positioning the car within the display window.', 'duration': 255.268, 'highlights': ['Explaining the implementation of a function to display a car image on a game display, utilizing coordinates and tuples for positioning, and contrasting graph and computer coordinates.', 'Emphasizing the difference between graph and computer coordinates, illustrating that in computers, the origin (0,0) is located in the upper left, with positive Y values moving downwards.', 'Illustrating the use of specific calculations to position the car within the display window, considering the difference in referencing the image by the top left corner in computer coordinates, and explaining the necessity to avoid positioning the car off the screen.']}], 'duration': 302.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs682369.jpg', 'highlights': ['Explaining the implementation of a function to display a car image on a game display, utilizing coordinates and tuples for positioning, and contrasting graph and computer coordinates.', 'Illustrating the use of specific calculations to position the car within the display window, considering the difference in referencing the image by the top left corner in computer coordinates, and explaining the necessity to avoid positioning the car off the screen.', 'Using pygame.image.load to load the car image, racecar.png, into the program.', 'Emphasizing the importance of the image being in the same directory as the script for it to work properly.', "Providing an alternative of using the full path for the image if it's not in the same directory.", 'Emphasizing the difference between graph and computer coordinates, illustrating that in computers, the origin (0,0) is located in the upper left, with positive Y values moving downwards.']}, {'end': 1219.601, 'segs': [{'end': 1041.238, 'src': 'embed', 'start': 1009.411, 'weight': 0, 'content': [{'end': 1014.675, 'text': "that we do to the game in this loop And we don't yet have a logic loop.", 'start': 1009.411, 'duration': 5.264}, {'end': 1016.597, 'text': "but you'll see in a little bit how.", 'start': 1014.675, 'duration': 1.922}, {'end': 1019.079, 'text': "Well, it's not necessarily a logic loop, but it's a group of logic.", 'start': 1016.597, 'duration': 2.482}, {'end': 1022.402, 'text': "And for us, it'll be a bunch of if statements, basically.", 'start': 1019.62, 'duration': 2.782}, {'end': 1025.385, 'text': "But anyway, we don't have any logic to our game yet.", 'start': 1022.642, 'duration': 2.743}, {'end': 1027.446, 'text': "We just have event handling, but we'll get there.", 'start': 1025.405, 'duration': 2.041}, {'end': 1033.852, 'text': 'So anyway, to show our car, we would do, for example, car.', 'start': 1027.867, 'duration': 5.985}, {'end': 1041.238, 'text': "X, Y, and that's it because XY is defined up here as the starting point and then, if we wanted to move our car,", 'start': 1034.953, 'duration': 6.285}], 'summary': 'In the game development process, the logic loop and event handling are yet to be implemented, while the positioning of the car is based on defined x and y coordinates.', 'duration': 31.827, 'max_score': 1009.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs1009411.jpg'}, {'end': 1081.643, 'src': 'heatmap', 'start': 1034.953, 'weight': 4, 'content': [{'end': 1041.238, 'text': "X, Y, and that's it because XY is defined up here as the starting point and then, if we wanted to move our car,", 'start': 1034.953, 'duration': 6.285}, {'end': 1047.301, 'text': 'we could modify XY somewhere in this while loop and we would move the car.', 'start': 1041.238, 'duration': 6.063}, {'end': 1054.848, 'text': "and then the only other thing that's necessary is right now our background is well, there is no background.", 'start': 1047.301, 'duration': 7.547}, {'end': 1059.621, 'text': 'We kind of want to change the background color.', 'start': 1057.478, 'duration': 2.143}, {'end': 1061.723, 'text': "So we're going to change the background.", 'start': 1060.181, 'duration': 1.542}, {'end': 1068.491, 'text': "We're going to say gameDisplay.fill.", 'start': 1061.743, 'duration': 6.748}, {'end': 1073.116, 'text': 'And then in here, we can specify what we want to fill the game display with.', 'start': 1069.372, 'duration': 3.744}, {'end': 1074.397, 'text': 'And we want to fill it with white.', 'start': 1073.196, 'duration': 1.201}, {'end': 1081.643, 'text': 'So anything that was there before just got written over basically with the color of white and then we draw the car.', 'start': 1074.938, 'duration': 6.705}], 'summary': 'Modifying xy in the while loop moves the car. changing background to white.', 'duration': 24.165, 'max_score': 1034.953, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs1034953.jpg'}, {'end': 1127.001, 'src': 'heatmap', 'start': 1081.643, 'weight': 0.82, 'content': [{'end': 1087.606, 'text': "if you did it in the reverse, it's really important that you put this first before we draw the car, because if you did it this way,", 'start': 1081.643, 'duration': 5.963}, {'end': 1090.908, 'text': 'if you did car and then game, display, dot, fill white,', 'start': 1087.606, 'duration': 3.302}, {'end': 1100.553, 'text': "what would happen is it would draw the car and then it would just basically paint a bunch of white over the car and you wouldn't see the car right.", 'start': 1090.908, 'duration': 9.645}, {'end': 1102.234, 'text': "so that's not, that's not what we want.", 'start': 1100.553, 'duration': 1.681}, {'end': 1106.508, 'text': 'so, for example, we could run it And we just get this white window a bit racy.', 'start': 1102.234, 'duration': 4.274}, {'end': 1107.329, 'text': "There's nothing on it.", 'start': 1106.668, 'duration': 0.661}, {'end': 1108.79, 'text': 'But the car is there.', 'start': 1108.149, 'duration': 0.641}, {'end': 1110.19, 'text': "It's just been painted over basically.", 'start': 1108.81, 'duration': 1.38}, {'end': 1114.393, 'text': 'So you take the car and you put it under like that.', 'start': 1110.551, 'duration': 3.842}, {'end': 1116.254, 'text': 'And so the car drawing happens second.', 'start': 1114.513, 'duration': 1.741}, {'end': 1118.956, 'text': 'And now we have a car on our screen.', 'start': 1116.855, 'duration': 2.101}, {'end': 1123.999, 'text': "So again, it's just really important that you take the order of things that you draw into consideration,", 'start': 1119.396, 'duration': 4.603}, {'end': 1127.001, 'text': 'because it literally will draw them in that order and then it shows it.', 'start': 1123.999, 'duration': 3.002}], 'summary': 'Importance of drawing order to avoid car being painted over in a program.', 'duration': 45.358, 'max_score': 1081.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs1081643.jpg'}, {'end': 1183.062, 'src': 'embed', 'start': 1156.724, 'weight': 3, 'content': [{'end': 1162.314, 'text': "you know that's kind of what games are anyways, because all the game is is update.", 'start': 1156.724, 'duration': 5.59}, {'end': 1166.015, 'text': 'is, you know, it gives you the notion of movement but nothing actually moves.', 'start': 1162.314, 'duration': 3.701}, {'end': 1170.837, 'text': "it's just redrawing of frames, moving things just slightly in the background.", 'start': 1166.015, 'duration': 4.822}, {'end': 1175.439, 'text': 'you just change the position of things slightly in each little thing, like a flipbook would,', 'start': 1170.837, 'duration': 4.602}, {'end': 1180.081, 'text': "and a flipbook gives you the impression that something is moving but nothing's actually moving.", 'start': 1175.439, 'duration': 4.642}, {'end': 1183.062, 'text': "it's just frames being refreshed.", 'start': 1180.081, 'duration': 2.981}], 'summary': 'Games are essentially just updates and frames being refreshed, giving the impression of movement without actual movement.', 'duration': 26.338, 'max_score': 1156.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs1156724.jpg'}, {'end': 1219.601, 'src': 'embed', 'start': 1197.451, 'weight': 5, 'content': [{'end': 1200.232, 'text': 'We drew our little main character, whatever it is, our race car.', 'start': 1197.451, 'duration': 2.781}, {'end': 1202.393, 'text': 'Did the transparent background.', 'start': 1201.192, 'duration': 1.201}, {'end': 1203.994, 'text': 'We showed how we can load that image up.', 'start': 1202.433, 'duration': 1.561}, {'end': 1209.256, 'text': "And now we're ready to start doing a few more interesting things.", 'start': 1205.174, 'duration': 4.082}, {'end': 1211.617, 'text': 'So anyways, stay tuned to the next video.', 'start': 1210.117, 'duration': 1.5}, {'end': 1215.139, 'text': 'If you guys have any questions or comments on this video, feel free to leave them below.', 'start': 1211.637, 'duration': 3.502}, {'end': 1215.859, 'text': "I'll be happy to help.", 'start': 1215.159, 'duration': 0.7}, {'end': 1217.26, 'text': 'As always, thanks for watching.', 'start': 1216.319, 'duration': 0.941}, {'end': 1218.821, 'text': 'Thanks for all the support and subscriptions.', 'start': 1217.3, 'duration': 1.521}, {'end': 1219.601, 'text': 'And until next time.', 'start': 1219.021, 'duration': 0.58}], 'summary': 'Demonstrated creating and loading a transparent background image for the main character, with an invitation for questions and appreciation for support and subscriptions.', 'duration': 22.15, 'max_score': 1197.451, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs1197451.jpg'}], 'start': 985.343, 'title': 'Python game logic and display manipulation', 'summary': 'Introduces the event handling loop for a python game and discusses drawing a car, changing the background color, and implementing game movement through frame updates and flipbook visualization.', 'chapters': [{'end': 1027.446, 'start': 985.343, 'title': 'Python game logic loop', 'summary': 'Introduces the event handling loop for a python game, emphasizing the absence of a logic loop and the impending implementation of if statements for logic.', 'duration': 42.103, 'highlights': ['The chapter introduces the event handling loop for a Python game, emphasizing the absence of a logic loop and the impending implementation of if statements for logic.', "The loop serves as the event handling mechanism for the game's inputs and events.", 'The absence of a logic loop in the current state of the game is emphasized, with the assurance of its implementation using if statements.']}, {'end': 1219.601, 'start': 1027.867, 'title': 'Drawing a car and changing background', 'summary': 'Discusses the process of drawing a car and changing the background color in a game display, emphasizing the importance of the order of drawing and introducing the concept of game movement through frame updates and flipbook visualization.', 'duration': 191.734, 'highlights': ['The chapter explains the process of drawing a car and changing the background color in a game display, emphasizing the importance of the order of drawing. The chapter describes the process of modifying the starting point for the car and changing the background color to white, highlighting the significance of drawing the car before filling the game display with color to ensure visibility.', 'The chapter introduces the concept of game movement through frame updates and flipbook visualization. The chapter discusses how game movement is achieved through frame refreshing and slight position changes, likening it to the concept of a flipbook to visualize movement in games.', 'The chapter concludes by summarizing the progress made and hints at exploring more interesting elements in the next video. The chapter concludes by highlighting the completion of drawing the main character, achieving a transparent background, and loading the image, while also expressing anticipation for exploring more intriguing elements in the next video.']}], 'duration': 234.258, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZFo4mtLJEWs/pics/ZFo4mtLJEWs985343.jpg', 'highlights': ["The loop serves as the event handling mechanism for the game's inputs and events.", 'The chapter introduces the event handling loop for a Python game, emphasizing the absence of a logic loop and the impending implementation of if statements for logic.', 'The absence of a logic loop in the current state of the game is emphasized, with the assurance of its implementation using if statements.', 'The chapter introduces the concept of game movement through frame updates and flipbook visualization.', 'The chapter explains the process of drawing a car and changing the background color in a game display, emphasizing the importance of the order of drawing.', 'The chapter concludes by summarizing the progress made and hints at exploring more interesting elements in the next video.']}], 'highlights': ['The tutorial emphasizes the significance of setting display dimensions as variables for potential resizing and referencing in game development, promoting modifiability and flexibility.', 'The tutorial focuses on initializing Pygame, setting display dimensions as variables, and explaining the importance of avoiding hardcoding for flexibility and modifiability in game development.', 'The chapter highlights the importance of avoiding hardcoding display dimensions in game development, promoting flexibility and modifiability for potential resizing and referencing in the game.', 'Definition of white color in RGB as 255, 255, 255 It outlines that white is represented as 255, 255, 255 in the RGB color model, and mentions the total combination possibilities of RGB colors being 256 by 256 by 256.', 'The process of converting a background to a transparent one using GIMP is demonstrated, providing a practical example with a race car image.', 'GIMP is used to convert the white background of an image to a transparent one, showcasing the ease and accessibility of the process for beginners.', 'Covers creating transparent backgrounds using GIMP for game development, highlighting the ease of the process on Windows and Mac, with a recommendation for GIMP on Windows.', 'Explaining the implementation of a function to display a car image on a game display, utilizing coordinates and tuples for positioning, and contrasting graph and computer coordinates.', 'Illustrating the use of specific calculations to position the car within the display window, considering the difference in referencing the image by the top left corner in computer coordinates, and explaining the necessity to avoid positioning the car off the screen.', 'Emphasizing the importance of the image being in the same directory as the script for it to work properly.', "The loop serves as the event handling mechanism for the game's inputs and events.", 'The chapter introduces the event handling loop for a Python game, emphasizing the absence of a logic loop and the impending implementation of if statements for logic.', 'The absence of a logic loop in the current state of the game is emphasized, with the assurance of its implementation using if statements.', 'The chapter introduces the concept of game movement through frame updates and flipbook visualization.', 'The chapter explains the process of drawing a car and changing the background color in a game display, emphasizing the importance of the order of drawing.', 'The chapter concludes by summarizing the progress made and hints at exploring more interesting elements in the next video.']}