Lovely people, it's been a minute. I hope everyone has been good, alive, and well.
From my introductory post, I spoke a lot, well actually I speak a lotabout how I build games with Pygame, and... well, here's a little "gamedev" piece with Pygame.
Let's start with the finished product. Here's a visual.
I know it's not exactly Need for Speed, but let's just go through my building procedure.
Creating the Window
The first thing to do with Pygame, as I have come to find, is to make your game window. I mean, everything is going to be within the window, so it makes a bunch of sense.
Now, this should be simple, and it usually is but you have to think about the kind of game you want to build.
I realised I needed a portrait-style window for mine as opposed to a landscape window.
Building the Environment
Now I had to start putting things in the window because you can't have a blank game, right?
Of course... unless it's ghosting your partner or those mind games you people do lol.
The first thing to think about really was the environment. I mean, it's supposed to be a racer, so we need the road, the road lines, and all that.
I had a plan: just find a colour that looks like a road and add some race lines to divide it.
Problem solved, right?
Yeah... not exactly.
As you can see above, I tried to "cheat." I was thinking I could just use the pipe character (|) on the keyboard to fake it, but I changed my mind.
(What do you think?)
I ended up just drawing some rectangles to make the lane divisions instead.
Now, if this is your first Pygame trip, don't be confused. A lot of the stuff under the hood is just shapes.
You'd be amazed at what rectangles can do.
I bet you thought all that school math was useless.
Spoiler: it isn't.
Drawing Rectangles
Now let's stop having fun and add a little more substance.
When I say I used rectangles, here's what I mean in detail.
First, you'd define the rectangle (think of it like creating an object).
Example:
rect = pygame.Rect(x, y, width, height)
Now you need to define its position. In other words: Where should this appear?
x = 50
y = 100
width = 200
height = 80
rect = pygame.Rect(x, y, width, height)
Now you have to actually draw it for it to appear on the screen.
Think of it like creating a variable and performing some calculations. Until you actually print() something to the terminal, you won't see any output.
Same idea here.
pygame.draw.rect(screen, (255, 0, 0), rect) # Red rectangle
Creating the Player
Now let's continue.
Having dealt with the road, I now have to add our player car (it's all shapes for now).
Generally, it's the same procedure.
At this point, we're simply adding a red rectangle to represent our player car.
Making the Car Move
Then our car has to move.
We can't have a game if it doesn't move, right?
When I was learning this, absolutely everyone would just write some mathematics and leave it at that.
No proper explanation.
Just vibes.
But let me see if I can break the cycle.
I like to think of it as a graph.
Let's go back to grade school.
Think of the player car as a single dot.
Now imagine the Cartesian plane.
What does it take to move a point either left or right?
Let's say, on a scale of 10, the left side contains points 1, 2, 3, 4, while the right side contains 6, 7, 8, 9, 10.
Our car is currently sitting at 5, right in the middle.
So if we want to move one unit to the left, that's simply:
5 - 1 = 4
If we want to move four units to the right:
5 + 4 = 9
The summary of all I'm saying is this:
- Subtract (decrement) to move left.
- Add (increment) to move right.
Keeping the Car on Screen
Then I hit a problem.
In theory, the x-axis keeps going forever, so if you keep incrementing, you can literally drive off-screen.
So we need to set boundaries and handle the left and right wall collisions.
The way to do this is to reset the position of the car to the last valid value within your screen's width.
In our example, let's say the screen width is 500.
But that's not all.
In my explanation, the car is just a single point.
In the actual code, it's a rectangle with both width and height.
So we need to subtract the car's width from the screen width to make sure the entire car stays inside the window.
And Now We No Longer Disappear
Adding the Enemy Car
So now we can add in our enemy car, in blue.
But... same problem with collisions.
They kind of "smush" into each other.
And we don't want that.
That should be a crash that ideally ends the game loop (or whatever outcome you choose).
For this, I made object variables for both the player and enemy cars with all the necessary position values and everything else.
Then this is where Pygame helps.
I found a method in the docs called colliderect(). It's a simple way to check whether the two car objects have touched each other.
Once a collision is detected, I can decide what happens next. In my case, I simply ended the game.
Adding a Score
Then I added a score system.
Basically, increment the score as long as the game loop is running.
(Very creative, I know.)
And that's pretty much it.
Under the hood, we've basically finished the physics and mechanics for our game.
Replacing the Rectangles with Assets
But we don't stop there.
Hell no.
So I went asset hunting and picked up some car sprites.
I got them from the PNGTree website (this is not an ad).
I mention the site just for anyone who may want to replicate the project.
The last thing to do was swap the rectangles out for the sprites so the game would render the actual car assets instead.
And... that's that.
Wrapping Up
If there was something you think I missed, or anything you'd like me to explain in more detail, I go much deeper on my YouTube channel.
I have:
- A short, punchy video if you just want the overview.
- A full 50-minute tutorial for anyone who wants to recreate the game from scratch.
Thanks for reading. I hope this was fun to read as it was fun to build and write about.
Top comments (6)
King has return! Good work and saw the videos you made on the project as well!
Yh thank you for the enthusiasm. I hope the write up wasn't too casual.
Nothing wrong with too casual. I tend to like posts that are straightforward if anything, which this posts demonstrates.
Also, I am in a Virtual Coffee group. It's in Slack and most of the dev.to members I have met is there. If you want to join, I can send a link. I think it's a good opportunity to connect and finally meet with you for the first time!
Alright, I'm very interested
Aight, here is the link virtualcoffee.io/join
dev.to group (or find in my dev.to profile if anything): dev.to/virtualcoffee
Once signed up, you will be in the waitlist. I can let the maintainer know!
I know that I kind of skipped over the enemy car part but that's because it's the same method as building the player car. They are basically identical cars with different colors. If that makes any sense.