You can access the full course here: INTRO TO PYGAME
Table of contents
Introduction
Welcome to an exciting tutorial on Pygame transforms! Transformations are crucial components in game development as they allow objects to move, scale, and rotate, providing dynamism and interactivity in the game. In this comprehensive guide, we will delve into different types of Pygame transformations that can be applied to shapes and images in Pygame. Some familiarity with Python and basic Pygame concepts will be beneficial for following this tutorial.
Project Files – Pygame Transform
For this tutorial, we will be using the Pygame module. Make sure you have it installed in your Python environment. We will be building from scratch, so no specific files are needed. However, if you wish to use the same images used in this tutorial, you can download them here:
Download Project Files Here
Transformations – Part 1
By this point in the course, you now know how to draw many different static objects to the screen using Pygame. However, static objects often don’t make for a fun game, and you will likely want to begin moving these objects around the screen. This is where Pygame Transformations come in, to not only allow you to move objects around the screen, but also to scale objects, rotate them, and more.
There are two types of transformations in Pygame, those that apply to shapes like rectangles, and those that apply to images. This distinction is due to the way Pygame considers images to be surfaces while shapes are shapes. Working with shapes is slightly simpler, so we will cover those in this lesson. First, we’ll create a rectangle using the Pygame Rect function. We will begin by creating a new rectangle object using the Rect method and then draw it to the screen.
rect = pygame.Rect(100, 50, 100, 100)
while True:
...
pygame.draw.rect(screen, "blue", rect)
...Running this code will give us an offset blue square, that has a width and height of 100.
Movement Transformations
We can now begin applying Pygame transformations to this shape. The first one we will look at is a movement transformation, which involves changing the x or y values of a shape to move it across the game screen. We have manually done this before, by changing the values in the code and then running the game again, however this isn’t optimal for most cases. We can instead do this using the move method on the Rect object, which will allow us to input an amount to move by in each direction.
rect = rect.move(-50, 50)
Here, we move the rectangle 50 pixels to the left (negative numbers are used to move left and upward) along with 50 pixels downward. We also reassign the rect variable, as the move method actually returns a new rectangle, so we need to overwrite the original one ourselves. You will notice if you Run the game, the rectangle is moved by the amounts we specified.
Inflate Transformations
The second Pygame transformation we will be covering is the inflate transformation. This is used to scale objects, be it making them larger or smaller (with negative values). We will apply this transformation to our rect object by calling the inflate method on it. We will also stack this on top of our move transformation, by writing the new code directly below it. This allows us to stack as many Pygame transformations as we would like to create the shapes we want.
rect = rect.inflate(100, 100)
Here we increase the width and height of the rectangle by 100 pixels each. This means that our rectangle will go from being 100×100 to 200×200. You will notice that we also overwrite our rect variable, as just like the move method, the inflate method returns a new rectangle that represents the Pygame transformation.
You may also notice that our call to the inflate method has modified the x and y values, not just the width and height. This is because the inflate method performs the transformation around the center point of the shape, so the shape grows in all directions. Alternatively, we can decrease the scale of the shape by using negative values.
rect = rect.inflate(-75, -75)
This will decrease the size of a 100×100 rectangle down to 25×25 by taking away 75 pixels on each side of the rectangle.
Update Transformation
The final Pygame transformation we will cover in this lesson is the update transformation. This is used to set a new x, y, width , or height value for a rectangle all at once, so you can avoid doing each value individually. We do this using the update function supplied by the Rect object. Unlike the other methods, we don’t need to reassign the variable for this method, the update function will affect the object you are calling it from directly.
rect.update(50, 100, 200, 150)
If you Run the game with this code in place, you will see that the rect has been moved and sized to the given values in the update function.
It is important to keep in mind that you can only apply these Pygame transformations to Rectangles and shapes that use rectangles such as an Ellipse. Circles and Polygons, for example, use their own transformation methods that Pygame supplies, just like with a Rectangle. In the next lesson, we will be focussing on how to apply Pygame transformations to surfaces, which can be useful for modifying images.
Transformations – Part 2
In this lesson, we will be covering how to perform surface transformations in Pygame. We will specifically be using images for our surface in this lesson, as Pygame treats imported images as a surface. However, the transformations you will learn in this lesson can be applied to any Pygame surface, including the whole game screen.
Drawing an Image
Firstly, we need to load an image. To make things easy, we will be using the apple.png image that we have used previously. You can of course use your own image.
apple = pygame.image.load("apple.png")We will also need a Rectangle of the apple to draw it and to apply some Pygame transformations.
rect = apple.get_rect()
We can draw the image to the screen using the blit method.
while True:
...
screen.blit(apple, rect)
...When we run the code, we will see a small apple, or the image of your choice, in the top-left of the screen as intended.
Movement Transformation
As Pygame surfaces use a Rectangle to define how to draw the image to the game screen, we can make use of the Pygame transformations we learned in the previous lesson. This means that we can use the move method on the apple’s rectangle to perform a movement transformation on our apple image.
rect = rect.move(100, 100)
This then moves the image by 100 pixels to the right and 100 pixels down from the start position.
It is important to note that the image’s initial position should be stored in the variable rect when working with the surface, especially blitting it. If we used apple.get_rect, the image will not move because it is retrieving the image’s original position. It is therefore important to store the initial get_rect call in a variable so that we can modify it down the road.
Scale Transformation
Scale transformations are similar to the inflation transformation we discussed in the last lesson, however, scale is specifically used for surfaces. Where the inflate method would take a width and height to increase by, the scale method takes the final width and height of the surface as its parameters. To perform a scale transformation we will use the Pygame transform.scale method supplied by Pygame.
apple = pygame.transform.scale(apple, (200, 200))
This will scale our apple surface to an image with a size of 200×200. Like with many of the Pygame transformations we looked at in the previous lesson, we have to reassign the apple variable to apply this transformation, as the scale function also returns a surface.
It is important to note that Pygame stops using the width and height values of the rect object after we perform a scale transformation. If Pygame didn’t do this the scale method would have no change. However, to update the rect variable, you can always call the get_rect method again, and transfer the position to the new variable.
Rotate Transformation
The final Pygame transformation we will be covering here is the rotate transformation. We will be using the transform.rotate method for this. It is important to keep in mind that we will be using degrees for the parameters in this method. This is obviously different from when drawing an arc that used radians. Unfortunately, there is no easy way to remember which Pygame methods use degrees and which use radians, so keep practicing and it will become more natural.
apple = pygame.transform.rotate(apple, 180)
This will flip the apple image upside down by rotating it 180 degrees. As with other Pygame transformations, you will notice we also have to reassign the apple variable for the rotate transformation as well.
Like with the Rectangle transformations in the previous lesson, you will also notice that the Pygame transformations we apply to the surface stack on top of each other. So when we scale and then rotate the apple, you will see the apple remains large when it is flipped. These are only a few of the transformations Pygame applies, however, these do cover the very important ones. If you would like to find more transformations Pygame offers, feel free to look into the Pygame documentation, which covers all of the methods Pygame supplies for both transforming surfaces and shapes. (Link to Pygame documentation: https://www.pygame.org/docs/ref/transform.html)
Conclusion
Congratulations on completing this tutorial! You now have a solid understanding of how transformations work in Pygame. You’ve learnt how to create dynamic objects, move shapes across the screen, scale and rotate them, thereby paving way to an interactive gaming experience. We even delved into applying Pygame transformations to images, enriching the possibilities for your game development process.
There’s always more to learn in the world of game development, so feel free to explore and experiment with these techniques. You might consider reusing what you learned here in different contexts, such as more advanced games. Always remember, practice is key to enhancing your coding and game development skills!
Have fun gaming! We hope to see you in future tutorials, where we will continue to explore the vast potentials of Pygame and game development.
Did you come across any errors in this tutorial? Please let us know by completing this form and we’ll look into it! FINAL DAYS: Unlock coding courses in Unity, Godot, Unreal, Python and more.
Transcript – Transformations – Part 1
Hey everyone and welcome to part seven of our drawing tutorials. By this point, we’ve learned a variety of techniques to draw static objects to our game screens. However, most games involve some sort of moving parts. Either the game objects themselves are kind of moving around, changing their position on screen. Game objects could be growing or shrinking, rotating. There’s lots of different transformations that we can apply.
So in order for us to learn these techniques, we’re going to have to explore transformations, which will be the focus of this tutorial. We’re going to learn to transform our Pygame objects by covering some of the basic and more commonly used transformations such as moving, inflating, updating, or even rotating game objects. So let’s head over to L code and get started.
Okay, so there are kind of two sets of transformations, those that apply to rectangles or potentially even other shapes and those that apply to images. There’s an important distinction between these two because if we remember, Pygame images are considered surfaces, whereas shapes are just considered shapes. So there is a little bit of a difference in those techniques.
So let’s start with rectangles first because those are fairly simple and kind of the more basic of the two sets of components. Now we’ll start by just creating a rectangle for us to use. I’m going to call this as a Pygame. I’m going to set this to be, let’s have an offset of X of a hundred and an offset of Y of 50. As for the width, I’m just gonna do a hundred by a hundred, width for a hundred and height of a hundred. That way we have a nice square.
Okay, so running this should give us an offset blue square, and that is exactly what we get. Now the first transformation that we’ll cover is the basic movement transformation. We have actually kind of done something like this in the past. We’ve simply changed the X and the Y value off the rectangle that updates the rectangle that gets drawn here.
So let’s say that we actually want to shift this rectangle a bit to the left and a bit further down. Well, for that we’re actually gonna do a negative 50 because left is negative in the X direction and we’re going to do a 50 because again, y values increase as we go down and decrease as we go up. We just need to know by how much we want to move the rectangle.
The next transformation that I want to cover is the inflate transformation. As its name applies, it can grow an object, but it can also shrink an object if we pass in negative values. So for example, let’s say I want to grow this by, let’s say I want to double it in size. Okay? We already have a hundred and a hundred. So I’m going to call wrecked dot inflate. And if I want my final X and Y to both be 200, I simply need to increase it by a further a hundred.
This is similar to the move function, going to return a new rectangle. So if we go to run this, we should see a much bigger rectangle. That has also been shifted, and that’s exactly what we’re getting. Now, hopefully you can take note of something kind of interesting going on here. So again, a convenient way to update multiple values at once.
Okay, so those are the basic transformations that can be applied to a rectangle. Now, some of these transformations, in fact these ones that we covered are specific to rectangles. We can’t apply those same transformations to say a circle or an ellipses, but perhaps something like a polygon that doesn’t have a defined rectangle, doesn’t have these same transformations applied to them.
But what we’ll do is we’ll end this section here and we’ll cover the surface transformations in a part two. Okay? So definitely play around with these transformations, the move inflate, and then just setting values manually see which ones you prefer. And when you’re ready to move on, we’ll learn about image related transformations. So thanks for watching. We’ll see you in part two.
Transcript – Transformations – Part 2
Hi everyone and welcome back. This is the second half of part seven of our drawing tutorials. In the first half we covered transformations applied to rectangles. Now we are going to cover transformations applied to surfaces. We will take a look specifically at image transformations because of course, images in Pygame are considered surfaces. Although realistically you can apply any of these transformations to any surface including the entire game screen.
The transformations that we are interested in will be movement transformations, scale and rotate transformations. Okay, so let’s start by creating an image. We’ll load an image and I’ll just call this apple is equal to Pygame image load and we want to load apple pg like so. Again, feel free to use a different image if you are not particularly taken by this apple image. Okay, cool.
So now we have an image we need to get the rectangle if we want to display this image. So we can just say something like erect is equal to apple dot get and that will just get the bounding rectangle surrounding this image. Drawing It is then as simple as bli it to our screen. So we’ll take our screen, we’ll call the blitz function, we’ll pass in the image. So that is just going to be our apple. And then we’ll pass in the rectangle, which is just going to be our rec here.
So if we were to run this, we should just see that little apple in the top left hand corner of the screen or whatever image you loaded in. Okay. Totally expected. Okay, so like I said, the first transformation we want to play is the movement transformation. Now this is actually a callback two part one because the way in which we move an image is via the rectangle in which it’s drawn. So in actuality, moving an image is really no different from moving any other rectangle.
We’ll simply call rect is equal to rec dot move and then we’ll pass the amount by which we are moving this image. So let’s just say a hundred by a hundred. So we can move it kind of into the center of the screen.
If we go to run this, we should now see our apple moved because we’ve updated the X and the Y position off the rectangle to a hundred by a hundred. It should be noted however that if we did something like this, let’s say we moved this rectangle, uh, but instead of using that rectangle that we created up here, we are just getting the apple’s current rectangle and you’re using that to draw it. It will not have moved. Okay? The reason being when we are calling this, we’re actually fetching the rectangle of the apple and storing rather creating a new variable with these same attributes. We’re then moving that.
Rectangle. So when we drew the apple at the rectangle here, what we’re doing is we’re taking the attributes stored in here, which is a hundred hundred and then the width and height of the apple and then we’re drawing it based on that. However, if we get the apple dot get wrecked, the image itself hasn’t changed. Even though we’ve updated the X and Y of this rectangle, we haven’t updated anything within this surface. The apple itself hasn’t changed. So when we get the apple’s original rectangle, that is why we don’t see any movement there. Okay?
So I do just want to leave that in so that you have a record of that having happened. Okay, great. So we know how to move an image and that’s great. What about the other transformations? So similar to before, we’re going to do uh, kind of like an inflation transform, except this time it’s going to be called scale. Scale works a little bit differently with the scale function. We actually put in the final width and the height rather than the amount by which we are scaling. Okay? So it is a little different from inflate that way.
Also there will be some kind of perhaps weird behavior going on, but more on that in just a second here. Okay, so to transform our apple, we’re going to call Pygame dot transform cuz this is now part of the transform library.
And we’re going to call upon scale. You’ll know it takes in a surface, it takes in a size, okay? And a destination surface, we don’t really need to deal with that and note that it returns a surface. Okay? So let’s pass in our surface, which is going to be the apple. We’ll need the new size, which is going to be a tuple with a new width and height. I think let’s have this be pretty big, let’s have it be 200 by 200. That way we can really see the effects take place.
And then of course we will have to store it back into Apple because this returns a surface and we want to draw the most up to date surface. Okay, so let’s go ahead and run this. Okay, great.
So we are getting our big apple being drawn here. Now the weird thing potentially kind of weird thing that’s going on here is the fact that even though we are using this wrecked variable, which should have a width and height of just what the initial Pygame image was, we are clearly seeing a much bigger apple.
So even though it is taking into account the updated x and Y values of the rectangle, it is ignoring the width and the height values of that rectangle to be taken place by this uh, scale operation, which is then kind of resetting those values and it’s overriding the width of the height of that rect. Okay? So do wanna make sure that we kind of know what’s going on with that one. Okay,
so the final transform that I want to highlight here is the rotate transform. So if sometimes we want to rotate an object, we can rotate it by any amount that we want. Uh, except that this time the rotation is in degrees, which is kind of confusing. I’m not sure why Pygame chose to do some of its angle related operations and degrees and some of them in radiance, but unfortunately that’s just something that we have to work with.
Okay, so let’s say we want to rotate this by 180 degrees. So essentially flip it upside down. Well we can call Pygame dot transform, dot rotate, okay? We need a surface. So that is going to again be our apple. We can use the same one even after the blow up. It can kind of be rotated there.
Okay, we’ll need that apple, we’ll need a amount of degrees by which we are going to rotate it. So let’s say 180. Again that should flip it completely upside down. And then again, we’re going to need to store that back into our apple surface so that we can have all these transformations be applied. So if we go to run it, we are now seeing our upside down apple. Again, keeping in mind it is keeping the same rectangle or rather at least the same X and Y position.
But of course after the scale up it is kind of overriding those width and height values. Okay, so that’s pretty much all I wanted to cover. Just wanted to show you some of the more common transforms.
There are a couple more transforms that you potentially could be interested in, but these are the ones that we would be working with for the most part. If you are interested in those more obscure or more specific transformations, then feel free to check out the documentation. But this combination of movement scaling and rotation should give us pretty much all of the functionality that we need. Okay? So that’s it for now. Thanks for watching and we’ll see you in the next one.
Interested in continuing? Check out our all-access plan which includes 250+ courses, guided curriculums, new courses monthly, access to expert course mentors, and more!
