import pygame as pg
# general setup
pg.init()
pg.display.set_caption("Space Shooter")
WINDOW_WIDTH, WINDOW_HEIGHT = 1280, 720
display_surf = pg.display.set_mode((WINDOW_WIDTH, WINDOW_HEIGHT))
run = True
while run:
#event loop
for event in pg.event.get():
if event.type == pg.QUIT:
run = False
#draw the game
display_surf.fill('dodgerblue1')
pg.display.update()
pg.quit()
created the window using pygame!!!!
Create a window width and height global variables for the window.
WINDOW_WIDTH, WINDOW_HEIGHT = 1280, 720
Make a display surface variable that sets the width and height for the pygame window.
Make a while loop so that it stays on the screen and so the user can close the window at any time.
while run:
#event loop
for event in pg.event.get():
if event.type == pg.QUIT:
run = False
Now instead of having a black background, change the background color using the .fill() method. After that, use the .update() method to put it on the screen
#draw the game
display_surf.fill('dodgerblue1')
pg.display.update()
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
body {
font-family: "Poppins", sans-serif;
}
app.js
import LoginRegister from './components/LoginResgister/LoginRegister';
function App() {
return (
<div>
<LoginRegister />
</div>
);
}
export default App;
I tweaked up app.js and took out all the sample code from index.css and put the stuff needed for the font we’re using. Then I added login inputs for username and password.
added the ability to move the player’s car left/right using the arrow keys.
if event.type == KEYDOWN:
if event.key == K_LEFT and player.rect.center[0] > left_lane:
player.rect.x -= 100
elif event.key == K_RIGHT and player.rect.center[0] < right_lane:
player.rect.x += 100
result:
left lane
and right lane (also added other cars. i’ll get to that later)
Made the crash image pop up determining where the player crashed into the npc car
# check if there's a side swipe collision after changing lanes
for vehicle in vehicle_group:
if pygame.sprite.collide_rect(player, vehicle):
gameover = True
# place the player's car next to other vehicle
# and determine where to position the crash image
if event.key == K_LEFT:
player.rect.left = vehicle.rect.right
crash_rect.center = [player.rect.left, (player.rect.center[1] + vehicle.rect.center[1]) / 2]
elif event.key == K_RIGHT:
player.rect.right = vehicle.rect.left
crash_rect.center = [player.rect.right, (player.rect.center[1] + vehicle.rect.center[1]) / 2]
So my main.py file for the racing game just pooped out for no reason and I can’t open it back up without getting an error. The only thing I am able to open is utils.py and the images. That’s it.
So, I copied the code from github and started off from where I think I left off.
PlayerCar is MUCH shorter and only has the image of the car that we need and the start position of the car.
class PlayerCar(AbstractCar):
IMG = GREY_CAR
START_POS = (180, 200)
and a draw function that draws the images, and the player car on the screen.
def draw(win, images, player_car):
for img, pos in images:
win.blit(img, pos)
player_car.draw(win)
pygame.display.update()
made while loop function that starts and quits the game (when the user clicks the x) and also has the keys to control the player car.
while run:
clock.tick(FPS)
draw(WIN, images, player_car)
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
break
keys = pygame.key.get_pressed()
moved = False
if keys[pygame.K_a]:
player_car.rotate(left=True)
if keys[pygame.K_d]:
player_car.rotate(right=True)
if keys[pygame.K_w]:
moved = True
player_car.move_forward()
if not moved:
player_car.reduce_speed()
pygame.quit()
result:
You can move it but these dang computers don’t have screen recording (curse you IT!!!!)
for row in range(rows + 1):
y = origin_offset.y + row * TILE_SIZE
pygame.draw.line(self.display_surface, LINE_COLOR, (0,y), (WINDOW_WIDTH,y))
Same as x, but it makes lines horizontal from the left to the right of the window
This is what the it should look like. The y tile lines will be horizontal, and the x tile lines will be vertical.
Result:
Tried to make the lines green so it will look better and…
oh boy…
Okay I took out the green and made the lines a little transparent.
Changing the mouse cursor
Changed the mouse cursor to this:
What we need in order to change the mouse is to find the clickable area, which would be somewhere around the tip of the mouse, the rest is the attached stuff to it.
We load the image in, then we set where it should be clickable. In this case, it’s (o,0). After that, we replace the mouse with the cursor that we have.
result:
Creating the menu
To make the menu work, in editor.py we’ll have a variable called selection_index that will have value between 2 and 18. Each number represents a certain kind of tile in the editor.
Ex. 2: water, 3; terrain, 4: gold coin and so on.
The selection_index can be changed by clicking on the menu or via hotkeys (this is where that colossal file settings.py comes in).
what we will need are the indexes 2-18. 0 and 1 are ignored b/c 0 is the player and 1 is the sky. They will also be in the editor so they don’t need to be created.
2-18 the player can create like the terrain, coin, etc…
Making the hotkeys for the menu
editor.py
def selection_hotkeys(self, event):
if event.type == pygame.KEYDOWN:
if event.key == pygame.K_RIGHT:
self.selection_index += 1
if event.key == pygame.K_LEFT:
self.selection_index -= 1
Detects if the user is pressing a button. It’s not checking if we’re holding down a button so there’s no need for a timer.
The problem is that when you repeatedly press the button the number can go below 0 and above 18.
The menu took a little bit for me b/c there was something wrong with the place of the rectangle. It kept going offscreen (I put a random number for one of the window dimensions instead of its variable).
Made the scroll wheel move the origin up, down, left and right
editor.py
if event.type == pygame.MOUSEWHEEL:
if pygame.key.get_pressed()[pygame.K_LCTRL]:
self.origin.y -= event.y * 50
else:
self.origin.x -= event.y * 50
Allows the origin to move or right WITHOUT holding down left CTRL and up or down when holding down left CTRL.
Without holding down left CTRL:
Holding down left CTRL:
That’s really it for the pan input. Nothing extremely complex. Later on we’ll have to add more stuff, but for now this is good.
Drawing the tile lines to find what location we are in the grid
Making the tile lines should be infinite and relative to the origin point.
All of the lines should start at the position 0 (start of the window) and end at the height (the bottom) of the window. The x position for the top and bottom of the line should be the same.
Very rough sketch of what I’m trying to explain:
We would find this out by this code:
editor.py
for col in range(cols):
x = self.origin.x + col * TILE_SIZE
pygame.draw.line(self.display_surface, LINE_COLOR, (x,0), (x,WINDOW_HEIGHT))
Let’s say that the position of the origin point is (0,0). We would be getting that from self.origin.x. x = 0. We then add that to the column (which is 0) and then multiply by the TILE_SIZE (which will always be 64). The answer to that equation will be 0, which will be the line at the left side of the window.
if col is 1 and we multiply that by 64, we’ll get 64, which will move from the first point to the point to the right and so on until we reach the end of the columns.
If we run it, this is our result:
When you move the origin point the lines will move with it.
There’s a problem though. We run out of points when we move and there’s just a giant empty white space. The same thing happens when you move the origin point to the left.
What we have to do is make sure that the lines are always on the display and that we’re never running out of lines.
We will have to create columns between the origin’s position and the next column so that we can move the origin wherever we want (and so they don’t go out the window).
To do this, we have to divide origin_offset with the TILE_SIZE. Let’s say it is 100. We divide that by the TILE_SIZE (64) and then multiply that number by the TILE_SIZE, which would be 1, which means we’re in the 1st column. Same thing for y.
Created the origin to follow the mouse by holding the middle mouse button.
editor.py
import pygame, sys
from settings import *
from pygame.math import Vector2 as vector
from pygame.mouse import get_pressed as mouse_buttons
from pygame.mouse import get_pos as mouse_pos
class Editor:
def __init__(self):
# main setup
self.display_surface = pygame.display.get_surface()
# navigation
self.origin = vector()
self.pan_active = False
def event_loop(self):
for event in pygame.event.get():
if event.type == pygame.QUIT:
pygame.quit()
sys.exit()
self.pan_input(event)
----------------------------------------- look between these
def pan_input(self, event):
'''checks if middle button is pressed'''
if event.type == pygame.MOUSEBUTTONDOWN and mouse_buttons()[1]:
self.pan_active = True
if not mouse_buttons()[1]:
self.pan_active = False
#panning update
if self.pan_active:
self.origin = mouse_pos()
------------------------------------- look between these
def run(self, dt):
self.display_surface.fill('white')
self.event_loop()
pygame.draw.circle(self.display_surface, 'blue', self.origin, 10)
The code between the dotted lines is what makes the origin move by holding down the mouse button.
Result:
Origin in the middle.
Origin on the left.
And the origin on the right.
There is a slight problem with this. The origin follows where the mouse’s position is. For example. If the mouse is at the bottom right-hand corner of the screen and the origin is on the top left-hand corner of the screen and the user presses the middle mouse button, the origin will go from its original position to the mouse’s position.
If we keep this, it will get pretty confusing later when we progress making the game, especially having different tiles and objects all around the screen.
The BETTER way to move the origin.
editor.py
def pan_input(self, event):
'''checks if middle button is pressed'''
if event.type == pygame.MOUSEBUTTONDOWN and mouse_buttons()[1]:
self.pan_active = True
self.pan_offset = vector(mouse_pos()) - self.origin
if not mouse_buttons()[1]:
self.pan_active = False
#panning update
if self.pan_active:
self.origin = vector(mouse_pos()) - self.pan_offset
The bolded lines of code helps with making it better to move the origin.
What you get from the first bolded line of code is the distance between the origin and the mouse position.
To use it you subtract the mouse_pos() with the pan_offset to get the distance IF the pan_active is true.
The teal x is the origin. The yellow one is the mouse. vector(mouse_pos()) – self.origin calculates the distance (in pink) between the mouse_pos() and the origin.
self.origin = vector(mouse_pos()) – self.pan_offset creates an offset of the pan when holding down the middle mouse button. This will move the origin point WITHOUT moving the origin point with the mouse (aka. clicking on it).
Result:
When moving the mouse, the origin will move with it, but not follow its exact position.
Ignore my chicken scratch. It’s hard writing with a right-handed mouse when you’re left-handed :/
